★ TouchArcade is in READ ONLY mode this weekend while we upgrade. Please support us on Patreon.

[Beta][DevLog] Steampunk Panic - Fast-paced reaction speed game by Eat the Moon

01-08-2018, 09:30 PM
#1
Joined: Jul 2017
Location: Washington, USA
Posts: 135
[Beta][DevLog] Steampunk Panic - Fast-paced reaction speed game by Eat the Moon

Hi TouchArcade!

I'm the developer for Eat the Moon, the studio that created the strategic idler with map exploration, Idle Realm (iOS, TouchArcade Thread)! I'm back with another game that I've started working on and I can't wait to share with you!

Click image for larger version

Name:	SteampunkPanicLogo.png
Views:	8
Size:	327.5 KB
ID:	119927
Name:  SPP_GameIcon_256.png
Views: 173
Size:  110.5 KB

(Original prototype name: Re:Hit)

Soft Launch:

The time has come! Steampunk Panic is now in soft launch for iOS and Android in the following countries:

- Australia
- New Zealand
- Netherlands

You can find it on the Apple App Store and on Google Play! I will be rolling the game out to worldwide in the next couple days, so stay tuned!

Game Info:

Steampunk Panic is a fast-paced reaction speed score chaser, with a focus on online leaderboards and pushing yourself to tap quickly and accurately! You'll be presented with a randomized grid of buttons that will have different functions, such as increasing your score, your multiplier, or starting special modes. There is also a type of button that you should never touch or else your game ends! To help push you to make your decision quickly, you'll have a specific amount of time to hit a button before the game automatically ends. Try to last as long as you can and secure a huge score!

My goal is to ship Steampunk Panic for iOS and for Android in May!

Game Footage:


Youtube link | Pop Up





Dev Logs:
Dev Log #1 - Basic Prototype
Dev Log #2 - Buttons and Modes!
Dev Log #3 - The Device
Dev Log #4 - Timers via Liquid Level Gauges
Dev Log #5 - Device Iterations
Dev Log #6 - Leaderboard and Servers
Dev Log #7 - Final Concepts and Android
Dev Log #8 - Online, Offline and Monetization
Dev Log #9 - Official Name and Logo!
Dev Log #10 - Icon and Game Footage
Dev Log #11 - Music and Trailer

Project History:

While waiting for some buttons to enable and light-up in another idle game I was playing, I noticed myself trying to tap any button that was lit up, moving my fingers around the screen to tap multiple buttons. Of course, as one button was tapped, another button might no longer be lit up due to not having enough currency to purchase it anymore, but I still tapped the disabled button. This became a simple mini-game to me and I thought it was a fun little mechanic.

A quick prototype was created with 3 types of buttons (increase score, increase multiplier, and the game over button) and shared with friends and family, with the response being very positive. Players were sharing their scores with each other to see who had the best score, then trying again to beat the highest score. All this without an actual leaderboard, just text messages or chatting in person.

With every game that we release, I do my best to add new features that I haven't included in our previous games. These games become testbeds for those features, with the results being added to our other games as needed. This game felt like the perfect opportunity to work on online leaderboards, so here we are!

For Steampunk Panic, I chose to tackle the online leaderboards as well as online/offline game modes, game replay validation on our server, 3D models for the game and our first non-consumable IAP. Also, I am planning to also launch Steampunk Panic for Android, which will be a first for my studio. My hope is that the leaderboard functionality can be incorporated into Idle Realm in the future and be a strong foundation for some of the community features I want to add. The Android work will also help with the inevitable Android version of Idle Realm!

Concepts:

Final Device Design Concept
Click image for larger version

Name:	Concept_2_1.png
Views:	14
Size:	687.3 KB
ID:	119397

Early Device Design Concepts
Click image for larger version

Name:	ConceptProgress.png
Views:	16
Size:	729.2 KB
ID:	119142

Early Device Layout Concept
Click image for larger version

Name:	RoughConcept2.png
Views:	22
Size:	191.4 KB
ID:	118967

Visit us!
Eat the Moon Games

Follow us!
Twitter: @EatTheMoonGames
Facebook: Eat the Moon

Last edited by Eat the Moon; 05-03-2018 at 03:12 PM. Reason: Soft Launch info!
01-10-2018, 08:29 PM
#2
Joined: Jul 2017
Location: Washington, USA
Posts: 135
Dev Log #1 - Basic Prototype

Dev Log #1 - Basic Prototype!

The purpose of these Dev Logs will be to share with everyone the creation process for Steampunk Panic. A way to look behind the curtain, so to say. Some of these Dev Logs will be simple, others will give plenty of in-depth explanation for how things work or why things were done the way they were. I will do my best to provide a summary of the post at the top, with more detailed text afterwards.

Summary of Dev Log

Steampunk Panic is a fairly simple game to play. Players are presented with a group of buttons and a timer. If the timer expires, the game ends. Every button that is tapped will perform an action, providing points and resetting the timer. Players need to quickly decide the best button to press in this limited amount of time. For the first prototype, the types of buttons available were:

1) Normal (Orange, provides points for current hit)
2) Multiplier (Purple, increases the multiplier for future hits)
3) Lose (Dark Red, forces the game to end)

Full Dev Log

Today, I'll be hitting upon the first prototype and the first few screens made in order to operate the game. The goal of this first prototype was to determine if the gameplay was fun and provide, essentially, a small game loop that is the title screen, mode select, game screen and the results screen. I used simple pixelated button art and started building up the screens.

Screens

Note: These are prototype screens. The layout, look, feel, features ... basically everything is going to change. These are just to get the basic prototype done and are not meant to be pretty. Also, this is from when the prototype project name was called "Re:Hit"

Click image for larger version

Name:	Prototype1_Title.png
Views:	43
Size:	19.9 KB
ID:	118823

The title screen is simple, it takes you to the mode select screen or the options menu. For this prototype, options are meaningless and this button does nothing

Click image for larger version

Name:	Prototype1_Modes.png
Views:	37
Size:	68.5 KB
ID:	118824

The mode select screen allows the player to select a difficulty. For the purpose of the prototype, there is only a "Normal" mode, so all buttons take you to that mode. Having this screen show a few extra modes is a teaser for my play testers, to let them know that there will be faster modes and ways to earn even more points. The weekly and lifetime scores don't work, but are another tease to show where I want the game to go.

Click image for larger version

Name:	Prototype1_GameScreen.png
Views:	32
Size:	35.2 KB
ID:	118825

The game screen is made of your current score, possible points to earn on this hit (with a multiplier shown next to it), a group of four boxes, and a timer bar. This is all that I needed in order to get the basic gameplay in front of a player and see if the game was fun. This is an image of what the game looks like when you start a new game. All buttons are valid buttons to be hit and the timer is not active for this first group of buttons. I wanted the player to not feel stressed when the game starts, until they start interacting with the buttons. The "9 x 1" is the score that you will earn for tapping a button, which is based upon the timer.

Click image for larger version

Name:	Prototype1_InProgressGame.png
Views:	32
Size:	35.3 KB
ID:	118822

