Using Sprite Sheets with Wave Engine 2.0

As part of the plan of Wave Engine 2.0 to check over its features and following a process to constantly improve them, the new Wave Visual Editor gave us the opportunity to simplify a lot of things and make the development more enjoyable. One of them is the creation and use of sprite sheets textures and animating them.

What is a Sprite Sheet

If you are not familiarized with Sprite Sheets, don’t worry, this article will give you a brief explanation.

First of all we must differentiate between sprite, sprite sheet and animation concepts.

  • Sprite is just a single 2D image, which can be added to our scene.

  • Sprite Sheet is a group of different sprites put together into a one big image. They are necessary to speed up the process of displaying images on the screen because of its important impact on memory and performance. Packing algorithms are really important to keep the image as small as possible.

  • Animation with sprites is using a sprite sheet and changing which sprite is rendered, changing every frame causing the animation illusion.

They are 2 key uses for the sprite sheets in your game or application:

  • Sprite animations. For creating a 2D animated character (or object), so we have to pack all its frames as a way to make it easy to add on your project.
  • Sprite Packaging. Using a sprite sheet with no animation, just to optimize memory and performance. We usually packs a lot of our scene sprites into a sprite sheet, and we use them in our scene, adding a sprite sheet but rendering only one of its sprites.

The new Wave Engine sprite sheet format is designed to satisfy all of them.

Sprite Sheet Editor

One of the biggest additions to Wave Visual Editor is the AssetViewer application, which allows to see and edit the different Wave assets (textures, models, sounds… and sprite sheets). Our Sprite Sheet editor is integrated in that application, so for creating and editing a sprite sheet in Wave we have to:

  • Click in Assets > Create Sprite Sheet on the Wave Visual Editor main menu or…
  • Right click on the Asset Details panel and click Create Sprite Sheet in the menu.

These two options will show a popup where you can type the Sprite Sheet’s name. After that, the AssetViewer application will be launched with the new sprite sheet editor on it.

The Sprite Sheet Editor has the next areas:

  • Sprite list (left area). You can drag images to that area (or click on the Add Sprites button) to add them to the sprite sheet. The sprite list is orderable and you can sort them alphabetically. You can also import a Texture Packer file (see more on this later).
  • Viewer (centre). It shows the final packing of the different sprites.
  • Animation editor (upper right area). Allows to add, edit and remove sprite animations.
  • Property panel (right side). It contains all the relevant editable properties of the sprite sheet and the Apply button for updating the asset.
  • Animation bar (bottom centre). Allows you to play the selected animation or the entire sprite list when there is no animation selected.

If we add sprites to our sprite sheet they will be automatically packed and showed in the viewer area.

You can change properties of the sprite sheet if we want to optimize the final texture (or adjust to your project specifications). Most of them are similar to the Atlas asset from the previous Wave Engine version (1.4.2). If we check the ForceSquare property, uncheck the RequiresPowerOfTwo and click the Apply button the sprite sheet will be regenerated with the new properties:

Sprite Animation Creation

The previous Atlas asset didn’t have animation support so we thought it was a good moment to add this new feature in the new Sprite Sheet asset.

For this occasion we will use this teddy bear sprites, which have 2 animations:

  • Idle animation, from the frame 0 to 30.

  • Walk for the rest (31 to 50).

You can add those animations into the editor (Clicking the + button and then editing the values) and click on the Apply button. Notice that you can set the frames per second for every animation.

If you select one animation and then click the play button, you will view it in the visor, instead of the texture package.

You also will be able to see the current frame and the animation length.

The animations will be included in the sprite sheet asset, so they will be accessible on Wave Engine just loading the asset.

TexturePacker Integration

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 packing the information.

To import a TexturePacker file you have to create a new Sprite Sheet and then click on the “Import TexturePacker file” button (  ) and 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.

Adding Sprite Sheets on Wave Visual Editor

Once we’ve created and edited our sprite sheet asset, we can add their sprites to our scene easily:

  • Change to 2D mode, clicking toggling the 2D/3D button.

  • Drag the asset from the Asset Details panel to the Viewport It will automatically create an entity with a SpriteAtlas component using our sprite sheet asset. You can also edit the TextureName property, selecting the sprite from the sprite sheet.
  • If we want to animate it, we can click the  button on the EntityDetails Once, in the new “Add Component” dialog, type Animation2D and click on that component.

  • This will add the Animation2D component, and will use the animations of the asset referenced in the SpriteAtlas
  • You can edit its CurrentAnimation property (combobox with all the animation stored in the sprite sheet), its SpeedFactor and PlayAutomatically.

 

We will continue revealing more WaveEngine 2.0 features in the upcomming days.

Stay tuned at @waveengineteam and waveengine.net.

Leave a Reply

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