Friday, 9 January 2015

Procedural Generation - Part Two - Dungeon On A Canvas

Last time the Dungeon was rendered using a PRE tag - this time we will us an HTML5 canvas and use PNG files to render a better looking display. In 2014 I entered a game jam and from that I have a set of RPG graphics that will be used for this demo. The jam's theme was 8-bit so all the gfx tiles are 8 pixels by 8 pixels.

There are few changes since last time... The code has been tidied up and rearranged. The new version can be found under the parttwo folder. PGMap - has a new method addRandomObject that sets a block to a particular type if VOID. This is used to scatter some trees around the world.

render.dart - LoadImages() Starts the Load of images and waits for them to complete. drawMap() - renders onto the Canvas element. The new feature, trees, are deliberately irregularly place for a more organic look - this will be important when there are more of them and characters are moving past them.

A new addition to the User interface is a ZOOM slider to scale the display.

Code is available on Github and a live demo is available here.

Next time we will look at putting a hero and some items into the Dungeon.