With the game in progress, the timer bar goes down and decisions must be made. The score in this shot is "6 x 1" because it started at 9, but since the timer has started, the score granted also drops. Since the timer bar is near 2/3 time remaining, you can get 2/3 of the base score of 9 (hence, the 6 that you see). I've hit the boxes a few times already and have 50 points, as I wanted to get to a group of buttons that showed all three prototype button types.

Since this is just normal mode, your base points are set to 9. In theory, hard mode will have base points set at 99, and expert mode will have 999. For a score chaser, you are constantly trying to beat your high score or the score of someone else on a leaderboard, so you will want to pick expert eventually. Although not in the game yet, the idea is to have a different starting and final speed for each game mode, with expert being the most difficult.

Click image for larger version

Name:	Prototype1_Result.png
Views:	31
Size:	38.9 KB
ID:	118826

Lastly, the game result screen. Doesn't do much other than let you know your final score, which is all that is needed for this prototype. The games start and end pretty quickly, with little to no friction to start a new game.

Iteration

With all of these screens in place, I was able to play the game all the way through and make adjustments to base points, speed, and timer length until I found something that was fun, hectic over time and fairly rewarding when you hit a stretch of quick perfect hits. I ramped the the points and speed to get an idea of what hard mode and expert mode could be like, then settled on what I wanted normal mode to feel like.

The game was placed in front of family and friends and the score chasing began. Gamers and non-gamers found it easy to play, which was a good sign. The first couple games were always fascinating to watch, as the player had no idea what to expect and the timer ended this game fairly quickly. After playing these first few games, the player would last longer and definitely score higher. I grabbed a piece of paper and wrote down names and scores, with players telling me their updated scores and I would reorganize the list and tell them their new rank. A hand-made paper leaderboard, essentially. Some rivalries started and after an hour or so, we decided that this was a good project to continue working on.

Lessons Learned

Base score matters. When it is too low (1-5 points), watching your score slowly climb is a pain. Setting normal mode's base score to 9 felt good, and when I tested the 99 and 999 point range for hard and expert mode, it was really satisfying. I originally tried (5, 15, 25), (9, 19, 29), and (9,29,49), but adding more digits just makes it feel better. So, I expect players to hit billions of points if they're really good.

Also, for the first prototype, there isn't any animation or polish anywhere. Tapping a button simply changes all the buttons immediately and resets the timer. When you tap the buttons and are presented with a new button group that is identical to the previous one, not having the buttons have any response really feels like the hit wasn't registered. I will need to add some kind of hit effect so the player knows they touched something.

Also, for a reaction speed game like this, the buttons need register the hit when it is touched, not when you release your finger from the button (like a click). Waiting to release the finger adds milliseconds to the input time, which could end a game early. I changed it to register on touch before the play test at the last minute and the game felt way better for it.

Coming Up

This score chaser needs more buttons and more choice! It also needs those difficulty modes working properly, so I'll be adding those features next. I'll also need to let players submit their scores to a leaderboard, so I need to decide how I want to validate scores. How many leaderboards? Should they reset? Monetization is also something I will need to think about, so I'll be brainstorming on various ways to tackle that area. What should the theme of the game be? Should it be retro pixel art buttons and minimalistic in appearance? Should I push for crisp hi-rez images? These questions and more will be addressed and tested over the next couple Dev Logs!

Last edited by Eat the Moon; 04-04-2018 at 02:54 PM. Reason: Added official name!

01-16-2018, 05:38 PM
#3
Joined: Jul 2017
Location: Washington, USA
Posts: 135
Dev Log #2 - Buttons and Modes!

The purpose of these Dev Logs will be to share with everyone the creation process for Steampunk Panic. A way to look behind the curtain, so to say. Some of these Dev Logs will be simple, others will give plenty of in-depth explanation for how things work or why things were done the way they were. I will do my best to provide a summary of the post at the top, with more detailed text afterwards.

Summary of Dev Log

The types of colored buttons that the player can tap has been updated to include new types:

1) Combo (Teal, provides a temp bonus to the multiplier, as the combo continues)
2) Flex Multiplier (Pink, time-based multiplier increaser)
3) Slow (Blue, slows down the game timer for the next X seconds)
4) Fever Mode (Green, for the next X seconds, no "Game Over" buttons spawn, so you can tap quickly)

Game modes for Easy, Normal, and Hard have been added. Difficulty affects your base points (10, 100, or 1000) for tapping the button and the min and max game speed.

Full Dev Log

Today, there won't be any images, as I haven't added any new parts to the temp UI. Along with the original button types that you can tap (Normal, Multiplier, and Lose), I also added new types to provide more variety when looking at the game grid. Since these buttons are just colored buttons, there isn't anything new to see.

Combo Button

The combo button, when hit, will start a combo! While a combo is active, every new set of buttons that appears will always have a combo button to be pressed, allowing you to continue the combo chain. Currently, the combo count is added to your current multiplier, allowing for a temp multiplier boost while you continue the combo. For example, if your multiplier is x5 and you start the combo, the next hit will provide the base points x (5 + 1) to your score. Hit the combo button again, and it goes up to (5 + 2), then (5 + 3), etc.

Since hitting the combo button makes it very easy to boost your multiplier quickly, there needed to be risk to this reward. So, while a combo is active, the game speed actually increases more quickly with each hit, allowing the game to go faster than the max speed the more provides. The player will need to decide when to force an end to their combo, otherwise they will get to a state where it could be impossible to hit a button in time and end the game. When the combo is ended, the multiplier bonus disappears, the game slows down to the speed it should be at, and the player can continue.

Flex Multiplier Button

Next, we have the Flex Multiplier button type. This button is a special type of Multiplier button that, instead of increasing the multiplier by +1 when it, it could increase it by +0 up to +4 instead, based upon the time it takes to hit the button. So, when the button appears, it behooves the player to hit it as quickly as possible to boost their multiplier quickly. However, if the player doesn't react fast enough, they might only increase the multiplier by +1 or even +0 (no increase).

This is another button that feels like it should have a risk/reward associated with it, but I haven't decided what to do with it. The first thought is to allow the multiplier provided from the button to not only count down to +0, but go further, possibly to -1 or -4. By doing this, the player would need to make a quick decision to hit the button, but also move away from the button to another button if the multiplier drops to a negative amount. I'll be iterating on this idea in the future...

Slow / Freeze Button

This button appeared out of a desire to provide a bonus mode for the game. When this button is pressed, the game timer freezes for a small amount of time (currently 10 seconds). This provides a break if the game has been going a while, allowing the player to take a break or simply take their time to hit a few buttons, before picking back up to whatever speed the game should be at.

I currently have the button freezing the timer, but I also want to try just slowing the timer so it decreases 3-5 times slower. That will happen during some testing I perform to see which feels better.

Fever Mode Button

Again, I wanted another special mode, so I thought it might be fun to add a "Fever Mode" type of button. When active, every button on the screen will be a valid button to tap, with no "Game Over" buttons appearing. The mode lasts for 5 seconds, allowing the player to spam all the buttons as quickly as they want.

To combat an instant-lose situation that appears when the mode ends, I opted to specify a certain number of button hits after the mode ends where no "Game Over" buttons appear, so if the player is mashing buttons when the mode ends, they can slow down and start playing normally after a couple hits go through.

