Author Topic: Work in progress: HTML5 canvas-based 2.5D landscape engine (Read 6873 times)

andrewjbaker · « **on:** December 28, 2010, 07:31:10 PM »

Hi all,

I just thought I'd post a few details about the 2.5D landscape engine that I'm currently working on.

For those of you that follow me on Twitter, I apologise, you've probably already seen the screenshots and maybe even the [poor-quality] video.

I'm using a simple heightfield rendering technique to display a faux-3D outdoor landscape at a resolution of 320x200 pixels.

Here's an early screenshot:

I've since switched the colour palette to a slightly more muted (realistic?) one:

Because the resolution is quite low, I'm also exploring the possibility of increasing the resolution to 640x400 as can be seen here:

Depending on performance, the interlacing may remain, or I might choose to scrap it.

Current frames per second is approximately 10 at the mo' but that's on my old 2GHz laptop, so your mileage may vary.

The code is being beautified somewhat and then I'm going to sort out hosting for some real-world testing.

I've created this video; it isn't the best quality, but hopefully it'll give you an impression of what I'm actually doing:

http://www.youtube.com/watch?v=dKSVwqAD9aE

When I'm happy with the sky and terrain rendering, I'll then move on to adding 2D billboards for trees, shrubs, rock formations, NPCs, etc.

I'll keep you posted.

Barrikor · « **Reply #1 on:** December 28, 2010, 09:25:57 PM »

Interesting project,

IMHO, 640x400 without the interlacing would probably be what people would find the most useful...

What method are you using for the sky?

andrewjbaker · « **Reply #2 on:** December 28, 2010, 10:33:38 PM »

The sky is a single large image equivalent to six times the width of the canvas.

The angle of view is 60 degrees and the canvas width is 320 pixels so the overall width of the sky image is equal to 320 * (360 / 60) or 1,920 pixels.

The sky image is half the height of the canvas (200 / 2) which equals 100.

The image I'm using is a 360 degree panoramic sky so that it wraps nicely at the horizontal edges.

Mufasa · « **Reply #3 on:** December 29, 2010, 02:35:00 PM »

Interesting. I've been waiting to see where HTML5 gaming goes. Personally, I'm not sure how much of my code I want visible on the front end. Even HTML5 apps risk exposing a lot of their backend since the ajax calls to various API points are easily visible

andrewjbaker · « **Reply #4 on:** December 30, 2010, 08:10:09 PM »

Gearing up for real-world testing...

I've added a few UI niceties. HTML5 Web fonts are cooooool.

Now... I'm edging towards a fantasy RTS moreso than the RPG I originally planned tho'.

I think the single best way to approach AJAX is to consider any API calls as an extension only of your game's UI. Most if not all game logic and state should be handled server-side.

Barrikor · « **Reply #5 on:** December 30, 2010, 09:16:55 PM »

What are your plans for the engine, are you going to keep it in-house, or license it as proprietary/open source ?

andrewjbaker · « **Reply #6 on:** December 30, 2010, 10:46:11 PM »

Generally speaking, I'm not a fan of licenses. The landscape engine, certainly at the present time, is very rudimentary. Although it looks impressive, the actual JS code for managing the camera and rendering the view is only 257 lines of code.

I intend to add more functionality, make what I have so far more robust, etc. for the purposes of creating my own game but I don't see why it needs to be exclusive to me. Much of the meat of any Web-based game resides on the server anyway and resources detailing the approach I've used to simulate a 3D environment are freely available across the Internet.

When I'm done testing the landscape engine (minus the 2D billboarding) I'll make the source available without obfuscating the JS.

The landscape engine will just likely be put in the public domain; I have an attachment to the final product, the code is just the means.

andrewjbaker · « **Reply #7 on:** January 08, 2011, 07:52:44 AM »

More screenshots... this time dealing with different colourmaps.

From top: polar, oceanic, semi-arid.

Quite pleased with the polar colourmap; other two could use a little more work. :p

Thanks for looking...

andrewjbaker · « **Reply #8 on:** January 13, 2011, 04:32:27 PM »

Following an as yet bungled attempt at rendering the framebuffer in a similar manner to conventional video games, I've subsequently altered the logic to render-on-demand as suggested by lolninja on our IRC channel, #bbg.

JS code needs OOP'ing more, but I have now uploaded a 'live demo' of my HTML5 canvas 2.5D landscape engine at http://fleetingfantasy.com.

If it breaks for you, I'd appreciate hearing about it (assuming you're not using IE).

I'm all for transparency, if it breaks, don't bother PM'ing me... bung it on here.

Thx.

Mufasa · « **Reply #9 on:** January 13, 2011, 04:53:46 PM »

Pretty cool. Worked in Firefox 3.6.8 and latest version of Chrome

andrewjbaker · « **Reply #10 on:** January 14, 2011, 02:50:47 PM »

