Unity Tip Logo

Unity Tip

Bite-Sized Tips and Tricks for Unity

#UnityTip

Each Canvas acts as a renderable collection of UI elements in a scene. You'll likely benefit by using more than one in your scene as a single UI change forces the entire Canvas mesh to be regenerated. Keep this in mind when designing your Canvas layouts.

Twitter Icon
UI
#1

Canvas > Panel > UI Elements is a typical nested structure for Unity UI. Examples of UI Elements include Button, Text, Image, Slider, etc. You can even nest a Panel within a Panel, don't be scared.

Twitter Icon
UI
#2

There are three Render Mode settings for a Canvas. Screen Space – Overlay (2D perspectiveless HUD, rendered above all scene objects), Screen Space – Camera (2D perspective HUD, rendered with variable scene depth), and World Space (3D perspective, with variable scene depth).

Twitter Icon
UI
#3

The RectTransform is the base component of all UI elements. You set its anchors to control resizing based on its relationship to its parent. You set its Pivot Point to control its 2D position (x, y), which also acts as the position from which scaling and rotating occur.

Twitter Icon
ui
#4

All UI elements are comprised of Text and Image components in one form or another, that’s it. You can have an Image component be represented by a solid fill color as opposed to an actual Sprite too, it’s no big deal.

Twitter Icon
ui
#5

All interactive UI elements extend the Selectable class. This class provides an interactable toggle, transition settings (over, down, pressed, etc), and navigation settings (“tab order” for PC keyboards, console controllers, etc).

Twitter Icon
ui
#6

Use a CanvasGroup component to fade out a collection of UI elements (panel and its children) as one entity. This component also allows you to enable/disable all interactive children at once. CanvasGroup is your friend.

Twitter Icon
ui
#7

Unity renders UI elements in your Hierarchy view from top to bottom. This means the bottom most UI element in the Hierarchy view is rendered last, and thus above of all other UI elements on screen.

Twitter Icon
ui
#8

A ToggleGroup component is useful for mimicking “Radio Buttons”. It is best practice to put the ToggleGroup component on the parent of the Toggle instances, though not required... why did I tell you that last part?

Twitter Icon
ui
#9

When importing PSD files, make sure to update its Texture Type setting to Sprite (2D & UI) if you intend to use the asset for 2D or UI. This is a gotcha that can be frustrating if not set properly.

Twitter Icon
general
#10

For custom UI interaction events, have a custom component script implement from UnityEngine.EventSystems.XXX where XXX is a Unity built-in interface. Example interfaces include IPointerEnterHandler, IDragHandler, ISelectHandler, etc. and allow the execution of custom code within the interface’s implemented method.

Twitter Icon
scripting
#11

The Navigation setting on an interactive UI element is used to determine “tab order” which changes the focus of UI elements in controller, keyboard, etc based user interaction models. The Visualize button shows the focus flow in the Scene view.

Twitter Icon
ui
#12

You can use the EventTrigger component on a Selectable UI element (Button, Slider, etc) to expose additional event types in the Inspector. This is useful if you want to make a UI or scene change dynamically based on user input other than OnClick.

Twitter Icon
ui
#13

For masking, simply have a Panel (PanelA) nested inside another Panel (PanelB) where PanelA is larger than PanelB. Then simply select PanelB and add a Mask component. This enables PanelA’s content to show through. Remember, the masked area is based on the Source Image property of PanelB's Image component.

Twitter Icon
ui
#14

For a Mask, the mask area is based on the attached image component. Transparency in the image cuts out the visible area of its children. You can uncheck Show Mask Graphic to hide the graphic itself but still provide the mask area, nice.

Twitter Icon
ui
#15

For masked scrolling, simply add a ScrollRect component to a parent Panel containing a Mask component. Then set the Content property of the ScrollRect to the child panel whose bounds exceed those of the parent panel. Scrolly time.

Twitter Icon
ui
#16

