Develop 2D Applications using Unity UI – Canvas and Scalability

Introduction

If we have any interest in game development, then you must have come across unity.
Unity is a Game Engine that is used by a large number of developers used to create games. It is very beginner friendly and has a log of user community support to create the things that you have in your mind. In Game Development, we have different types, and the most commonly used are 2D and 3D games. If you are developing 2D games then you need to understand what is canvas.

In this blog, we will be understanding Canvas and Scalability in Unity. Canvas will be used in larger amounts by the developers for developing 2D applications and it’s a requirement for us developers to understand its importance and its usage. We will be learning what these are, why they are needed, and how to use them.

What is Canvas?

The Canvas is the area that all UI elements should be inside. The Canvas is a Game Object with a Canvas component on it, and all UI elements must be children of such a Canvas. Creating a new UI element automatically creates a canvas, the UI element could be an image, text, or buttons.

Any UI object will sit on the Canvas firmly. A can be used with any dimension but it’s most useful when it is completely stretched out to the screen size.

There are 3 render modes of canvas

• Screen Space – Overlay
• Screen Space – Camera
• World Space

UI Elements

UI elements can be Text, Buttons, Images, etc. These are self-explanatory.

Rect Transform

• It is a 2D component, that represents a rectangle where the UI elements can be placed inside it. If the parent of a Rect Transform is also a Rect Transform, the child Rect Transform can also specify how it should be positioned and sized relative to the parent rectangle.
• This is a UI component that handles position and size, and this replaced the transform component in Unity. The important difference is in the anchor fields. These specify the left, right, top and bottom positions as a percentage of the parent size.

For example, if we set the minimum X anchor to 0, our UI element would stick to the left edge of its parent object. The five fields above these control your position relative to the corresponding anchor. Changing the first field to 100 would move the left edge of your UI element 100 units away from your anchor point.

Left corner – The minimum X anchor is 0, so the left anchor matches the left edge of the parent. If the Left value is 20, you will get an offset of 20 units from the left anchor you placed.
Right end – The maximum X anchor is set to 0.7. The anchor on the right side of this object is placed at 70% of the width of the parent. If the Right value is 20, you get an offset of 20 units from the right anchor you just placed.
Top edge – Maximum Y anchor 0.5, top anchor is placed at 50% of parent height. If the “Top” value is 50, it will be offset by 50 units from the top anchor you just placed.
Bottom edge – The minimum Y anchor is 0, and the lower anchor corresponds to the bottom edge of the parent. If the “Bottom” value is 50, you will get an offset of 50 units from the bottom anchor you just placed.

How To Use Canvas Objects?

Creating a Canvas object is easy. When you add a UI element to your screen (right-click on the hierarchy and then UI> Image), the canvas is created automatically.

• By default, this creates a canvas that moves with the camera but is static in size (not scaled per device).
• To fix this, you need to adjust the canvas scaler component. Do the following:

UI scaling mode should be set to “Scale to screen size”. You need to match the canvas to the screen of every device that can run the app.
Set the reference resolution. This isn’t that important to us, but it does represent the ideal resolution of the device running the app. I always choose 2048×1536 as the default. This is the resolution of iPad Retina.
Turn the “Match” slider to 1 to adjust the height. By adjusting the height, for resolution devices, the screen height is always in 1536 units and only the width is changed. This is cool as it means you only must handle one-way scaling.

At this point, you only need to consider changing the screen width, as it always stays in the same place and has a canvas that has been scaled and simplified to fit the screen size.

Next, modify the previously created image to scale it to fit the canvas. Click the Anchor Preset button and select the Stretch Horizontal and Vertical options.

This sets the minimum X anchor to 0 and the maximum X anchor to 1, which is the same on the Y axis. The anchor is firmly fixed to the position and size of the canvas and adapts exactly to it. Set the left, right, top, and bottom fields to 0 so that there are no gaps between the left and right anchors.

The scaled example images would look like this:

Conclusion

This concludes the blog as we get to know what is Canvas and why is it used and how to use it. We have explored how to create a canvas in unity from UI, Scaling modes, anchors, and its presets. You should be able to use canvas in unity for your project as you have understood its functionality.

About CloudThat

CloudThat is also the official AWS (Amazon Web Services) Advanced Consulting Partner and Training partner and Microsoft gold partner, helping people develop knowledge of the cloud and help their businesses aim for higher goals using best in industry cloud computing practices and expertise. We are on a mission to build a robust cloud computing ecosystem by disseminating knowledge on technological intricacies within the cloud space. Our blogs, webinars, case studies, and white papers enable all the stakeholders in the cloud computing sphere.

Drop a query if you have any questions regarding Unity, Canvas and I will get back to you quickly.

To get started, go through our Consultancy page and Managed Services Package that is CloudThat’s offerings.