This chapter goes over adding animated health icons that plays animation as per the health.
Requirements
An animated health icon requires the spritesheet and the XML of the icon.
These two must be kept in the same folder as other icons and must have the same naming logic.
Preparing the XML file
The icon's animation depends on the prefixes used in the XML file.
Health Icons have 7 type of animation prefixes.
Let's break it down:
idle: The idle animation.losing: The losing animation.winning: The winning animation.toLosing: The animation for transitioning from idle to losing.fromLosing: The animation for transitioning from losing to idle.toWinning: The animation for transitioning from idle to winning.fromWinning: The animation for transitioning from winning to idle.
From this given prefixes, we now have to edit the XML file as per the example given below.
<TextureAtlas imagePath="icon-spooky.png">
<SubTexture name="losing0000" x="722" y="0" width="351" height="436" frameX="-41" frameY="-22" frameWidth="435" frameHeight="495"/>
<SubTexture name="losing0001" x="0" y="453" width="351" height="436" frameX="-41" frameY="-22" frameWidth="435" frameHeight="495"/>
<SubTexture name="losing0002" x="0" y="0" width="361" height="453" frameX="-36" frameY="-14" frameWidth="435" frameHeight="495"/>
<SubTexture name="losing0003" x="361" y="0" width="361" height="453" frameX="-36" frameY="-14" frameWidth="435" frameHeight="495"/>
<SubTexture name="losing0004" x="351" y="453" width="351" height="411" frameX="-41" frameY="-47" frameWidth="435" frameHeight="495"/>
<SubTexture name="losing0005" x="702" y="453" width="351" height="411" frameX="-41" frameY="-47" frameWidth="435" frameHeight="495"/>
<SubTexture name="losing0006" x="351" y="889" width="351" height="377" frameX="-41" frameY="-81" frameWidth="435" frameHeight="495"/>
<SubTexture name="losing0007" x="702" y="889" width="351" height="377" frameX="-41" frameY="-81" frameWidth="435" frameHeight="495"/>
<SubTexture name="losing0008" x="1053" y="889" width="351" height="377" frameX="-41" frameY="-81" frameWidth="435" frameHeight="495"/>
<SubTexture name="losing0009" x="1434" y="0" width="351" height="377" frameX="-41" frameY="-81" frameWidth="435" frameHeight="495"/>
<SubTexture name="idle0000" x="0" y="889" width="351" height="388" frameX="-41" frameY="-67" frameWidth="435" frameHeight="495"/>
<SubTexture name="idle0001" x="0" y="889" width="351" height="388" frameX="-41" frameY="-67" frameWidth="435" frameHeight="495"/>
<SubTexture name="idle0002" x="1073" y="0" width="361" height="404" frameX="-36" frameY="-60" frameWidth="435" frameHeight="495"/>
<SubTexture name="idle0003" x="1073" y="0" width="361" height="404" frameX="-36" frameY="-60" frameWidth="435" frameHeight="495"/>
<SubTexture name="idle0004" x="1073" y="404" width="351" height="393" frameX="-41" frameY="-62" frameWidth="435" frameHeight="495"/>
<SubTexture name="idle0005" x="1073" y="404" width="351" height="393" frameX="-41" frameY="-62" frameWidth="435" frameHeight="495"/>
<SubTexture name="idle0006" x="1434" y="377" width="351" height="377" frameX="-41" frameY="-78" frameWidth="435" frameHeight="495"/>
<SubTexture name="idle0007" x="1434" y="377" width="351" height="377" frameX="-41" frameY="-78" frameWidth="435" frameHeight="495"/>
<SubTexture name="idle0008" x="1434" y="754" width="351" height="377" frameX="-41" frameY="-78" frameWidth="435" frameHeight="495"/>
<SubTexture name="idle0009" x="1434" y="754" width="351" height="377" frameX="-41" frameY="-78" frameWidth="435" frameHeight="495"/>
</TextureAtlas>After editing the prefixes as specified above, we should insert the health icon data in the character's data.
{ "version": "1.0.0", "name": "Spooky Kids (Dark)", "assetPath": "characters/spooky_dark", "healthIcon": { "id": "spooky", "shouldBop": true, "offsets": [11,25] }, // ... }
After inserting the health icon data in the character's JSON, the icon will start playing it's animation.