For Auto Layouts, simply add a GridLayoutGroup, HorizontalLayoutGroup, or VerticalLayoutGroup component to a Panel and then all children will automatically align. You will likely want to edit this automatic alignment and you can do so with the Start Corner, Start Axis, or Child Alignment properties. The parent controls the “cell size” of the children as well.

Twitter Icon
ui
#17

A Button can have a GridLayoutGroup, HorizontalLayoutGroup, or VerticalLayoutGroup component to automatically layout its children. This is useful if a single button has numerous visual elements within it. In addition, the children can have a LayoutElement component to set min, max, and preferred sizes that override or inform the layout group to handle the child in a specific way. Go make cooler buttons.

Twitter Icon
ui
#18

A Button with a HorizontalLayoutGroup component and padding can ensure the button resizes according to the size of its children and no bigger. A LayoutElement component with no flexible width is necessary for this to work.

Twitter Icon
ui
#19

Set a UI element’s LayoutElement flexible width or flexible height properties to decimal values to allow the parent layout group of each to organize them by “weight” or “percent”. This percentage based layout works until all children only have room to be their preferred width or preferred height. This is super useful and similar to Android’s layout_weight or the Web’s percentage based layouts.

Twitter Icon
ui
#20

You can use an empty GameObject with a RectTransform instead of a Panel to group UI elements. This is handy if you want a “lighter Panel” that doesn’t require a visual representation itself.

Twitter Icon
ui
#21

Add a CanvasScaler component to a Canvas to better control resolution variations. It is a good idea, and most common, to set the Screen Match Mode to Width or Height with a value of .5. The Expand and Shrink options are best for background graphics that simply cover the entire screen area (smaller use case, but depends on your game/app).

Twitter Icon
ui
#22

When dynamically adding UI elements to a scrollable content Panel, a ContentSizeFitter component is of great help. It will make the scrollable area size “snap” to the combined area of the internal UI elements. For this to work, 1) the children UI elements each need a LayoutElement with set preferred sizes (width, height, or both) and 2) the panel with the ContentSizeFitter needs its layout group’s Child Force Expand (width, height, or both) setting(s) disabled.

Twitter Icon
ui
#23

For each texture, you can set platform overrides. This is useful for changing the graphic size and compression of image assets on a per-platform level.

Twitter Icon
general
#24

Unity doesn’t have a built-in pixel-density solution, so sad face. However, you can poll the device or machine using the Screen class to get the resolution, pixel density (dpi), and more. An approach could be 1) get the Screen info 2) calculate a “best fit” (similar to Android’s ldpi, mdpi, hdpi, etc), and 3) ensure all graphic assets are utilized from the “best fit” Resources folder.

Twitter Icon
general
#25

To create your own preloader scene, just make the first scene virtually empty (except for what you need to visually represent preloading) and when this preloader scene is loaded, call LoadLevelAsync() or LoadLevelAdditiveAsync() and then query progress and draw the preloader visuals.

Twitter Icon
general
#26

It is best practice to use generic lists as opposed to ArrayList. The Unify Wiki has a great breakdown of when to use one over the other, why, and alternatives.

Twitter Icon
scripting
#27

Set up a looping coroutine in the Start() method of a component instead of using the Update() method if updates for a Component don’t need the game/app frame rate (.2f coroutine will run 5 times a second vs 60fps)

Twitter Icon
scripting
#28

If you have a scrollable view that holds a large amount of UI element instances (ex. list items), you’ll likely want to optimize. Conceptually, if you have a max of 10 instances out of 100 visible at any one time; creating all 100 is a waste. Instead, use the Object Pool pattern. This way you only instantiate 10 or so instances and based on scrolling position, you’ll recycle and update each view with the correct data. Android and iOS use this approach to optimize the performance of scrolling long lists.

Twitter Icon
scripting
#29

