Welcome!

Think Labs is an ongoing effort by Seven2 to provide research and educational opportunities in the web development and mobile field. To see what we’ve been cookin’ up, check out our blog postings.

Created by
Seven2 Login

Categories
Tags
Team Think Labs | Spriter for Flambé!
5239
single,single-post,postid-5239,single-format-standard,ajax_fade,page_not_loaded,,,wpb-js-composer js-comp-ver-4.2.3,vc_responsive
THINKLABS_Blog_Tools

Spriter for Flambé!

Hello fellow Flambe developers! If your animation team has been ogling the Spriter animation tools to use in your games, now you can use it! This isn’t a tutorial on how to use Spriter, but simply how to implement it into your Flambe projects. For more on Spriter, visit their site: http://www.brashmonkey.com/spriter.htm

First, go to SpriterHaxeEngine on Github and follow the steps to install. If my pull request hasn’t come through yet, go to my Github branch for flambe support here. Clone it out, or download it, and run ‘haxelib dev SpriterHaxeEngine path/to/clone’. Now SpriterHaxeEngine should be using that as the code source.

Open your Flambe project’s flambe.yaml file and add to the haxe_flags: -lib SpriterHaxeEngine

You’re halfway there!

Now in your project, add the following lines:

var eSpriter:Entity = new Entity()
    .add( new Sprite() )
    .add( new SpriterMovie(assetPack, "path/to/spriter.scml", "SpriterEntityName")
        .playAnim("animName") 
        .applyCharacterMap("charMapName")
    );
_container.addChild(eSpriter);

Make sure to import spriter.flambe.SpriterMovie.

You should now have your Spriter animation playing in your container with the “animName” and the applied character map. The SpriterMovie is a wrapper for the SpriterHaxeEngine’s setup. Simply pass in the assetPack that holds the folder of your Spriter files, the path to the SCML file, and the Spriter Entity name you want this movie to play. At anytime, grab your SpriterMovie to change animations or character maps like so:

eSpriter.get(SpriterMovie).playAnim("newAnim");

There’s still plenty of room for optimizations, but this will get you started.

Here’s an example:
Click to spawn a new Goblin with a random character map applied.