Welcome back fellow readers and programmers! This week’s blog is all about UI building and design. I’ll be discussing a game UI that I have been developing for one of my puzzles. So let’s get started….

I’m designing this UI for a puzzle that involves putting in a code to open a safe, normally this would be a pretty simple UI design as a keypad that the player enters the code into. In this case the UI is being designed for a dial style safe combination, which makes the UI a bit harder to design. While designing this UI I went through a couple of iterations getting to my final design. I knew that I wanted to include the dial being animated so that the player felt like they were more involved with the game but not make them have to actually find the number with the dial. This proved quite a challenging compromise.

There are three ways to implement a UI in Unity:

1. Using interactions with game objects.
2. Building the UI in the game space with a Canvas object
3. Building the UI with their UI Toolkit

I chose the third method because it seemed like the best, most player friendly option. It is also consequently the easiest to design with because it’s very similar to web design, using XML for layout and CSS style stylesheets. Their XML controls are able to manipulate game objects within the scene without being part of the scene itself. It can also be enables and disabled at will, with just a reference to the XML document.

So, the first design that I tried to build involved some sideways chevron arrows that sat on either side of the dial object. There would have been a double chevron that rotated the dial all the way around and a single chevron to go number by number. I decided against this design because it required giving the player explicit instructions on how the UI functions. This would’ve broken the players immersion into the game and made the puzzle a little confusing a long to solve.

My second design iteration involved three number displays with four buttons around them that changed the number on the display and when all three numbers were correct, the dial would animate like it was being opened. Two of the buttons had +/- 10 and the other two buttons had +/- 1. This proved to be a very confusing for a player. This one would also have needed explicit instructions and the dial would’ve animated after the all the number were correct.

My third and final iteration is something I saw in a different game that I thought was a great interface for this kind of UI and gives a bit of challenge for the player to figure out how it works, providing a better game and puzzle experience. The way this version works is that there are four number displays with four indicators below them, two rotation arrows on either side of the dial, and a back button so the player can go back and forth to look at the code. When the UI is enables, the left most number’s indicator is lit up to show that that’s the number they are changing. When they tap the left arrow, the first number will start changing and moving the dial at the same time, then if they press the other arrow, the indicator flips to the next number which starts at the previous number’s position and move the dial the other way. This pattern continues as you go down the line until the player finishes entering the final correct number. The arrows will also be able to be held down to move through number quickly.

As far as the backend goes, it’s a bit like JavaScript with JQuery meets Python or Ruby. It’s written in C# like all other Unity scripts so you can create classes/objects for the different UI element and each of the elements can be grabbed by reference using a query syntax after getting a reference to the UI documents rootVisualElement. For my control script, I made a class to encapsulate the display numbers and their indicators with some methods for manipulating them. In the main script that sits on the UI document object, one of those objects is created for each display number and then the buttons’ click events are ‘subscribed’ to methods that manipulate the display objects using their encapsulated methods. As of this writing I am still building the interaction backend.

Well that’s it for this week, keep your eyes peeled for my next post!

Greetings Readers!

Welcome to another exciting edition of Chronicles of Coding: The Good, The Bad, And The Buggy. In this week’s post I will be discussing the design of one of my puzzles that involves rotating pieces of a picture to make the picture look correct using buttons to rotate rows and columns independently.

The first step to this is finding a picture and getting it split into a grid. While this first step may seem a hard to figure out how to accomplish, there are a lot of websites that will do this for you for free (with/without a donation), I used Imagy. So, that takes care of the first step.

The next step is implementing the visual interface in Unity. There are a couple different ways to do this but I made a bunch of planes, set into a grid overlaying a wall. There are 12 planes acting as buttons to rotate the pieces in-place. Each of the picture planes will use the picture pieces as a material and when all the pieces reach (0, 0, 0) for their rotation, the puzzle will be solved.

The last step is scripting the interaction, this is where I can’t decide on which option to go with. The first option is to write two scripts, one for a left rotation, and one for a right rotation. This has the advantage of easily being able to tell a button what objects it can rotate which way. They would both have variables for their controlled objects and an interact method that rotates those objects by 90^o. The downside is that I could very easily make the mistake of adding the wrong objects to some button’s script. There is also the question of getting multiple objects to rotate at the same time, which could be difficult given that the method can only act on one object at a time. This could cause a domino effect instead of simultaneous movement. Another option is to write a script for each picture piece and attach that script to the rotate button. This could give me the simultaneous movement I’m after, but it would get pretty confusing having three very similar scripts attached to an object.

The third and potentially best option is to use scriptable objects. This could potentially give me the simultaneous movement I’m after and I would only need one script for each picture panel piece and one script for each button. The methods for turning would be kept within the scriptable object and the picture panel piece would be subscribed to these scriptable objects, so when the button is clicked all the panels subscribed to that scriptable object will react at the same time. Essentially, the button sends the turn signal to a scriptable object -> the object reacts to the input and sends the correct signal to turn the panel -> every panel subscribed to this object reacts at the same time and rotates. I think this is my best option.

Puzzle Mechanics can sometimes be difficult to develop but they can also be fun to think about.

Keep your eyes peeled for my next post!

Welcome back readers!

This week I’ve officially started my new team project……A 3D Escape Room Game! The theme is going to be four horseman of the apocalypse and I get to design the famine room! As most of us probably know, the first step in any new software development project is the design step, which is what this week’s blog just happens to be about.

Design can be thought of in two parts for software development:

1. The back-end – how the software will use and store its data
2. The front-end – what your users see and interact with

Both parts of the design need to work in harmony, especially in a video game. For this project we also have a third kind of design to worry about, puzzle design. This week we are all working on visual and puzzle design of our various rooms. So, let me talk a little about the design I’m working on.

For my famine themed room, the overall design will be a kitchen. I got the idea to use a kitchen from my lovely wife when I was stuck trying to come up with a design theme and thought that it was brilliant, so I went with it. As a side note, always listen to your significant other. The hard thing now is coming up with puzzles that use the theme. I thought of one involving a hidden safe in the freezer that gets revealed by another puzzle. The clues need to be somewhat obvious so that the player doesn’t get stuck yet hidden enough to be a challenge or it’s boring. Another puzzle I thought of involves using the decorations around the room to find specific hidden objects, but it might be a bit too cryptic. So far, this project has reinforced that video game design is kind of hard and a big balancing act.

That’s all for this week, stay tuned for my next post!

Hello readers and fellow programmers!

This is the first post of my tech blog chronicling my journey through a new software development project. I’ll start off this blog by talking about my personal journey getting to this point in my life. First, a little history about me.

I have a degree in Chemical Engineering from N.M.T. (New Mexico Tech) which I first used to get a job in the budding cannabis industry (see what I did there) in New Mexico where I grew up. A year later, I had the opportunity to work as a chemist in a QC laboratory for a metal powder manufacturing company. While at this job I completed a programming project to automate some calculations in an excel spreadsheet using visual basic for applications (VBA). This is what got me interested in changing my career to become a software developer.

After writing that script I began learning how to write Python code in my spare time through an online program. This led me to look for online university programs to get a second degree in computer science in order to eventually get a job in the software development industry at the suggestion of my wonderful wife. I eventually settled on O.S.U.’s (Oregon State University) post-baccalaureate program, which I will proudly finish by the end of this year. I recently started working full time as a software developer for MineralWare while finishing my degree in my spare time. This project I’m about to embark on is my final team project and I’ll be sharing the experience with all of my readers!

Be sure to keep your eyes peeled for my next post!