A Prefab with an attached custom component (ideally by the same name) can hold references to itself, and/or its children, and/or other connected components. This allows a single GetComponent<MyComponent>() call to gain reference to the Prefab instance's connected components or GameObjects whose properties change/update at runtime. This is a very useful approach for succinctly "building" or "inflating" Prefab instances at runtime based on dynamic data.

Twitter Icon
scripting
#30

It is best practice to use a Sprite Sheet (aka Atlas) for your graphics assets in 2D (and 3D) games/apps as opposed to having a one-to-one relationship between a texture and an image file. The core advantage of this approach is performance related. Basically, the device on which your game/app is running can minimize draw calls by UV mapping part(s) of a texture (your Sprite Sheet) multiple times to a geometry. The alternative is a draw call per texture per geometry.

Twitter Icon
2d
#31

It is a common practice to use an empty GameObject as a “folder” within a scene. This helps you better organize and structure your game in a visual way. A specific approach is to position an empty GameObject at (0, 0, 0) which is then filled with various manager classes, utility classes, and a top-level eventing system. This is a useful approach, especially for persisting components across scene loads.

Twitter Icon
3d
#32

When in the Scene view, have you ever wanted to make one GameObject point or “look at” another GameObject? To pull this off, simply hover the GameObject in focus with your Rotate Tool selected and then hold ctrl/cmd + shift as you drag the Rotate Gizmo. While dragging, the GameObject you’re rotating will “look at” the GameObject you hover. Things are looking up.

Twitter Icon
3D
#33

There are times when positioning a GameObject that you want its position to snap to the surface of another GameObject. This is common when wanting to drag an object across a floor for example. You can use Surface Snapping to achieve this. Simply hold down ctrl/cmd + shift prior to selecting and manipulating a GameObject’s position. As you drag, the target surface to snap to updates as you hover different GameObjects.

Twitter Icon
3D
#34

If you need help aligning GameObjects with vertex precision or to a grid, you need to use Vertex Snapping. To pull this off, select the Translate Tool, hold down the v key, hover the desired vertex of the GameObject in focus, then click and drag. As you drag your GameObject, its position snaps to the hovered vertex of another GameObject. Snappy.

Twitter Icon
3D
#35

If you want to interpolate values over time in a succinct way, you can use Unity’s built-in Lerp (linear interpolation) methods. Numerous classes have this method or a variation of it. Some common examples are Color.Lerp, Vector2.Lerp, Vector3.Lerp, Mathf.LerpAngle, and Vector3.Slerp. Mmmm… Slerp.

Twitter Icon
scripting
#36

If you repeatedly find yourself editing values only to realize you were in PlayMode when doing so (and thus losing all your edits), raise your hand… actually don’t raise it. Instead use Edit > Preferences > Colors > Playmode Tint to have Unity automatically color-tint the editor interface so you’re visually reminded that you’re in PlayMode. Damn handy.

Twitter Icon
general
#37

To improve precision while moving a GameObject in a scene, you can hold down ctrl/cmd while dragging its Translate Gizmo. This enables the position of the GameObject you’re moving to snap in incremental units. Go to Edit > Snap Settings to customize.

Twitter Icon
3D
#38

Slo-mo your thing? One approach to a slow motion effect is to leverage Time.time in conjunction with Time.timeScale. For instance, you could Lerp or Tween the Time.timeScale value over a period of time to transition toward a “pause” or “freeze” state.

Twitter Icon
scripting
#39

Having the pixelated-app-icon blues? Fix 'em in two easy steps. First, select all the icon images at once from within the Project. Second, select Editor GUI and Legacy GUI from the Texture Type drop down in the Inspector. Done. You can learn more detail about why this happens over on Unity Answers.

Twitter Icon
2D
#40

In cases where you are doing a lot of operations on a field or property, you can instead use a local variable cache to get a 3x performance improvement. Get the details in Jackson Dunstan's C# Performance: Properties vs. Fields vs. Locals article.

Twitter Icon
scripting
#41

