Rotate Camera

[Salvatore]

How to rotate the camera?? Is there a angle method?

[Taleforge]

Hi,

 

see: http://examples.phaser.io/_site/view_full.html?d=world&f=move+around+world.js&t=move%20around%20world (press Shift + left or right)

 

This rotates the world not the camera itself!

[CtlAltDel]

Not possible without trickery.

 

see http://connected.dnd.utwente.nl/~wouter/phasermap/

 

use arrowkeys to move, and shift-left and shift-right to rotate...

 

The relevant code:

 

  function Play() {}  Play.prototype = {    create: function() {          this.game.world.setBounds(-2048,-2048,4096, 4096);      this.worldgroup = this.game.add.group();      this.backdrop = this.game.add.sprite(0,0,'backdrop');      this.worldgroup.add(this.backdrop);            this.player = this.game.add.sprite(1024,1024,'player');      this.player.anchor.setTo(.5,.5);      this.worldgroup.add(this.player);      cursors = this.game.input.keyboard.createCursorKeys();    },    update: function() {        if (cursors.left.isDown)        {            if (cursors.left.shiftKey) {              this.player.rotation -= 0.05;              this.worldgroup.rotation = -1*this.player.rotation;            } else {                this.player.x -= 4 * Math.cos(this.player.rotation);                this.player.y -= 4 * Math.sin(this.player.rotation);            }        }        else if (cursors.right.isDown)        {            if (cursors.right.shiftKey) {               this.player.rotation += 0.05;               this.worldgroup.rotation = -1*this.player.rotation;            } else {                this.player.x += 4 * Math.cos(this.player.rotation);                this.player.y += 4 * Math.sin(this.player.rotation);            }        }        if (cursors.up.isDown)        {            this.player.y -= 4*Math.cos(this.player.rotation);            this.player.x += 4*Math.sin(this.player.rotation);        }        else if (cursors.down.isDown)        {            this.player.y += 4*Math.cos(this.player.rotation);            this.player.x -= 4*Math.sin(this.player.rotation);        }        this.worldgroup.pivot.x = this.player.x;        this.worldgroup.pivot.y = this.player.y;        this.worldgroup.x = this.worldgroup.pivot.x;        this.worldgroup.y = this.worldgroup.pivot.y;        this.game.camera.focusOnXY(this.player.x, this.player.y + this.player.height - this.camera.view.halfHeight);    }  };

The phaser example from the @Taleforge rotates around the 0,0 coordinate. My example rotates around the coordinates ot the player.

 

My way works by adding a new group 'worldgroup' this is the group that gets rotated and should contain all objects normally in game.world. 

 

Good luck

[luckylooke]

... 

 

Good luck

 

 

Live DEMO:

http://jsfiddle.net/luckylooke/uL37am1h/4/

Edited August 21, 2014 by luckylooke

[luckylooke]

Live DEMO:

http://jsfiddle.net/luckylooke/uL37am1h/4/

 

Live DEMO p2 used

http://jsfiddle.net/luckylooke/uL37am1h/6/

Edited August 24, 2014 by luckylooke

[pBun]

I've added tilemaps and arcade physics to this model and am running into a few issues that I can't seem to resolve.

http://plnkr.co/edit/6wf6xu2oPynePPSUKTac?p=preview

 

Large portions of the tilemap are missing when rotating the group since it looks like they are clipped to the canvas height/width. I can't seem to find anything to overwrite this. Also, collision detection seems a little buggy as I'm able to bypass walls if I wiggle a little while driving into them, I might try P2JS and see if that resolves the physics issues, but I have no idea what to do about the tilemaps. Any ideas?

[luckylooke]

I've added tilemaps and arcade physics to this model and am running into a few issues that I can't seem to resolve.

http://plnkr.co/edit/6wf6xu2oPynePPSUKTac?p=preview

 

Large portions of the tilemap are missing when rotating the group since it looks like they are clipped to the canvas height/width. I can't seem to find anything to overwrite this. Also, collision detection seems a little buggy as I'm able to bypass walls if I wiggle a little while driving into them, I might try P2JS and see if that resolves the physics issues, but I have no idea what to do about the tilemaps. Any ideas?

It seems to be a bug, I dont see any problem in code. And I dont think p2 could solve the problem. You should open issue in phaser github  

[pBun]

It seems to be a bug, I dont see any problem in code. And I dont think p2 could solve the problem. You should open issue in phaser github

 

I dove into the source of Tilemap / TilemapLayer and it seems you can explicitly set the width/height of the of the rendered layer. Setting it to the game.world width/height partially fixes the issue, but it still clips when rotating left (counterclockwise) 90 degrees. I'm going to dive a bit deeper into the source and see if I can't figure out what the underlying issue is.

 

Updated plunker:

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