Howdy guys.
I've been running a bit of an experiment lately with the new HTML5 Canvas element. It started as a simple "move up down left right and stop at blocks" thing, but it's grown into a bit of a beast. I'm a massive fan of zelda games so of course this thing has grown into a 2d zelda engine of sorts. As of now it only works in webkit browsers (chrome, safari, etc). Something isn't working in firefox and internet explorer will probably never work. Nevertheless I think it's pretty damn cool to run an engine like this in a browser.
I decided to go about it by programming tiles based on behaviours and then adding on graphic after that. Right now I'm using a debug drawing mode to display the behaviours of the tiles. I've not actually got around to adding in any background graphics yet, but the Link sprites from LTTP are in there and working as intended.
It's a pretty robust collision engine I've got going here actually. The gridsize can be any number of pixels in size and the "your man" boundaries can be any size, and you can go at any set speed.
The collision tiles I've programmed in currently are: walkable, non-walkable, diagonal top left, diagonal top right, diagonal bottom left, diagonal bottom right. The sub-attributes of the tiles are, ladder (half speed), ice (slippery), shallow water (sprite change), deep water (swimming).
There's a z-index for tiles, so we're on a specific 'floor'. The further down the floor the darker the tile appears at the moment. You can jump from calculated ledge locations based on the tiles and z-index of your location in relation to possible jump locations.
There's bridges, so locations that appear over other walkable areas. They can have any collision of attribute as a regular tile, they're indicated by a green border or general green colour. These are controlled by designated bridge entrance' tiles, so you can only activate the bridge layer when entering on a bridge entrance tile. You can also jump down from bridges when there's walkable tiles of a lower z-index at the edge of the bridge.
The basics of the engine in terms of drawing and displaying and whatnot is pretty standard. I'm drawing a set of 'layers' which are independent canvas layers the size of the total area. Background, landscape, bridge, sprite, over. Then applying each layer to a main canvas element the size of the display area with a negative offset. This moves and re-arranges the pre-drawn layers based on position and animation sequences and only has to redraw when the area is initially loaded.
Anyway,
here it is. There's just a small test area set up for now, but there's basically just a giant array that could have any combination of tile behaviours in it. Adding graphics will be a simple matter of adding in a sub-value of the X+Y position in the array with a graphic tile reference, then switching from the drawLandscapeBehaviour method to the drawLandscapeGraphics method.
Keys that do stuff at the moment:
Up, Down, Left, Right, X (Dashing)
I'm obsessively working on this thing right now so there will probably be updates to it a lot.
