1. 2D Graphics and Animations in Unity 3D
Finally, something visual!
Unity 2D Game Development
Telerik School Academy

2. Table of Contents Sprites Animations Particle Systems Layers*
Table of Contents
Sprites
What is a Sprite?
Importing Sprites
Sprite Editor
Sprite Renderer
Animations
Creating Animations
Animation State Machine
Particle Systems
Layers
(c) 2007 National Academy for Software Development - All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*

3. What is sprite and where it is used?*
Sprites
What is sprite and where it is used?
(c) 2007 National Academy for Software Development - All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*

4. What is a Sprite Sprites are: Two dimensional image or animations*
What is a Sprite
Sprites are:
Two dimensional image or animations
Integrated in larger game scene
Usually used from sprite sheets for performance considerations
Used in 2D games
You can find free sprites in
(c) 2007 National Academy for Software Development - All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*

5. What is a Sprite Sheet What is Sprite Sheet:*
What is a Sprite Sheet
What is Sprite Sheet:
One image with collection of sprites
Using them like one but cutting wherever needed
Can be used to create animations
Must watch video for sprite sheets
sprite-sheet
(c) 2007 National Academy for Software Development - All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*

6. How to Import in Unity In the Project browser Create folder "Sprites"*
How to Import in Unity
In the Project browser
Create folder "Sprites"
Use drag'n'drop or just copy the sprite image in the corresponding explorer folder
You can now see it in Unity
On the Inspector there are variety of options for the sprite
(c) 2007 National Academy for Software Development - All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*

7. How to Import in Unity In the Inspector*
How to Import in Unity
In the Inspector
Make sure "Texture Type" is "Sprite 2D"
Set "Sprite Mode" to "Multiple" in order to tell Unity to use the image as collection of sprites
In the "Max Size" option consider the maximum resolution used by your game
If you think the size is too much, change it and click "Apply"
You can define different sizes for the different platforms
(c) 2007 National Academy for Software Development - All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*

8. How to Import in Unity "Pixel To Units" option*
How to Import in Unity
"Pixel To Units" option
Unity does not use pixels for its calculations but rather than that uses units
Each unit is what you define – for example 1 unit = 1 meter in your game
The smaller is the value, the more performance issues you will have with the Physics Engine
"Pixels To Units" also define the default scene view grid – easier to arrange when your sprites' width is exactly the "Pixels To Units" ratio
(c) 2007 National Academy for Software Development - All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*

9. How to Import in Unity Select "Sprite Editor" for magic*
How to Import in Unity
Select "Sprite Editor" for magic
On the "Slice" button you have the following:
Type - "Automatic" and "Grid" – how to cut
Pivot point – where are the zero local coordinates of the sprite
Method
"Delete Existing" – remove previously sliced
"Smart" – will create new rectangles by adjusting
"Safe" – will only add rectangles without touching the originals
(c) 2007 National Academy for Software Development - All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*

10. How to Import in Unity If you have any problems*
How to Import in Unity
If you have any problems
Define the rectangles by yourself or
Try to rearrange the sprites with some tool
TexturePacker should do the job:
Click "Apply" in the top right corner
Go to the "Project" window and see the results
(c) 2007 National Academy for Software Development - All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*

11. Sprite Renderer If you drag'and'drop a sprite into the scene*
Sprite Renderer
If you drag'and'drop a sprite into the scene
You will see the "Sprite Renderer" component
Color – you can adjust the color of the sprite
Material – used for the 3D Physics mainly
Sorting Layer – how sprites overlap on the scene
Order in Layer – if the sprites are in the same layer, how they should overlap on the scene
(c) 2007 National Academy for Software Development - All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*

12. Animations Very power, much cool! *
(c) 2007 National Academy for Software Development - All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*

13. Creating Simple Animations*
Creating Simple Animations
The easiest way to create animations
Select all the sprites you want to include
Drag'n'drop them all at once in the scene
Unity will prompt you to save the new animation
Create folder "Animations" in the "Assets" folder and save it there
Run the game 
(c) 2007 National Academy for Software Development - All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*

14. Adjusting Animation Select "Window" -> "Animation"*
Adjusting Animation
Select "Window" -> "Animation"
Select the game object you want to adjust
You can select each frame and apply the timing you need
By clicking "Add Curve" you can add
Position and Rotation animation
Color animation
Scale animation
(c) 2007 National Academy for Software Development - All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*

15. Adjusting Animation By default all animations should loop*
Adjusting Animation
By default all animations should loop
Sometimes however we do not want the loop
Go to the "Project" window
Select the animation file
In the "Inspector" disable "Loop Time"
The animation will now play only once
(c) 2007 National Academy for Software Development - All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*

16. Object With Many Animations*
Object With Many Animations
Currently all animations are different objects
To assign one main object with different animations:
Select "Game Object" -> "Create Empty"
To make it visible -> "Add Component" -> "Sprite Renderer"
Drag'n'drop an initial sprite to the renderer
The same way add "Animator" component
Each Animator need state machine called "Animator Controller"
(c) 2007 National Academy for Software Development - All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*

