Steppe: An HTML5 canvas 2.

5 D landscape renderer
Andrew J. Baker

Breakdown
Breakdown (this) Freewar Fleeting Fantasy Steppe What is Steppe? What are Steppe's features? What's next? Links Questions And live demo...

Freewar
Free online MMORPG Mostly German-speaking players Became moderator on the only English server Grew tired of grinding

Fleeting Fantasy
Work-in-progress MMORPG Inspired by the Fighting Fantasy gamebooks of the '80s Client-side: HTML5 2D canvas and JavaScript Server-side: PHP and MySQL

And, so on to Steppe...
(Fleeting Fantasy's renderer)

What is Steppe?
It's a work-in-progress HTML5 canvas 2.5D landscape renderer It's written in a 'modern' JavaScript style And using HTML5, it runs in 'modern' Web browsers IE9+ Mozilla Firefox Google Chrome Safari Opera etc. Free to use; public domain I encourage you to steal it

What are Steppe's features?

Currently implemented features include: Configurable render quality; from low, through medium, to high Antialiasing Reflection mapped water (semi-transparent too) 360 degree panoramic skies Multi-texture mapped terrain Buildings

Configurable render quality

_renderer.hint('fastest');

Configurable render quality

_renderer.hint('dont-care');

Configurable render quality

_renderer.hint('nicest');

Antialiasing
_renderer.enable('smooth');

Reflection mapped water

_renderer.enable('reflection-map');

Reflection mapped water

_renderer.disable('reflection-map');

360 degree panoramic skies

Using sky0.png...

360 degree panoramic skies

Using sky2.png...

Multi-texture mapped terrain

Textures are composited by indexing a greyscale heightmap

Buildings
POV-Ray rendered hut

Buildings
Top-down (with textures)

Buildings
Top-down (with y axis greyscale gradient)

Buildings
Steppe-rendered hut

What's next?
Lightmaps (for shadows) Improvements to the API Clean up the 'new' Compositor class Get on with the game!!!

Links
Fleeting Fantasy 'live' demo http://fleetingfantasy.com/ Fleeting Fantasy blog http://fleetingfantasy.wordpress.com/ BBGameZone browser-based game dev. forum http://bbgamezone.net/ #bbg IRC channel irc.freenode.net, #bbg Screenshot Saturday #screenshotsaturday and http://screenshotsaturday.com/ Follow me on Twitter @andrew_j_baker2

Questions
And live demo...