Jump to content

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


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



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



This is what I've tried in code:

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


    this.world.setBounds(0, 0, 1815, 660 * this.timesHeight);


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


    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.drawRect(0, 0, window.screen.width, window.screen.height);

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

  update() {
    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 :)



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


  • Recently Browsing   0 members

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