Quote

Pretty cool. Worked in Firefox 3.6.8 and latest version of Chrome

Thank you Mufasa.

Minor performance enhancement (forsaking quality of the rendered image slightly) added this evening.

andrewjbaker · « **Reply #11 on:** January 19, 2011, 08:00:13 PM »

You can now walk around using the arrow keys... if you hold the keys down tho', the key events back up so just tap 'em for now. ;-)

http://fleetingfantasy.com/

Barrikor · « **Reply #12 on:** January 20, 2011, 12:26:04 AM »

Oh Nice

Holding the keys down seems to be working fine for me (Firefox 3.6.3), or maybe you've been working on it since your post.

andrewjbaker · « **Reply #13 on:** January 20, 2011, 07:46:08 PM »

Haven't changed anything Barrikor. My guess is that your computer is a lot faster than mine.

Anti-aliasing toggle added this evening.

andrewjbaker · « **Reply #14 on:** February 01, 2011, 11:20:37 AM »

The JS code for my landscape engine has recently been modernised. It isn't perfect and there are still a couple of amendments required before I upload it to public GitHub, but you can learn from it and use it as you wish.

On http://fleetingfantasy.com/ I have also added a hand wielding a sword for that extra fantasy RPG touch.

andrewjbaker · « **Reply #15 on:** February 06, 2011, 06:00:10 PM »

I wasn't sure whether I'd make any progress on Fleeting Fantasy this weekend beyond basic back-end stuff, but I have:

This screenshot shows the distinction between navigable and out-of-bounds terrain. The player will be able to walk freely in the lighter areas but straying too close to the darker areas will trigger a prompt asking the player whether they wish to transition to the next adjacent area.

Also, and admittedly it's a little difficult to spot, rendering the terrain is split into two sections. The upper-half of the rendered terrain is noticeably blockier but it is antialiased. Whereas the lower-half of the terrain is less blocky and unantialiased.

I'm in the process of gearing up for implementing player transitions from one area to the next and this requires me to store the heightmap data for all areas. Heightmaps are greyscale .png images 256 pixels square. These heightmaps are scaled up to 1024x1024 before being used to calculate the rendered terrain. If you nip on the Web site, you'll get an idea of the size of a single area described using a single 256x256 heightmap.

An area ID is a six-digit integer giving me the capability to create a game world that has 1,000 * 1,000 = 1,000,000 potential areas for players to explore.

OK... back to work.

andrewjbaker · « **Reply #16 on:** February 12, 2011, 11:24:57 AM »

Added reflection mapping last night for #screenshotsaturday.

Original on the left, reflection mapping on the right...

Next week, I'll add transparency so the difference between the terrain and the water isn't so harsh.

Reflection mapping isn't live yet, there's a couple of rendering artefacts that need eradicating first.

DJK · « **Reply #17 on:** February 12, 2011, 02:48:11 PM »

Really do like this, even though it did crash my browser a few times (only for a second or two), before actually stopping me from going into a 'dark' area.

andrewjbaker · « **Reply #18 on:** February 12, 2011, 08:02:51 PM »

Yeah, doing 3D in the browser without WebGL is pretty CPU-intensive.

But, joy of joys, reflection mapping is now live on http://fleetingfantasy.com/. Yay!

andrewjbaker · « **Reply #19 on:** February 12, 2011, 09:06:18 PM »

Yet another screenshot, this time with the polar/arctic colormap...

Enjoy.

andrewjbaker · « **Reply #20 on:** February 13, 2011, 05:27:00 PM »

This has to be one of my most productive weekends ever.

Now I have water separate from the colormap, it means I can globally alter the water level.

Here's what a flood looks like:

Note also that I have made the water semi-transparent and I've reduced the overall harshness where water meets terrain.

andrewjbaker · « **Reply #21 on:** February 17, 2011, 05:06:15 PM »

Aaaarrrggh! Fleeting Fantasy is now real-time. People have reported frame rates from 10-25 fps. WARNING: It's pretty darn CPU-intensive so best viewed in a browser w/ decent JS performance.

andrewjbaker · « **Reply #22 on:** February 19, 2011, 08:42:20 AM »

Begun integrating 2D billboards... not live yet tho'.

andrewjbaker · « **Reply #23 on:** February 20, 2011, 08:40:12 PM »

Big-time progress...

To say I'm happy, is an understatement.

And don't forget that the renderer is free for use to all. Still needs some polish; sprites aren't quite ready for prime-time just yet... not long now tho'.

andrewjbaker · « **Reply #24 on:** March 06, 2011, 02:21:25 PM »

OK... cue the fanfare...

It's not 100% perfect just yet, but I've decided to push my sprite rendering code live anyway.

Go check it out... http://fleetingfantasy.com/

News:

Author Topic: Work in progress: HTML5 canvas-based 2.5D landscape engine (Read 6873 times)