The Power of Public Media

Published: 2 years ago

Building Mobile 2D Games Using Unity – Part 1

Production and development of a 2D Mobile games using Unity 5. Topic: Sprite sheets

Unity has become a great solution for multi-platform game development. You can create a console, mobile or web game with the same tool. It is a tool mostly known for 3D content. Unity now includes a 2D feature set, with more to come soon.

In a series of blogs, we will talk about production and development of a 2D Mobile games using Unity 5. We will cover Sprite Sheets, Animation and Scripting.

First up, Sprite Sheets. A sprite sheet is a large image that contains series of frame sprites, to animate a particular subject or a series of UI elements. It is usually accompanied by a data file (JSON, XML, etc) that maps out the coordinates to copy out as an image asset. It reduces image loading, one image to load, and memory consumption. Sprite sheets should be sized by a power of two (128×128, 256×256, 512×512, 1024×1024, etc.) to take advance of the optimization to the process of rendering. It is quicker for the processor to process these dimensions.

Adobe Flash is a common skill set for many designers and developers to create images and animations quickly. It’s a great tool for frame-based animation. As of Flash CS 6, it is easy to export new and existing animations to generated sprite sheets or generate PNG sequences. I will illustrate how to use this tool to create sprite sheets for Unity.

We can export sprite sheets in many ways. Here are two common ways: Generate Sprite sheet or Generate PNG Sequences. This choice is based on how much control you would want.

1) Generate Sprite Sheets within Flash IDE

  • You can preview the animation before exporting.
  • Optimize the size of the sprite sheet. I would suggest 1024 x 1024 max. You can export higher dimensions but it can be problematic.
  • Get the coordinate data of the sprite sheet. This is more applicable for other tech. In my process, I’m using data file for information but not for the production directly. I export the data as JSON (get the size of the consistent “tile” image)
  • Use Sprite Editor tool in Unity. Use the JSON for slice out the sprites.

2) Generate PNG sequences for building a sprite sheet in another tool

  • You will need to use a tool like TexturePacker to build the Sprite sheet.
  • You can minimize the number of image frames.
  • You can change the size of each tile image.
  • TexturePacker can be used as trial period but is not free for all of the features.
  • You can export to Unity (download component from asset store) or use sprite sheet image generated within Unity Sprite Editor.

Let’s use the “Generate Sprite Sheet” method. Here is an example animation, an apple floating in the water, to export it as a sprite sheet.

01_fla_editor

Right click on the selected movie clip. In other cases, you can select more than one movie clip to create a sprite sheet.

02_fla_menu_drop_down

The “Generate Sprite Sheet” panel will pop up. Change settings to ideal format and size. In this particular case, the animation is large enough for 1024×1024. We are exporting an png and well as the JSON data. In Unity, we will use the information to edit the sprite sheet in the editor.

03_fla_generate_spritesheet

Press Export and we will import the PNG into Unity.

Open up a Unity project and import the sprite sheet into your asset folder. With the Inspector displayed, select the sprite sheet image in the assets folder. Initially the import settings may set the sprite sheet image as a regular texture. This needs to be changed to Sprite (2D and UI). Also change the sprite mode to Multiple. This allows us to edit the sprite into multiple slices. Here is what you should see:

07_unity_import_settings

 

Other settings of interest:

Packing Tag : Define the sprite atlas tag name. In this case keep the default.

Pixels Per Unit: one unit in unity, not necessarily one pixel, default 100:1 – I have manipulated for scale or if I wanted to keep a size consistency. Default is the better setting. This setting is applicable to obtain pixel perfect quality. It is related to the size defined in the camera. More about this in another blog.

Generate Mip Maps: To generate smaller versions of the sprite for smaller screens. This is a way of optimizing the performance when this display is farther away from the camera. More or less a 3D feature.

Filter Mode: How the texture is displayed when stretched within a transform. Not as applicable here. Keep the default.

Platform preferences:

  • Max Size : The suitable max size of the sprite texture. It is best to keep this around current size of the image. This helps for performance. Vary this between quality and optimal size
  • Format : The compression format of the image. Again vary this between quality and size. Compressed is the less quality better size and Truecolor is the best quality more size.

Press the Sprite Editor Button to open the Editor Panel. If you click on to the Slice Menu, you can either manually slice, or auto slice. Since the sprite sheet was created with consistent slice sizes, we will choose the later. You will have the option to either automatically slice the sprite sheet or set of a grid. It is also important to note that pivot point set to static areas (top, center, bottom, etc).

08_unity_sprite_editor

If you choose manually slice, you can take the values of width and height from the JSON data and plug in the height and width of the slice. You can manually more the pivot anchor just in case the slice is off for you animation. Very useful! This is also a good way to check the auto slice cuts, like I show here. It would be nice have an JSON import feature here if there are unique sprite slices.

Press apply and now we have our animation imported into Unity. You are ready create an animation.

Keep in mind that there are many methods to this production workflow. This is just one workflow to import sprite sheet into Unity. The spritesheet image asset can be found here. Please leave any comments or ideas about this process.

Next time, create a 2D animation using the Mecanim system.

Links of interest:

https://www.codeandweb.com/blog/2014/03/28/using-spritesheets-with-unity

https://www.assetstore.unity3d.com/en/#!/content/16641

Have a Comment?

Some HTML is OK