Unity 2D Graphical Elements Cheat Sheet
Unity 2D Graphical Elements Cheat Sheet
Assets
| Assets | 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 installation or can be downloaded from the Asset Store |
| Asset Store | Library of free and paid downloadable assets (textures, models, animations, project examples, editor extensions, tutorials). 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 |
ADVERTISEMENT
Sprites
| Sprite | 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 automatically 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. “Texture” is the default for images in 3D projects. “Texture” assets are meant to be drawn on 3D models, “Sprite”s are meant to be standalone 2D images |
| Spritesheet | Image file containing severa sub-images on a transparent background. Ex: image containing all frames for a 2D animation. When importing a spritesheet as an asset, set (in the Inspector) Sprite Mode to “Multiple” |
| Sprite Tools | 1) Creator (creates placeholder sprites) 2) Editor (extracts sprites from spritesheets) 3) Renderer (Component that displays images) 4) Packer (to optimize video memory performance) |
| Sprite Creator | From the editor: Assets > Sprites. It allows to create polygon Sprite Assets that you can use as placeholders in the SpriteRenderers in your Game Objects |
| Sprite Editor | Select the Sprite Asset > click Sprite Editor in the Inspector. Allows the extraction of single sprites from spritesheets (be sure to set the Sprite Mode of your asset to “Multiple” before). In the editor you can access the Slice menu at the top left, which allows you to separate the images automatically. 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 (placeholder sprites) |
UI
| UI Element | Graphical User Interface element (text labels, buttons, on-screen sprites, health bars, ammo count, sealthometers, etc). Represented by Game Objects with particular kinds of Components |
| Canvas | 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 automatically 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 represented as rectangles) |
| RectTransform | Component used for UI Elements in place of the Transform, to set position, rotation, scale, width & height of the rectangle, Pivot, Anchor |
| Pivot | 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 “Pivot” mode. Or it can be set when choosing the Anchor preset from the RectTransform by keeping SHIFT presesd |
| Anchor | 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 RectTransform) this element (child) will move accordingly. Can be set by choosing an Anchor preset from the RectTransform. You can also set the 4 triangles apart. This will make the child stretch when the parent is resized |
| UI Visual Components | |
| Text | Label displaying some text |
| Image | 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) |
| API | |
| Reference UI Components | UI Components are exactly like other Components. 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 concatenate strings and values using + |
UI manual: https://docs.unity3d.com/Manual/UISystem.html