evilwizard Posted April 18, 2017 Share Posted April 18, 2017 (edited) 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. Edited April 18, 2017 by evilwizard better code formatting Link to comment Share on other sites More sharing options...
evilwizard Posted April 18, 2017 Author Share Posted April 18, 2017 The problem was I had my river background covering up the objects. That's why they still existed, they were just underneath the river. In my update function, I added this line to the beginning game.world.sendToBack(river); Link to comment Share on other sites More sharing options...
Recommended Posts