At a Glance

Life forced a slow down on my quest to create a game but I have not stopped. I learned a new skill this past month, UI Crafting. It turned out my dev experience with WinForms helped after all these years. I created a few pages to track the Resources I collect along the way. Check out my newly minted Tips & Tricks page, and coming soon a Learning page. Keep on questing!

Trying to Stay Relative

In devblog #6 I showed the following UI mockup.

Odd Jobs UI Mockup

When I started down this path I wanted to keep things simple so my UI adhered to the following guidelines.

  • Landscape orientation
  • 16:9 aspect ratio
  • Limit resolutions to 1920×1080; 1600×900; 1280×720
  • Computer monitor optimized (no phone or tablet displays)

These requirements managed my scope and worked well enough to guide my subquest. If need be, I could always add aspect ratios and resolutions in the future. At this point I ran into my first hurdle to overcome, UI scaling. I created the character panel, the purple area in the images below, and scaled it to fill 20% of the vertical size and 100% horizontally. Everything’s tracked so far. Then I added a character portrait sized at 128×128 pixels and it looked great on the 1920×1080 screen (left image). When I changed the resolution to the 16:9 scale (right image), which if you aren’t familiar will resize the screen to the closest 16:9 resolution that fits within the Game area. I discovered UI Crafting and that I needed to level it up.

Well after some research I found that Einstein was correct, everything is relative. I overcame my first hurdle by making the character portrait a child of the character panel, which solved some of the scaling problems. After that I dug into the RectTransform component used on all UI elements. I read the manual (RectTransform and Basic Layout) and watched a video or seven before I sat down and messed around with the component. I made the connection between the Unity UI and WinForms, and while they aren’t a perfect match they are close enough for me to move forward.

Relativity was my trick, well that and maths. I wanted the character portraits to scale with the panel so I had to account for the panel in my maths. After a bit of experimentation I discovered the following formulas.

For a more practical example, I have the darker purple section (aka character panel) which contains 6 character slots and 1 common action section. I set the character panel height at 20% of the screen height and the width at 100% of the screen width. I want the first character slot positioned at 208, 72 from the lower-left of the screen to the lower left of the character slot. I plug those values into my formula and get my answers.

TIP: You can enter math formulas directly into any int or float text box in the editor. See Unity’s Math Calculations in Number Fields – Unity Tips video.

Once I set the anchors min/max values, I updated the Left, Right, Top, and Bottom to zero, which made the character slot fit exactly within the defined anchor areas.

From here I positioned the rest of the character slots and the common action section and tested it on multiple 16:9 resolutions. Just like that I leveled up my skill in Unity UI Crafting.

Expansion! Resources Added

While on my travels, I often encounter tips, tricks, blogs, books, courses, and numerous other helpful resources. I decided to create some pages on my blog to track these items. I added the Resources menu which includes a Tips & Tricks page and coming soon I’ll add a Learning page. Often the tips and tricks I gathered originated from someone else, so I provided a link to the original resource and a only a brief description of the item.

The Learning page will include any courses I take or books I read to help me advance my skills. I hope create my own tutorials and add them as a resource.

Keep on Questing

Life promises to keep me busy in the coming weeks (i.e., cleaning glue from my concrete floor in my kitchen so we can install a new floor), however, I will continue my quest. I plan to write at least twice a month and work my way back to every week. For the next devblog I plan to have the basic UI completed with the action buttons/bars and the minimap/world map displays. If I get lucky I might have some mockup art from my wife. Fingers crossed.

Keep on questing!


    • I finally got a chance to read up and mess around with the canvas scaler component. Wow, that solves my problem so much better. Before I had to lock my game to a 16:9 aspect ratio else the graphics would distort. Now, I have it so that I can smoothly switch between 16:9, 5:4, 4:3, or 3:2 (I imagine more as well but those are the ones I tested with). Thanks for the tip!

      This leads me to another point to research, the layout works for a landscape display but when I switch to portrait it crowds in on itself. This isn’t an issue for me right now as I plan to keep the game on the desktop and in landscape mode, however, in the future I would like to figure out how to cleaning switch between landscape and portrait modes. That’ll be useful for mobile game dev.

      Liked by 1 person

      • I’m glad I could help 🙂

        I just pondered about the landscape / portrait UI orientation at work the other day, should really investigate it as it can be a crucial piece in mobile development. I’ll let you know if I find something useful once I start studying it more closely.

        Liked by 1 person

Send a Missive

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.