adding images and other media - jackdarker/TwineTest GitHub Wiki

displaying images

tbd

  • url has to point to an image f.e. 'assets/bg_park.png' if the image is in an asset-folder together with your html-file

combine multiple images

An easy way to create a graphical scenery is to use the background-image-style.
The following example displays a centered enemy-picture above the scene-picture (template-method are used to be able to change them):
<div id='combatCanvas' style='background: url(<%=s.enemy.pic%>) no-repeat center,url(<%=s.combat.scenePic%>) no-repeat center;color:black;'></div>

  • the order of the urls define the z-order: top to bottom
  • you can more precisly position the images with 2 percentages for x and y: 'background: url(<%=s.enemy.pic%>) no-repeat 10% 50%'
  • instead of images you can also use colors with fix or gradient appearance. this creates a yellow-red-blue gradient from left to right with yellow taking running up to 50% of the width and red having its maximum at 60%, and a slight transparent blue color 'linear-gradient(90deg, yellow, 50%, red,60%, #0000ff38)'
  • add a height definition in css for combatCanvas to always have the same size independent from image-sizes

multiple clickable images

Maybe you want to create a point and click game. Then the approach above has to be modified:

  • create the static scenerywith additional buttons re
⚠️ **GitHub.com Fallback** ⚠️