Search code examples
xmlparsinghaxehaxeflixel

How do I create an animation using an xml file with haxeflixel?


So I'm trying to add an animation in haxeflixel and i cant get it to work. So I want to use the .xml file that came with it so I can get width, height, and name of the animation.

Here is my sheet and xml file:

<?xml version="1.0" encoding="utf-8"?>
<TextureAtlas imagePath="bob.png">
    <!-- Created with Adobe Animate version 21.0.1.37179 -->
    <!-- http://www.adobe.com/products/animate.html -->
    <SubTexture name="Idle0000" x="0" y="0" width="228" height="588"/>
    <SubTexture name="Idle0001" x="228" y="0" width="228" height="588"/>
    <SubTexture name="Idle0002" x="456" y="0" width="228" height="588"/>
    <SubTexture name="Idle0003" x="684" y="0" width="228" height="588"/>
    <SubTexture name="Idle0004" x="912" y="0" width="228" height="588"/>
    <SubTexture name="Idle0005" x="1140" y="0" width="228" height="588"/>
    <SubTexture name="Idle0006" x="1368" y="0" width="228" height="588"/>
    <SubTexture name="Idle0007" x="1596" y="0" width="228" height="588"/>
    <SubTexture name="Idle0008" x="1824" y="0" width="228" height="588"/>
    <SubTexture name="Idle0009" x="2052" y="0" width="228" height="588"/>
    <SubTexture name="Idle0010" x="2280" y="0" width="228" height="588"/>
    <SubTexture name="Idle0011" x="2508" y="0" width="228" height="588"/>
    <SubTexture name="Idle0012" x="2736" y="0" width="228" height="588"/>
    <SubTexture name="Idle0013" x="2964" y="0" width="228" height="588"/>
    <SubTexture name="Idle0014" x="3192" y="0" width="228" height="588"/>
    <SubTexture name="Idle0015" x="3420" y="0" width="228" height="588"/>
    <SubTexture name="Idle0016" x="3648" y="0" width="228" height="588"/>
    <SubTexture name="Idle0017" x="0" y="588" width="228" height="588"/>
    <SubTexture name="Idle0018" x="228" y="588" width="228" height="588"/>
    <SubTexture name="Idle0019" x="0" y="0" width="228" height="588"/>
    <SubTexture name="Walk0000" x="456" y="588" width="250" height="600"/>
    <SubTexture name="Walk0001" x="706" y="588" width="250" height="600"/>
    <SubTexture name="Walk0002" x="956" y="588" width="250" height="600"/>
    <SubTexture name="Walk0003" x="1206" y="588" width="250" height="600"/>
    <SubTexture name="Walk0004" x="1456" y="588" width="250" height="600"/>
    <SubTexture name="Walk0005" x="1706" y="588" width="250" height="600"/>
    <SubTexture name="Walk0006" x="1956" y="588" width="250" height="600"/>
    <SubTexture name="Walk0007" x="2206" y="588" width="250" height="600"/>
    <SubTexture name="Walk0008" x="456" y="588" width="250" height="600"/>
</TextureAtlas>

and my code:

loadGraphic(sprite.graphic, true, 228, 588); // i dont know if the last 2 values are a frame or the entire image

addAnimation("idle", [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18], true);
addAnimation("walk", [0, 1, 2, 3, 4, 5, 6, 7], true);

animation.play("idle");

Solution

  • That XML is actually an Adobe Animate texture atlas in XML format. The atlas comes with both a .png and an .xml.

    The issue is that you're never accessing the XML contents at all. You're just using custom values. To load the atlas inside HF, these are the steps:

    /* mySprite is the sprite we're loading the animations into. You don't specify the
    frame size because it'll grab it from the XML anyway.*/
    
    mySprite.loadGraphic("path/to/graphic.png", true); 
    
    /* this line actually loads the animation from the XML. Replace the paths to the 
    paths where your atlas png and xml files are located. */
    
    mySprite.frames = FlxAtlasFrames.fromSparrow("path/to/graphic.png", "path/to/xmlfile.xml"); 
    
    /* here, you add the animations. The first parameter is the name of the animation as 
    you wish it to be in **your code**. The second parameter is the name of the 
    animation **inside the xml**, which will be used to locate its size, frames, and 
    position. Last argument is the framerate at which the animation plays. */
    
    mySprite.animation.addByPrefix("idleAnimation", "idle", frameRate);
    
    //here, you play the animation you just added.
    
    mySprite.animation.play("idleAnimation");
    

    Good luck!