I've been experimenting with some very basic HTML5 game development (not using MMF2 or anything like that - all of the tools used are completely free) the last couple of days, and just thought I'd share my experiences...
As this is my first project, I decided to go with something as simple as possible - a clone of the card game "Memory" (aka "Concentration" / "Pairs" / etc) - http://en.wikipedia.org/wiki/Concentration_(game)
I made a version for MMF2 some time ago, which proved quite popular, and this is more or less a direct conversion of that. The graphics are all borrowed from Google Images, with a little tweaking in Paint Shop Pro 9. I went with an 800x480 screen size, just because it matches my phone. Originally, I was planning to just have 12 cards, but then it occurred to me that I needed two of each type (otherwise you can't match them, duh!), so I ended up with 24 which is really too many for someone with short-term memory like mine (don't do drugs, kids!).
Anyway, I'm already pretty experienced with Javascript, so it was really just a question of figuring out the new HTML5 related stuff (particularly touch controls). For anyone who isn't - don't be put off, as it's an extremely easy language to learn. If you can use MMF2's string and fastloop functions, you're already half way there, and there are tons of good learning resources available.
The code editor I chose is Adobe Edge Code, which is based on (and indistinguishable from) Adobe Brackets ( http://brackets.io/ ). This is a really nice tool for developing HTML5 games, as it provides a nice interface and all the usual features you'd expect in a code editor (syntax highlighting, auto-completion, auto-indenting, etc) but also has a "Live Preview" feature which lets you instantly view your app in Google Chrome.
I recommend also installing the JSHint extension, which automatically checks for errors in your code (the built-in system uses JSLint, which is picky to the point of being unusable). You can get it here: http://github.com/cfjedimaster/brackets-jshint/
Google Chrome is great for testing HTML5 apps, and particularly those designed to run on mobile devices. In addition to integrating with Adobe Edge Code, it also has an excellent set of tools for emulating mobile devices - including different screens, touch controls, accelerometer input, etc. This means you can do most of your testing from your desktop pc, and don't need to own lots of different devices.
Once the game is running in a browser I could have just left at that, and uploaded the game to a website to make it playable online - but I really wanted to make a mobile app, and this is where CocoonJS comes in...
There are a number of free tools which convert HTML5 apps to "Hybrid" Android / iOS apps (eg. Phonegap). These hybrid apps are not quite what they seem - although they are technically native apps (and can therefore be submitted to the Google Play Store, etc) all they really do is create a browser window, and then run your app inside it - meaning performance is very un-native-like.
CocoonJS is slightly different in that it doesn't use a webview - instead, it uses a custom hardware-accelerated implementation of just the essential HTML5 features (canvas, audio, touch, etc). It can't render a normal webpage with DIVs, TABLEs, etc, but it can run graphically demanding games at much higher framerates (it is still interpreting Javascript though, so performance will still be poor compared to a true native app).
The other nice thing about it, is that CocconJS have created "CocoonJS Launcher" apps for Android and iOS. These allow you to easily test and debug your apps on a mobile device - just package all your source files in a zip file, and transfer it to your phone.
As you can see in the screenshot, my game isn't performing particularly well - it mostly stayed at around 28fps (which is good enough for this type of game to feel responsive, but would be a problem in other games). For the time being, I'm going to give CocoonJS the benefit of the doubt, and assume I must be doing something a little bit wrong, as some of the demo apps appear to be more demanding, yet achieve much higher framerates. It's definitely something I need to look into. It's also worth noting that my phone is not exactly high-spec (where else do you get a brand new 4" 800x480 screen for under £40 though?).
What next?
The obvious next step would be something like a clone of "Tower Defense" or "Flappy Bird" - but there are already waaay too many of those, so I refuse to add to that problem. I'm thinking maybe a one-dimensional "Advance Wars" clone...
That one-dimensional "Advance Wars" mockup looks pretty neat! I'm not sure how that would play though considering having a 2D map is a big part of the strategy of it.
I've done a little javascript using jQuery for interfacing with a flash game on my site, but nothing more. I do love the built-in debug tools included with Chrome though, but I opted to use Firebug with firefox instead.
So what are you learning native HTML 5 development for if you don't mind my asking? If you wanted to build apps wouldn't it be better to do native development on that platform? I'm sure even a MMF produced apk would have less overhead, but I could be wrong. I think the best use for this would be browser based mobile games since they seem to be limited at the moment. The ones I have played have been less than impressive though.
It's mostly just for fun. I already know Javascript and find it a really nice language to work with. Learning Java (for Android) or C / C++ (for iOS) would be difficult (they don't look nice to me) and time-consuming - and if I wanted to release a commercial game for both Android and iOS, I'd need to learn both languages.
Native would certainly give better performance, but I have no interest in making fast-paced, graphically intense games anyway - I really only like turn-based strategy / puzzle / roguelike / etc, where performance is not so critical.
Browser-based mobile games are probably harder to monetize, and as you say, they're not very popular yet.
I have seen the Impact engine, and various others, but I'd rather code everything myself - I don't feel like they provide anything extra that I couldn't already achieve, and they're just another thing to learn. I hate jQuery for much the same reason (it also creates some seriously ugly and unreadable code). Better alternatives would be Construct2 + CocoonJS or MMF2 + Exporters, but I want to try some "proper" programming.
I think a one-dimensional Advance Wars clone still has some scope for strategy. Some of the maps in AW are pretty one-dimensional anyway:
Oew nice! The linearization of advance wars! That mock up looks nice.
There are tons of snakes, arkonoid and boxes to write as follow up wile learning. I am always porting snake to learn a new 'system' whether that be a language or real hardware system.
There are lots of tools to package your app for mobiles devices besides CocoonJS. And it's probably possible to write an mobile 'app' that just launches a fullscreen webbrowser that runs on offline html5 version of your game.
By the way CocoonJS isn't a browser, but an implementation of the browser's canvas object in hardware. But I don't notice the difference between my game in a browser of CocoonJS, or it should be that fact that it just works better in the browser because of the bigger html/javascript framework in it.
and yeah, I know CocoonJS doesn't use a browser (not if you use Canvas+ rather than Webview+ anyway) - most of the alternatives do though. Or at least they use a WebView object, which is just a browser (using Webkit & V.
It's interesting that you don't notice any difference in performance between the two though. I wonder if it depends a lot on the device (kind of like how HWA gives you less of a boost on a new PC with a really powerful CPU but crappy on-board graphics).
Not sure I can be bothered with Snake or Arkanoid, but I guess any old '80s arcade game would do. Maybe use multitouch to replicate the dual-joystick (giving independent control of move & shoot directions) control of something like Robotron?
Anyway, for now, I've decided to work on something completely different (not even a game)...
Advertisement
Post Reply
Edited by Sketchy
jenswa.neocities.org
.