Search code examples
phaser-framework

Invert y axis in Phaser


I'm building a two player board game. I want to display the board from the current player's perspective. So if I'm the player at the "bottom" of the board, I want to invert the y-axis and move the origin to the bottom-left corner of the canvas. It would also be nice to have mouse clicks transformed as well. And I only want to affect the sprite's position, not their rotation -- I always want them to be pointing up. I'm not seeing an easy way to do this with Phaser. Is there one?

I tried doing world.scale.setTo(1, -1) and then world.y = -world.height, but modifying world.y doesn't seem to do anything.


Solution

  • Not a direct phaser feature however I do recommend that you run your in-game world coordinates the same as phaser, and simply swap the display coordinates, so instead of placing your board game pieces at say

    queen.position.set( 10, 10 );
    

    it would be

    queen.position.set( 10, worldHeight - 10 );
    

    From here, build a wrapper around placement of your sprites, so it knows about mirroring:

    placePiece( sprite, x, y, direction );
    

    And in this function, check for direction to see if coordinates should be flipped or not.