Odd Jobs Devblog #7 – Learning New Skills

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.

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!