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)

a2b3552f-14c1-5f35-8280-16ced3b16462:6udFvAlfFjsjj7eis1gDpc

Adding the 2D Sprite Editor

Technical Steps

Dynamically resizing an Arkanoid/Breakout paddle

9-slicing.mp4

9-slicing is a 2D technique which allows you to reuse an image at various sizes without needing to prepare multiple assets. It’s often useful to be able to dynamically resize graphic elements in a game or application. In this tutorial, you will learn to create and use the 9-Slicing technique.

Games

Developing Interactive User Interfaces--Companion Tutorials (2019.2+)

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

This tutorial has been verified using Unity 2019.4.10f1 LTS - https://learn.unity.com/tutorial/using-9-slicing-for-scalable-sprites-2019-3

Dialog boxes, portraits, and other informational displays often use the same frame, despite being different sizes. Rather than creating duplicate art at various sizes, Unity can dynamically stretch and tile designated parts of a Sprite to allow one Sprite to serve as the border (or the background) for UI elements of many sizes. Games like Arkanoid and Pong, for instance, use paddles to defend the goal from balls. Depending on difficulty level, and through the use of power-ups, the designer may want to change the size of the paddle during play. A 9-Sliced Sprite can scale as necessary to accommodate changes in real time.

Designating borders in the Sprite Editor is known as 9-Slicing. From the original Sprite (Figure 02), the entire image is scaled by keeping the corners at their original size and either stretching or tiling the top, bottom, left, and right slices (Figure 07). 

For the first part of this tutorial, we’ll create a panel to demonstrate how to 9-slice a Sprite and use Sliced vs. Tiled modes. Then we’ll build a simple paddle as one might use in a game like Arkanoid, where you move the mouse to move the paddle horizontally, and use the scroll wheel to adjust the paddle size.

In order to complete this tutorial, you must add the 2D Sprite package via the Package Manager.

1. Open the Package Manager window by clicking Window > Package Manager.

2. Search for 2D Sprite and click Install (Figure 01).

Figure 01: 2D Sprite in Package Manager

1. Using your art tool of choice, create a Sprite to represent your panel border and background. See Figure 02 for an example. 

2. Drop the Sprite into your project, highlight it in the Project window, set its Texture Type to Sprite (2D and UI) and its Mesh Type to Full Rect (Figure 03). 

3. Click Apply at the bottom of the Inspector, and click to open the Sprite Editor (Figure 04) 

4. Either drag the green lines at the edges of the Sprite inward, or set the border fields to mark the top, bottom, left, and right borders (Figure 05). 

5. Click Apply at the top of the Sprite Editor window and close the Sprite Editor.

6. From the GameObject drop-down, select UI > Panel.

7. Using Image (Script), located in the panel’s Inspector, set the Source Image to your Sprite. By default, the panel image is partially transparent (Figure 06). 

8. Adjust color and transparency, if desired.

9. When changing the values in the panel’s Rect Transform for the offsets and size, or manipulating the edges and size directly with the Rect Tool, notice how the 9-sliced edges and center are stretched to fill the panel with one instance of the source image.

10. In Image (Script), set Image Type to Tiled.

11. Adjust the canvas settings to your preference.

12. Sprite import settings as well as the Canvas’ UI Scale Mode settings — dictated by project needs — directly affect the appearance of 9-sliced Sprites. Here, the panel was set to 640x360 pixels, and the Canvas Scaler was set to scale with screen size to match a reference resolution of 640x360, using the Sprite’s pixels per unit setting (Figure 07). 

Figure 02: Our 9-sliced Sprite.

Figure 03: Setting the Sprite’s Mesh Type to Full Rect ensures it will display correctly when 9-sliced.

Figure 04: If you open the Sprite Editor before applying changes, Unity will ask you to apply or revert changes.

Figure 05: The example Sprite was created to emulate 8-bit systems, but the center, corners, and edges don’t need to be the same size.

Figure 06: The default settings for the UI panel

Figure 07: For this image, the Canvas was set to Scale with Screen Size. This lets the panel resolution match a preset target across many display types and resolutions.

1. Delete or hide the panel from the above exercise.

2. Create an Empty GameObject and name it DynamicPaddle.

3. Create a new C# script called Paddle, and attach it to DynamicPaddle. Double-click Paddle in the Project window to open it in your selected script editor.

4. Beginning just inside the class definition (line 7), type:
 

float minSize = 5;
float maxSize = 10;
float resizeSpeed = 3;
float positionY;
SpriteRenderer sprite;

5. In Start ( ), beginning on line 14, type: 

Cursor.visible = false;
sprite = GetComponent<SpriteRenderer>();
sprite.size = new Vector2(7.5f, sprite.size.y);
positionY = -Camera.main.orthographicSize + sprite.size.y * 0.5f;

6. In Update ( ), beginning on line 22, type: 

float sizeX = sprite.size.x;
sizeX += Input.GetAxisRaw("Mouse ScrollWheel") * resizeSpeed;
sizeX = Mathf.Clamp(sizeX, minSize, maxSize);
sprite.size = new Vector2(sizeX, sprite.size.y);
Vector3 mousePosition = Camera.main.ScreenToWorldPoint(Input.mousePosition);
transform.position = new Vector3(mousePosition.x, positionY);

7. Paddle is now complete. Save changes and return to the Unity Editor.

8. Highlight DynamicPaddle and add a Sprite Renderer component.

9. Set the Sprite to your 9-sliced Sprite from earlier. Set the Draw Mode to Tiled, and set the Width to 7.5 (Figure 08). 

10. Press Play to enter Play mode and scroll the mouse wheel to change the size of the paddle. Press Escape when you’re done to make the mouse cursor visible again before exiting Play mode (Figure 09). 

11. Optionally, change the Draw Mode to Sliced and try the demo again. 

Figure 08: Depending on your art, a different height may work better.

Figure 09: Our resizable paddle in action

These are just two of the ways 9-slicing can be used so that one piece of artwork can appear in various sizes across potentially many Sprite-based elements. 

Using 9-Slicing for Scalable Sprites

1. Using 9-Slicing for Scalable Sprites

2. Adding the 2D Sprite Editor

3. Technical Steps

4. Dynamically resizing an Arkanoid/Breakout paddle

5. Conclusion

Complete this tutorial