Exploring the Editor Layout

Navigation in the Editor - 2019.1 & 2019.2

Project Organization

Working with the FBX Exporter Setup and Roundtrip - 2019.1, 2019.2

Importing Assets

Introduction to Nested Prefabs

Working with Scripts

Working with Switch Statements

Creating Basic UI with uGUI

Creating a Screen Space Overlay UI

Creating a Worldspace UI

Grouping and Layout Techniques for UI Components

QuickStart to TextMesh Pro

Introduction to Sprite Animations

Using 9-Slicing for Scalable Sprites

Working with YAMLMerge

Managing Projects with Multi-Scene Editing

Introduction to Optimization in Unity

Working with LODs

Working with the Stats Window

Working with the Frame Debugger

Working with the FBX Exporter Setup and Roundtrip

During development of any project in Unity, there will be a need to import assets, whether they be 3D or 2D. Assets come in various file formats such as .fbx, .png, and .tga. These are just a few, but are commonly used in Unity development. In this tutorial, you will learn different ways to bring in your assets.

Sprite Animations are animation clips that are created for 2D assets. There are various ways to create Sprite Animations. One way is to create them from a Sprite Sheet, a collection of Sprites arranged in a grid. The Sprites are then compiled into an Animation Clip that will play each Sprite in order to create the animation, much like a flipbook. Sprite Animations can also be created by using keyframe animation in Unity, via the Animation window.  

SpriteSheet.png

Creating Sprite Animations Using Sprite Sheets

Import Settings

Sprite Editor

Slicing Sprite Sheets

Creating Sprite Animations from Selected Sprites

Creating Keyframe Animation

Blending Animations

Conclusion

Next Steps

What are Sprite Animations?

Unity allows you to have multiple scenes loaded simultaneously in the Unity Editor. Multi-scene editing allows you to lay out a huge game world one chunk at a time, moving everything into place, and even transfer assets from one scene to another. In this workflow, we’ll explore how we can use multi-scene editing to build a game world from modular sections.

Creating and Editing Multiple Scenes

Creating or Loading Additional Scenes for Multi-Scene Editing

Transferring Assets Between Scenes

Introduction

Setting up the first Scene

The Frame Debugger is a handy tool that allows you to freeze playback for a running game on a particular frame to view the individual draw calls used to render that frame. The debugger also lets you go through frames one-by-one so you can see in greater detail how the scene is constructed.  In this tutorial, you will learn about the Frame Debugger and how to use it for analysis.

The Frame Debugger

Using the Frame Debugger

How to get the most out of the Frame Debugger

Viewing Shader Properties

These Companion Tutorials are related to the activities of this instructor-led Workshop. These Tutorials will refresh your memory as you apply new skills to your own projects. Come back to these Tutorials as a reference as you proceed through your learning journey with Unity. 

Using workshop assets, or assets of your own, use these Tutorials to get up and running with Unity, focusing on the features you will need to build 3D mobile games. With these tutorials, you will add objects, animate objects, build UI components, and optimize your game’s performance. 

2019.4

2019.1

2018.4

Introduction to 3D Mobile Games for Engineers--Companion Tutorials (2019.1)

446b6aeb-8ed8-517f-9fe1-624d18c49198:YHChT3yPJEkdVLlydYCijn

Games

Introduction to 3D Mobile Games for Artists--Companion Tutorials (2018.4)

This tutorial has been verified using Unity 2019.4.10f1 LTS.

Sprite Animations are animation clips that are created for 2D assets. There are various ways to create Sprite Animations. One way is to create them from a Sprite Sheet, a collection of Sprites arranged in a grid. The Sprites are then compiled into an Animation Clip that will play each Sprite in order to create the animation, much like a flipbook. Sprite Animations can also be created by using keyframe animation in Unity, via the Animation window.

Sprite Sheets are images containing sequential Sprites typically used for animation, much like a flipbook, while Sprite Atlases are images containing a collection of non-sequential Sprites. Sprite Atlases are created to pack as many Sprites together in a single image in order to optimize 2D games. Sprites within a Sprite Atlas can be animated as well, but they are typically animated using keyframe animation. Because Sprite Sheets and Sprite Atlases are made up of multiple Sprites, it’s necessary to set the Sprite Mode to ‘Multiple’ to use the Sprite Editor and Slicing Tool to extract individual Sprites from the Sprite Sheet. 

1.  Download and import the file SpriteSheet.png into your project. Refer to Import individual assets from your computer for a review of the process.  

2. In the Project window, select the Sprite image you imported into your project. This will bring up the Inspector of the Sprite Sheet.

3. Change the Sprite Mode from ‘Single’ to ‘Multiple’ (Figure 01). 

Figure 01: Sprite Sheet import settings

1. Click the Sprite Editor button to open a new window with the Sprite Editor (Figure 02).

Figure 02: Sprite Editor

