Isometric Rendering Engine

Recommended Posts

Hey Guys,


I'm currently coding a new map editor. Most people use Tiled but I prefer to roll my own because it allows me to customize, realize my own ideas and I always learn new things down the road. This will still take me some time but most of the rendering engine is already written.


I'm posting this topic, because I'm quite excited about the Isometric Rendering Engine which I wrote in the past 8 hours. Or maybe it is just because I didn't sleep at all.


So I have created a test map of 4096x4096 tiles, each tile being 64x32 pixel in size and ran it on fullscreen on my crap laptop.

And I surprisingly get 60 fps.



This is written in webgl and I'm sure it will be quite easy to port this to PIXI and Phaser too.

I also have a canvas based renderer, which is slightly slower.


It was quite a pain to figure out the correct math for my shaders but it seems to work fine so far.


It would be really awesome if you guys could test out the map on the following link and maybe report back your fps, so I can be sure that this works on more than only my own laptop. (might take some seconds to load because it's creating a huge tilemap during load)

Things I want to add next:


* Animated Tiles

* Layering

Share this post

Link to post
Share on other sites

I get 58-60fps pretty consistently on firefox on mac book air (2011)


great work!

Sounds great! :)

Hopefully gonna keep that up as soon as there are more than just 1 layer and animated tiles.

Right now I'm doing 3 texture lookups in my shader, but I want to reduce the amount to just 2 lookups.

If anyone knows a pretty fast diamond/isometric hit test algorithm, then please let me know.

Share this post

Link to post
Share on other sites

Thanks for letting me know, eyp.

It's really interessting that you guys get decent fps on firefox. For me it's always the slowest compared to IE and Chrome.

IE only gets worse than FF as soon as there are a lot things to render.

Here are 2 screenshots of the current state of the editor:



Basically, you can work on different views which has quite a few reasons.

1. I want to be able to edit a map on different layers at the same time.

2. I want to be able to view what other people are doing on the map.

3. I want to easily copy & paste or edit maps on different locations.

Most of it is already programmed, so maybe there can soon be a beta.

Share this post

Link to post
Share on other sites

I suggest you to use the same approach as , separate rendering part from culling and editor logic. Basically, every time you need to add/remove tiles to screen, you  1)clear tilemap,  2)calculate which tiles do belong to new screen 3) re-calculate buffers.

Also, I hope your tiles have centers at even points, (i+j)%2==0 and corners at odd points, (i+j)%2==1 , that way tile's center coordinate on screen is x=i*w, y=j*h, where w and h are half-width and half-height of tile. That coordinate system is the best for isometric view. Please dont try to make Age of Empires :) For heights you can store z-coord for every center and corner, that way your map will be divided to triangles and it will be easy to render it.

I can help you with that project if you make it open-source!

Share this post

Link to post
Share on other sites

Hey Ivan,

thanks for the feedback. This topic is quite old.

I was really busy with uni and work (freelancing) in the past year. Pretty much got a 50-60 hour work week.


My renderer works differently. It automatically culls the frustum and just needs to draw 1 single quad.

It's pretty much the fastest I came up with. 


The map itself is a simple texture. Each pixel represents 1 tile.

The red channel is the x and the green channel is the y for the tile position in the spritesheet.

The blue channel can either be 0 or 1, where 1 means that the tile is animated.

Animated tiles animate over y, y+1, y+2 and y+3.


I have no intention to support depths. 

Anything that can overlap the character, like the character standing behind a tree, shall just be a simple sprite in a spritebatch traveling with the character.


Here is an example (not too optimized) and ignore the fog of war around the cursor LOL! 

I was just experimenting.

This is the spritesheet for the demo.

The first water tile can be animated and then loops over those 4 water tiles.


Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.