image and video
Displaying an image or a video, and tinting them.
image (21 properties)
<image name="jaquette">
<pos>0.75 0.4</pos>
<origin>0.5 0.5</origin>
<maxSize>0.35 0.4</maxSize>
<path>${game.media.imagepath}</path>
<zIndex>30</zIndex>
</image>| Property | Type | Role |
|---|---|---|
pos size origin rotation rotationOrigin | pair | placement |
maxSize | pair | maximum size without distortion — see Position, size |
keepratio | yes/no | keep the proportions (⚠️ all lowercase) |
path | path | the image file |
tile | yes/no | repeat the image as tiles instead of stretching it |
color | color | tints the image (multiplication) |
colorTop colorBottom colorLeft colorRight | color | gradient tint |
colorTopLeft colorTopRight colorBottomLeft colorBottomRight | color | four-corner tint |
reflection | pair | a reflection under the image: start and end opacity |
zIndex disabled | depth, switching off |
Formats
PNG, JPG and SVG. SVG is recommended for logos: it stays sharp at every size.
tile — the repeated texture
<image name="grille">
<size>1 1</size>
<path>${root}/data/arts/motif.png</path>
<tile>true</tile>
</image>The image keeps its original size and repeats to cover the box.
reflection
<reflection>0.5 0.0</reflection>Adds a flipped reflection under the image, from 50% opacity at the top to 0% at the bottom.
video (15 properties)
<video name="md_video">
<pos>0.75 0.4</pos>
<origin>0.5 0.5</origin>
<maxSize>0.35 0.3</maxSize>
<delay>1.5</delay>
<loops>0</loops>
</video>Same placement properties as image, plus:
| Property | Type | Role |
|---|---|---|
delay | number | seconds before the video starts |
loops | number | number of plays; 0 = loop |
animations | text | the appearance effect |
link | text | tie the playback to another component |
reflection | pair | reflection, as on image |
video accepts neither tile nor the tint colors.
A
delayof one or two seconds prevents the video from firing on every game merely passed through while scrolling the list.