This button feels really good when hit, and the buffer I added at the end for the button hits helped to make this mode perform even better.

Difficulty Modes

Currently, there is an Easy, Normal and Hard mode for the game. The difficulty dictates what the base score should be, with Easy providing a max of 10 points, Normal a max of 100 points, and Hard a max of 1000 points when a button is hit. Of course, these points will be based upon how much time is left in the timer for the current hit. If you hit the button quickly, you'll earn most of the base score. If you hit it really late, when the timer is almost empty, you'll get a small amount of the base points. This rewards quick reaction speed.

The difficulty will also dictate the start speed of the game and what the max speed the game can reach normally. For example, Easy mode might start with a 2 second timer, providing plenty of time for new players to hit buttons. As they hit the buttons, the speed increases up to the max speed of 1 second per hit over time.

The idea is that as a player plays the Easy mode and gets used to the game, they will graduate to the Normal mode, earning an even higher score, but playing a faster game. Once they are good with Normal, the Hard mode will be where all players will eventually aim for, as this mode provides the highest score as well as requires quick reaction speed skills.

Iteration

When the difficulty modes were created, I needed to find good speeds for the game. A special debug mode was added to the game in order to allow me to increase or decrease the starting and ending speeds for a mode, as well as dictate how fast the game speeds up per hit. The main goal is to try and allow the player to play the game comfortably for at least the first 50 hits. I didn't want the game to end after a couple of hits due to the timer, nor did I want the player to not feel challenged by the timer until hit 300.

After a few hours of testing, I settled on some good speeds for these modes and put it in front of some players to test out. Sure enough, most of the players were able to get at least to hit #50 in easy mode, then the hit number decreased for the other modes, which makes sense since the players are not prepared or skilled enough for the faster speeds. After playing some of the easier modes first, these players retried the harder modes and made more progress. This is the type of progression I expect for the game, so that worked out well.

The bonus modes (Slow/Freeze and Fever) were welcome additions and, when triggered, the players definitely felt more powerful and just went to town. Some who had a large multiplier and hit the fever mode watched their score explode, and when their game ended they felt very accomplished!

Lessons Learned

The Easy mode is where most players will want to start, but some players will go straight to Normal mode for their first game. So, I needed to make the Easy mode speed good enough to not scare away new players (to the game, to the genre, or to games in general) and ramp up nicely so that the player felt like they were getting better and improving their reaction speed. The Normal mode also needed to provide a slight challenge for someone new to the game or the genre, but is not really where a player new to mobile games should touch.

If I want to add more button types to the game, I won't be able to rely on simply colored buttons. There will need to be a textured appearance to the button, or some kind of extra treatment on the button to separate it from the other buttons. For example, the Multiplier and Flex Multiplier button types are essentially the game, so they could be the same button color but the Flex Multiplier could have some kind of "time" or "clock" art treatment added to it to inform the player that it is the timed version of the button. Likewise, I need to make sure each button stands out as the type of button it is, without confusion. This is important for color and display purposes, as well as for colorblind players. Relying on just color is a bad idea.

Coming Up

A few extra button types should probably exist, along with a way for me to pick how often these buttons should appear, or how many hits should happen before a button type can start appearing in the game. With the differences in scores from the modes, I definitely need to let players submit their scores to a leaderboard for the mode itself, instead of a single leaderboard for all modes. This will let players compete against players in the same score range. Of course, I also need to validate this score to prevent cheating. I'm still thinking about monetization for the game as well. These questions and more will be addressed and tested over the next couple Dev Logs!

Last edited by Eat the Moon; 04-04-2018 at 02:55 PM. Reason: Added official name!
01-19-2018, 08:28 PM
#4
Joined: Jul 2017
Location: Washington, USA
Posts: 135
Dev Log #3 - The Device

Dev Log #3 - The Device

The purpose of these Dev Logs will be to share with everyone the creation process for Steampunk Panic. A way to look behind the curtain, so to say. Some of these Dev Logs will be simple, others will give plenty of in-depth explanation for how things work or why things were done the way they were. I will do my best to provide a summary of the post at the top, with more detailed text afterwards.

Summary of Dev Log

The fever mode has been broken out into a separate meter that fills up as the player plays the game, instead of a button that randomly appears. To activate this mode, the meter must be full and the player will tap a new button on the UI.

With most of the standard game mechanics figured out, we started doing rough sketches of what the UI could look like when the player is hitting buttons. Instead of doing a minimalistic style of simply floating buttons on a background, we opted for a device that the player would interact with. This eventually led us to an art style that is influenced by art deco and steampunk.

A very, very, very rough concept of where we're going:

Click image for larger version

Name:	RoughConcept2.png
Views:	30
Size:	191.4 KB
ID:	118966

Score validation for the game was also finished, allowing our server to take game replay data from a player when submitting a score to the leaderboard and verify that it matches up. This will prevent fake scores from being submitted to the leaderboard!

Full Dev Log

Fever Mode

Steampunk Panic will have a lot of button types that the player will be able utilize in order to increase their score. One of those button types was the fever mode button. While having this be a random button that appeared was cool, I didn't like the fact that if the player wasn't paying attention, they might miss it and have to wait for it to appear again. Of course, reaction speed and being able to read the button grid quickly is essential for this game, I want fever mode to be a reward and not a random chance. Thus, the fever meter was born!

While playing the game, every button hit can fill up the fever meter. The amount that the fever meter fills will be based upon how quickly a button is pressed, so it is linked to the timer bar much like the points you can earn per button tap. Once the fever bar is full, there will be an effect on it to draw your attention, a separate button near the bar will also light up and can be tapped. Once tapped, fever mode will activate and you'll be able to tap any of the buttons in the button grid as fast as you can.

UI Concepts

For now, we're focusing on concept art for what the game UI will look like, with the menu UI coming later.

For this UI, we had to make a decision on whether it should be a minimalistic UI, similar to what the early prototype was using (basically, just floating buttons on a colored background), or if it should be a more physical or themed UI that the player interacts with.

Minimalistic UI
Pros
- Simple and clean
- All elements are typically interactable
- Easy to add new elements
- Easy to fit any screen size
- Memory use is minimal

Cons
- Not much of a textured theme to stand out
- Can look sterile

Physical or Themed UI
Pros
-Interesting and unique
-More of the UI can be animated
-Feels like a toy or object that you interact with

Cons
-Harder to add new elements without updating lots of art
-Extra care is needed to make interactable elements clear
-Memory use is much higher

There have been lots of games popping out with a minimalistic UI style that revolves around geometric shapes and colors. They are easier to build and really distill the experience into just game mechanics and touching the UI. They look clean and easy to use, and that's a huge advantage. But then there are games like The Room and Hearthstone that have physical UIs in the game world that you interact with. For Steampunk Panic, we decided to go with a physical UI like a device you might find in The Room.

So, what should the device look like? Since the game will be played in portrait mode on a phone or tablet, we need rectangular buttons instead of squares. Circular buttons waste too much space on the UI and feel like there is less space that is valid for tapping. So, using rectangular buttons and a tall device to interact with, we tried various layouts and options, then quickly colored parts of these devices to get an idea what it could look like. Here's a very, very, very rough concept of where we're going:

Click image for larger version

Name:	MachineIterations_Small.png
Views:	26
Size:	430.9 KB
ID:	118965

Gears, gauges, wires and pipes ... basic silhouettes for the device started to pop out for us and we settled on taking parts of some of these concepts and combining it with others to get this basic device shape and layout:

Click image for larger version

Name:	RoughConcept2.png
Views:	30
Size:	191.4 KB
ID:	118966

The device would be rectangular, with a gauge on the left for the timer (started filled with liquid and empties) and a smaller gauge on the right for the fever meter.

Current score would be displayed on the top of the button grid, in a style similar to a combination lock with spinning numbers. These numbers would spin to the current score, so the right 1-2 numbers might be constantly moving. The multiplier number at the bottom would use a flipping number display, like old school flipping number analog clock or calendar.

The left side of the grid shows a base score number wheel, which will probably go away. The idea was to show what percentage of the base score you would earn when you hit a button, but this can be also portrayed by adding percentage notches to the timer gauge itself.

The top gear and the bottom right gear are examples of where moving elements could go, with an example on this concept showing how fast the game is running by spinning the bottom right gear faster.

The purpose of this concept piece is to show the important elements and how they might function. The next step is to iterate on what the device's non-interactable element might look like. This will be where some art deco influences will come in, adding texture and features to the device to make it look more like an actual physical device.

Score Validation

While the concept art of the device layout was happening, I tackled the score validation aspect of the game. When players are connected online and playing, they can submit their score to a global online leaderboard. To prevent cheating, I needed to provide a way for the server to replay the game submitted with the score and ensure it's valid. There isn't much to show about this feature, but the general idea is that the game records what the player presses in the game (the replay data) and the server replays it and, at the end of the replay, the scores need to match up.

I have some test cases set up that has gone through 1 hit games all the way up to 10,000 hits in a game and the scores all came back validated and correct, so even with the random aspect and different modes being turned on and off, everything is validating correctly!

Iteration

While testing out the slow/freeze button and the fever buttons, we decided that the fever button needed to separated from the button grid. But we also saw too much similarity with the fever mode's "locking of the timer bar" and the slow/freeze button doing the same thing. So, I made this button type just be a "slow" button, so the timer is slowed down for a small amount of time. I mentioned trying this is the last Dev Log, and sure enough, it was a good decision. It provides a breather for the player to slow down for a sec and then have the game pick up again. It is still a little jarring to go from a very fast game (due to having been playing for longer than a minute) to a slow timer and then immediately going very fast again. I will try adding some code to speed up the timer to the correct speed over the span of a few button hits, to let the player get used to the speed jump.

Lessons Learned

Having the fever button be separated from the main button grid has opened up extra strategy for the player, while at the same time, allows for all players to be able to access the mode as long as they hit enough buttons to unlock it. Although there is a "slow" button type as well, it doesn't feel as much as a special mode as a small modifier, so keeping it in the game grid feels pretty good.

The button for the fever mode, like the button grid, also needed to register a hit when touched, not when released (which is how a button would work in a game). Since it this is a speed based game, I need to make sure that input is quick and has no delays.

When I added the concept art into the game, it was still not tall enough to fit the screen, so we'll be making it a little more taller in the future. The button grid feels good when tapping it, keeping the four button hit boxes as rectangles behind the scenes, instead of forcing it to conform to the shape of the button. That way, you could tap a little bit outside of the curved rectangle button and it still registers as a hit.

Coming Up

There are still a few extra button types I want to prototype, as well as an easier way for me to balance the game by stating how often and when button types can start appearing. Leaderboard support and some server work will be happening soon as well. Monetization is also still a thing and since this is a score chaser, there won't be many options for me to pursue ... most likely ads and an option to disable ads. Since we like the art deco steampunk aesthetic, we'll need to start looking into music options as well, perhaps electro swing? I look forward to sharing more of this process with everyone over the next couple Dev Logs!

Last edited by Eat the Moon; 04-04-2018 at 02:56 PM. Reason: Added official name!
01-26-2018, 07:40 PM
#5
Joined: Jul 2017
Location: Washington, USA
Posts: 135
Dev Log #4- Timers via Liquid Level Gauges

Dev Log #4 - Timers via Liquid Level Gauges

The purpose of these Dev Logs will be to share with everyone the creation process for Steampunk Panic. A way to look behind the curtain, so to say. Some of these Dev Logs will be simple, others will give plenty of in-depth explanation for how things work or why things were done the way they were. I will do my best to provide a summary of the post at the top, with more detailed text afterwards.

Summary of Dev Log

We created some concept art for how the timer gauges could look as well as effects that could be placed over them when the device is affected by the Slow button or the Fever Mode!

Full Dev Log

Liquid Level Gauges

For the game timer, as well as notating how close the player is to activating the Fever Mode, we wanted to use liquid level gauges. So, we drew up some rough concepts for decoration treatments for the top and bottom of the gauge, different colored liquids ... basically an idea of what it could look like:

Click image for larger version

Name:	Gauges.png
Views:	22
Size:	44.6 KB
ID:	119056

Slow Mode Effect

On the left side of the device, the player has a timer gauge that starts full, each hitting round, and empties quickly. When the player has the Slow mode activated from the Slow button that pops up, we want to provide visual feedback to let the player know that the Slow mode is active. There will be a color shift on the background image that the device sits on as well as an effect on the gauge itself.

Click image for larger version

Name:	Slow1.png
Views:	22
Size:	138.5 KB
ID:	119057

I personally like #1, #2, #3 and #8.

Since the Slow mode slows down the timer instead of locking it in place, most of these effects would cover the gauge too much and make it impossible to know how much time is left. Of course, with the timer going down so quickly (0.75 to 2 seconds), the player might not need to see how much time is left and just know that they can take it a little bit more slowly. Slow mode currently applies a 3x slowdown to the timer.

Fever Mode Effect

Likewise, the right side of the device has a gauge that fills up and can allow the activation of a Fever Mode. So, we tried some concept ideas for what the right side gauge could look like, when Fever Mode is active:

Click image for larger version

Name:	Fever1.png
Views:	23
Size:	163.5 KB
ID:	119058

Since the Slow mode has an Cold/Icy theme, we opted for a Hot/Fiery theme for Fever Mode. Again, while Fever Mode is active, this gauge empties and when it is empty, the mode ends. There will also be a color treatment added to the background image that the device rests on.

For these, I prefer #4, #6, #7 and #8. But oh man, dat lens flair tho

Iteration

With these concepts created, we can put them into the game to see if not being able to read the gauge really is a pain or not. If it isn't needed, we can stick with a full treatment of the gauge. Otherwise, we will make the effect more transparent where the gauge is, to help with readability.

Click image for larger version

Name:	Slow2.png
Views:	21
Size:	135.0 KB
ID:	119059
Click image for larger version

Name:	Fever2.png
Views:	24
Size:	159.1 KB
ID:	119060

We could also try placing the effect on the edge of the gauge, or the top and bottom if we need another option.

Lessons Learned

If there are timer bars that the player can see, they shouldn't be obscured by other UI elements unless the timer is actually disabled. Applying an effect on the bar still needs to let the player read the bar and determine how full it is.

