Comments Comments Comments

For those that don’t know, in programing comments are a piece of text that is ignored when the program is run (had to rewrite that about 3 times to avoid using words like “compiler”. If you don’t know what a comment is, a compiler would just confuse you more.). Now you might think: Why write stuff that just gets ignored? Two reasons, both very simple. The first is that you might temporarily comment out a piece of code so that it stops running, useful when you want to disable something without deleting it. And the second reason is: documentation.

Now I am a one man development team, that means I have written all the code (except the base systems unity provides) that goes into my game. As such, I can remember why I wrote a piece of code a specific way fairly easily, taking only a minute or two to re-read a few of the functions. This however means I am a bit… lazy when it comes to adding comments about what things do.

Now I could make excuses about the process being iterative and not wanting to write out an explanation for a line of code that is likely to either change or go away. But the truth is that during the coding process I just forget to write the comments and after I get it working I just move on to the next thing.

That brings us to the solutions for this. The first immediate one is that every now and then I go back in and add comments to my code. A long annoying process that will have to do until I can develop the habit of commenting as I go. The other solution is having other people to work with that can and will look over my code. I know myself, doing something for myself? Sloppy and it just needs to work. Doing something for someone else? Detail oriented, dotting my i’s and crossing my t’s. That extra pair of eyes will force me to develop the good habit of commenting as I go. But that is not going to be a quick process, so for now? Back to adding comments to everything… all at once.

Text and the Importance of Font

Something I have known I would need to do, but had been putting off, is to find a new font for my game’s text. I had for most of the development been using a “default” font that came with Unity, perfectly functional and great for experimenting with to learn the ins and outs of TextMeshPro… but that is the only good thing I could say about it. It wasn’t an interesting text.

The first step is one I didn’t consider until I started getting into it: What fonts can I legally use? After some digging I found a few sites that listed if the font was free for commercial use. But digging around a bit more I found what should have been obvious: Google has a repository of free fonts submitted by various people. So that is the source of my font settled, but there is another problem.

But, when it comes to picking artistic styles and the such I don’t have much confidence. As such I asked for some advice on fonts I should use… and got instruction on how many fonts I should grab. And so I sought out 2-3 fonts. The minimum being 2 fonts, one for the buttons (aka the text that the player will directly interact with) and another for instructional text (aka the text that just sits on screen giving information), with an optional third for titles and such. At first I was given to sets of paired fonts to try out, but most of those fonts had hidden issues that made them unsuitable for my game (mostly in the size of line breaks).

These initial text suggestions focused on readability and a “futuristic” feel. But once I started exploring Google’s repository I found another style I was drawn to. A more flowing style that gave a “fantasy” feel. I felt that fit better with the theme of a night sky I had created with the stars. But a new problem arose… this text sacrificed readability for a fancier form. But no problem cannot be overcome. This initial font I found would become my title font and I found two more similar, but much more readable, fonts for both the buttons and instructional text.

Adding Theme and Stars

For most of the development of my game I have specifically avoided theming any element of the game, focusing instead on purely mechanical elements. Basic button images, abstract shapes for icons and simple monochrome colored backgrounds. As development progressed I eventually shifted into trying to make the elements look better of course. Adding a simple gradient to the background, having the background color react to the game state, and custom (if simple) images for the buttons.

But more recently I have decided to try and start actually incorporating a theme into the visuals. First step: What theme should I go with?

If you read the title you probably know what I went with, but let me tell you the process. Firstly I have been using a temp name for the title in the main menu of “Sky Lights” as such I have always had a bit of a star/space theme in the back of my mind. But when I was first making the game the ideas of a circuit board or even magic scrolls where also present as theming ideas. However, in the intervening time I have taken to using transparency as a big motif in the images I use for the game, and so the idea of putting a shifting star field behind everything captured my imagination.

So, step 2. I have decided on the theming and the first element I was going to add. Now comes my favorite part: implementation. First was to make 3 “star fields”. This was a simple, if tedious, process. I don’t have a good graphics editing program (or looked into free options yet) but have found that PowerPoint makes a good fall back for quick prototyping of simple shape designs. A few tweaks to object settings latter and I had a “star” to copy around a space. A giant transparent box behind everything to set boarders and I just needed to arrange the stars. 3 patterns made I whipped up a script to cycle through them at random via random intervals (fade in/out times and time sitting on one image randomized each cycle). It looked nice, but I had a few ideas to improve it.