When using 3D physics with complex models it is often best to use Compound Colliders instead of a Mesh Collider. A complex mesh collider will likely have many more vertices than a combination of primitive colliders (BoxCollider, SphereCollider, or CapsuleCollider). Fewer vertices = fewer calculations = better performance.

Twitter Icon
3D
#42

Shortcuts are your friend. Use shift + spacebar after focusing your cursor in a specific window to toggle fullscreen. This is very useful when focused on the Scene view and toggling PlayMode.

Twitter Icon
general
#43

Having lights in your scene is computationally expensive. "But lighting looks so good," you say. Welcome to Lightmapping, the extremely efficient way to make scene objects look as if they are affected by lights without having lights in your scene.

Twitter Icon
general
#44

Want to restrict a GameObject's position to a specific boundary, say the width and height of the screen? Use Mathf.Clamp as the enforcer. Keep in mind he has many relatives such as WrapMode.ClampForever, InputField.ClampPos, Vector3.ClampMagnitude, and more.

Twitter Icon
scripting
#45

Do you keep getting errors in the Console and not know what they mean? Welcome to the C# Error Messages list. There is a list for UnityScript too, but I'm not going to link to it. Seriously, bite the bullet and learn C# instead, you'll be glad you did.

Twitter Icon
scripting
#46

