Unity 2D Graphical Elements Cheat Sheet

Unity 2D Graphical Elements Cheat Sheet


AssetsResources you can use in your game. Images (bmp, tif, tga, jpg, psd), models (fbx, max, blend, mb, ma), meshes, audio
Standard assetsBasic assets that either ship with Unity instal­lation or can be downloaded from the Asset Store
Asset StoreLibrary 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 packageArchive of assets that can be imported in your project. Can be standard (supplied with Unity) or custom (made by users)
Import packagesFrom the editor: Assets > Import Package
Import assetsRight click on the Project view > Import New Asset. Or drag the asset (for example, an image) from the computer to Project
Inspect assetsClick on the asset in the Project view > the Inspector will show its properties


Sprite2D graphics object
Sprite AssetImage imported as asset, with Texture Mode (in the Inspector) set to “­Sprite (2D and UI)”
Importing Sprite AssetsIn a 2D project, importing an image as asset automa­tically imports that as a Sprite Asset
Texture modesInspect 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
Sprite­sheetImage 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 Tools1) 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 CreatorFrom 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 EditorSelect 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 ElementGraphical 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
CanvasGame 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 ElementFrom 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 orderElements on Canvas are drawn in the same order in which they appear in the Hierarchy
Rect ToolTool in the editor toolbar used to manipulate the size of UI Elements (all being repres­ented as rectan­gles)
RectTr­ansformComponent used for UI Elements in place of the Transform, to set position, rotation, scale, width & height of the rectangle, Pivot, Anchor
PivotPoint 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
AnchorShown 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 Components
TextLabel displaying some text
ImageDisplays a Sprite Asset. You can change colors and Image Type (how the Sprite will appear inside the UI Rectangle)
Rect Mask 2DRestricts the children elements to the shape of this element (parent)
Reference UI ComponentsUI 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;
myLabel.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 +

UI manual: https:­//d­ocs.un­ity­3d.c­om­/Ma­nua­l/U­ISy­ste­m.html

Leave a Reply

Your email address will not be published. Required fields are marked *