Salvatore

Rotate Camera

Recommended Posts

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

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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.

Guest
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.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.