Juniper Town Game Capstone - Design Iterations

•

Juniper Town Game Capstone

Design Iterations

This game is being created based on a project I previously completed called City Clicker, which I consider to be the prototype of Juniper Town. I decided to take the prototype City Clicker and turn it into a mobile game for my capstone project at Bloomfield College. In this Behance project I will be showing the different iterations of the design process from start to finish through screenshots and animated GIFs as well as an explanation for each step.

Enjoy!

This first screenshot is the very first version of Juniper Town, completed in the 1st week, the start of milestone 1. This version is using almost entirely the old assets from City Clicker, the big changes here are that the orientation is changed to portrait and the new layout reflects this with a long side-scrolling environment. In this iteration I added a camera that can scroll left and right, and added the two resources into the game using the buttons at the bottom of the screen and the UI at the top of the screen. At this stage, the player can press both buttons to add money or wood to their totals which count up.

This next version jumps ahead to version 3, completed after the 3rd week. Version 2 was omitted because it didn't not have any visual changes from the first version, just additional coding changes. In version 3 the map has been expanded to be roughly 3 times as long, new structures to buy have also been added using the old City Clicker art assets. In this screen you can see the icons above all the structures to show that they were able to be bought and built during this stage. The only new art in this version is a well that is about in the middle of the layout. So to summarize this iteration, it was basically just expanding on what I created in the past weeks to allow the play to use the already existing mechanics more times on a bigger layout.

This is version 4 of Juniper Town, completed after the 4th week, marking the end of Milestone 1. The goals for milestone 1 were to convert the already existing mechanics from City Clicker to work on a touch screen device, implement all old art assets, make working buttons with variables, implement a smooth camera scroll, and lastly implement the pings for things like citizen/environment interaction. This iteration tied up all those things and completed all tasks that needed to be done up until this point.

This is version 5 of the game, completed after the 5th week, the beginning of milestone 2. For this iteration I started on my goal to completely overhaul the old art assets and update them with a more details style of pixel art. I updated most things currently on the map in this version but I also added some new art to the game as well. In this version we see the introduction of the school house on the left, the library in the middle, and the river+bridge on the right.

This is version 6 of the game, completed after the 6th week of development. In this version I finished updating all the old art and added many more new structures, as well as expanded the map even further past the river. With the map doubling in length, I needed new art to go on the empty plots around the layout. I drew the following animated structures: A farm with a running tractor and crops that sway in the breeze, a windmill with spinning blades, and several new residential houses with smoke billowing from the chimneys.

This is version 8 of Juniper Town, completed after the 8th week, marking the end of milestone 2. (The 7th version being skipped because of the lack of visual differences between the version.) In this iteration I completely filled out the rest of the layout with new art, I added more pings to go around the town, and I started work on a brand new mechanic. The new animated structures I added to the game include: A forest with trees that sway in the breeze, a blacksmith with a lit forge and smoke, and lastly a quarry with rope being lowered by a machine. The new mechanic I start working on from this point forward is journals! Journals are something that will appear around the layout once the player has done certain things like talking with the citizens, the journals will provide a little bit of information about their owner when recovered. The goals for milestone 2 were to make brand new structures, finish updating the old art assets, make an animation to go along with building a structure, extend the layout, and begin the journal mechanic process.

This is version 9 of the game, completed after the 9th week of development, the start of milestone 3. One of the big things I added in this iteration was a title screen with background and title art, animated clouds, trees, and grass, as well as 3 buttons. In the layout of the game itself on the right, the screenshot shows all the working icons that are displayed in front of each structure as well as the speech bubbles I was working on at this point. One of the other major things I worked on for this version was the ability to speak to the citizens. Each citizen had an introduction phrase that they will say if it is the first time the player is interacting with them, after that the things they have to say will be pulled from a pool of phrases I made. The pool of options for each person is slightly different though, they have a few phrases each that are unique to them mixed with around 15 general phrases that anyone can say.

This is version 10 of the game, completed after the 10th week. This iteration screenshot is a little different, it is focusing specifically on the biggest feature I got done for this version: An in-game menu! It has 4 buttons, 3 of which at this point are working, which are used to save, load, and go back to the game. The menu also has a toggle for sound at the top, showing on or off using a check mark. The assets for the menu were in the works for a bit before this but the menu only became functional in this version, being able to pause all happenings in the background while the menu is up. The first button for journals is not yet working in this version, because the journal menu is not complete.

