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)

cb735b19-359d-57b6-a465-ed250871017c:IJ50VM7ryBj2kIwUvpB4ro

Creating Basic UI

Creating Text

Importing UI Images

Creating UI Images

CreatingBasicUIElements.mp4

With the introduction of the UI system, new Components have been added that will help create GUI specific functionality. Some of those elements include text, images, buttons, etc. In this tutorial, you will learn to create and use basic UI.

Games

Film

Automotive

DoozyUI - Related Tutorials

Introduction to 3D Interactive Development - Workshop project files

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

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

Creating Mobile AR Applications with AR Foundation--Companion Tutorials (2019.2 i)

Game Design Curricular Framework Resources  

This tutorial has been verified using Unity 2019.4.10f1 LTS - https://learn.unity.com/tutorial/creating-basic-ui-elements-2019-3

Unity’s user interface (UI) system allows you to control elements such as text, images, buttons, and other user controls that will add functionality for your users. But before any elements can be created, they must be added to the Canvas.

The Text component, which is also known as a Label, has an area for entering display text. It’s possible to set the font, font style, font size, and whether or not the text has rich-text capability. There are options to set the alignment of the text, settings for horizontal and vertical overflow — which control what happens if the text is larger than the width or height of the rectangle — and a Best Fit option that resizes the text to fit the available space.

Right-click the Canvas and select UI > Text.

The font can be changed using the Font radio button. 

Modify the font parameters to change the size, alignment, and color (Figure 01)

Figure 01: UI Text parameters

Images used for UI components are called Sprites. When initially imported, they’re marked as the default texture type. Sprites provide extra functionality that’s useful for 2D projects as well as UI.

Select the 2D asset in the Project Window.

In the Inspector, change Texture Type to Sprite (2D and UI). (Figure 02)


Figure 02: Texture Type set to Sprite (2D and UI)

An image has a Rect Transform component and an Image component. A Sprite can be applied to the Image component under the Target Graphic field, and its colour can be set in the Color field. A Material can also be applied to the Image component. The Image Type field defines how the Sprite will appear. The options are:


Simple: Scales the entire Sprite equally.

Sliced: Uses the 3x3 Sprite division so resizing doesn’t distort corners and only the center part is stretched.

Tiled: Similar to Sliced, but tiles (repeats) the center part rather than stretching it. For Sprites with no borders, the entire Sprite is tiled.

Filled: Shows the Sprite in the same way as Simple, except it fills in the Sprite from an origin in a defined direction, method, and amount.

Change the Source Image to a desired image. (Figure 03)

There are various UI Elements that can be used to create your own User Interfaces. Try creating a basic UI layout using text and images.

Creating Basic UI with uGUI

1. Creating Basic UI

2. Creating Text

3. Importing UI Images

4. Creating UI Images

Complete this tutorial