Html5 Canvas/Javascript - Isometric Calculations

Consider a cell based gameworld that consists of CellX by CellY cells. The game world should be represented as an array of arrays. Essentially a grid of cells. Each cell is CellWidth (width) by CellHeight (height) in pixels.

When rendered as an isometric grid each cell is rotated by 45 degrees and the height of the cell is then halved. The new dimensions of the cell can be referred to a the DrawWidth and the DrawHeight. Ie, the values that will be used when drawing a cell. For details see: <[url removed, login to view]> but note, this project is for javascript and has some differences in that the game world may be larger then the current viewport.

Given a viewport which measures ViewPortWidth (Width) ViewPortHeight (height) which can be smaller or larger then the gameworld. This viewport is the html canvas and will be used to render a players view of the cell grid.

However, the cells will be rendered from the isometric perspective. Given these rules - How do you make the following calculations. (See details for calculations).

All code should be written in Javascript using an html 5 canvas. Calculations should be backed up by graphic examples/tests demonstrating the correctness of the information in question.

## Deliverables

1) Given CellWidth and CellHeight - what is width and height of the isometric cell in pixels (for drawing). What is the length in pixels of an isometric edge. (see 1.a on attached image)

2) Given an x,y position on the view port - determine what game world cell the x,y position resides within.

3) If the view port of a given size was always to be centered on a given cell (cameraCellX,cameraCellY) what range of cells will be fully or partially visible in the current the view port. (based on the size of the view port). Changing the cameraCellx or cameraCellY should fetch a new range of cells. Do this without iterating through all game cells. Ie, calculate the range dynamtically so we can efficiently loop through and draw visible cells.

4) Given the number of a cell in the gameworld array - determine the x,y position of the cell on the current viewport. Values returned should be less then 0 or greater then the available view port width/height if a cell falls outside the current view port.

5) Given the CellWidth + CellHeight - Calculate the DrawWidth + the DrawHeight.

6) Given the DrawWidth + the DrawHeight - calculate the original CellWidth + CellHeight.

7) How to calculate the maximum size of the canvas/viewport required to view all cells fully?

8) How to calculate the minimum cell size required to view all cells full in the current sized canvas/viewport?

Programmation C Java JavaScript PHP

Nº du projet : #3104558

À propos du projet