Top Down Game with rotating camera?

[muh2k4]

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

 

[spencerTL]

You can change the coordinate around which the world rotates by setting world.pivot.

Would this help?

[muh2k4]

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  

[samid737]

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

http://plnkr.co/edit/ZwJCh60p7RNlnyBOdOAV?p=preview

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:

 

[muh2k4]

Thanks! This looks exactly like what I am looking for.

http://plnkr.co/edit/ZwJCh60p7RNlnyBOdOAV?p=preview 

I will give it a try and let you know, if I succeeded  

[muh2k4]

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

 

[samid737]

Thats not nice indeed, I overlooked the problem part of the post so it seems... Maybe someone knows a fix for this? Il try to look into it.. 

[samme]

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);