Isometric Perspective

Recommended Posts

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.

Share this post

Link to post
Share on other sites

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.

Share this post

Link to post
Share on other sites

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.

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.