Create 2D SpriteSheets with TexturePacker and import it to WaveEngine

TexturePacker is one of the most useful and used sprite sheet generators. It is very powerful and has tons of different options.  You can download it from here.

Wave Visual Editor now allow importing TexturePacker sprite sheets, automatically opening the TexturePacker file and converting to the Wave Sprite Sheet asset format, maintaining the original sources and the packaging information.

To import a TexturePacker file you have to create a new Sprite Sheet and then click on the “Import TexturePacker file” button  then select the .XML texturePacker file.

This will import all of its sprites, packaging and size information. After that you can edit it as a normal Sprite Sheet: Add sprites, animation, etc…

Step by step tutorial

Start TexturePacker and select Wave Engine template format

Drag and drop all of your assets to the empty left panel on TexturePacker or select Edit -> Add sprites… from the top menu.

After adjusting for texturePacker parameters. Select publish sprite sheet File -> Publish sprite sheet (Ctrl+P) to save it.

If everything is correct you can see two files on your exit folder

  • SpriteSheet image: It is an image with all sprites included.
  • SpriteSheet descriptor file: It’s an xml file with information on how to slice spritesheet images to get individual sprites.

Start Wave Visual Editor and choose File -> New Project

Set a name and folder location for your game:

Select 2D mode from the menu toolbar

Click on Assets folder from Asset Details panel and add new SpriteSheet asset or top menu Assets -> Create Sprite Sheet

Set a sprite sheet name that you will use on your game

After Asset viewer is opened click on import Texture Packer button  and select the spritesheet xml descriptor file.

After loading the SpriteSheet file from TexturePacker file format, click on the OK button

You can see a spritesheet asset on Asset Details panel, Drag sprite sheet asset to Viewport

You can change the current sprite from Entity Details panel on the SpriteAtlas component

If your spritesheet is an animated frame list you can add animations from the Asset Viewer tool. Double-click on bear spritesheet asset to start Asset Viewer and add different animation on Animations right panel then you can reproduce each animation click on the play button 

Click on OK button to save changes, select spritesheet entity from Entities Hierarchy panel and click on Add button  in Entity Details panel then write “animation” on filter box of Add Component Dialog.

Set CurrentAnimation combo box and set true PlayAutomatically property

Finally, Click on Simulate mode button on toolbar or File-> Simulate (F6)

Published by

Jorge Canton

He is an engineer in computer science, #WaveEngine team member is a technology enthusiast determined to stay on the cutting edge of development. He is a very dynamic person who loves solving challenges, puzzles and riddles. He usually spends his free time with his family or playing videogames on his console or mobile phone and plays the piano to relax.

Leave a Reply

Your email address will not be published. Required fields are marked *