Design Origins

Dodgewall

The Beginning: The year is 2026. I am doing manual labour helping my father build our new house. We couldn't afford to pay for labourers so we are doing the job ourselves. It has been 10 months since we started building a 2 storey, 3 bedroom and 2 bathroom house by ourselves, and I am exhausted. Around February of the same year when I decided to play games again after the gruelling manual labour hours to entertain myself and forget how much physical work needs to be done in the new house. But my problem is that the old games I used to play doesn't really provide anything new anymore.

I thought to myself: "maybe I should just create another web app again?", although I had a few ideas, I still have the trauma of getting rejected from Google Adsense close to 20 times now in the past 7 or 8 years. So I ended up slacking and thinking of games to play..

And then it occured to me. I am a programmer... why not create games myself? I hopped on my keyboard so fast as if I was about to miss a world boss event in Guild Wars 2. I started writing a simple movable ball on the screen with a simple basic grid background. Pressing the appropriate usual movement keys on the keybord W,A,S,D or a combination of those would move the grid background appropriately and the ball is in the middle of the screen which creates an illusion of movement.

I played with it for a few hours while thinking of any assets that I could add to it. I changed the angle of the wall which then turned into terrain, from 2d to 2.5d to 3d, but don't overestimate it, it looks very plain and basic, just solid color background, with lines like a chessboard and the sky in the distance and the moving ball in the middle. Although it was a nice test project, for the life of me I just couldn't think of what to put in the "game".

I debated whether to put buildings as obstacles or waves and the ball will be a boat, or trees that I have to avoid and then some zombies catching up to me. No matter what I thought about, it had a common problem. It was too much work and requires too much time to create. Eventually I got tired of thinking and decided I should just create a very simple game for now, just so I could create and finish something while my creative prowess is at play.

I wanted to create something so simple you barely need a sentence to figure out how to play it.

And so I decided that is what I'm going to create, a simple tap mechanic gameplay. The first thing that came to mind is a movement that requires tapping once on the screen. Common sense said tapping right should make the thing go right, and tapping left should make the thing go left, and then suddenly like a flash of lightning, falling objects appeared in my imagination while my player character is moving left and right trying to evade them.

The idea was born.

The Idea: From that brief moment of imagination, I figured since we are making a real house in real life, I will be creating a "construction worker" or "engineer" character, and he would be evading falling debris, but which debris?... the answer came to me so fast as if it's common knowledge: Brick walls.

Feeling as if I had done this before, I immediately coded the basic brick wall into the game, along with the controls of tapping right and left to move right and left. The player character was simply a white "ball". It only had a simple eyes and line as a mouth on it. It took about 3 hours of coding the basic mechanics of the game. Another hour designing the character alone, and then another hour deciding on the colors.

The Design: While playing the initial prototype with the player character replacing the ball character, it had no colors, just basic white background and my character was just a mash of random colors. I then started thinking of the color scheme for the character, but not until after I designed the walls.

The walls had always been brick walls in my imagination, and so I designed them to have brick colors and textures, took me 10 minutes for that one and I never changed it since besides a few tweaks to the border thickness and radius.

The player character is composed of html 'div', basically squares, and they are shaped and colored with CSS. Not to get too technical but those stuff are basically the basic building block of ALL websites you have ever seen and are seeing on the internet. Seriously, all of them uses html and CSS no matter which way it is implemented.

Now that I have the mechanics and the idea of a short backstory to explain subconsciously about the reasoning, I needed to design the setting so that the game would "make sense". The things that I had to consider is that, it wouldn't make sense if a falling object that you evaded just passes through the floor/road. In real life it would bounce a few more feet upwards or just pile down there, but it would not make sense lorewise to just leave them stuck there, so what to do?

A few more minutes of thinking, and it became apparent that the only way to logically get those fallen walls out of the way is to just let them pass through the thing the player is standing on, and that would only happen if there is a lot of space underneath it, which means, there is a lot of 'height' under it.

Aha! The player will be standing on a high platform while evading the falling debris!

Sometimes the mechanics of the game dictates the design, and of course vice versa. And so I designed it so that the character looks like he is standing on an "I-beam", and to create the illusion of it being on a high place, I put a space below the I-beam to have a sense of space between the beam and the bottom of the screen. I then added some faint silhouette of buildings at the bottom of the screen which creates the illusion of buildings from afar, and I even added simple moving clouds to reinforce the illusion of a very high place. Voila! A high storey feeling is suddenly apparent with the changes I made.

I test played the game for a few minutes and immediately realized that when the player is focused on the falling walls, the character is not immediately visible and would require me to look at it from time to time to ensure I was standing in the right place. I thought it wouldn't work like that and would be too little too much of cognitive load to be enjoyable. It should be obvious where the character is but if the eyes and brain is focused on the falling walls then the player character will often be overlooked.

The only solution that I have thought of, is enhancing the perception of the character on the peripheral vision of the player. How? With colors of course! Just like in real life where workers wear Neon colored vests to ensure they are visible to oncoming traffic or to other humans, there was no question that I should put a neon vest on my player character. On top of that (quite literally), I put a yellow safety hat on his head, scientific research showed that yellow is the most visible color and since the head is the most important part to protect, then it gets the yellow hat. The pants were blue, didn't really think too much about that. Shoes are black because, why not? And so I have created the player character. Everything is in place (except the falling walls hehe). The game was almost ready.

The Improvements: I play tested the game for another day, and I realized it would be too easy and becomes boring if the walls are just horizontal walls falling. So then I decided it should vary in size, and have a little spin animation to it, and that is what I did. I added the varying wall thickness, although they already had the varying width from the start. I thought: "if they have different width, why not make them spin as well?" and so I added that as well.

I played it for a few more minutes, and a diabolical idea popped in my head. "What if.. the falling walls would hit the sides of the screen and bounce to the other side as it falls?" It sounded evil enough that I had to try it. I took a few more minutes to code that into the game, and when I played it, IT WAS GLORIOUS.

You see, back when it was just the falling horizontal walls with varying length, my highest score was 104, after adding the spinning walls the second day I was able to reach 100 at least, and then after adding the diabolical walls that bounces off of the sides, I wasn't able to get past 70 anymore. I made it to around 90 points once I think, but could never do it again after that. Still, I decided to keep it, I thought: "There would be people who would be good at this, so I'll leave it the way it is." and since the game is new, only time will tell if people will actually be good at it or not.

The Name: This was the easiest and most genius thing all throughout the process. Since I am dodging walls, it was only logical to name it DodgeWall, like a play-on with the word Dodgeball, but with "wall" instead hehe.

Closing Thoughts: This is the very first full game I have ever created in my life. It is the first one I have turned into a mobile app/game. The first one I have ever applied for Google Play Store, and it is also the first one of my games to have been approved for Google Play Store. This game has a special place in my heart. If you are still here and enjoyed my Origins article, I hope you can also enjoy the game if you haven't enjoyed it already. Thank you for reading.

← Back to Studio