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

[InstaK]

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.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 December 1, 2016 by InstaK
Found a possible solution