17. Animation Controller To add "Animation Controller":*
Animation Controller
To add "Animation Controller":
In the "Project" browser – create new "Animations Controller"
Or just drag'n'drop all the animations to the Game Object and controller will be created
Select "Window" -> "Animator" to see the state machine of the currently selected object
(c) 2007 National Academy for Software Development - All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*

18. Animation Controller Making animation transisions*
Animation Controller
Making animation transisions
Double-clicking will open animation properties
Right-click on an animation -> "Set Default"
Right-click on an animation -> "Make transition"
Think carefully how you want your animations to transition between each other
(c) 2007 National Academy for Software Development - All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*

19. *
Animation Controller
Clicking on the transition arrow will open some settings
Mute – disabled animation state
Solo – enabled with respect to other states
Transition Time – how smoothly the transition will happen
(c) 2007 National Academy for Software Development - All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*

20. *
Animator Parameters
In order to transition the animations through C# code, we need parameters
In the lower left corner click the "+" sign
You can choose between "float", "int", "bool" and "trigger"
Give the parameter name and set default value
Later in the code you can change these values
(c) 2007 National Academy for Software Development - All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*

21. *
Animator Conditions
We need to select each transition and set its conditions depending on the parameters value
Select a transition and go to "Conditions"
Default is "Exit Time"
Click the "+" sign and choose the parameter
Click the value you want
Do this for all transitions carefully
You can change and preview during run-time
(c) 2007 National Academy for Software Development - All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*

22. Particle Systems A hole bunch of effects! *
(c) 2007 National Academy for Software Development - All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*

23. Particle Systems Most solid game objects are fine with sprites*
Particle Systems
Most solid game objects are fine with sprites
Most there are other game elements
Like water, fire, clouds, explosions, etc.
These are hard to make with sprites
Here comes the built-in particle system effects
(c) 2007 National Academy for Software Development - All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*

24. Particle Systems Each particle*
Particle Systems
Each particle
Has a predefined lifetime
During it can undergo various changes
Is emitted at random position from predefined shape at certain rate
Has velocity vector to determine the movement
Color, size and rotation can be changed too
Using combinations of all above properties can give you various "cool" effects
(c) 2007 National Academy for Software Development - All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*

25. Particle Systems Each particle*
Particle Systems
Each particle
Has a predefined lifetime
During it can undergo various changes
Is emitted at random position from predefined shape at certain rate
Has velocity vector to determine the movement
Color, size and rotation can be changed too
Using combinations of all above properties can give you various "cool" effects
(c) 2007 National Academy for Software Development - All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*

26. Particle Systems Go to "Game Object" -> "Particle System"*
Particle Systems
Go to "Game Object" -> "Particle System"
A default Particle System will be created
Options have these variations:
Constant – fixed over the lifetime
Curve – specified by a curve/graph
Random between two constants
Random between two curves
Gradient
Random between two gradients
(c) 2007 National Academy for Software Development - All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*

27. Simple Explosion To create a simple explosion Create Particle System*
Simple Explosion
To create a simple explosion
Create Particle System
Import Particles assets from the standard assets Assets -> Import Package -> Particles
Go to "Renderer" module, set the material to Fire Add
Disable "Cast Shadows" and "Receive Shadows"
Go to "Emission" and set the rate to 0
Add a single burst of 50 particles at 0 time
In the main module set "Duration" and "Start Lifetime" to 1
(c) 2007 National Academy for Software Development - All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*

28. Simple Explosion To create a simple explosion*
Simple Explosion
To create a simple explosion
Check "Size Over Lifetime" and use the "ramp-down" preset
Check the "Color Over Lifetime" and set white to black gradient
Check "Limit Velocity Over Lifetime" and set "Speed" to 3 and "Dampen" to 0.4
Set "Start Size" random between 0.5 and 1.5
Set "Start Rotation" random between 0 and 360
Enjoy 
More here:
(c) 2007 National Academy for Software Development - All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*

29. Layers & Tags Unity Layers *
(c) 2007 National Academy for Software Development - All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*

30. Layers "Layers" in top right corner -> "Edit Layers" Normal Layer*
Layers
"Layers" in top right corner -> "Edit Layers"
Normal Layer
Can be used for collision detection
Sorting Layer
How the objects overlap on the scene
Tags
Used for identifying objects from the code
Every object may have layer or tag
(c) 2007 National Academy for Software Development - All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*

31. Summary Animator State machine - transitions*
Summary
Importing Sprites – why and how
Animating Sprites – animation window
Animator State machine - transitions
Particle Systems – a whole new world
Layers and Tags – label your objects
(c) 2007 National Academy for Software Development - All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*

32. 2D Graphics and Animations

33. Free Trainings @ Telerik Academy
C# Telerik Academy
csharpfundamentals.telerik.com
Telerik Software Academy
academy.telerik.com
Telerik Facebook
facebook.com/TelerikAcademy
Telerik Software Academy Forums
forums.academy.telerik.com