Jump to content

Can't figure out how to translate camera deadzone example to project.


InstaK
 Share

Recommended Posts

I'm trying to figure out how to get the same functionalities in my project as in this example.

I've got a rectangle which is the player, the rectangle should always be fixed in a greater world. So the canvas would be 1815x660 and the world bounds would be 1815x1980 for example, you can only navigate vertically unlike the example.

When I'm adding the same code as in the example, my rectangle just "drops" to the lower right when I've set the velocity to zero. If I don't set the velocity to zero my rectangle keeps on dropping to the lower right.

So without the physics it looks like this (and I can use my key bindings to move the rectangle up and down, but that's not what I'm trying to achieve. I want the rectangle to be fixed and the world to move around) : 

340163517c.png

 

With the physics applied and the velocity set to zero I'm getting this (here my key bindings are not working):

 4ea3688cd0.png

 

This is what I've tried in code:

export default class Play extends Phaser.State {
  create() {

    this.initCanvas();

    this.world.setBounds(0, 0, 1815, 660 * this.timesHeight);
    this.physics.startSystem(Phaser.Physics.P2JS);

    this.initPlayer();

    this.physics.p2.enable(this.player);
    // this.physics.enable(this.player, Phaser.Physics.ARCADE);
    // this.player.body.collideWorldBounds = true;

    this.camera.follow(this.player);

    this.camera.deadzone = new Phaser.Rectangle(100, 100, 600, 400);

    this.keys = this.input.keyboard.createCursorKeys();

  }

  initCanvas() {
    this.timesHeight = 1;
    this.canvasWidth = 1815;
    this.canvasHeight = 660;
    this.trunkWidth = this.canvasWidth / 5.5;
    this.trunkHeight = this.canvasHeight / 4;

    this.background = this.add.graphics();
    this.background.beginFill(0x3006AB);
    this.background.drawRect(0, 0, window.screen.width, window.screen.height);
  }

  initPlayer() {
    this.player = this.add.graphics();
    this.player.beginFill(0xffffff);
    this.xPosPlayer = 4 * this.trunkWidth;
    this.yPosPlayer = 1.5 * this.trunkHeight;
    this.player.drawRect(this.xPosPlayer, this.yPosPlayer, this.trunkWidth, this.trunkHeight);
  }

  update() {
    this.player.body.setZeroVelocity();
    if (this.keys.up.isDown) {
      this.player.y -= 10;
    }

    if (this.keys.down.isDown) {
      this.player.y += 10;
    }

  }

}

 

I actually want to achieve the effect as in the example where the red square (the deadzone) is my white rectangle...

 

Thanks in advance for anyone trying to help :)

 

EDIT

I was able to achieve the same effects as needed by using sprites instead of a rectangle.

Edited by InstaK
Found a possible solution
Link to comment
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...
 Share

  • Recently Browsing   0 members

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