Arcade physics doesn't work in whole scene

Phaser 3
1

Hi,

i’m using arcade physics but it works only on an half side of my level scene. My Player moves from left to right and at a certain point it stops working. My Player still moves but all physics (overlaps, collisions,…) are disabled.

I tried already to set the width to the whole length in my config:

"physics": {
    default: 'arcade',
    arcade: {
        gravity: { y: 450 },
        debug: false,
		width: 11450,
		height: 450
    }

in create() i added the bounds:

this.physics.world.setBounds(0, 0, 11450, 450);

In a previous version i set the bounds width to 3000 and i have a hunch that this value is still deposited somewhere…

How can i set the physics at my whole scene?? :frowning:

2

I’m not sure, but turn on debug just in case, and check console for errors.

At the end of create you can add

this.add.graphics()
  .lineStyle(2, 0xff0000)
  .strokeRectShape(this.physics.world.bounds);
3

the drawn rectangle is wide enough, it reaches to the end of the game… :thinking:

4

And what does it look like with { debug: true }?

5

Maybe i should add that my Player still collides with the world Bounds, at the beginning it walks on the platforms and at that Point, where the physics doesn’t work it walks on the bottom of the world bounds until it reaches the end. I also can’t jump from this point.

6

There are no error in the console, but it Looks like this:

Unbenannt
Unbenannt1738×821 125 KB

The player still have an rectangle after the rect on the ground Ends.

7

And what goes wrong now?

8

the Player should also walk on the green ground where the blue rect already ends, but it walks on the Bottom of the window

9

and the green ground is an child of a static group like the platforms, i don’t even understand why the blue rect ends there…

10

Can you post the code?

11 
let player;
let bg_1, bg_2;
let cursors;
let platforms;
let muffins, muffins_2, wet_floor, coffee;
var score = 0;
let energy = 100;
let scoreText, energyText;
let wrong, tenPoints, fiftyPoints, lostEnergy, winEnergy;
let item_omt, item_it, item_hr, fSpecialItems;
let rect, quest, answ_1, answ_2, answ_3, answ_4, bool_1, bool_2, bool_3, bool_4, fQuizGroup;

//audio
let collectItem, collectSpecialItem, collectCoffee, getRightAnswer, getWrongAnswer, getHit, reachTarget, playerJump;

//touch input
let btn_run, btn_jump;

class Level extends Phaser.Scene {

constructor() {

	super("Level");
	
}		

init(data){
	//get choosen character
	this.playerAtlas = data.atlas;
	console.log(this.playerAtlas);
}

create(){
	console.log("Tochinput: " + touch);
	
	//set background
	bg_1 = this.add.image(0, -1, "level", "background").setOrigin(0.0, 0.0);
	bg_2 = this.add.image(bg_1.width, -1 , "level", "background_2").setOrigin(0.0, 0.0);
	
	this.physics.world.setBounds(0, 0, 11450, 450);


	//add player with its physics and hitbox
	player = this.physics.add.sprite(90, 0, this.playerAtlas, "8");
	player.setBounce(0.2).setScale(0.4).setSize(125, 146).setOffset(93,75);
	player.setCollideWorldBounds(true);
	player.anims.play(this.playerAtlas + "-run");
			
	//add camera, which follows player
	this.cameras.main.setBounds(0, 0, bg_1.width + bg_2.width, 450);
	this.cameras.main.startFollow(player, true);
	this.cameras.main.followOffset.set(-300, 0);
					
	//add cursors
	cursors = this.input.keyboard.createCursorKeys();

	//add score text
	scoreText = this.add.text(16, 16, 'Punkte: 0', { fontSize: '32px', fill: '#ffffff', fontFamily: "Consolas"});
	scoreText.setOrigin(0.0,0.0);
	
	//add enegery text
	energyText = this.add.text(16, 48, "Energie: 100",{ fontSize: '32px', fill: '#ffffff', fontFamily: "Consolas"});
	energyText.setOrigin(0.0,0.0);

	//add platforms
	this.createPlatforms();

	//add items
	this.createMuffins();
	this.createSpecialItem();

	//add barrier
	wet_floor = this.physics.add.group({
		key: "level",
		frame:"wet",
		repeat: 10,
		setXY:{x: 700, y:0, stepX: 1000}
	});
	
	//add coffee
	coffee = this.physics.add.image(1800,0, "level", "coffee");
	
	//add physics
	this.addPhysics();

	//add buttons for touch input
	if(touch){
		btn_run = this.add.sprite(50, 400, "level", "button_right").setInteractive();
		btn_jump = this.add.sprite(750, 400, "level", "button-up").setInteractive();
		
		this.isRunning = false;
		
  		btn_run.on("pointerdown", () => {
     		this.isRunning = true;
 		});
	
  		btn_run.on("pointerup", () => {
    		this.isRunning = false;
  		});

		btn_jump.on("pointerdown", () =>{
			this.jump();
		});
	}

	//add question for quiz
	quest = this.add.text(510, 110, "Empty", { fontSize: '12px', fill: '#000000', fontFamily: "Consolas"}).setVisible(false);
	
	
	//add animations for collect Items
	tenPoints = this.add.sprite(400, 225, "level", "10-points").setVisible(false).setInteractive();
	fiftyPoints = this.add.sprite(400, 225, "level", "50-points").setVisible(false).setInteractive();
	wrong = this.add.sprite(400, 225, "level", "wrong").setVisible(false).setInteractive();
	lostEnergy = this.add.sprite(400, 225, "level", "lostEnergy").setVisible(false).setInteractive();
	winEnergy = this.add.sprite(400, 225, "level", "winEnergy").setVisible(false).setInteractive();
	
	//add audio
	collectItem = this.sound.add("collect-item");
	collectSpecialItem = this.sound.add("collect-specialitem");
	collectCoffee = this.sound.add("coffee");
	playerJump = this.sound.add("jump");
	reachTarget = this.sound.add("target");
	getRightAnswer = this.sound.add("right");
	getWrongAnswer = this.sound.add("wrong");
	getHit = this.sound.add("hit");
	
	this.add.graphics().lineStyle(2, 0xff0000).strokeRectShape(this.physics.world.bounds);
	
}


update() {
	//just move if no quiz is visible
	if(!quest.visible){
		//run
	    if(cursors.right.isDown) {
			this.run();
			btn_run.setVisible(false);
			btn_jump.setVisible(false);
		//stop
		} else if (cursors.right.isUp) {
			this.stop();
		} 
		
		//jump
		if(cursors.up.isDown && player.body.touching.down) {
	    	this.jump();
	    }

		//end of game
		if(player.x >= bg_1.width + bg_2.width - 10){
			reachTarget.play();
			this.scene.start("Highscore", {score: score});
		}
	} else {
		player.setVelocityX(0);
	}
	
	// run with touchinput		
	if(this.isRunning && !quest.visible) {
			player.setVelocityX(200);
			scoreText.x = this.cameras.main.scrollX + 20;
			energyText.x = this.cameras.main.scrollX + 20;
			this.cameras.main.followOffset.x = -300;
			btn_run.x = this.cameras.main.scrollX + 50;
			btn_jump.x = this.cameras.main.scrollX + 750;
	}
}

createPlatforms(){

	platforms = this.physics.add.staticGroup();
	/*{
		key: "platform",
		repeat: 6,
		setXY: {x: Phaser.Math.FloatBetween(0,0), y: Phaser.Math.FloatBetween(0,0), stepX: Phaser.Math.FloatBetween(0,0)};
	};*/
	platforms.create(0, 430, "level", "underground").setOrigin(0.0, 0.0);
	platforms.create(0, 5825, "level", "underground").setOrigin(0.0, 0.0);
	platforms.create(1103.6807, 286.05374, "level", "platform");
	platforms.create(707.5709, 355.61844, "level", "platform");
	platforms.create(1685.9792, 258.60327, "level", "platform");
	platforms.create(2393.7668, 340.8079, "level", "platform");
	platforms.create(3191.1106, 363.05722, "level", "platform");
	platforms.create(2771.233, 226.36908, "level", "platform");
}

createMuffins(){
	//on platforms
	muffins = this.physics.add.group({
        key: "level",
		frame: "muffin",
        repeat: 50,
        setXY: { x: 100, y: 0, stepX: 400 }
	});
	
	//on ground
	/*muffins_2 = this.physics.add.group({
		key: "level",
		frame: "muffin",
		repeat: 20,
		setXY:{ x: 430, y: 300, stepX: 300}
	});*/
	
	muffins.children.iterate(function (child) {
    	child.setBounceY(Phaser.Math.FloatBetween(0.4, 0.6));
	});

	/*muffins_2.children.iterate(function (child) {
    	child.setBounceY(Phaser.Math.FloatBetween(0.4, 0.6));
	});*/
}

addPhysics(){
	//collide the player and the muffins with the platforms
	this.physics.add.collider(player, platforms);
	this.physics.add.collider(muffins, platforms);
	//this.physics.add.collider(muffins_2, platforms);
	this.physics.add.collider(wet_floor, platforms);
	this.physics.add.collider(fSpecialItems, platforms);
	this.physics.add.collider(coffee, platforms);
	
	//checks if the player overlaps with any muffin, if he does call the collectMuffin function
	this.physics.add.overlap(player, muffins, this.collectMuffin, null, this);
	this.physics.add.overlap(player, muffins_2, this.collectMuffin, null, this);
	this.physics.add.overlap(player, wet_floor, this.getHit, null, this);
	this.physics.add.overlap(player, fSpecialItems, this.collectSpecialItem, null, this);
	this.physics.add.overlap(player, coffee, this.collectCoffee, null, this);
}

createSpecialItem(){
	item_omt = this.physics.add.image(1130, 0, "level", "token");
	item_it = this.physics.add.image(1717, 330, "level", "jar");
	item_hr = this.physics.add.image(300, 0, "level", "doc");
	
	fSpecialItems = this.physics.add.group([item_omt, item_it, item_hr]);
}
	
collectMuffin(player, muffin) {
	collectItem.play();
    muffin.disableBody(true, true);
	score += 10;
	scoreText.setText("Punkte: " + score);
	this.showTenPoints();
}

collectCoffee(player, coffee){
	collectCoffee.play();
	coffee.disableBody(true, true);
	if(energy < 100){
		energy += 10;
		this.winEnergy();
	}
	energyText.setText("Energie: " + energy);
}

collectSpecialItem(player, item){
	collectSpecialItem.play();
	item.disableBody(true,true);
	if (item == item_omt){
		this.createQuiz(
			"Willkommen beim OMT: Wofür steht eigentlich OMT?",
			"Online Marketing Team", false,
			"Optimal Medical Therapies", false,
			"Office Management Team", true,
			"Object Model Template", false
		);
	} else if(item == item_it){
		this.createQuiz(
			"Willkommen in der IT: Was möchtest du naschen?",
			"Fruchtgummis", true,
			"Karamellbonbons", true,
			"Maoam", true,
			"Schokoriegel", true
		);
	} else if(item == item_hr){
		this.createQuiz(
			"Willkommen in der HR-Abteilung: \nAn welche Adresse schickst du deine Bewerbung?",
			"bewerbung@infoteam.de", true,
			"info@infoteam.de", false,
			"hr@infoteam.de", false,
			"info@team.de", false
		);
	}
}

getHit(player, wet) {
	getHit.play();
	wet.disableBody(true, true);
	energy -= 10;
	energyText.setText("Energie: " + energy);
	this.lostEnergy();
	//player.anims.play("hit");
}

createQuiz(question, answer1, answer1_bool, answer2, answer2_bool, answer3, answer3_bool, answer4, answer4_bool){
	
	quest = this.add.text(510, 110, question, { fontSize: '12px', fill: '#000000', fontFamily: "Consolas"}).setVisible(false);
	graphics = this.add.graphics();
	graphics.fillStyle(0xffffff, 1);
	rect = graphics.fillRoundedRect(this.cameras.main.scrollX + 380, 100, quest.width+30, quest.height + 120, 24);
	
	quest = this.add.text(this.cameras.main.scrollX + 400, 110, question, { fontSize: '12px', fill: '#000000', fontFamily: "Consolas"}).setVisible(true);
	answ_1 = this.add.text(this.cameras.main.scrollX + 400, quest.height + 130, answer1, { fontSize: '12px', fill: '#000000', fontFamily: "Consolas"}).setInteractive();
	answ_2 = this.add.text(this.cameras.main.scrollX + 400, quest.height + 150, answer2, { fontSize: '12px', fill: '#000000', fontFamily: "Consolas"}).setInteractive();
	answ_3 = this.add.text(this.cameras.main.scrollX + 400, quest.height + 170, answer3, { fontSize: '12px', fill: '#000000', fontFamily: "Consolas"}).setInteractive();
	answ_4 = this.add.text(this.cameras.main.scrollX + 400, quest.height + 190, answer4, { fontSize: '12px', fill: '#000000', fontFamily: "Consolas"}).setInteractive();
	
	bool_1 = answer1_bool;
	bool_2 = answer2_bool;
	bool_3 = answer3_bool;
	bool_4 = answer4_bool;
	
	fQuizGroup = this.add.group([rect, quest, answ_1, answ_2, answ_3, answ_4]);
	
	this.input.on("gameobjectover", (pointer, gameObject) => {
		gameObject.setAlpha(0.3);
	});
	
	this.input.on("gameobjectout", (pointer, gameObject) => {
		gameObject.clearAlpha();
	});
	
	this.input.once("gameobjectdown", (pointer, gameObject) => {
		var right  = this.proofAnswer(gameObject);
		if(this.proofAnswer(gameObject)){
			getRightAnswer.play();
			score += 50;
			scoreText.setText("Punkte: " + score);
			fQuizGroup.setVisible(false);
			this.showFiftyPoints();				
		} else {
			getWrongAnswer.play();
			fQuizGroup.setVisible(false);
			this.showWrong();
		}
	});
}

proofAnswer(answer) {		
	if(answer == answ_1){
		return bool_1;
	} else if(answer == answ_2){
		return bool_2;
	} else if(answer == answ_3){
		return bool_3;
	} else if(answer == answ_4){
		return bool_4;
	} else {
		return false;
	}
}

showTenPoints(){
	tenPoints.x = this.cameras.main.scrollX + 400;
	tenPoints.setVisible(true);
	tenPoints.anims.play("10-points");
	tenPoints.on("animationcomplete", function(){
		this.setVisible(false);
	});
}

showFiftyPoints(){
	fiftyPoints.x = this.cameras.main.scrollX + 400;
	fiftyPoints.setVisible(true);
	fiftyPoints.anims.play("50-points");
	fiftyPoints.on("animationcomplete", function(){
		this.setVisible(false);
	});
}

showWrong(){
	wrong.x = this.cameras.main.scrollX + 400;
	wrong.setVisible(true);
	wrong.anims.play("wrong");
	wrong.on("animationcomplete", function(){
		this.setVisible(false);
	});
}

lostEnergy(){
	lostEnergy.x = this.cameras.main.scrollX + 400;
	lostEnergy.setVisible(true);
	lostEnergy.anims.play("lostEnergy");
	lostEnergy.on("animationcomplete", function(){
		this.setVisible(false);
	});
}

winEnergy(){
	winEnergy.x = this.cameras.main.scrollX + 400;
	winEnergy.setVisible(true);
	winEnergy.anims.play("winEnergy");
	winEnergy.on("animationcomplete", function(){
		this.setVisible(false);
	})
}

run(){
	player.setVelocityX(200);
	scoreText.x = this.cameras.main.scrollX + 20;
	energyText.x = this.cameras.main.scrollX + 20;
	this.cameras.main.followOffset.x = -300;
}

stop(){
	player.setVelocityX(0);
}

jump(){
	playerJump.play();
	player.setVelocityY(-350);
	player.anims.play(this.playerAtlas + "-jump");
}

runButtonClicked() {
	this.run();
}

jumpButtonClicked() {
	this.jump();
}

}

12

I’m not sure. But add at the end of createPlatforms():

platforms.refresh();
13

Nice it works! :slight_smile: Why i have to refresh it? :grimacing:

14

Because we did setOrigin() after creating a sprite with static body. Static body never updates automatically.

1 Like
15

Thanks! :slight_smile: