Work in progress: HTML5 canvas-based 2.5D landscape engine

[andrewjbaker]

Work on Fleeting Fantasy and Steppe (the HTML5 canvas 2.5D landscape renderer) continues apace.

With Harkins' adoption of Steppe for Oaqn, you can rest assured that Steppe ain't gonna' fizzle out anytime soon.

Chris described FF as my 'insane game'... well things are getting even more insane now:

Steppe is being ported to PHP!

WTF? Let me explain...

HTML5 encourages the notion of a plug-in free Web and with Steppe I'm taking that to the extreme. What if someone's using a browser that doesn't support HTML5 canvas? Or their hardware isn't particularly powerful? Have no fear, images can be rendered server-side using the PHP version!

The port is a proof-of-concept at the moment and it'll shortly be entering a testing phase. Just like the JS version of Steppe (https://github.com/andrewjbaker/Steppe) it'll be made available on GitHub and free for all to use.

Watch this space.

[Harkins]

If someone is using a browser that doesn't support canvas you tell them to step up. PHP, man, ew...

[andrewjbaker]

LOL. There's a little more to it than just PHP... but let's get the proof-of-concept out of the way first, eh?

Plus, given my employer, I'm kinda' obliged to keep the PHP end up, LMAO.

[Chris]

Plus, given my employer, I'm kinda' obliged to keep the PHP end up, LMAO.

So there really is justice in this world

[andrewjbaker]

I'm almost in a position to release the PHP port of Steppe. I have successfully replicated all of Steppe's functionality server-side.

Here's a sexy screenshot:

Erm, before you ask... no, the PHP version isn't fast. But there are plans to create a PHP extension (written in C++) which should greatly increase rendering speed. The initial port is a proof-of-concept and I think it's fair to say that the concept has been proved.

[andrewjbaker]

As promised, the PHP port of Steppe has been pushed to GitHub! Grab it at https://github.com/andrewjbaker/Steppe.

[andrewjbaker]

Steppe, and by extension Fleeting Fantasy, has got sprites! Near-correctly rendered sprites too, I hasten to add.

Check out this screenshot:

Got an HTML5-capable browser? Then go one better, check out the updated FF demo!

Expect the GitHub repo for Steppe to be updated in the next couple of days. Following that, expect sprites to be added to the server-side PHP renderer.

Remember, it's there if ya' wanna' make use of it. And I'm on-hand if you have any questions.

[StudioFortress]

Very nice. You might want to split the work up so it is run across multiple functions, using a setTimeout with 0. When the page first shows the whole page freezes for quite a while, and this will solve that. It'll also prevent any "do you want to stop this script?" dialogues popping up.

[andrewjbaker]

Ah, yeah... it does that. The JS compositor (used to composite the heightmap and textures together to form the texturemap) is quite slow. Unfortunately, it's all encapsulated in Steppe.

But, for Fleeting Fantasy I plan on having already pre-composited the texturemaps server-side so it won't be an issue eventually.

I'm glad you liked it dude.

Today, I've been adding shadows to the 2D sprites to give them a feeling of 'volume'...

Hopefully the live demo will be updated tomorrow.

[StudioFortress]

I also had a quick look at some of your rendering code. One thing I noticed is that you work with a lot of your colours as objects containing separate red, green, blue components; if you pack them into a 32-bit int instead you should receive a speed-boost. You can pack them in, and get them out, using bit-shifts and ORs, which is much cheaper then object creation + getting and setting properties. You will also be able to perform faster pixel manipulation techniques, such as faster alpha calculations, by taking advantage of bit-masks and bit-twidling.

For the highest quality setting, you could also take advantage of the pixel manipulation methods on the canvas. They allow you to get the pixel data out (which you'd only need to do once), set the new pixel values (instead of drawing a small rectangle), and then just put the data straight into the canvas. For the highest quality setting, it means drawing a 1x1 rectangle + setting the colour + string concatonation (for the rgb string) is replaced with just a single array write (and the ImageData object might use a typed array, which is even faster). It might also be faster for the medium quality level too, where you draw 2x2 rectangles.

Given that those optimizations would be multiplied across tonnes of iterations, the speed up could be quite significant.

[andrewjbaker]

Ha, excellent. I'll defo explore these ideas.

[StudioFortress]

You might find some of those optimizations, individually, double or even quadruple performance. Although what you are doing is expensive, IMHO there really isn't any reason why the highest quality version couldn't be gotten down to rendering within 500ms.

[andrewjbaker]

Steppe, Fleeting Fantasy's renderer, now has a real-time Mars demo that implements a lot of the suggestions kindly proffered by StudioFortress. Many thanks guys.

Check it out: Mars Demo

[Mufasa]

Steppe, Fleeting Fantasy's renderer, now has a real-time Mars demo that implements a lot of the suggestions kindly proffered by StudioFortress. Many thanks guys.

Check it out: Mars Demo

it doesn't fully capture my keystrokes. In firefox I have it set to start searching when I type a key on the page, so I've got it entering a million W's lol

[andrewjbaker]

Ha, ha... OK. Let's hope you're the exception. Thx for looking Mufasa.

[Marek]

Nice, runs very smoothly

[andrewjbaker]

Coloured fog now added to Steppe. http://steppe.fleetingfantasy.com/