Coming Up

I'll be doing the work to get this game working on Android next, with all the iOS related features having an Android counterpart. Also, same as last time, there are still a few extra button types I want to prototype, as well as an easier way for me to balance the game by stating how often and when button types can start appearing. Leaderboard support and some server work will be happening soon as well. Monetization is also still a thing and since this is a score chaser, there won't be many options for me to pursue ... most likely ads and an option to disable ads. Since we like the art deco steampunk aesthetic, we'll need to start looking into music options as well, perhaps electro swing? I look forward to sharing more of this process with everyone over the next couple Dev Logs!

Last edited by Eat the Moon; 04-04-2018 at 02:57 PM. Reason: Added official name!
02-01-2018, 04:00 PM
#6
Joined: Jul 2017
Location: Washington, USA
Posts: 135
Dev Log #5 - Device Iterations

Dev Log #5 - Device Iterations

The purpose of these Dev Logs will be to share with everyone the creation process for Steampunk Panic. A way to look behind the curtain, so to say. Some of these Dev Logs will be simple, others will give plenty of in-depth explanation for how things work or why things were done the way they were. I will do my best to provide a summary of the post at the top, with more detailed text afterwards.

Summary of Dev Log

We tried various types of designs for parts of the device, iterating on top segments, elements attached to the sides of the device, how the buttons might look and color ideas. Nothing is final yet, but we now have lots of different concepts for the device so we can start zeroing in on a final design.

Click image for larger version

Name:	ConceptProgress.png
Views:	19
Size:	729.2 KB
ID:	119135

Full Dev Log

While working on server code, our artist started tackling more concepts of what the device might look like. With Dev Log #3, we decided on the basic shape of the device. Now, it's time to explore what various parts of the device could look like and what we can do with them!

The Top Area

For the basic shape design, we had a gear exposed at the top. Originally, we thought it could spin slowly, indicating that the device is functioning and doing something. But it was a large moving piece and might not be as interesting, so we opted to try a static section instead. Several ornate art deco pieces were made for the top, each providing a fun and interesting silhouette.

Click image for larger version

Name:	Tops.png
Views:	19
Size:	181.0 KB
ID:	119136

While looking at these concepts, we thought it might be cool to switch the top of the device based upon the game difficulty the player selected. The higher the difficulty, the faster the timer gauge empties and the more points the player would earn per hit. Or, if not for the difficulty, maybe the player could customize the device by adding and removing elements. These could always be unlocked, or they could be unlocked by reaching certain score thresholds or playing a certain amount of times?

Device Body

Next, we tackled various ideas for what the device's body would look like, connections to the liquid level gauges, as well as what the fever mode button would be.

Click image for larger version

Name:	Borders.png
Views:	16
Size:	172.8 KB
ID:	119137

The body is rectangular in shape, but we can make it more interesting! We tried various edge treatments for the device, mainly keeping it symmetrical. There are 90-degree edges, 45-degree edges, curved and cut edges, etc. Just by adding a different edge to the rectangular shape, the device gains some personality, which is what we want!

The liquid level gauges had different connector pieces added from the gauge to the device, providing more fun silhouettes.

Lastly, the fever mode button had different shapes and layouts. A couple buttons we placed at the top-right, facing the player. I feel like these are the most noticeable for tapping, especially if they light up and start blinking. But we also tried some buttons that would come out of the side of the device, facing to the side. If the device was something that was actually held in your hand, these could be good locations as one of your fingers might actually rest on it. So, a dilemma appears: do we have a front facing button, which is more acceptable as a thing that you would tap, in regards to UI/UX? Or do we do the stylized side button that might not be as apparent, but helps make the device feel more like a real object?

Side Elements

Now, it was time to go crazy with what stuff we could put on the device to make it more interesting.

Click image for larger version

Name:	Doodads.png
Views:	23
Size:	215.1 KB
ID:	119138

We added wires, gears and pipes ... then tossed even more wires, gears and pipes! The device could become quite bulky with all the stuff we added, but it does help to make the device more unique. Also, again, we could provide these pieces for the player to toggle on and off if we wanted!

Score, Multiplier, and Face

Next up, we switched the placement of the score area and the multiplier area. In most games, we're used to seeing the score at the top of the screen, so placing the score area at the top of the device makes more sense.

Click image for larger version

Name:	ScoreMultipliers.png
Views:	15
Size:	233.0 KB
ID:	119139

We also tried various treatments for what the score and multiplier area could look like. We added dials, borders and extra elements to these areas to give them more life. The score area is expected to be a rolling number counter, similar to what you would find on a number-based combination lock, mileage counter in older vehicles, etc. It should look mechanical and not digital! This means that as you play the game, the right most number (and the number to the left of it on higher difficulties) might be constantly spinning to the current number it should be. This might be confusing or hard to read, so we'll need to see what it looks like in-game.

The multiplier area would use a different type of treatment for the numbers. We're thinking flip-numbers, which could also use a small animation of the number changing. Again, if it is hard to read, we'll get rid of the animation and just have the number change.

Then there was the face of the device. We cleaned up some of the buttons for this part of the concept so we can see the decorations better. We tried adding etches and designs to the face of the device, on the edges of the buttons, and added a bevel to the hit buttons. The bevel is nice to give the device some extra dimension and feel more real, but the flat buttons also work if they are simply frosted glass that are back-lit.

Materials

The device needs to be made of something! So, we tried a wooden device with metallic elements.

Click image for larger version

Name:	Materials.png
Views:	15
Size:	286.3 KB
ID:	119140

We tossed in sample colors for the liquid level gauges, to get an idea of what everything could look like. We also tried to make there be 2 accent colors for the device, such as silver and gold, or silver and copper. When the device only uses one color for the metallic elements, it does feel like the colored buttons might stand out more, as there is less crazy colors on the screen.

Oh, and we also added a button appearance to the bottom-right gear, to see if that might work out for the fever mode button.

The Hit Buttons

The center of the device has 4 buttons. These are what the player taps while playing. This hit buttons will be various colors and will need to look like they are lit-up. Again, the player needs to always tap a lit-up button. If they tap a non-lit button, the game ends. So, we tossed in some un-lit buttons as well to see what they could look like. The darker the better, so the player has a clear understanding of what buttons to hit and which ones to avoid.

Click image for larger version

Name:	LitButtons.png
Views:	16
Size:	294.4 KB
ID:	119141

We also colored in the fever mode button on the bottom-right gear to see if that works. We haven't decided where the button should be, but this would a good time to test having it down there!

We also tossed in some glow reflection on parts of the device to see what that might look like. The original plan for Steampunk Panic was to make the device as a 3D model, and if the buttons glow, we could have that light extend onto the device! But we might go with a 2D version of the device instead, depending on time and resources, as 3D modeling is new for us. But making it 3D with moving pieces would look pretty awesome!

Coming Up

I've been doing a lot of work on the server side of the game and will talk about some of this in the future. Android support is almost wrapped up, leaderboard support is almost done, and our monetization for the game is almost settled. We'll need to pick some music for the game and start designing UI elements (the menu, leaderboard screen, dialogs, etc.) that fit the art deco steampunk aesthetic. I can't wait to share more of this process with you in the next couple Dev Logs!

