diff --git a/Other/FlxAspriteUtils/README.md b/Other/FlxAspriteUtils/README.md index a049880e7..52a5f9a68 100644 --- a/Other/FlxAspriteUtils/README.md +++ b/Other/FlxAspriteUtils/README.md @@ -5,10 +5,21 @@ Demonstrates how to utilize Aseprite art files with the built-in FlxAsepriteUtil ## Table of Contents * [Files](#files) - +* [Aseprite Export](#aseprite-export) ### Files * `player.ase` - Aseprite file built using Character Animations from Kenney.nl (https://www.kenney.nl/assets/platformer-characters) * `player.png` - Sprite sheet exported from Aseprite. See [Aseprite Export](#aseprite-export) for details. -* `player.json` - Atlas frame data exported from Aseprite. See [Aseprite Export](#aseprite-export) for details. \ No newline at end of file +* `player.json` - Atlas frame data exported from Aseprite. See [Aseprite Export](#aseprite-export) for details. + +### Aseprite Export + +There are two main ways of exporting sprite sheets from Aseprite: + + * UI + * See the [Official UI Docs](https://www.aseprite.org/docs/sprite-sheet/#export) + * Requires user interaction, but allows fore preview to visualize sprite sheet settings + * CLI + * See the [Official CLI Docs](https://www.aseprite.org/docs/cli/) + * Useful for automated workflows \ No newline at end of file diff --git a/Other/FlxAspriteUtils/assets/pointer.png b/Other/FlxAspriteUtils/assets/pointer.png new file mode 100644 index 000000000..4c68e95b4 Binary files /dev/null and b/Other/FlxAspriteUtils/assets/pointer.png differ diff --git a/Other/FlxAspriteUtils/source/PlayState.hx b/Other/FlxAspriteUtils/source/PlayState.hx index 123c2ddc2..98942c169 100644 --- a/Other/FlxAspriteUtils/source/PlayState.hx +++ b/Other/FlxAspriteUtils/source/PlayState.hx @@ -1,5 +1,6 @@ package; +import flixel.animation.FlxAnimation; import flixel.FlxG; import flixel.ui.FlxButton; import flixel.text.FlxText; @@ -10,13 +11,21 @@ import flixel.FlxState; using flixel.util.FlxSpriteUtil; /** - * @author Zaphod + * @author MondayHopscotch */ class PlayState extends FlxState { + static inline var POINTER_VERTICAL_OFFSET = 3; + static inline var ANIM_NAME_LINE_SPACING = 10; + + var loadedAnimations:FlxText; + var animList:Array; var currentAnimationLabel:FlxText; var player:FlxSprite; + var curAnimIndex = 0; + var pointer:FlxSprite; + var nextButton:FlxButton; var previousButton:FlxButton; @@ -27,23 +36,42 @@ class PlayState extends FlxState player.screenCenter(); add(player); + animList = player.animation.getAnimationList(); + + loadedAnimations = new FlxText(20); + loadedAnimations.text = animList.map((a) -> { a.name; }).join("\n"); + loadedAnimations.screenCenter(Y); + add(loadedAnimations); + + pointer = new FlxSprite("assets/pointer.png"); + add(pointer); + currentAnimationLabel = new FlxText(player.animation.name); currentAnimationLabel.alignment = CENTER; currentAnimationLabel.y = FlxG.height - currentAnimationLabel.height; add(currentAnimationLabel); previousButton = new FlxButton("Previous", () -> { - + setPlayerAnim(curAnimIndex-1); }); previousButton.setPosition(0, FlxG.height - previousButton.height); add(previousButton); nextButton = new FlxButton("Next", () -> { - + setPlayerAnim(curAnimIndex+1); }); nextButton.setPosition(FlxG.width - nextButton.width, FlxG.height - nextButton.height); add(nextButton); + + setPlayerAnim(0); + } + + function setPlayerAnim(index:Int) { + curAnimIndex = index % animList.length; + player.animation.play(animList[curAnimIndex].name); + + pointer.setPosition(0, POINTER_VERTICAL_OFFSET + loadedAnimations.y + ANIM_NAME_LINE_SPACING * curAnimIndex); } override function update(elapsed:Float) {