Jump to content

Some Phaser Group Objects disappear


evilwizard
 Share

Recommended Posts

I am creating a Frogger game with Phaser and to make my codebase more maintainable, I decided to split functionality into separate JavaScript files. A lot of my code has been removed to make this as concise as possible.

Here is my preload function. I have a lot more assets, but removed a lot of them for this example. It doesn't look like there's a problem there as all of these images render without calling my moveObjects() method in the update block.

function preload() {
	["truck", "shortlog", "frogger"].forEach(function(sprite) {
		game.load.image(`${sprite}`, `assets/images/${sprite}.png`);
	});
}

Outside of the main functions, I create an objects variable. My goal is to populate it with sprites.

    var objects

In my create function, I call two functions from separate files that deal with the vehicles and river logic respectively.

function create() {
	game.physics.startSystem(Phaser.Physics.ARCADE);

	objects = game.add.group();
	addVehicles();
	addRiver();
}

In vehicles.js, here is my addVehicles() function. The problem doesn't lie with this method as the end functionality is as expected. Vehicles move horizontally across the screen in their intended directions.

function addVehicles() {
	
	bulldozer1 = game.add.sprite(50, 465, "bulldozer");
	bulldozer2 = game.add.sprite(250, 465, "bulldozer");
	truck1 = game.add.sprite(600, 330, "truck");
	truck2 = game.add.sprite(400, 330, "truck");

	[truck1, truck2].forEach(function(car) {
		car.direction = "left";
		objects.add(car);
	});
	
	[bulldozer1, bulldozer2].forEach(function(car) {
		car.direction = "right";
		objects.add(car);
	});
	
}

Here is my addRiver() function. Although the code is nearly identical to the function above, it looks like this function breaks things.

function addRiver() {

	lilly1 = game.add.sprite(50, 235, "lilly");
	lilly2 = game.add.sprite(220, 235, "lilly");
	log1 = game.add.sprite(50, 190, "shortlog");
	log2 = game.add.sprite(250, 190, "shortlog");

	[lilly1, lilly2].forEach(function(obstacle) {
		obstacle.direction = "left";
		objects.add(obstacle);
	});
	
	[log1, log2].forEach(function(obstacle) {
		obstacle.direction = "right";
		objects.add(obstacle);
	});
}

In my update() function in main.js, I call a function to move these objects.

function update() {
	moveObjects();
}

When an object passes the game world's boundaries, it needs to reappear on the opposite side. The cycleObject method is used here

function cycleObject(object) {
	if (object.position.x > 800) {
		object.position.x = 0;
	}
	else {
		if (object.position.x < -50) {
			object.position.x = 750;
		}
	}
}

 

Finally, I have my moveObjects() method

function moveObjects() {
	for (var i = 0; i < objects.children.length; i++) {
		objects.children[i].position.x += (objects.children[i].direction == "right" ? 3 : -3);
		cycleObject(objects.children[i]);
	}
}

 

Result

The vehicles behave as expected. The problem is that the river obstacles (logs) have disappeared. The surprising thing is what happens when I call

objects.children.length

I get the expected value. I can also access one of these hidden objects and find that their position property updates. Another problem is that I don't get any error messages either.

My methods in vehicles.js and river.js are virtually identical. I am not sure what's going on here.

froggerimage.png

Edited by evilwizard
better code formatting
Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

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