Last edited by Eat the Moon; 04-04-2018 at 02:57 PM. Reason: Added official name!
02-21-2018, 04:00 PM
#7
Joined: Jul 2017
Location: Washington, USA
Posts: 135
Dev Log #6 - Leaderboards and Servers

Dev Log #6 - Leaderboards and Servers

The purpose of these Dev Logs will be to share with everyone the creation process for Steampunk Panic. A way to look behind the curtain, so to say. Some of these Dev Logs will be simple, others will give plenty of in-depth explanation for how things work or why things were done the way they were. I will do my best to provide a summary of the post at the top, with more detailed text afterwards.

Summary of Dev Log

I finished the server infrastructure for leaderboard support, including score validation on the server side, setting user names and the ability to mark names as inappropriate for rename purposes. Players will be able to compete on global, cross-platform leaderboards, segmented by game mode difficulty.

Full Dev Log

These past few weeks, I've been wrapping up the server code for Steampunk Panic to handle a global leaderboard for each game difficulty mode. I have worked on leaderboard features before on other products for other game studios, but this was the first time I had to roll my own and handle every aspect. The process was super fun and I'm pleased with the result!

Global Leaderboards

Steampunk Panic is all about chasing the high score and doing better than last time. You can always compete against your own score, but some will like to climb a leaderboard to see how far they can go, and now you can.

I opted for a global leaderboard to start with, but can easily create leaderboards per country or any other type of segmentation that I want. It's as easy as pointing at a new leaderboard name and running with it. The only reason why I would want to separate users is if the user count gets massive. So, when Steampunk Panic launches, I'll be keeping track of the leaderboard sizes to determine the next step to take.

For those curious, if the leaderboards get out of hand, I will have the following options:

1) Create leaderboard "buckets" which would be assigned to players. I could have 10 leaderboards, and every new player gets assigned to a leaderboard when they first log in. This would distribute everyone evenly, so if I have 100,000 players, each leaderboard could have 10,000 ranks.

2) Go with timed leaderboards. Right now, the leaderboards are for lifetime scores. But if there is a large number of players, I might need to reset the leaderboard every week. Players who drop out and no longer play will be weeded out from the leaderboard in this manner, with each new week providing players a chance to climb again. The disadvantage of this method is that there is no reward. Steampunk Panic has no premium currency, it has nothing to unlock. What would be the point of climbing the leaderboard that week, if your progress is just going to be wiped?

3) Like the buckets idea, I start segmenting players into countries or geolocations. The game no longer has a global leaderboard and you are competing with local players. This could be fun ... but I would prefer to keep it global.

Cross-Platform Leaderboards

I had to make a decision: Do I use the platform's build-in leaderboard support (GameCenter for iOS, Google Play Games service for Android)? Or do I go with a cross-platform leaderboard?

There are benefits to using the platform's leaderboard support, especially if there is a friend list built in, letting you compete against your friends or the world. But it's also easy to cheat these leaderboards, as all you need to do is submit a score to Apple or Google and their services just accept that as a valid score. This is how leaderboard get filled with tons of fake, impossible scores.

So, I opted for my own leaderboard approach that is cross-platform and handled by my servers. Fake scores won't be able to be submitted because of score validation I do on my end, so when you load up the leaderboard, you should be guaranteed real scores!

Ranks

Players will be ranked, based upon the game mode they played. Everyone playing the Easy mode will be ranked against scores submitted in the Easy mode. This seems fair, as the last thing I want is for someone to plateau on Easy mode at 150,000 points or something and still be at the bottom, since Hard and Expert modes provide way more points.

The leaderboard will show the top 15 players in that mode, as well as the 15 players who are near your current rank. For example, if you are rank #52, you'll see rank #1-15 on the top section of the leaderboard, and ranks #35-50 on the bottom section. This allows you to see how close you are to climbing the next few ranks, as well as seeing how close you are to losing your current rank.

Score Validation

So, score validation... how does it work? To start, your game client communicates with the server to get some randomized, unique data for your specific game mode that you're starting. The server locks this info down and your game client spins up the new game. Your game client also knows what your high score is for that mode.

As you are playing the game, a replay of your input is being generated. At the end of the game, your game client will look at your high score and that game's score and, if you have a new high score, it's time for score validation on the server!

The server receives your replay input data and the expected score, then spins up a new game on the server, also loading in the unique data it has saved off for that game. It will replay the game with the input data sent and verify that the score on the server is the same that the player said they got. If it is, the leaderboard is updated, the score is saved on the player's server data. If the score is different, there is a chance that the data was modified before being sent to the server, so it will fail.

Now, in order for this to work, the server uses a deterministic random number generator that will generate the same number sequence, no matter the device or platform. This number generator is also used on the game client, so they will always be in sync.

Since this is a very important part, many tests were created to validate the score validation code. I created test code that would generate a new game and play from 1 to 100,000 hits, skipping over every 10 hits (so, 1, 10, 20, 30, 40, etc.). This would generate 10,000 games, all using the same number seed for the game. I would do this for 100, and then 500 different number seed. Then I could just generate 1,000 games, with 1,000 different seeds, with ending with 1 to 1,000 hits (chosen at random). Every one of these games would be played by an AI, processing all of these games over the span of a few minutes and then validating them. Every game validation passed, with replay data matching the replay data's replay data that is generated. So, I feel pretty confident that this is pretty solid.

I also tested failures as well, and invalid replays, also with thousands of iterations.

Score validation via replay data is extremely quick, so the server should be able to handle hundreds of replays a second without batting an eye. I expect 1-2 replays a second to roll in, maybe jumping up to 10 per second if lots of users are playing. The great thing is that validation only happens if it is a new high score. If your high score is 90,000, I'm not going to waste time validating your 33 point game, it won't affect the leaderboard!

User Names

In order to submit a score to the leaderboard, you need a name. So, the first time you start the game, you'll be asked to pick a leaderboard name. There are rules in place for names:

1) 3-20 characters long
2) No special characters
3) Nothing profane
4) Needs to be available

The first two rules are easy to enforce with simple code. Profane names, however, is a little more difficult. I am not going to be able to cover every profane name or situation, but I am able to cover a lot of common situations. I am using a profanity filter to handle this on the server. But, there will be names that pass through.

