Search the Community

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.

Hey guys. Im new to Phaser and I'm totally stuck on trying to use the camera.deadzone. Ive tried using various physics options and have been playing around but i just cant see what Im doing wrong. On the phaser documentation you can see a working example, where the deadzone stays stationary to the camera. Mine isnt working with my character sprite correctly. My camera's deadzone is just moving off the screen. If anyone has had this problem or can tell me what I'm missing, many thanks in advance. http://phaser.io/examples/v2/camera/deadzone Here's an example so you can see whats happening: http://webnamehere.com/deadzone/ Again thanks for any help. index.html main.js phaser.min.js

Good evening everyone, I'm trying to make something like http://phaser.io/examples/v2/camera/deadzone, but I'd like the camera to follow the mouse pointer instead of a sprite. I'm a bit stuck and would like to know if anyone has already tried to do it. If so, what's the best way to achieve this? Thanks in advance, Pedro Antoninho