Editorial Note: this is an older blog post written back in 2014.
Build a mobile app? Pssh… easy! I mean how hard could it be? I’m a webmaster after all, and they don’t call us masters for nothing. “It will be a slam-dunk,” I told myself.
After some much needed convincing that coding the mobile app was in fact doable, I dove head-first into the unknown and started my journey of building an app using Javascript, CSS and HTML.
So, where does the journey begin? For some, they may find themselves Googling fancy words they think they need to know, like Swift, Xcode, iOS SDK, Objective-C and so on. For me, all of that fancy stuff can take a seat in the back. I want to get started as quickly and easily as possible. After I can tackle easy, maybe then I can move on to fancy.
So, no Google? Yes Google! Always use Google even when starting. I just want you to feel excited and comfortable about getting started… not overwhelmed, so start with the basics. With that said, I must confess that I am a Google freak. Google is far and away the best resource a programmer has. Hell, it is the best resource a human has. This brings me to my first tip: Google often. Before a problem presents you with a headache, Google it. Getting a strange error? Google it. Got something funky going on down there? Goog… err or maybe a doc is better for that one.
Okay, back to it!
The starting point for me was to make a list of the skills I already had and a list of the skills I would need to learn. Writing things down always helps me remember and organize things, so tip number two is: write it down. Stay organized and make lists. Plus, if you still use pen and paper you can give your keyboard a little break. But don’t worry, you’ll have plenty of things to type out later.
How are we suppose to know what skills we need before we know where to start? Google, of course. After searching, your list is likely to look similar to mine.
My first thought was to jump right into coding. Bang out the index HTML page and add a whole bunch of CSS to get things moving and shaking. I mean, that’s how you’d make a game right? It was painfully incorrect. This ultimately led me back to tip number one: Google.
How to create a 2D JavaScript game
Proper SEO brought me to an article by IBM titled, Build a simple 2D physics engine for JavaScript games. There wasn’t much useful JavaScript code in the article, but the concepts explained were helpful in understanding what goes into a JavaScript based game. You can find the article here:
http://www.ibm.com/developerworks/library/wa-build2dphysicsengine/
The next article I stumbled upon was written by Matt Hackett of Lost Decade Games. It was an online tutorial that walks you through the basics of creating a simple JavaScript game. I didn’t read much of the tutorial (sorry Matt) only because I jumped straight to View Source right away. But they were über kind to create the sample code, thanks guys! This code eventually became the starting point for my own JavaScript physics engine.
http://www.lostdecadegames.com/how-to-make-a-simple-html5-canvas-game/
After getting a code base I started working on my own additions. First off, I didn’t want their silly monsters or background (sorry Matt). I took out all their graphics and replaced some assets with my own. This process wasn’t to painful and resulted in few errors. Oh! – The cool thing about JavaScript games is that you can test them (mostly) right from your file browser. Just open the index file and bam you should be able to play the game. Actual testing should be done using Cordova and emulation but more on that later.
In 2011, Adobe Inc. bought PhoneGap, a popular software that used web technologies to build native apps. After the purchase they gave the codebase to the Apache Foundation where it was to remain free and open source. Currently, Cordova and PhoneGap are identical pieces of software.
At this point, Cordova was tested and working on my machine. The Cordova docs are very straight forward and they go over the installation process thoroughly. I only had a few hiccups during setup, mainly when I added the Android platform. Actually, installing the emulators wasn’t fun either. Finally I was able to run cordova build and open the project in Xcode.
Well no, not really… BUT! I have something moving; things are happening; this is the beginnings of a game, albeit a glitchy one.
Check out the project and grab all my source code at:
http://www.envisionary.co/projects/power-jumper/
Controls: tap to move side to side – and – tap and hold to launch upwards
The blue blocks are good for your ship, but stay away from all the other blocks – they do damage and slow you down.
Keep in mind I am still toying with this code and by no means is it finished (or any good). I would love to make everything run a bit smoother and start adding sound effects and levels.
Stay tuned for more.
A Metalsmith Website Build it, but will they visit?