It's rather unbelivable, but I've actually managed to make some headway on Pebbl during the Christmas festivities... Oh aaaaand a merry new year by the way! So in preparation of my birthday happening in a galaxy not too far away I'd though I'd actually put something up to show that I haven't been sitting on my hands, or at least not consistently.
Be warned this is just a code demo
Obviously it doesn't appear like much at the moment--I didn't want to give too much away--but the astute of you out there will notice a few things.
- There isn't a shred of the original code powering this demo page.
- There are many shreds of original ideas woven together and put to good use.
- The code has evolved and benefited from another year of on/off development.
- The game will still be JS/HTML5 powered.
- The hybridisation between canvas and the DOM is even more involved.
- It supports Box2D for it's physical interactions!
- It supports require.js for the asyncronous loading.
- The backend (that you don't see here yet) is powered by node.js.
- I've ripped out my previous 'class-like' system, burnt it, blended it, spread it on toast, stuck it to the ceiling... and brought it back from the edge of the cornicing in the form of describe.js
As I stated in a previous post, the idea of this rewrite is to try and pull things away from being purely canvas based. Mainly because I found that the canvas wasn't fast enough across all the devices I tested -- whereas the dom allowed for quite smooth and fast animation. This I've achieved whilst still leaving room to switch back to a full canvas render if the future processors of this world decide to get any faster... it's likely that they will.
So now the system operates at quite a few different levels:
- The Box2D Physics world powers most movement.
- For non-physics based animation jQuery dom manipulation is used.
- For key-frame based animation background images and spritesheets are used on dom elements
- For sprites that can benefit from cloning, canvas is used instead of DOM.
- For masked content, pixel and lighting effects, separate canvas elements are used like dom elements.
- Everything is tied into jQuery's bespoke event system.
- With a few homemade jQuery plugins Sprites can be grouped and controlled via CSS selectors.
- Where possible I will try and use the up and coming CSS filters to achive effects in the game, and possibly fall back to SVG effects in older versions of FireFox.
- All sprites support controller objects that can be user, animation or bot controlled.
All I have left now is to rework the Map loading code so that pages can be loaded (just like in the original demo, by walking off screen) and then tie in the backend Node.js code so that a user can have an account and their progress can be logged. All in all 2012 was quite a good year ;)