The Slice tool (Figure 03) allows users to slice Sprite Sheets into individual Sprites that can be used in Sprite Animations. Sprites that are meant to be used in animations are sometimes arranged in a grid-like manner and are better suited to be sliced using one of the manual slice operations. It is also worth noting that the artist will purposefully space Sprites evenly in a Sprite Sheet to allow the animation to playback smoothly. If Sprites are not spaced evenly, it could result in a wobbly animation.

1. Press the Slice button to reveal the Slice dropdown menu and choose Grid By Cell Count (Figure 04). 

2. In the Grid By Cell Count options, change the value of Columns to 9 and the Rows to 3 (Figure 05) and then press Slice and close the Sprite Editor. 

3. In the Project window, select the newly sliced Sprite Sheet and expand it to reveal the various Sprites that have been created within the asset (Figure 06).

Figure 03: Sprite Editor tools

Figure 04: Slice with Grid By Cell Count

Figure 05: Column and Row options

Figure 06: Sprites within the Sprite Sheet asset

These newly sliced Sprites can now be used individually within the project by dragging and dropping them into the Scene. Multiple Sprites can also be selected from the Project window and then dropped into the Scene at the same time. By doing so, Unity will automatically begin the process of adding an Animator to the asset in the Scene and also create an Animation Clip from the selected Sprites.

1. Select the Sprites necessary for the Animation Clip and drag them into the Scene.

2. Browse to the desired folder to save the Animation Clip and rename the Animation Clip (Figure 07). 

By default, Unity will add an Animator component to the GameObject in the Scene. It also creates a new Animator Controller and assigns it to the Animator component. The Animation can be previewed in the Game view by pressing the Play In Editor button. 

Figure 07: Create New Animation Clip dialog

Sprites can also be animated just like any other GameObject in Unity. Keyframes are points on an Animation Clip timeline that contain data about the GameObject like its Transform data (Figure 08). These keyframes indicate some sort of change in that data to produce an animation. When the animation plays, Unity interpolates the data from one keyframe to the next to play the animation. 

1. From the Window menu, select Animation. Dock the Animation window behind the Project window for ease of navigation.

3. In the Animation window, click on the Animation Clip dropdown menu and choose Create New Clip (Figure 09). 

4. Browse to the desired folder to save the Animation Clip and rename it.

6. Unity uses Automatic Keyframing, meaning that once in Animation Mode, any movement applied to the GameObject in the Scene view will be recorded in the animation. In the Animation window, press the Record button to begin creating keyframes (Figure 10). 

7. The white line in the Animation Timeline is called the Playhead and it indicates where a keyframe will be added. To move it, simply left-click and drag the Playhead to the desired frame.

8. In the Scene view, move the selected GameObject using the Move tool to change its current position. Doing so, a keyframe will be added where the Playhead is located and if it’s a new animation, it will create a keyframe at the beginning of the Animation Clip Timeline (Figure 11). 

9. Click the Record button to deactivate it and press the Play button in the Animation Window to preview the Animation Clip.

Figure 08: Animation window with keyframes

Figure 09: Animation Clip dropdown menu

Figure 10: Record activated in the Animation window

Figure 11: Keyframe added to the Animation Clip

Only one Animation Clip can play at a time in the Editor. If there’s a need to have the keyframe animation blend with the Sprite Sheet animation, use the Layers feature in the Animator window (Figure 12). 

1. Select the Animator window from the Window drop-down. Dock it behind the Project window for ease of use. The Animator workspace can be moved by holding ALT + left-clicking and dragging.

2. Notice that when the Sprite Sheet animation is selected, there are two States visible in the workspace (Figure 13). 

Each state represents an Animation Clip associated with the selected Sprite. The orange state is known as the Default State. It will play automatically when the game is active. The Default State can be changed by right-clicking on another state and choosing ‘Set As Default Layer State.’

3. Click on the Layers tab on the upper-left corner of the Animator window. Above the Base Layer, press the + button to add a new Layer. Name it accordingly (Figure 14). 

4. Select the new Layer and drag in the animation that you want to blend (Figure 15). Notice it has automatically been made the Default State of the Layer. 

5. Click the gear icon on the new Layer to see its options. Set the Blending mode to Additive and the Weight to 1 (Figure 16). This allows the new Layer to combine its animation with the animation on the Base Layer. 

6. Playtest the game to see the animations playing together. 

Figure 12: Layers in the Animator window

Figure 13: States in the Animation window

Figure 14: Create a New Layer button in the Animator window.

Figure 15: New Layer with its Default Animation State

Figure 16: Layer options with Weight set to 1 and Blending Mode set to Additive

Creating and configuring Sprite animations is an essential part of creating 2D experiences in Unity. Now that you know the basics, try creating Sprite animations for your characters and other elements in your own project. 

Introduction to Sprite Animations

1. Introduction to Sprite Animations

2. Creating Sprite Animations Using Sprite Sheets

3. Import Settings

4. Sprite Editor

5. Slicing Sprite Sheets

6. Creating Sprite Animations from Selected Sprites

7. Creating Keyframe Animation

8. Blending Animations

9. Conclusion

Complete this tutorial