So you like Lightmapping now (Tip #44) but you're not a fan of the "non-static objects" restriction right? You're S.O.L. Just kidding, check out your new best friend Light Probes.

Twitter Icon
general
#47

Want to do simple and accurate collision detection in Unity? Want to see how to do it in 25 seconds? Then the Unity Collision Detection in 25 Seconds article is for you.

Twitter Icon
general
#48

Having trouble expanding and collapsing large nested groups in the hierarchy? Use alt + left-arrow to collapse and alt + right-arrow to expand.

Twitter Icon
general
#49

Having unwanted hiccups in your game? Check out Wendelin Reich's C# Memory Management for Developers or Unity's Understanding Automatic Memory Management breakdown to learn how to manage memory and tame the Garbage Collector.

Twitter Icon
scripting
#50

If you use the public access modifier on MonoBehaviour fields just so you can edit them through the editor... STOP. Look into adopting the [SerializeField] attribute instead.

Twitter Icon
scripting
#51

If you use coroutines, then you should check @AngryAnt's short article Optimising coroutine yielding in C# to make sure you're not performing unneeded memory allocation. It's a simple fix if you're doing it wrong.

Twitter Icon
scripting
#52

Do you ever wish it was easier to identify overlapping objects in the Scene view? Simply click an object, then click the Icon Dropdown just to the left of the name in the Inspector. You didn't know this was a button uh? From here you can label it with a color or texture for better identification and organization within the Scene view. This tip is brought to you by Iestyn Lloyd's Tweet.

Twitter Icon
general
#53

When you cast objects, do you use prefix casting or as-casting? There are subtle benefits and potential performance gains depending on your choice. @jashan has the lowdown for you over at Unity Answers.

Twitter Icon
scripting
#54

If you are like me and have been using Photoshop virtually everyday for too many years to count, then you know how much of a habit the spacebar Hand Tool shortcut is. Unity has this tool too, but you click the further away and pinky-awkward Q key. Make things right in the world with Edit > Preferences > Keys > Tools/View.

Twitter Icon
general
#55

If you ever make Color edits from within the Inspector, take note of the eye dropper to the right of the color box. You can sample any on screen color with it, not just colors within the Unity editor. Now you can sample the colors from your Reddit EarthPorn with ease.

Twitter Icon
general
#56

It may seem weird at first, but it is totally normal to have multiple Cameras in a scene. By leveraging a camera's Clear Flags and Culling Mask properties you can ensure certain cameras only render certain layers. A common example is to have one camera render only UI and another render only your game/app. You can get creative too, put your thinking cap on.

Twitter Icon
general
#57

Ever heard of icon fonts? They are a super useful and popular approach to achieving scaleable and color independent icons in web development. Unity supports them too with some minor tweaking. Chris Sung has the lowdown in his Unity3D UI Typography: Font Awesome post. Please don't default to Font Awesome, buy or make your own.

Twitter Icon
UI
#58

As suggested by @AngryAnt in a Tweet with @trinketben, you can use a [Comment] attribute to provide visible in-editor notes about an Inspector property. In fact there are a lot of attributes that are useful. @liortal53 has a nice breakdown.

Twitter Icon
scripting
#59

Ever had the need to capture a screenshot during gameplay or while developing? Application.CaptureScreenshot is your friend.

Twitter Icon
scripting
#60

If MonoDevelop is a pain in the ass, then try Visual Studio or Sublime Text 3. @wpg_denny has a great article titled Using Sublime with Unity to get you up and running on Windows or Mac.

Twitter Icon
scripting
#61

Though it is often an ill-advised approach from a performance perspective, Reflection can be a very useful tool. During authoring time for example, Reflection can be used to log all the properties of a poorly documented class instance to better understand its interface. Brannon has a solid example of this on Stack Overflow, but don't forget to add your using System and using System.Reflection statements when using the snippet.

Twitter Icon
scripting
#62

When working with physics in Unity, don't forget to leverage layers and the collision matrix for an easy optimization win. Ricardo Aguiar has more in his Physics Best Practices article.

Twitter Icon
general
#63

Since iOS and Android can kill any app at will (to free up limited resources), it is wise to use OnApplicationPause when your game/app loses focus. This enables you a chance to save data that needs to persist between game/app sessions.

Twitter Icon
scripting
#64

JavaScript for the web (not Unity Script) has a console.log() method that can handle a variable amount of arguments. This is extremely handy as it replaces cumbersome typing with a comma separated list of variable length to print to the console. Lucky you, Teemu Ikonen has already created the Console.Log() script for C#.

Twitter Icon
scripting
#65

If you create a lot of strings at runtime, you may be able to benefit by storing said strings in a fixed array as opposed to creating new ones all the time. Don’t risk tempting the ever hungry Garbage Collector to cause frame rate jitter. Check @catlikecoding Frames Per Second tutorial for an example.

Twitter Icon
scripting
#66

If you do mobile Android dev and you need to store persistent data, then you need to check Supersegfault’s game dev blog. Specifically his Unity on Android Save Data Pitfall post so you're aware of the differences between internal and external storage.

Twitter Icon
scripting
#67

Ever felt that Unity classes were missing obviously helpful methods? Do something about it using Extension Methods. Josh Sutphin (aka @invicticide) details the implementation in Adding to Unity's Built-in Classes Using Extension Methods.

Twitter Icon
scripting
#68

When targeting iOS, is your framerate capped to 30fps? Use Application.targetFrameRate to get that 60fps. This can be used when targeting any platform btw. Be aware that different platforms, in addition to your game/app, can impact the target fps.

Twitter Icon
scripting
#69

Do you want to implement a cross platform approach for storing persistent data? Look no further than the post How to Save and Load Your Players' Progress in Unity by @ericdaily. Take note of the iOS requirement regarding "MONO_REFLECTION_SERIALIZER" in the comments.

Twitter Icon
scripting
#70

Do you ever wish PlayerPrefs.SetBool and PlayerPrefs.GetBool methods existed? If so, then check out this Unity forum thread to see how you can use PlayerPrefs.SetInt and PlayerPrefs.GetInt in combination with the ternary operator to create a succinct extension method that gets you what you want.

Twitter Icon
scripting
#71

When authoring for iOS and Android, do you wish PlayerSettings.bundleVersion was accessible at runtime? Thankfully @akaSurreal suggests a nice approach to accomplish this (and more) using Unity's BuildPipeline class. Check it out in this Unity forum thread.

Twitter Icon
scripting
#72

Ever need to read from and/or write to a file during runtime in your game or app? Thankfully, there are a set of classes in .NET to help you out. Additionally, Jackson Dunstan has some performance tips in his File I/O Performance Tips article. Dunstan, you're the man!

Twitter Icon
scripting
#73

Ever want to have finer control over a GameObject's component order in the Unity Editor? Luckily @kode80 has your back with this tweet. Download the tools on github.

Twitter Icon
scripting
#74

C# has built-in events, but Unity created the UnityEvent class anyway. To be fair, I'm sure they had their reasons. At the very least, they likely did so for cross-language compatibility and editor integration. Regardless, you should be aware of the performance implications. As always Jackson Dunstan has your back in Event Performance: C# vs. UnityEvent.

Twitter Icon
scripting
#75

When publishing to Android, do you wish you had finer control over Android's Navigation and Status Bar display styles? Well you're in luck because @zeh wrote ApplicationChrome.cs. Check out implementation details in his Unity tidbits post.

Twitter Icon
scripting
#76

Have you ever had the desire to visualize raycasts or helper lines while authoring in Unity? If so, check out Debug.DrawRay and Debug.DrawLine.

Twitter Icon
scripting
#77

Modeling by Numbers - An Introduction to Procedural Geometry by @jayelinda does a great job teaching how to create a Mesh at runtime. Procedural geometry opens up a lot of doors in terms of flexibility and model variation at runtime. Check it out.

Twitter Icon
scripting
#78

If you need or want the freedom to change the component order on your GameObject's with greater ease, then I also suggest (Tip #74) looking into XT Reorder by @xeleh.

Twitter Icon
scripting
#79

Are you creating an app with Unity that isn't supposed to be full screen? You can show the status bar easily on iOS, but Android's status and navigation bars are a different story. Thankfully, @yury_habets has the solution on GitHub with UnityShowAndroidStatusBar.

Twitter Icon
scripting
#80

When your game/app starts up do you need to guarantee that some scripts load before others? If so, make sure to check out the Script Execution Order Settings via Edit > Project Settings > Script Execution Order. This is handy for example when you want to ensure a few manager classes load first.

Twitter Icon
scripting
#81

Are you a big fan of animation? Same here. If you slave away editing keyframes though, you need to look into using a tweening engine. Not all animation styles will benefit, but you should know about them regardless. @Prime31's' ZestKit rocks!

Twitter Icon
scripting
#82

Want 10 Steps to get 10x Performance when scripting in Unity? Checkout out @SorenTrautner's' bit in Tools, Tricks and Technologies for Reaching Stutter Free 60 FPS in INSIDE.

Twitter Icon
scripting
#83

Making a 2D or 2.5D game? Want a badass camera system? Look no further than Pro Camera 2D by @lpfonseca.

Twitter Icon
2D
#84

If you are modifying one or more meshes at runtime, you're likely to get a performance increase by using double buffering. Check the Unity Mobile Optimizations page for a simple example.

Twitter Icon
3D
#85

Do you sometimes end up with too many fields in your MonoBehaviors? You may benefit from using a ScriptableObject as a reusable data table. @superpig has the lowdown in Overthrowing the MonoBehaviour Tyranny in a Glorious Scriptable Object Revolution.

Twitter Icon
scripting
#86

It would be cool if there was a simple way to bookmark and reset the Scene View to a previous viewing angle right? Thought so too, checkout Scene Shot Bookmarks, an open source custom editor solution.

Twitter Icon
scripting
#87

Do you ever have long running processing in your game/app that causes GameObjects or UI movement to be janky? You really need to check out Thread Ninja - Multithread Coroutine to keep motion smooth while doing heavy processing tasks.

Twitter Icon
scripting
#88

Use Unity UI? Ever place your UI off-screen? Make sure you actually disable your Canvases as Unity doesn't automatically cull UIs that are off-screen as you'd expect.

Twitter Icon
ui
#89

Do you use Animators on your UI? DON'T! Use a Tweening Engine instead. Check Ian Dundore of Unity's Squeezing Unity: Tips for raising performance talk for the low-down.

Twitter Icon
ui
#90