David Weber's - Game Dev Blog

Hi I am David, welcome to my blog. I am a software engineer based in Cape Town, South Africa and on here you will find posts about game development.

[dpweberza]

ImpactJS - TextureAtlas plugin

So as I mentioned in my previous post I am using CocoonJS as a canvas wrapper on mobile devices for my upcoming game. Because CocoonJS uses opengl to render the game I have to convert all my image dimensions to a power of 2.

The neat thing is that I have been using TexturePacker to merge the frames for each animation into a single image and TexturePacker can automatically output the resulting image in a power of 2 dimension.

The problem comes in with the way ImpactJS handles animations. Basically you need a single image for each animation and each frame has to be the same size. Now when I have converted all my animation images to a power of 2, there is alot of blank space being wasted.

My solution was to write a TextureAtlas + TextureAtlasAnimation plugin for ImpactJS that reads in a JSON array from the output of TexturePacker allowing me to put as many images as reasonable into one big image and then reference the frames by name. No longer will I need to separate different animations into separate images.

I have made the plugin available with a demo on Github HERE. Just a warning that version 0.1 does not support drawing angled animations, I will implement this soon :)

[dpweberza]

AppMobi's Direct Canvas vs Ludei's CocoonJS

I have been very busy lately and unable to spend much time on game development but this weekend I got a chance to take a proper look at CocoonJS which is Ludei's accelerated HTML5 wrapper for Android and iOS devices.

Now a few weeks ago I integrated AppMobi's accelerated Direct Canvas which as I have mentioned in previous posts was a bit of a confusing task. In the end I managed to integrate the wrapper and I was pretty happy with how Direct Canvas was performing on my iPad2. Problem was that I had no such success on my Android devices, namely a HTC desire and a Samsung Galaxy Tab 7". The game simply refused to open on my HTC, this after installing AppMobi's bulky 16MB launcher stole all my phones memory due to the fact that it can not be installed to an SD card. And while the game started up on my galaxy tab, there were resolution issues. This was kinda a big disappointment for me after having reworked my game to run on Direct Canvas, and possibly killed my motivation a bit to continue working on my game.

So anyway as I was saying earlier I looked into Ludei's CocoonJS this weekend and decided to try get a version of my game from before the AppMobi integration to run on it. Surprisingly this was very easy to do, no need to read through forums, scrounge through example projects, include lots of new files and rewrite all UI / control code. The game practically just worked in the CocoonJS launcher and best of all it worked on my iPad2, my HTC desire, my galaxy tab and my new Samsung S3. I'd be lying though if I said everything was perfect, there are still some issues on the different devices such as blurry animation and transparency issues, but these may be resolved when I resize all the texture files to a power of 2 which is mentioned as a requirement on the CocoonJS wiki.

But for now I am quite pleased just to have the game playable on all my devices, despite the graphical issues. In conclusion AppMobi seems to be great on iOS devices, but as their Android implementation is still in beta, there are obvious and serious issues. Ludei's CocoonJS seems to have popped out of nowhere, but at the perfect time to take the lead in the accelerated HTML5 canvas effort.

[dpweberza]

Meteor Man

In my previous posts I've been mentioning my upcoming HTML5 game Meteor Man, and I thought it was about time that I actually mention what it's about.

So without further ado here it is:

Overview

Meteor Man is a fast-paced endless runner flying game where the player controls Hugo, a human who has evolved to survive in space as he flies through fields of meteorites looking for survivors of the Earth Disaster.

Hugo

Story

In 2064 the planet Earth exploded and broke apart into millions of meteorites, the catastrophic event became known simply as the Earth Disaster. Millions of lives were lost due to the unexpected nature of the disaster but some people were fortunate enough to be evacuated in space pods. In exceptional cases some humans rapidly evolved to be able to survive in space. Hugo was one of these humans and now he is on a mission to search for other survivors all while trying to avoid the millions of meteorites racing through space.

[dpweberza]

ImpactJS + appMobi Direct Canvas + Clay.io API (cont.)

Following on from my previous post I have been trying to get ImpactJS, AppMobi DirectCanvas and Clay.io to play nice together.

I am glad to announce that thanks to the fantastic support from Tyler at AppMobi and Austin from Clay.io I now have my HTML5 game Meteor Man swiftly developed in the awesome ImpactJS engine, running in an accelerated Direct Canvas on my iPad2 with a leaderboard integrated via clay.io's easy to use API.

Everything is coming together nicely and it looks like I finally have my perfect game dev stack sorted out. Now I just need to polish everything up and then release my first game to the wild. Which by the way looks set to be really easy thanks to AppMobi's app hub which lets builds your game into bundles ready to publish to Google's Play, Apple's App Store, Chrome's webstore and a few more platforms.

[dpweberza]

ImpactJS + appMobi Direct Canvas + Clay.io API

Over the weekend I thought I would try to get my upcoming HTML5 game Meteor Man to run on my iPad2 (iOS) and Galaxy tab (Android) before I finished polishing the web version.

Well needless to say this is easier said than done.

I spent many hours sifting through conflicting forum posts, tutorials and samples.

Eventually I got my app running in the appMobi XDK emulator and PARTIALLY running on my devices.

A few things I could not get working by 2AM last night (Sunday 29 July):

On the Galaxy tab the resolution is messed up and I can't see some of my entities at all. Example I can see Hugo the star from Meteor Man, but I can't see the meteorites, but I can see the explosion when I face plant into them. What's going on????

I could get touch events binded to div controls working on both my iPad and Galaxy tab. However I could not get a simple "tap screen to start game" to work on my iPad.

The clay.io API worked in the emulator but seems to crash the game when run on actual devices.

Some things I'm not clear about when working with appMobi's DirectCanvas:

Do I include a canvas tag in the HTML or not? Like I mentioned before so many conflicting forum posts, tutorials and sample codes.

Do I include appmobi_shim.js or the appmobi.js or both?

Why do key events not work in the appMobi XDK emulator, how can I test my game for desktop web browsers?

How do I debug my game on my devices? How do I tell if any errors are being thrown?

One good thing I can say is that the game ran smoothly on my iPad when bypassing the tap to start screen, so this will be great when I get everything working nicely together.

More to follow as I struggle on!

[dpweberza]

ImpactJS - Retro High Score Name Field plugin

So I just finished writing my first ImpactJS plugin which I have dubbed Retro High Score Name Field. (see previous post)

I am pretty happy with the result and once I've uploaded the plugin to Point Of Impact I will integrate it into my game Meteor Man.

Screenshot follows and demo can be found here

[dpweberza]

HTML5 Game Leaderboards

So for my upcoming HTML5 game Meteor Man I wanted to add a leaderboard right.

So at first I utilized the clay.io API and in a few minutes I had a cool looking leaderboard which looked like the one below:

Now while this looks good, It's not the route I want to go.

So what I tried next was use the Clay.io API for the leaderboard but instead of having the API show the scores in it's own modal design, I would simply call the fetch method of the API and display the scores in my own styled jQuery UI dialog.

Which looks like this:

Cool so now I have the scores in a dialog that I can easily and safely re-style. But what about when I port my game to iOS and Android using AppMobi and use their awesome direct canvas API which cannot directly reference the DOM.

I need a way to keep all the game elements and controls confined to the canvas in one neat package. But one cannot simply add a text-box to a HTML5 canvas.

So I found my solution by looking at the past, the good old arcade days.

Remember those cool high scoreboards where you enter your name in as 3 characters:

So now I'm going to write an ImpactJS plugin called RetroHighScoreNameField. Check my next post for the final result.