Guide for animated health icon and new tag - xml

assets/content/cookbook/Intermediate/07.AnimatedHealthIcons.md

@@ -0,0 +1,76 @@
+
+[tags]: / "intermediate,ui,xml"
+
+# Creating Animated Health Icons
+
+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.
+
+```xml
+<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.
+
+```json
+{
+  "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.
+
+> Author: [KT-Gameplay](https://github.com/KT-Gameplay)