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.