Project

2-Weeks In.. Mobile Game Progress Report

I’m now two weeks into my original 3-week-deadline mobile game project. You can checkout the progress thus far by playing the game above (‘up’ to jump, ‘left’ and ‘right’ to control the player).

As you can see there has been some progress since my last update a week ago. I was hoping to have gotten a little further by this point but my personal life has been somewhat hectic the past week reducing the amount of game-development time to a few measly hours. In the few hours we have had, we have managed to get a general story / theme for the game and the rudiments of for the first ‘stage’.

So the story is that our furry marsupial protagonist has ambitions of breaking free of his earth-bound cage to become the first hamster in space. The game is about his adventure to realise this dream.

The plan is to break the game levels in into ‘stages’ like other mobile puzzle games such as cut the rope or angry birds:

Each stage will have its own theme, giving the player a refreshed experience per stage. The first of these is going to be set within the cage itself so the tileset and background should hopefully represent that.

The bulk of my work this week however has been spent trying to get the game controls working just right. It needs to be fun to play, not too frustrating but not too easy. This is easier said than done. Im not sure its quite there yet, but play the game above and let me know what you think, im keen to hear your opinion.

During the last week I also ran into a few nasty issues with the physics which I thought I had nailed in the previous post. The problem was that the issue only occurs at low frame rates, this was really noticeable in the last post when I tried the game out on my iPhone 3G, the player was extremely jerky and unplayable.

To test the problem quickly (without needing to do an iPhone build every time) I used the handy “fps” attribute in the NME .nmml file. Setting the fps to 60 then having the player jump then setting the fps to 10 and having the player do the same jump there was a noticeable problem. On the 10fps build the player couldn’t jump anywhere nearly as high as in the 60fps build.

I knew that the reason for this problem lay somewhere in my update function in my Player class. My usual method of running update loops is to work out the time between two frames (delta) in milliseconds, pass that into the update loop for a game object then have the game modulate its update based on that delta. So as a very simple example:

  1. class Player
  2. {
  3. public var position : Vector2;
  4. public var velocity : Vector2;
  5.  
  6. ...
  7.  
  8. public function update(delta:Int)
  9. {
  10. position.x += velocity.x * delta;
  11. position.y += velocity.y * delta;
  12. }
  13.  
  14. ...
  15.  
  16. }

This is pretty standard stuff and should be familiar to any game programmer. In theory it shouldn’t matter what frame rate the game is running at, the player movement should be consistent because the velocity is being modulated by the time between the previous frame and now.

The code for the Player class however is quite abit more complicated than the simple example given above and something in the logic was causing problems. I had my suspicions but no matter what I tweaked or changed I couldn’t track it down.

I had however read of a different technique documented by deWiTTERS that involved a different way of writing your game loop that didnt take into account of frame delta but was still able to provide a consistent gameplay at differing framerates.

I wont detail the process here as dewitter explains it very well in his post. The result is a greatly simplified update loop for my Player by removing all the delta time factors. My resulting update loop now looks like:

  1. class Game
  2. {
  3. public static var TICKS_PER_SECOND : Float = 50;
  4. public static var SKIP_TICKS : Float = 1000 / TICKS_PER_SECOND;
  5. public static var MAX_FRAMESKIP : Float = 10;
  6.  
  7. ...
  8.  
  9. private function onEnterFrame(e:Event):Void
  10. {
  11. var loops : Int = 0;
  12. while( Lib.getTimer() > nextFrameTime && loops < MAX_FRAMESKIP) {
  13. update();
  14. nextFrameTime += SKIP_TICKS;
  15. loops++;
  16. }
  17. render();
  18. }
  19.  
  20. private function update()
  21. {
  22. Ctrl.instance.update();
  23. objects.update();
  24. camera.update();
  25. bg.update();
  26. }
  27.  
  28. private function render()
  29. {
  30. tiles.render();
  31. }
  32.  
  33. ...
  34.  
  35. }

The result of doing this is that the game now runs consistently at 60fps or 10fps. I haven't tried it out on my 3G yet but I have high hopes for the technique.

The moral of that story, if you bang your head against a problem for a while, just take a breath, think outside the box and attack it from a different angle ;)

Well that's about it for this week. The original intention was that is was going to be my last week of working on this game. (Un)fortunately my artist partner has gone on holiday this week so he is unable to work on the game, the result being I have given us an extra week to complete the game, yey! :)

Oh BTW, the title for the game is hidden in the demo above, see if you can work out what it is ;)

More HTML5 & HaXe Speed Tests

Ive spent a little more time this weekend looking at some more  HTML5 with HaXe. Following on from my previous experiments with WebGL I decided to give HTML5′s Canvas a a look as it was supposed to be designed specifically for the purpose of doing 2D.

I had heard from the HaXe mailing list that the Jeash project was a common way of interacting with the canvas in HaXe. Jeash is a remapping of the Flash API into JS so in effect I should beable to take any of my usual flash code, Sprite’s,  BitmapData’s, etc and it should run on the canvas no problems. Nice!

So I coded up a quick blitting example to see what sort of performance I would get:

http://mikecann.co.uk/projects/HTML5SpeedTests/HaXeJeash/bin/

The results were okay (I get about 11FPS with 5,000 crawlers) however I was interested to know what sort of cost HaXe adds. So I decided to code up a second example, this time using pure JS:

http://mikecann.co.uk/projects/HTML5SpeedTests/JSCanvas/

The results this time were better (14FPS with 5,000 crawlers) so I now wondered what happens if I do without Jeash and just code up the example using pure HaXe. I was expecting to see the same sort of performance hit as Jeash:

http://mikecann.co.uk/projects/HTML5SpeedTests/HaXeCanvas/bin/

Surprisingly it actually runs faster (17FPS with 5,000 crawlers) ! This is quite a surprise and totally contradicts my notion that going from HaXe -> JS would incur a cost. I was expecting some cost, but a performance increase?! I can only speculate that behind the scenes the JS engine in the browser is able to JIT compile the HaXe JS much better than the hand-crafted JS and hence more speed.

If you are interested in the source then I have uploaded it here: http://mikecann.co.uk/projects/HTML5SpeedTests/HTML5SpeedTests_1.zip

P.S. All the test were run on Windows 7 x64 in Chrome 14 (dev)

Chrome Crawler – A web-crawler written in Javascript

Depending on your level of geekness you may or may not enjoy this one.

I proudly present Chrome Crawler, my latest Google Chrome extension:

The idea is simple really. You just give it a URL, it then goes off and finds all the links on that page then follows them to more pages then gets all the links and follows them and so on and so on.

Along the way it checks each page to see if there are any ‘interesting’ files linked there, if it finds an interesting link it will flag it for you so you can check it out.

Theres an options page that lets you customise the way it all works:

If you are still confused check out the video below:

So why did I make this? Well to be frank, I made it mostly “just ’cause I can”!

Also having learned from my last Chrome Extension project PostToTumblr I realised the Chrome API allowed you to do some things that you wouldn’t normally be allowed to do on a website (nameley the Cross-Origin XHR) and I wanted to do something to take advantage of it.

It didnt take me long to knock out this project, one lazy Saturday for the majority of the code and today for a quick fix or two and to write this post and make the video. As such I expect there to be many bugs and problems so if you encounter one drop me an email (my address is found in the options page).

Oh finally, I wouldnt try using this on a google page as you will likely end up seeing this quite often:

Anyways you can grab it over on the Chrome extensions gallery here. If you enjoy it please leave me a review / comment, much love!

1 2 3 5  Scroll to top