Isogenic Engine: HTML5 Canvas - 4 MILLION TILES ON A MAP in JAVASCRIPT! - Advanced Paging Algorithm

This video demonstrates the Isogenic Game Engine's advanced paging system allowing pretty smooth paging across a HUGE 2000 x 2000 tile map - 4 million tiles are populated on the map with random "grass" tiles and I've also added a few "pavement" tiles as well. You can also see that four independent viewports are running in the demo.

Each tile is a diametric 20 x 10 pixel image and each paging tile is 1000 x 500 pixels (50 x 50 tiles) and is loaded dynamically. This demo is running on a local Apache web server and paging will not be this fast when loading data from the web, however as a performance test against the paging algorithm, I believe this represents excellent results.

The Isogenic Game Engine is written entirely in Javascript and what you see on screen is pure HTML with Canvas elements as viewports to the engines' world.

You can see more vids of the Isogenic Engine in action here: http://www.youtube.com/user/coolbloke1324?feature=mhsn

Follow us on Twitter here: http://www.twitter.com/IsogenicEngine

Interested in the engine? Leave a comment!

Category:

Science & Technology

Tags:

• isometric
• game
• engine
• html5
• canvas
• viewports
• easy
• code
• browser
• millions
• tiles
• diametric
• sprites
• html
• javascript
• city
• town
• fast
• speed
• tech
• test
• 0.0.4
• 4000000
• four
• million

[MrSandervanDoesburg]

How do you get so much fps in google chrome? When I create a canvas the size of the browser screen, I get a maximum 30fps. And that is just "execute drawimage() as much possible". And when I make a smaller canvas I get much higher fps with exactly the same test...

[coolbloke1324]

@MrSandervanDoesburg Well the trick is NOT to execute drawImage() unless you actually have to. Research dirty rectangles as that is how 60% of the performance in this demo is achieved. Since the viewport is panning, only the tiles at the edge of the screen are actually being drawn as that is the only section where something on screen has changed.

The other 40% can be attributed to methods that I am unable to share with you for business reasons but it is all written in JavaScript.

[coolbloke1324]

@mappum It's not open source I'm afraid sorry. I have considered the open source route but right now I don't believe it is the best way forward when trying to set up a new business around a single technology project. Thanks for your interest in helping out though!

[coolbloke1324]

@iamyan007 The project is almost ready to launch as a beta product so we don't need any contributions at the moment, however I would be interested in seeing your CV or previous work / experience as once launched we will be looking to expand the company and bring in more talent capable of taking the engine further.

[coolbloke1324]

@bass109 This is a technology post, not a religious propaganda forum. Please don't spam video comments, it's not very Christian. I was brought up Roman Catholic even I take offense at this sort of post.

[mappum]

I would be very interested in contributing to this project if it is open source.

[obludaaa]

@Marker680 guess..

[coolbloke1324]

@Marker680 Hey, yeah the whole thing is canvas based. No other elements are used to show tiles etc.

[Marker680]

N1ce job.

Just 1 question - for rendering are u using 1 canvas or div filled with stuff?