Can't overwrite images over different scenes

Phaser 3
1

Good evening,

I’m making a game similar to the Chrome dinosaur game with multiple levels using different assets. Because I’m learning JS and Phaser on-the-fly with this project, the levels/scenes are all standalone. Changing the update function for every single level for a small change makes me crazy, so now I want to change it.

At first it looked like this: Preload → Title → Level 1/2/3…
My goal is: Preload → Title → Base Level → Loading assets/objects for Level 1 to n

I’m trying to figure everything out via tutorials and examples, but the numerous ways to do something are very confusing.

// Level 1:
this.textures.remove("layer1");
this.load.image("layer1", "level1/layer1.png");
this.layer1.this.add.tileSprite(0, 0, 960, 640, "layer1");
// Level 2:
this.textures.remove("layer1");
this.load.image("layer1", "level2/layer1.png");
this.layer1.this.add.tileSprite(0, 0, 960, 640, "layer1");

That worked without problems. But if I now run Title → Base Level → Level 1, layer1 will either use the assets from “Title” or, if I use this.textures.remove(“layer1”), it will only show the black/green grid. Making layer1 global didn’t work, using a function “Level 1” within “Base Level” didn’t work either. (Because the images have to be loaded in the preload function? I was able to use another method to load the images so that they would show up in cache, but it still wouldn’t be possible to add them go the game objects.)
Unfortunately I can’t change the texture on its own either, because other parameters change as well.

I’m really confused, so I would be very thankful, if you could tell me how I should approach this.

2

:wave:

IMO removing textures to replace them with different textures with the same key is usually an antipattern. If it’s a small game, load all the assets first, with unique keys, and then choose which texture you want when creating game objects.

Assets added in preload() can’t be used before create() in the same scene.

function preload () {
  this.load.image("layer1", "level1/layer1.png");
}

function create () {
  this.layer1 = this.add.tileSprite(0, 0, 960, 640, "layer1");
}

But if you load all the assets first, in a separate scene, then it’s no concern.

1 Like
3

Thank you for your replay, Samme!
I didn’t know that it would be bad practice. My graphics are a bit large for such a simple game in my opinion and I try to challenge myself to reuse code.

Is there still a more elegant way around that kind of thing? For example, if I change the background image loading, I still have one level specific function in my update loop that will create coins to collect. So I would just use a switch statement checking which level I started and use coins.create(x, y, “coin[levelnumber]”) for each case?

4

You could still do the texture switching I just usually advise beginners against it.

Usually it’s enough to do e.g.

this.level = 1;
// …
this.coins.create(0, 0, `coin${this.level}`);

If you pass data to scenes you can do

function init (data) {
  this.level = data.level;
}
1 Like
5

That looks much nicer already. You gave me quite a few ideas to work on. Thank you :slight_smile: