2D Graphics and Animations in Unity 3D Finally, something visual! Unity 2D Game Development Telerik School Academy http://academy.telerik.com

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 - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*

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

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 http://opengameart.org (c) 2007 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*

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 https://www.codeandweb.com/what-is-a- sprite-sheet (c) 2007 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*

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 - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*

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 - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*

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 - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*

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 - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*

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: https://www.codeandweb.com/texturepacker Click "Apply" in the top right corner Go to the "Project" window and see the results (c) 2007 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*

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 - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*

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

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 - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*

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 - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*

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 - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*

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 - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*

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 - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*

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 - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*

* 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 - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*

* 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 - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*

* 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 - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*

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

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 - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*

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 - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*

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 - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*

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 - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*

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 - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*

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: https://youtu.be/Bg-Wybm93Pk (c) 2007 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*

Layers & Tags Unity Layers * (c) 2007 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*

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 - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*

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 - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*

2D Graphics and Animations http://academy.telerik.com

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