With the rise of the mobile market, 2D games have become more popular than ever. Titles ranging from the casual side of Candy Crush to the esport of Hearthstone. There’s no denying that 2D games are still popular. As such Unity developers have adapted their engine to smooth the process of making 2D games in their engine. What follows is an analysis of Unity2D’s RectTransform.

Engines, how do they work?

When making 3D games, the gamespace is a three dimensional space (obvious, right?) but not quite. It’s actually lots of three dimensional spaces – each object in the game space has it’s own coordinate system of which it is at the center, this objects children have coordinates in their parents coordinate system. This lets you move an object (a car say) in a direction and all of it’s children (doors, wheels etc. ) stay in the same place with respect to the parent.

This already poses a serious problem to those making games. It needs to be displayed on a 2D screen. They way we solve this is to pick a viewpoint – this is the eye or the camera of the game. It takes everything it sees and applies a matrix transformation to bring all of the objects into the root coordinate system or gamespace, now it can generate perspective on it’s 2D rendering of the gamespace.

When it comes to 2D games this process is much simpler, the root gamespace is simply the screen area, there’s no need for a camera and there’s no need for any fancy perspective. Things are the size they are and that’s that. We still have child and parent coordinate systems as it’s still useful for moving groups of objects – but because we don’t have perspective we can use the width and height of objects in the pixel dimensions on the screen. In addition it makes sense for parent object to take the bounds of their children as all of the display objects have a position, width and height and will be displayed of a quad (rectangle) of the same size. The position, width and height of this quad is useful and easily calculable.

In Unity2D the engine still assumes perspective, as Unity2D is a cross-section of their 3D ¬†engine. There are many tools that the Unity team has developed to ease the process of making 2D games, however there are some pitfalls that I’ve found.

Scrolling Example

Say you wanted to make a list in your game, It might be a leaderboard or a settings menu. In this example we’ll use a settings menu. In an explicit 2D engine this would be as simple of adding each setting in turn to the parent scrolling panel and setting the y coordinate of that setting to be equal to the current height of the scrolling panel. This ensures that each child has enough space to be completely visible without overlapping whatever the size of the child. This is because the parent’s height takes into account it’s children’s height.

In Unity2D the parent’s height does not reflect the height of it’s children. Therefore this method becomes far more difficult, especially when, in our settings menu, each child (option) may contain a name, a slider, a checkbox. Unity’s solution to this is to use a combination of the VerticalLayoutGroup, ContentSizeFitter and LayoutElement. While this works well for lists of objects about which the size is known, it breaks down if things start to change size. Essentially what this solution requires is a knowledge of the dimensions of all the settings menu options beforehand.

In my game I made sure my options had plenty of space, such that each option would be the same size. But I’ve yet to find a solution that I like as much as the explicit 2D solution. If you’ve found one, let me know.

Published by


Game Developer.

Leave a Reply