This is version 11 of the game, completed after the 11th week. The animated GIF for this version is also a little different because it is focusing on the journal menu which is the main aspect that I worked on for this week of development. It has arrows on the bottom of the screen for turning the pages of the menu left and right, and each citizen has an entry in the menu which is greyed out if the player has not interacted with them yet. Once the player has seen a given citizen's introduction, their sprite will have full opacity and the correct name will be displayed above them. Most importantly though, there are two journal sprites next to each citizen that represent the two pages there are per citizen to collect for the player. They will also start greyed out with no interactions, but once the player has found a journal in the game and read it, that particular journal will then appear in the menu in full color and able to be tapped. When the player interacts with a journal icon in the menu that has been found, the page will come up again so the player is able to go back and read any entry whenever they would like.

This is version 12 of Juniper Town, completed after the 12th week, marking the end of Milestone 3. This screenshot shows two parts of the town during two different times, this is to highlight the biggest feature I added for this version: A day / night cycle! I decided I wanted to expand on the game a little bit more for the last milestone so I started work on a day night cycle and got a working prototype of it ready for the presentation for milestone 3. The cycle is a few minutes long and currently doesn't affect the citizens in the town or any of the structures, it is just an aesthetic change as the sky fades to orange then dark blue, stars come out, and the town becomes dark while it is night time. This process then runs in reverse when it is time to switch back to day time.

This is version 14 of the game, completed after the 14th week, marking the beginning of milestone 4. This GIF shows the game during the middle of the night, with functional changes after the addition of the day/night cycle from version 12. Since the previous changes were mostly cosmetic, this version update focused more on the game play differences between day and night. For this build I added lighting via fireflies, citizen schedules, production buildings closing during the night, and I added a new animation to each building to show dark or lit up windows for the night. I also made new sprite variations to residential homes so that it was not just repeatedly the same house just with a different roof color. lastly, I made a new interactive object in the game, a sandbox near the school, which allows the player to tap in order to build a sand castle.

This is version 15 of the game, completed after the 15th week of development. For this iteration the main focus of this update was beginning to form the tutorial. I added a local storage item that would be used to detect if it was the player's first time playing, and I began writing out the dialogue that the tutorial would go through. I also added another interactive object, the fire hydrant, which sprays water and makes a splashing sound when it is tapped by the player. Lastly, I updated almost all the icons in the game, including the buy/smaller buy icon, the wood icon, and the wood button.

This is version 16 of Juniper Town, completed after the 16th week, marking the end of milestone 4 and the first semester of development. For this iteration I made a lot of changes as this was the last milestone of the first semester. First I finished the tutorial, it walks the player through earning both types of resources (coins and wood), buying their first building, talking to citizens, and horizontal scrolling. Once it has been completed the player will no longer be prompted to do the tutorial upon beginning to play. The other main feature that I added was automatic saving and loading. The game saves as you play, and will automatically load a save file if there is one upon pressing play on the main menu. Another big thing I added was that the player was able to trigger the win state, previously I had an idea and some assets dedicated to the win state but the functionality was not done. Some other changes I added were a complete in-game options menu, the full main menu with options and credits, and I switched the location of journals to be their own icon at the bottom left. The in-game options menu was also renovated, it now includes icons which are links to two social media pages (Twitter & Facebook), an icon that is a link to a google form that I created in order to collect feedback, a sound check box, and lastly a button to return to the main menu.

After the first semester of development, Juniper Town was in the polish phase. All that I had left to do for the coming weeks was fix little things, look for bugs, continue to play test, and get everything running smoothly. In that time I got the game polished to a place where I was happy with it and I maintained the Juniper Town Twitter and continued to accumulate followers. I also worked on a free demo that is available on Itch.io which lets the player explore some of the first half of the town layout, then I worked on learning how to export the game for Android. Another part of this project that I got done during the second semester of development is that I made a short trailer showing some of the game's features, as well as advertising the release date, platforms, and social media.

The video is embedded here:

Finally, I can say that the game has come a long way, but it is now complete! That isn't to say I won't keep working on it though, I will keep a look out for bugs reported using Google Play as well as people's responses on my feedback form. I currently have in the works the mobile-compatible HTML5 version of Juniper Town, which will go up on Itch.io for the same price that it is on Google Play, so that people without Android phones who are interested in playing the full Juniper Town game can still do so!