Idea one, instead of one big “Field” behind everything I would have 5 “Fields”, one in each corner for the main stars and one big one for extra stars. At first I tried making the corner “Fields” overlap slightly so that it wouldn’t be as obvious that there were 4 distinct quadrants, but quickly discarded that idea when the overlapping areas got overcrowded and actually drew more attention to that.

And so I moved onto idea two: Rather than having 3 big “star fields” to cycle through I would have 3 sets of 3 smaller “star fields” each set to its own cycle rate. Trying it out I loved the effect. Theoretically I would want each “star field” to only be one star and have something like 16-22 sets per corner… but that feels like extreme overkill.

Idea 3, because yes we aren’t done yet, was fairly simple: vary the size of the stars. This is where the 5th “Field” comes in, it includes smaller stars, a few normal size stars, and one collection of larger stars. The smaller and normal stars are on a normal cycle and exists mostly to hide the “line” between the 4 corner “Fields”. The large stars originally also cycled through a set of 3, but after talking with some people one thought changed this idea: “Larger stars wouldn’t completely disappear while smaller stars were still visible”. So I set a single large star set to simply flicker (going to a low opacity rather than a 0% opacity and then back to 100% opacity) and it looked good. I latter cut that single image into 3 images to put the flickers on different cycles.

Buttons and UI layout

So most of the game has been designed and is working, what comes next? Making it look good… and making the UI make sense.

At first I just put buttons in as I needed them. Need a restart button? Here’s one. Need a stats screen? Here is a button to bring it in from off screen. Need a hint button? Getting a bit cramped but I can fit that. As you can imagine this did not look “good”. Functional, but not good.

So I did a pass to see what was actually needed. Obviously the main menu button and main control buttons (restart, hints, new puzzle for randomized) all needed to be visible all the time. But a few buttons could be hidden, such as the level select buttons and the custom difficulty select, when not in use. I also came to the decision that the hint button should be disabled after the player starts the game, since with player input the hints might no longer be relevant. As such I had the hint and restart buttons overlap with only one of them active and visible at a time (saving some screen space).

Back on the main menu it now starts with a selection for what kind of puzzle you want (classic, match, or “experimental” (still need a better name for that one)) and then slides in new options for if you want levels, random, or to go back and pick a new puzzle type.

While I am still deciding what the buttons are to look like, I am happy with the layout I have now created.

So, Where am I?

Been a while since I last posted about my game. As such this post will be a catch up that assumes you have read none of my previous posts about my game.

So, what game am I making? I am making my take on a classic game: Lights Out. In the game you have a 5X5 grid of lights with some number of those lights turned on. Your objective is to turn them all off (as the name suggests), the cavate is that if you press one of the lights the lights adjacent to it also toggle on/off. This creates a puzzle for the player to solve. It took me a bit to figure out the background logistics of how to make this work in Unity (that “Right way to do it” mind set I had getting in the way here and there) but eventually I got the basic game working.

That is when I started making my takes on the game. The first alt version I call match pattern. In this mode rather than trying to turn out all the lights you are trying to match a given pattern of lights. The second alt version adds a different dimension. In the basic and match pattern game the lights only have an on and off state, in this new version the lights have an off and 3 on modes with the objective still being to turn them all off.

So far we have 3 versions of this puzzle game, but where are the puzzles? Now, I could (and sometimes do) hand make these puzzles, but instead I created a program to create these puzzles for me, basically by working backwards. The program starts with a blank grid (or a completely randomized one if creating a match pattern) and simulating moves until it reaches the number of target moves desired. Using this I both created 100+ puzzles to progress through for each mode and a randomized version for each mode.

Since creating all of this I played with creating a tutorial (but have currently put it on the back burner as the game feels self explanatory enough) and several passes on the UI elements. Now I am working on the visual design and figuring out how to get the game published to the Apple and Android stores (and pc if it is viable).