Take the 2-minute tour ×

I'm wondering if any one knows a javascript formula which calculates the max number of tiles that would appear on the user's screen at any given time based on their screen size...

For example: If we say the screen size is 1200pixels by 600pixels and the tiles are 64 pixels by 32 pixels.

In a birds eye view this is easy to calculate but isometric kinda makes it all a bit more confusing for me to understand how to implement such a calculation in my code.

Does any one have any insight how to calculate it ?

share|improve this question
What are the details of the plane? E.g. the distance and angle from the screen? –  Phil H Apr 5 '12 at 14:09
add comment

2 Answers

up vote 0 down vote accepted

Assuming you are counting only tiles that fit fully (without getting cut-off):

  var verticalCount = Math.floor(windowHeight / tileHeight);
  var horizontalCount = Math.floor(windowWidth / tileWidth);
  var totalCount = verticalCount * horizontalCount;

If you want to count also tiles that fit partially (getting cut off by the window), just change both instances of Math.floor to Math.ceil above.

share|improve this answer
This only works for birds eye view, in isometric you end up with empty spaces in all 4 corners. The maths is different because the tiles are essentially at an angle. I already tried you're approach :P –  Dave Mar 9 '12 at 1:26
If this answer is not sufficient, I suggest you un-accept it. –  Phil H Apr 5 '12 at 14:08
add comment

If you are wanting to fill the screen with isometric tiles, not a board, and not counting the half tiles that could be displayed, then the formula would be

var cols = Math.floor(windowWidth/tileWidth)
var rows = Math.floor(windowHeight/tileHeight) 
var totalCount = (rows * cols) + ((rows-1)*cols)

this will give you the number of complete isometric tiles that can fit in that space.

share|improve this answer
add comment

Your Answer


