Last time my friend

in his article explained the ins and outs of graphics exporting that is both lean and versatile. You can get smaller graphics size footprint and at the same time use the same exports to create differently sized and laid out popup views.

Things started out great. Your graphic designer has created a visual preview of the popup and made lightweight exports. But how do you, as a developer, get from those exports to fully prepared view in Unity?

Preparing your project

First things first. Create a new project (or use ours on GitHub) then grab all those exports and shove it right into your project Assets. You can folderize them if you want, for sanity reasons (sanity is highly recommended). Once inside the Assets folder, they can be used anywhere in Unity.

For the purpose of this tutorial let’s set the game viewport to handle resolution of 1920x1080. We’ll be using Unity’s UI components with auto layout based on anchor points which will define views’ size in percentage of parent’s size. If it seems confusing right now, bare with me — everything will soon become much clearer.

Canvas and basic game object hierarchy

Let’s create the base of every UI interface in Unity. It’s necessary to add a root Canvas object for the Unity Engine to render UI elements properly. If there is no Canvas in Hierarchy and you create any UI element, the Canvas will be created automatically for you.

In the project Hierarchy (which describes a parent-child relationship between GameObjects e.g. “Background” is the child of “Sticker popup”) right click and find your Canvas (UI -> Canvas). Once again, right click on Canvas and choose “Create empty” which places an empty GameObject acting as your popup container. Continue creating empty game objects in proper places and rename them accordingly until your Hierarchy looks like this (don’t worry about “Faces cells” for now):

You could ask, why is it this way, and your question would be valid. Let me explain — we are going to divide the popup into parts.

As a reminder, this is a preview of the popup we want to create:

Zoom image will be displayed

The first part is the background which takes up the whole popup space and underlays all other graphics that we will put on top of it. Left panel will contain “Sticker customization” logo, the Sticker Man, his name and three buttons underneath. The right part will contain mouth cells. Creating proper hierarchy makes it easier to size and position containing views (once again, sanity — very important).

Let’s make something happen.

Firstly choose “Sticker popup” in Hierarchy and in its Rect Transform set values this way:

This means that Sticker popup will take up 0.8 (80%) of width and height of parent’s view (which in this case means whole game screen) — from 0.1 to 0.9 in both X and Y axis.

“Background” will take up the whole popup space, so its anchor point values in Rect Transform will look like this:

Using lean exports with 9-slicing

We want the background to use 9-slicing in order for its graphic to display correctly — no matter the sizing. If you are not sure what 9-slicing means, make sure to check out our recent article.

Choose “popup_background” from Assets and in Inspector click Sprite Editor button.

In Sprite Editor drag slice handles to this effect and click on Apply button:

Zoom image will be displayed

Congratulations! You now have a sliced graphic ready to use in your future popup. So let’s use it. Click on “Background” in Hierarchy and add Image component to it (Add component -> UI -> Image) then drag “popup_background” image from Assets to Image component’s Source image, or click on the circle with a dot inside (as seen below) and select the backgound sprite from the list. Make sure the Image Type is set to Sliced and Fill Center is selected. Voila!

Left panel will be roughly 1/3 of the popup width. Eyeballing sizes at this point is totally okay — you will probably need to adjust sizes and anchors later at the ‘polishing stage’, right now we are just starting to lay things out. Here’s how the Rect Transform could look like for the Left panel:

Next in the line is the “Popup logo”. Add Image and again, using guesstimation setup the anchor points. Mine look like this:

Again for the “Sticker Man”:

As you can see in Hierarchy, “Mouth” is inside “Sticker Man”, and its anchors are therefore relative to the size of “Sticker Man”.

In “FaceName” we have a different case. There are two lines and a label. Let’s use Unity’s Horizontal Layout Group to help us with positioning those things. “FaceName” container in this case can stretch at full width and be anchored exactly at one point vertically in parent’s space. Which means its height will not change and you have to enter its height by yourself. Let’s use 50 for height. Additionally, add Horizontal Layout Group (Add Component -> Layout -> Horizontal Layout Group) and set it all up like this:

“FaceNameLabel” will contain a UI Text (Add Component -> UI -> Text) and both lines will use “line” graphic with Layout Element component (Add Component -> Layout -> Layout element) with Min Width of for example 35. Please note that “Face Name’s” Horizontal layout group controls its children’s width, and in “Line” we are only setting minimum width that will satisfy us, which means that in some cases “Line” could be wider.

Next up is “Buttons”, and here we have a similar case. We will use Horizontal Layout Group in “Buttons” container.

Every button will have Image and Button components:

Make sure you slice all three button images for them to stretch properly. Here is an example of “button_1" 9-slice:

Zoom image will be displayed

The effect so far

If you set everything up properly you should see in the Scene view a popup with the left panel laid out.

Zoom image will be displayed

Conclusion

As you can see, it’s easy to lay out your popup. We’ve been mostly fiddling with custom sizing and anchoring, which is powerful by itself, but Unity provides components which can make setting up your view even easier. For the record: I have shown you only one way to position the views. Feel free to experiment and to create different hierarchy and groups. You could, for example, use Vertical Layout Group to automatically lay out “Logo”, “Sticker Man”, “Name label” and “Buttons”, or not use any Layout group at all.

What next?

In the next post we will continue with “Sticker Cells”, you will learn how to create Grid Layout, use the power of Prefabs to fill those cells with data and handle taps / clicks to customize your “Sticker Man” with a mouth you like the most!

Don’t forget to tap and hold 👏 and to follow DaftMobile Blog (just press “Follow” button below)! You can also find us on Facebook and Twitter.