So, every day, I have the server compile a list of all new names and an email is generated for me. I can browse it quickly to see if anything jumps out and, if so, I can mark a name as profane, which will trigger a rename. On my end, when I mark a player name for rename, it will generate a new user name (Player ######) and rename the player on all leaderboards. Then, the next time the player logs in, they will presented with the rename dialog and, once renamed, all leaderboards will also have that name renamed again. I don't expect to be doing this often, but I wanted the feature to be there, just incase someone in the top 15 on the leaderboard (who will be seen by everyone) has a horrible name.

In the future, I might add a report name button on the leaderboard, letting players police the board themselves. After being flagged a couple times, I might see the name in a daily report so that I can review it. If it's in need of a rename, then I do it. Otherwise, I mark it as safe and it's good to go. I would never auto-mark a name for rename, it would always need to be reviewed before a final decision is made. I wouldn't want the button feature to be abused.

Coming Up

Wrapping up Android work. Monetization will be talked about soon, as well as an update on new concept art and the art direction for the game. We'll need to pick some music for the game and start designing UI elements (the menu, leaderboard screen, dialogs, etc.) that fit the art deco steampunk aesthetic. I can't wait to share more of this process with you in the next couple Dev Logs!

Last edited by Eat the Moon; 04-04-2018 at 02:58 PM. Reason: Added official name!
02-26-2018, 04:47 PM
#8
Joined: Jul 2017
Location: Washington, USA
Posts: 135
Dev Log #7 - Final Concepts and Android

Dev Log #7 - Final Concepts and Android

The purpose of these Dev Logs will be to share with everyone the creation process for Steampunk Panic. A way to look behind the curtain, so to say. Some of these Dev Logs will be simple, others will give plenty of in-depth explanation for how things work or why things were done the way they were. I will do my best to provide a summary of the post at the top, with more detailed text afterwards.

Summary of Dev Log

We started with our original concept sketches and exploration, then pushed the concept art for the game in two directions: interactable device on the screen, or full screen UI of the device, making your phone/tablet become the device. In the end, we opted for the full screen UI of the device, with a casual, steampunk feel, which is below:

Click image for larger version

Name:	Concept_2_1.png
Views:	11
Size:	687.3 KB
ID:	119395

Work was also wrapped up on the remaining Android code hooks, so all platform dependent code is finished. In-app purchase flow and receipt validation, ad support, server communication, etc., all completed!

Full Dev Log

While work was happening on the leaderboard and finalizing the server code, talked about in our last Dev Log, we asked two concept artists to explore two styles of the game: a device object to see and touch, or a full screen UI that makes your phone's screen look like the body of the device. We provided the various concept art sketches we had already created, for inspiration and information for requirements. Let's see what happened!

Concept #1: The Machine in your Phone/Tablet

I really liked the idea of the device being an object that you interacted with on the screen, so we asked our first concept artist to explore that area.

Click image for larger version

Name:	Concept_1.jpg
Views:	16
Size:	321.3 KB
ID:	119394

So yeah, holy crap! He really went all-in on the idea of the device being a cool machine that you interact with. I could see any of these machines being on the screen for the player to interact with, but I was definitely in love with the one on the left, and some of the features of the one in the middle.

But having the machine in your phone/tablet would make some sections smaller, could make parts of the machine hard to read, and in the end, make less of the screen usable or have important information.

Concept #2: Your Phone/Tablet is The Machine

Now, if your screen was effectively the body of the machine, holding your phone/tablet would feel you were holding the machine. So, let's just do the full-screen UI. Enter our second concept artist.

Click image for larger version

Name:	Concept_2_1.png
Views:	11
Size:	687.3 KB
ID:	119395

The first image reveals all of the important information that we need. It's not too complex and is easy to read. It has a nice casual mobile game UI feel and that multiplier section is hot! I also like the little flip switch for turning on the fever mode. I really like this concept. When I put it on my phone, it felt like I was holding the device in my hand, and I was interacting with it. With animations placed on the tesla coils, spinning numbers, bubbles and more, this could really shine and be what we need!

Click image for larger version

Name:	Concept2_2.jpg
Views:	11
Size:	108.6 KB
ID:	119396

The second image goes for a more complicated look, with more bells and whistles. The background would have slowly rotating gears, and that steampunk styled goblin could be an animated character who could slide in occasionally to distract the player by throwing gears or hitting things in the background. Or, he could appear at the start or end of the game to spin up the game, or wind it down. Basically, the goblin could be a character to provide more charm. You're own little goblin in the palm of your hand.

Concept Winner

In the end, I really like the first image for Concept #2. It looks good and feels good and clearly tells the player everything they need to know. It's not too distracting and would be a great fit for a mobile game.

With this concept selected, I believe we have nailed down the look and feel of the game. We can start working on the polished version of this screen and start developing the UI art for the game. The logo for the game can also be started, now that we have an aesthetic style!

Android

All Android-specific code is now written and tested. In-App purchase code, ad viewing, server communication, local notifications, done. This is huge, because it means that I all code written from this point on is game code. I also have the Android publishing process figured out and tested, so when the time comes for Steampunk Panic's iOS and Android release, it should be fairly straightforward for me.

Also, thanks to this work, I can roll this code into Eat the Moon's common codebase used for all my games. I'll be able to update Idle Realm's codebase with this work, letting it finally pop out on Android as well!

Coming Up

Monetization will be talked about next, as we have finalized what our plan will be. We also need to start up UI concept art for the game dialogs as well as the game logo! We also need to pick some music for the game that will match our new art aesthetic. I can't wait to share more of this process with you in the next couple Dev Logs!

Last edited by Eat the Moon; 04-04-2018 at 02:59 PM. Reason: Added official name!
03-05-2018, 07:18 PM
#9
Joined: Jul 2017
Location: Washington, USA
Posts: 135
Dev Log #8 - Online, Offline, and Monetization

Dev Log #8 - Online, Offline and Monetization!

The purpose of these Dev Logs will be to share with everyone the creation process for Steampunk Panic. A way to look behind the curtain, so to say. Some of these Dev Logs will be simple, others will give plenty of in-depth explanation for how things work or why things were done the way they were. I will do my best to provide a summary of the post at the top, with more detailed text afterwards.

Summary of Dev Log

Steampunk Panic will be a free to play game that is supported via ads (which can be disabled via an in-app purchase), with online and offline modes.

Click image for larger version

Name:	RemoveAds.png
Views:	11
Size:	107.4 KB
ID:	119541

While online, players will sometimes see an ad at the start of their game. When the game ends, players have the option of continuing once per game by watching an ad. All game modes have a leaderboard and your score will be submitted to the leaderboard if it's your new best. Players who remove ads via the in-app purchase will not see ads, they can simply continue once per game for free, and they can set the color of their name on the leaderboard.

While offline, players will only have access to the easy difficulty mode. They will not be able to use a continue, nor will they be competing on a leaderboard (only their own internal high-score on the game).

Full Dev Log

The purpose of Steampunk Panic, aside from putting out a fun game that I liked, was to tackle new challenges for Eat the Moon's game framework. I wanted to pursue an online game that also had an offline component, leaderboards, non-consumable purchases (such as removing ads), and Android support. Android support was done earlier and everything else is now completed! I'm just waiting on final artwork and polish!

Offline Mode

If a player starts Steampunk Panic and they don't have an internet connection, the game goes into an offline mode. This mode allows players to practice on the easy game mode against their own personal best high score. There are no ads, no continues, and no leaderboards. At any time, the player can turn on their internet and hit the connect button in the game and they will sync up and go online.

Online Mode

As long as the game is in online mode, the player will have access to the leaderboard features and get one continue per game. Likewise, while online, the player will see an ad every X games and if they want to use the continue, they watch an ad.

Click image for larger version

Name:	Continues.png
Views:	16
Size:	86.6 KB
ID:	119542
(this player gets a free continue, because they removed ads)

If, during the course of gameplay, the player's phone/tablet loses internet connection when trying to submit scores or trying to start a game, the game will inform the player that the server couldn't be reached due to no internet connection, and they can enable their internet and try again or go into offline mode. It was important to make sure that, if a player is playing online and is about to submit their score to the leaderboard and loses internet connection, they can attempt to re-send the data without losing that progress.

Monetization

Click image for larger version

Name:	RemoveAds.png
Views:	11
Size:	107.4 KB
ID:	119541

Like most games that live on ads, I also allow for the purchase of the "Remove Ads" non-consumable purchase. Since I have no XP, levels, or currency to earn in the game, I wanted to provide something else of value that removing the ads can provide. So, I opted for the ability to set your player name's color on the leaderboard.

Click image for larger version

Name:	SampleLeaderboard.png
Views:	12
Size:	87.3 KB
ID:	119543
(dat prototype layout tho...)

Also, if the player decided to watch an ad in order to continue, the game counter for when to show an ad will reset, that way the player won't be shown an ad immediately after they continue.

For example:

Start Game #1: No ad
Start Game #2: Ad
Start Game #3: No ad
Continue Game #3: Ad
Start Game #4: No ad
Start Game #5: Ad.

Leaderboard Rewards?

Since the leaderboard scores are all validated on the server, I could also provide free ad removal upgrades as prizes from special limited-time leaderboard events to the top X ranks. I haven't added such a feature, but the possibility is there and I'm pretty excited to try it!

Coming Up

UI dialog concept art is currently underway, hopefully with stuff to show in the next couple days! Then we'll be creating final art for the dialogs and the game UI itself, then onto the game logo! I've been checking out various music samples, trying to finalize the game music as well. I can't wait to share more of this process with you in the next couple Dev Logs!

Last edited by Eat the Moon; 04-04-2018 at 02:59 PM. Reason: Added official name!
04-04-2018, 02:35 PM
#10
Joined: Jul 2017
Location: Washington, USA
Posts: 135
Dev Log #9 - Official Name and Logo!

Dev Log #9 - Official Name and Logo

The purpose of these Dev Logs will be to share with everyone the creation process for Steampunk Panic. A way to look behind the curtain, so to say. Some of these Dev Logs will be simple, others will give plenty of in-depth explanation for how things work or why things were done the way they were. I will do my best to provide a summary of the post at the top, with more detailed text afterwards.

Summary of Dev Log

The official name for our game is here! Going forward, this game will be known as Steampunk Panic! We also have our official game logo!

Click image for larger version

Name:	SteampunkPanicLogo.png
Views:	9
Size:	327.5 KB
ID:	119925

For developers looking for an amazing logo artist, I can definitely recommend Michael Dashow (http://michaeldashow.com/project-type/logo-design)!

Full Dev Log

With the finish line in sight, it was time to finalize the name for this project and start working on a logo. Although I liked the name of Re:Hit, it just doesn't give any useful information for a players to figure out what the game might be, just by looking at the title. After a few title suggestions, I settled on Steampunk Panic. The game has a steampunk feel to it and the gameplay is about tapping buttons as fast as you can and making quick decisions, which could cause someone to panic. It also flows nicely nicely and the double P sound is fun to say!

Logo Design Process

Designing a logo can be difficult, so I reached out to an artist who has done amazing logo design work: Michael Dashow (some of his work can be found here: http://michaeldashow.com/project-type/logo-design ). Right from the start, I knew he was going to be the perfect choice. He asked a ton of questions to try and get a feel for what I wanted, without assuming or just drawing up random designs.

To determine the right type of logo for the game, he wanted to know if there were other game logos that I liked, what elements of the logos that I liked, colors, art styles, etc. I gravitated toward having a two-word logo using different fonts for each word, on different lines, with possibly different colors per word. I wanted a frame that would surround the logo and I liked the idea of the name extending past the frame. I really love game elements being a part of a logo (If it's a game about chess, having a chess piece as part of the logo, or if it is an RPG, having a sword or other type of weapon as part of the logo, or a dragon wing, that type of thing).

With this information, some screenshots of the game, various game UI artwork as reference for materials and a description of what the game is, he went to work.

Preliminary Sketches

Mike quickly presented a huge group of sketches of various logo designs for Steampunk Panic. He tried using some or all of the various ideas and desires that I wanted, to see how little or how much of the elements I wanted.

Click image for larger version

Name:	EarlySketches.jpg
Views:	12
Size:	516.6 KB
ID:	119921
(by Michael Dashow)

There was a lot here to take in. Some of the designs used a pressure gauge as part of the logo design, others used gears and liquid gauges from the game. Lots of different styles of how the typeface could be displayed for the name, and so many great silhouettes for the game logo. Communication went back and forth about these choices and what I liked.

- I didn't care much for having the pressure gauge, as I didn't have one in my game. I understand the reasoning behind having it (high pressure, high speed, that type of thing), but the element wasn't quite what I wanted.

- #6, Panic was really pushed to 11, to see if I liked that type of treatment. It was a little much...

- #7 and #8, I really liked how the Steampunk lettering looks, with the curly pieces extending down to fill in some of the space on the sides of the Panic word. I also liked the frame styles. Also, the liquid gauge on the bottom looked really good in #8.

- Some of the designs were more circular or square in shape, but I really liked the more rectangular look of the other logos. So, I focused more on the horizontal logo versions.

In the end, I settled on most of #8 as the way I wanted to go. I wasn't sure if those were screws, light bulbs, or cog teeth on the border, but I did like the way it extended a little bit. He clarified that it was metal extensions with screws, which I liked.

Type Face and Borders

With the general design decided (#8), Mike then sent me a few more concepts that showed different typefaces and border styles for that design.

Click image for larger version

Name:	TypeFaceAndBorders.jpg
Views:	10
Size:	128.2 KB
ID:	119923
(by Michael Dashow)

For this selection, I really loved the border style of #2. I also liked how the liquid gauge extended a little bit past the border in #1. Lastly, the typeface for Steampunk and for Panic in #3 were my favorites. I really liked the slightly staggered lettering in the word Panic.

Flat Colors

With the design finalized, it was time to see what colors and materials the logo will use, so a cleaned up vectorized version of the logo was created and flat colors applied to see how things would look. This also gives us the ability to see each section clearly, as marked by its own color.

Click image for larger version

Name:	Flats.png
Views:	11
Size:	76.1 KB
ID:	119924
(by Michael Dashow)

I loved the direction that this was going and work continued!

Rendered Final Logo

Click image for larger version

Name:	SteampunkPanicLogo.png
Views:	9
Size:	327.5 KB
ID:	119925
(by Michael Dashow)

From sketch to final, this is the end result! Mike opted to give a wooded background for the logo, surrounded by a metal border. The gauge color was either going to be blue (to match the timer gauge color in-game) or orange (to match the fever gauge). He went with orange and I think it was a good choice.

Coming Up

With the logo created, I'll be creating an app icon next! The UI art and all menus are finished, so I'll be showing those next time, along with video footage of the game! I am still polishing the game screen artwork and adding animations. I've been checking out various music samples, trying to finalize the game music as well. I can't wait to share more of this process with you in the next couple Dev Logs!

Last edited by Eat the Moon; 04-04-2018 at 03:53 PM.