Isometric Perspective

[Edricus]

Hey guys. A thought just came into my head. How would you go about pulling off an Isometric Perspective in Phaser? I tried looking up some examples but many of them are using older versions of Phasers. I was wondering if anyone has a demo or example of a more recent game made in Iso using Phaser. Also some general information about how to achieve Isometric Perspective in Phaser would be greatly appreciated.

[lewster32]

I'm currently working on an isometric game and I've found it to be pretty straightforward if you've done isometric stuff before - follow any of the many isometric tutorials out there and they should be easily translatable to Phaser. One of the key things is the group sorting, which is thankfully very fast in Phaser to the point where it can be run per-frame - though unless you have a very specific reason to do this, I'd recommend you only sort when you need to.

 

One of the trickier aspects of isometric on all platforms I've done it on initially was finding a good way to tell which tile the cursor was over. I tried methods like pixel perfect detection, tile-shaped hitboxes and so on, both of which work but not all platforms support. I finally landed on a mathematical way to translate mouse position into an isometric grid co-ordinate:

    /**     * Translates screen space coordinates into board tile coordinates.     *      * @method Archaos.Cursor#_translateCursorPos     * @param {Phaser.Point} point The screen space coordinates to translate.     * @return {Phaser.Point} The resolved tile coordinates.     * @private     */    Cursor.prototype._translateCursorPos = function (point) {        point.x -= (this.board.group.x * Archaos.SCALE) - (Archaos.Board.TILESIZE);        point.y -= (this.board.group.y * Archaos.SCALE) - (Archaos.Board.TILESIZE * (2 / Archaos.SCALE));        var ly = (((2 * point.y - point.x) / 2) - (Archaos.Board.TILESIZE));        var lx = (point.x + ly) - (Archaos.Board.TILESIZE);        var ay = Math.round(ly / (Archaos.Board.TILESIZE)) - 1;        var ax = Math.round(lx / (Archaos.Board.TILESIZE)) - 1;        point.x = Math.round(ax / Archaos.SCALE);        point.y = Math.round(ay / Archaos.SCALE);        return point;    };

The above method basically takes a point, which is your mouse's position on the screen, and turns it into a point representing the co-ordinates on the isometric 'board'. It's quite implementation specific, but hopefully it sheds a bit of light onto one aspect I found particularly difficult.

[NateTheGreatt]

Thanks for the function, lewster! I employed it in my game, but I needed the actual pixel coordinates instead of the coordinates in tiles. If anyone else needs this functionality simple change these two lines:
 

var ay = Math.round(ly / (Archaos.Board.TILESIZE)) - 1;var ax = Math.round(lx / (Archaos.Board.TILESIZE)) - 1;

to this:

var ay = Math.round(ly) - 1;var ax = Math.round(lx) - 1;

That will result in exact coordinates.