Jump to content

Top Down Game with rotating camera?


Recommended Posts

Hello fellow developers,

I am new to the Game Development world, but I want to work on a small game. Basically the game idea is based on "Tap Tap Dash" like games. I want a constantly running player in a Top Down game perspective. For a better understanding check this link out: 

Currently I have managed to import a level from "Tiled" and move a player along the level including changing the direction. Therefore I set the camera to follow the player sprite. But now I have problems with the rotation of the camera. At some point I read that you cannot rotate the camera, but only the world itself. If I do this, the game is rotate on the Point (0,0). A 90 degree turn totally makes the world disappear. Can you help me out how I rotate the camera in a top view game? I also tried to rotate the tiledlayer and than reposition it. But it had no effect...

Also do you know of someone who has implemented a game like this in Phaser with the camera rotation or do you have some basic advice for me how to approach this game? I find very little information about this type of games for Phaser... Maybe I should use another Framework for this? I really appreciate any kind of help :)


Link to comment
Share on other sites

Hello spencerTL,

Thanks for this idea! I tried to apply it like this:

        this.game.world.pivot = new Phaser.Point(this.player.x, this.player.y)
        this.game.world.rotation = Math.PI / 2;

But something weird happens: 

I should mention that I am using Tiledmaps for the level design (Water + Road & Arrows) and Sprites for the coins (generated from Objects from Tiled).

Maybe I am missing something essential... Also when I try to zoom into the world with 

this.world.scale = new Phaser.Point(2,2)

The camera get's totally lost at the top left of the game. 


Thanks for your help so far. I would really appreciate further suggestions. I am a little bit lost here :) 

Link to comment
Share on other sites

It takes a bit more effort to achieve this using groups. I think this example might help you out:


It might be more difficult to apply to your case depending on how you setup your walking paths, but you should be able modify your game to work just like the example.

a post about this:


Link to comment
Share on other sites

  • 2 weeks later...

samid737, I succeeded to rotate the world with your help. Thank you. The only problems I am having now is that the camera is not updating. Due to the rotation, it changes what of the level should be seen. But this areas stay black! (see screenshot). BUT what is really strange is that the coins (which are sprites generated from objects) are visible! Why is the tiledmap behaving differently? 

I tried to resize the world and stuff like that, but I am missing something again. Hopefully I can count on your help again.

Thank you


Screen Shot 2017-05-11 at 10.00.54.png

Link to comment
Share on other sites

I think at the start you can expand the tilemap layer to cover the viewport even while rotated, something like

var size = Math.ceil( Math.max(Math.SQRT2 * camera.view.width, Math.SQRT2 * camera.view.height) );

tilemapLayer.resize(size, size);


Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...