Making FoxStar for Jam Game

Play FoxStar

Making FoxStar

I decided to take part in one of the game jams on itch.io. Jam Game – The Backwards Game Jam’s theme was really inspiring for me, take the title of an existing game and invert it to create a new title as a starting point for the game you want to create.

The first thing I did was create a short list of games and their potential inverted titles.

• Alan Wake – Wake Alan
• Tom Clancy’s Ghost Recon – Clancy’s Recon Ghost Tom
• Sleeping Dogs – Dogs Sleeping
• Watch Dogs – Dogs Watch
• Dragon Age – Age Dragon
• Fallout – Outfall
• Star Fox – Fox Star

I looked to see what other people were creating to try to make sure I was not treading the same ground, and narrowed my selection to two.

Clancy’s Recon Ghost Tom – This game would involve a ghost called Tom who would use his ghost abilities to run reconnaissance missions for his friend Clancy.

FoxStar – A game involving creating constellations in the shape of fox faces.

The problem with Clancy’s Recon Ghost Tom was I was not sure what the mechanics of the game would be and exactly what it was that the Ghost Tom was searching for. FoxStar to me seemed to have a clearer player goal, and an interesting learning curve where large constellations would be easier to create but take up more space, and smaller one’s harder but take up less space. Allowing the user to potentially find more constellations.

Rough Sketches

One of the first things I had to determine was what sort of shape would I want the player to create and how would I get the system to understand if it was right or wrong. I spent a little time doodling fox faces of different shapes with different number of points to get a feeling of both what looked pleasing and would be distinguishable.

Sketching with Code

The next step was to create open sketches in code. I’ve recently been learning HTML5 and javascript so I started to implement it in that. I set up a number of parameters to determine what was a fox, to do this a had to normalise the image for each of the seven points.

The steps to normalise are:

• Find the starting point
• Label the points from 0-6
• Find the centre of all seven points.
• Find the angle between the current starting point (point [0])
• Rotate all the points this angle around point [0], such that point [0] and the centre point are aligned vertically.

The steps to check the shape:

• Check the tips of the ears, point [2] and point[5] are the highest two points.
• Check point [1], [2], and [3] are on the left of the centre point and points [4], [5], and [6] are on the right.
• Check points [3] and [4] are higher than points [1] and [6].
• Check the proportions between points on the left are within a suitable tolerance of those on the right.
• Check the ratio of the height of the constellation to the width of the constellation.
• Check that the ears are not too long relative to the face.
• Check that the ears are not too short relative to the face.
• Check that no points from other fox faces are within this fox face.

Once I was happy with this I moved to the next step.

Moving to Stars

I randomly generated stars by giving each a random x and y coordinate within the image. The pointed for the game would snap to the nearest star and these reference points would be sent to make up the constellation as before.

I found that I had to adjust a number of the parameters for accuracy to allow for the fact that the points that would make up the constellation could not be drawn exactly as wished. This made it easier for players to create correct constellations.

Drawing the Foxes Face

To draw the foxes face I used quadratic Bezier curves using the existing points, the centre point. The dark ear patches used the tips of the ears as the centre of the curve, and the lighter cheeks used the centre point as the centre.

I decided to widen the points for the bottom of the nose so that it would have thickness rather than just ending in a line. This additional point is at 1/10^th the distance between the nose point [0] and the cheeks point [1] and the same for point [6].

The eyes required additional points to be added as well. First the half-way point between the centre and the cheeks was found. Then from this new point an additional point for each eye was found by moving it 1/3^rd of the way to the nose.

An Interesting Bug

Whilst testing the code I found that small constellations were still not registering as suitable constellations despite loosening the parameters. After a little searching through the code I found that it was to do with the order the points were sent to the array. If I constructed the constellation clockwise points [1], [2] and [3] would be on the left, but if I constructed it anticlockwise they would be on the right, failing one of the checks. Strangely enough this showed me when drawing large constellations I drew them clockwise and small constellations I drew anticlockwise. This is something I do not think I would have noticed if not for this bug.

Allowing for Corrections

I implemented some code that allowed existing constellations, which did not match the criteria, to be adjusted. This would allow player to learn the type of shape required. The only minor issue is that it reduces the challenge, in that even if you go wrong you can correct yourself. I am still not 100% if this was the right decision.

Issues with Frame Rate

In the initial design each point of a successfully completed constellation would be a rotating star, just like the pointer. However, as you start to draw more constellations the frame rate dropped dramatically. This is likely due to the way I drew and updated them, something which could be solve most likely, but I removed the effect to keep a reasonable from rate with a large number of foxes.

Little Touches

Once I got the mechanics for the game working reasonably and the frame rate relatively consistent, I started to add some additional touches. The title bar and the text hints at the bottom were first. This would provide hints and instructions to the player based on what they are currently doing and if necessary at which check point for the constellation they failed at.

 

Next I made the fox faces blink when you place the cursor over them and gave them a light spot in their eyes that followed the currently selected star. This just gave them a little more dynamism.

The final touch was to add a meteor shower when the game was reset or when a fox face constellation was successfully found.

Some After Thoughts

Whilst designing the game I considered implementing a limited time span in which the player would have to find as many constellations as possible. I decided against doing so because it would remove the experience from that of stargazing, which is not a rushed activity.

The other aspect I considered was a points system, the less corrections it took to create a suitable constellation the more points the player would receive. Again this seemed to go against the theme of stargazing.

I am unsure whether the experience lacks something because these features were not implemented, or perhaps this just is not that kind of game. Overall I am pretty pleased with how it worked out.

Play FoxStar