CodeForCash — Part 1
This is my first post. This will most likely be a 3-part series. I originally had it as one big post, but hey, reading is tough. I’d like to walk you though my thought process of how I created the game ‘CodeForCash’.
The game can be found and downloaded on the Apple App Store: https://itunes.apple.com/us/app/codeforcash/id896367987?mt=8
The Jog
I always wanted to make a game. Growing up with NES, SNES, and SEGA Genesis, they got me really hooked. I always appreciated that concept of why people play video games. People play it for the adventure, the imagination, the thrill, the achievement, the unknown — whatever your preference for playing is — that was your prerogative.
As an owner of an iPhone and iPad, really the only apps I usually download (when it’s not work and downloading app for “inspiration”) are game apps. I like to play RPG, puzzle, or strategy games. I always wanted to create a game that I could play, and hopefully, others would also play, albeit even it’s for a little bit.
Now, a little about me, I am an iOS developer at my day job; I write apps. Being an iOS developer, that also means you’re in the Software Development/Engineer business. You get all the good with the bad (usually bad, but that’s just what I think).
I took a 1-week staycation (vacation at home aka no life questionmark) the end of May 2014, and it wasn’t until the last several days at home that I came up with the idea of CodeForCash. As I went for that jog, that one rainy afternoon (had to dig deep to get myself to jog). I remember I was about to run up this very steep hill and it hit me.
I remember several weeks ago that my friend had shown me this game — ‘Make It Rain’. He told me, ‘All you do in this game is just swipe up and you get money for it’. I asked him ‘What else can you do?’ and he said ‘No. That’s it’ and I laughed. I then laughed (out loud) even more, after I downloaded the game and saw it. That’s all you did in the game. I always said, however, that the best ideas start off as jokes; even the game description wasn't taking itself too seriously. I was actually very impressed about how simple, clean, and clever the game was. Apparently, it was one of the most downloaded free game on the iOS store.
I thought to myself, I could totally create a game similar to this, but had to get my own theme and spin to it. I then thought of another idea that I had seen before, hackertyper.net, where all you do is mash the keyboard and it would output code from the Linux kernel on the screen. In other words, it would make you look like an f’ing coding boss, if you showed it to your peers.
Could I make a game with those two ideas meshed together ? The beauty of ‘Make It Rain’ was its tongue in cheek art-style. For example, the theme was to make money by buying investments or doing things probably not legal. One upgrade was called ‘pyramid scheme’ and the image was of multiple pyramids or a ‘Lemonade Stand’, which gave more money per swipe, was an image of a lemonade with a straw.
What would my theme be? I’d been in the software development industry for 8+ years now, so I knew a trick or two on how things worked. Could I somehow outlet my experiences of software development —the trends of what are seen at companies, start-ups, and what the developer themselves are thinking?
A monitor and a keyboard on the screen, was what I envisioned. As the player tapped on the keyboard, they would see the output of code and gain money. It would also have the same type of upgrades as in ‘Make It Rain’. (i.e., money per second, money per action, money when the app is closed, and most importantly — the in-app purchases)
I’d like to quickly explain how these upgrades work and how the game works -
Money Per Second — You get some money per second. In other words, you just leave the app on and you gain money
Money Per Action — In ‘Make It Rain’, you gain money per swipe. Every now and then you’d get a 50x multiplier which gives you more money. Also note, as you swipe, the background changes and there’s a particle emitter that animates across the screen, which indicates that you’re gaining 2x as much money.
Money when the App Is Closed — There’s this concept of a bucket that you can purchase. This stores the money that is earned when the app is closed. There’s actually two things to consider here — one is the money rate you earn while the app is off (e.g., $100/hr) and one is the max capacity you can hold until you take the money from the bucket (e.g., $500 capacity).
In-App Purchases — You can buy upgrades to increase gaining more money. Double the ‘money per action’ would permanently double your rate. You could also buy other upgrades such as double the total money you have currently, as well. They also had an upgrade or two that allowed you to buy ‘bribes’.
Bribes — Every now and then, a modal would pop up saying ‘you are being investigated for fraud’ and the player would have to spin a wheel to see what would happen to them. Some of the results were ‘you lose X% amount’ or ‘you lose X upgrade’. If you didn’t like the result, you could use this concept of bribes to get away scot-free. This was the games way of keeping it interesting and also to provide a pseudo-challenge.
Ads — Ads were displayed to the user every now and then. They were interstitial (full-screen) ads. Genius way to make ad revenue.
How To Win — Make enough total money and the win condition would be met. I’m not exactly sure what it is, but my friend won somehow.
Preparing For The Uphill Run
After getting home from that jog, I jotted down my ideas to paper. Hashing out some quick proof of concept wireframes. At the time, I had the theme of a software developer. The three type of upgrades would be ‘hardware upgrades’ — more $ per action; ‘software upgrades’ — earn $ w/o doing anything; and ‘presences upgrade’ — earn money while the app is off. I was pretty happy with the first two type of upgrades, hardware and software, but presence, I was not sure, maybe I could make it work or think of something better over time.
My thought for the presence upgrade was, as startups or as any company, it was an upgrade that allowed people to know who you were; essentially marketing. Hardware were upgrades such as having a faster machine, such as new keyboards or monitors. As a developer, this was a pretty important concept, as having a slow machine can take so much time out of the day just waiting for the machine to compile code or even to restart. I remembered my first work laptop took ~20 minutes for it to start up. Software upgrades, initially started off as software that helped developers be more efficient as being efficient was key to getting things done on time. Work smart, not work hard, I always say. This upgrade line entailed things such as hotkeys or a smarter IDE (e.g., Jetbrain’s Resharper).
With those ideas in mind and all down on paper, I jumped right in to coding. I wanted to mimic the cool interface and controls that the ‘Make It Rain’ app had. They had a simple yet intuitive UI.
I broke down their game into several paradigms; control and feel of the game that I needed to work in order to pull this off — the custom tab bar, the main screen view-port, the sliding notifications, the upgrade cells, and the ‘earn money while the app is off’ screen.
Starting with the custom tab bar, it had 4 tabs on the bottom. Tapping on one tab cause a modal to slide up and if the tab bar item that was tapped would become dark red, while the other tabs became red. If you tapped on the same tab bar item again, the modal would slide back down. This was not a standard control provided by iOS, so I knew I’d have to customize it.
The main screen contained info about the game and the player. I needed to show the keyboard and monitor on the screen and also needed to make sure that as the user tapped on the keyboard, the monitor would display coding text. It also had to update the total money label and also the tabs had to present and hooked up on the bottom. I decided that this ‘main viewport’ would be broken into three sections. One for the header for the total money & money throughput, one for the keyboard/monitor, and one for the tabs.
The sliding notifications in ‘Make it Rain’ had a horizontal semi-black transparent screen slide from right to left. This told the player info such as upgrades purchased or if they did not have enough money. For upgrade purchases, it had an image on the top and then a title and sometimes a detail text at the bottom. The text had a white border outline, which gave it some flair and pop, so I had to keep that into consideration.
The upgrade cells, I had a general idea of how to do them. Each upgrade tab had different controls in them, but I have had experience in the past to make them. For the majority of them, they needed to display an image, a custom badge for the levels, a price label, and a benefit label. Only tricky part would be the ‘earn money while the app is off’ as it had two factors, one for capacity and one for the ‘$ per second’. In iOS, there’s no easy way to customize the badge (i.e., color/tint color was tough and also the badges are very limited to the UITabBarController), but thankfully there was a third party library that I’d used in the past to remedy this.
The last piece was the ‘earn money while the app’ was off. Making the screen was easy, but in ‘Make It Rain’ it had a cool water dripping into the bucket animation, which I feel in my app, needed some kind of jazzy animation. At first, I thought I could do a source control kind of theme. In fact in my earlier dev cycles, I had created a 3.5'’ diskette image, but my coworker laughed when I showed it to him and said ‘I don’t think kids nowadays will know what that is’. I knew I had to think of something to replace it eventually, but for starters, it’d have to do.
Dig deep. Was ready for the uphill run.
—
That’s it for now. Thanks for reading my story. In part 2, I will talk about the thought process of how the creative images were created. I’ll show off some terrible/questionable mockups that I created and how I worked with 3 designers in parallel to finish in a reasonable time.
If you enjoyed reading this, part 2 of the series can be found here — https://medium.com/@Awesometimes/codeforcash-part-2-https-itunes-apple-com-us-app-codeforcash-id896367987-mt-8-240f441351cc
