Show Menu

Unity 2D Graphical Elements Cheat Sheet by

Unity assets, sprites, and GUI basics


Resources you can use in your game. Images (bmp, tif, tga, jpg, psd), models (fbx, max, blend, mb, ma), meshes, audio
Standard assets
Basic assets that either ship with Unity instal­lation or can be downloaded from the Asset Store
Asset Store
Library of free and paid downlo­adable assets (textures, models, animat­ions, project examples, editor extens­ions, tutori­als). Access from the editor: Window > General > Asset Store
Asset package
Archive of assets that can be imported in your project. Can be standard (supplied with Unity) or custom (made by users)
Import packages
From the editor: Assets > Import Package
Import assets
Right click on the Project view > Import New Asset. Or drag the asset (for example, an image) from the computer to Project
Inspect assets
Click on the asset in the Project view > the Inspector will show its properties


2D graphics object
Sprite Asset
Image imported as asset, with Texture Mode (in the Inspector) set to "­Sprite (2D and UI)"
Importing Sprite Assets
In a 2D project, importing an image as asset automa­tically imports that as a Sprite Asset
Texture modes
Inspect an image asset to change its Texture Mode. "­Sprite (2D and UI)" is the default mode for images in 2D projects. "­Tex­tur­e" is the default for images in 3D projects. "­Tex­tur­e" assets are meant to be drawn on 3D models, "­Spr­ite­"s are meant to be standalone 2D images
Image file containing severa sub-images on a transp­arent backgr­ound. Ex: image containing all frames for a 2D animation. When importing a sprite­sheet as an asset, set (in the Inspector) Sprite Mode to "­Mul­tip­le"
Sprite Tools
1) Creator (creates placeh­older sprites)
2) Editor (extracts sprites from spritesheets)
3) Renderer (Component that displays images)
4) Packer (to optimize video memory perfor­mance)
Sprite Creator
From the editor: Assets > Sprites. It allows to create polygon Sprite Assets that you can use as placeh­olders in the Sprite­Ren­derers in your Game Objects
Sprite Editor
Select the Sprite Asset > click Sprite Editor in the Inspector. Allows the extraction of single sprites from sprite­sheets (be sure to set the Sprite Mode of your asset to "­Mul­tip­le" before). In the editor you can access the Slice menu at the top left, which allows you to separate the images automa­tic­ally. Unity will draw a crop rectangle outside each image. You can select them to tweak properties and to set the name with which that Sprite will be exported. Click Apply to confirm, Revert to discard. You can also use the Sprite Editor to change polygons (place­holder sprites)


UI Element
Graphical User Interface element (text labels, buttons, on-screen sprites, health bars, ammo count, sealth­ome­ters, etc). Repres­ented by Game Objects with particular kinds of Components
Game Object with a Canvas component. All UI Elements should be children of it. Shown as a rectangle in the Scene. Double click on it in the Hierarchy to focus the Scene on it
Create UI Element
From editor: Game Object > UI > (choose the one you want). Or from the Hierarchy: Right click > UI > (choose one). If a Canvas is not present, it will be automa­tically created, and the UI Game Object will be added as a child
Draw order
Elements on Canvas are drawn in the same order in which they appear in the Hierarchy
Rect Tool
Tool in the editor toolbar used to manipulate the size of UI Elements (all being repres­ented as rectan­gles)
Component used for UI Elements in place of the Transform, to set position, rotation, scale, width & height of the rectangle, Pivot, Anchor
Point around which rotations and scaling occur. Shown as a blue ring. It can be moved with the mouse if the editor's toolbar pivot button is set to "­Piv­ot" mode. Or it can be set when choosing the Anchor preset from the RectTr­ansform by keeping SHIFT presesd
Shown as 4 small triangular handles. It represents the point (of this element's parent UI Element) to which this element is anchored: if that point moves (when modifying the parent's RectTr­ans­form) this element (child) will move accord­ingly. Can be set by choosing an Anchor preset from the RectTr­ans­form. You can also set the 4 triangles apart. This will make the child stretch when the parent is resized
UI Visual Compon­ents
Label displaying some text
Displays a Sprite Asset. You can change colors and Image Type (how the Sprite will appear inside the UI Rectangle)
Rect Mask 2D
Restricts the children elements to the shape of this element (parent)
Reference UI Components
UI Components are exactly like other Compon­ents. For each of them, there exists a class with the same name, that you can use as a type to store a reference to the Component in Scripts.
Ex: public Text myLabel;
myLa­bel­.text = _cur + " / " + _max + " HP";
Access the text member to change a label's text. You can set it to any string. You can concat­enate strings and values using +

Help Us Go Positive!

We offset our carbon usage with Ecologi. Click the link below to help us!

We offset our carbon footprint via Ecologi


No comments yet. Add yours below!

Add a Comment

Your Comment

Please enter your name.

    Please enter your email address

      Please enter your Comment.

          Related Cheat Sheets

          Numeric Formats Cheat Sheet
          Unity 2D Basics Cheat Sheet
          C# & Unity MonoBehaviour Cheat Sheet

          More Cheat Sheets by become

          Unity 2D Basics Cheat Sheet