If you are reading this, then chances are you want to start developing a mobile app or game of some sort, but I know what you’re thinking. Learning how to code seems daunting. In this article I won’t be getting into pure HTML5 coding (whew!), rather a great place to start understanding the process behind coding, some tools to get you started, and to guide you in the right direction.
Great! Let’s Make A Game Right Now!
(Image source: emedco.com)
I like your enthusiasm, but before I get into the tools and how to get your project on to your phone or tablet, I want to give you a reason, and an understanding as to why you should release on mobile.
First off, there are over 1 billion smartphone users, and 1.6 billion+ projected by 2016. This mobile trend has led to a huge increase in mobile development. For each platform you may plan to release on (Android, iOS, Blackberry, etc.) you would need to develop different versions for each platform just so that it would be compatible with multiple devices. We can get around *most* of this by using HTML5, since it is compatible with most devices, and skip making multiple versions for each platform.
There are multiple reasons HTML5 is the perfect fit for a mobile app. For instance, HTML5 is integrated with audio, video, and SVG (scalable vector graphics), making it ideal for apps. Another great reason is so that you can use responsive design to make your app fit any screen size. Before responsive design, developers had to pick a certain resolution and optimize the design for that resolution only.
Phones are being built with multi-core processors and graphics engines that are able to handle tasks comparable to desktop computers. Because of this, companies are developing more graphic-intensive apps than ever before.
Some Tools To Get You Started!
Now that we have a reason behind making a game for mobile, I wanted to cover a couple tools to accomplish it, the first of which is Construct 2.
Construct 2 is a powerful HTML5 based game creation tool that allows anyone to build games. It boasts “no coding required”, but there are some instances (social sharing, online play, etc.) that some minor PHP is necessary. With this software you can make anything from a platformer to a full on, action packed, top down shooter. This, of course, is limited to 2d graphics, but the versatility of it helps you look over that fact.
Speaking of graphics for your game, I recommend using the free tool Inkskape. Why? Because you can export it as an SVG file (we talked about those earlier). An SVG file is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) in 1999. You can use a plugin for construct called SVG Canvas, to get those high resolution images into your game.
Before that though, you may want to make some animations for your game. I suggest trying out Spriter, by BrashMonkey. This software will let you take a more modular approach to animating your sprites (sprites are two-dimensional images or animations that are integrated into a larger scene), you can make it so you can move each body part on a character, to make a smooth, great looking animation. It will definitely save you time in the long run.
All of the tools mentioned above are free to use initially, but could possibly start to cost you depending on the extent you need them.
When Your Project is Finished, How Do You Get It To Mobile?
Construct 2 can export to pretty much any device you can think of – It just depends what you’re going for. For mobile you can export to a Cordova file and use Intel XDK Development tools to get it to your device. Within Intel XDK you can change the icons, splash screens, orientation, description, and the HTML5 code itself. Once you’re ready to export your project, it will email you a copy of it as well. I found this to be a great tool for people who want to immediately send out test versions of the game, you can simply forward the email to your testers.