Background ceiling layers

src/assets/assets.ts

@@ -11,6 +11,12 @@ const images: Image[] = [
 	image('backgrounds/grid3', 'grid3'),
 	image('backgrounds/grid4', 'grid4'),
 
+	// Background tops
+	image('backgrounds/grid1-top', 'grid1-top'),
+	image('backgrounds/grid2-top', 'grid2-top'),
+	image('backgrounds/grid3-top', 'grid3-top'),
+	image('backgrounds/grid4-top', 'grid4-top'),
+
 	// Cutscenes
 	image('cutscenes/dummy1', 'cutscene_dummy1'),
 	image('cutscenes/dummy2', 'cutscene_dummy2'),

src/scenes/GameScene.ts

@@ -39,6 +39,7 @@ enum GameState {
 
 export class GameScene extends BaseScene {
 	private background: Phaser.GameObjects.Image;
+	private backgroundTop: Phaser.GameObjects.Image;
 	private board: Board;
 	private stations: Station[];
 	private employees: Employee[];
@@ -160,6 +161,11 @@ export class GameScene extends BaseScene {
 		this.background = this.add.image(0, 0, "grid1");
 		this.background.setOrigin(0);
 		this.fitToScreen(this.background);
+
+		this.backgroundTop = this.add.image(0, 0, "grid1-top");
+		this.backgroundTop.setOrigin(0);
+		this.backgroundTop.setDepth(50);
+		this.fitToScreen(this.backgroundTop);
 
 		this.board = new Board(this, this.CX, this.CY, 6, 4, 100);
 
@@ -415,6 +421,16 @@ export class GameScene extends BaseScene {
 		const level = LevelData[id];
 
 		this.background.setTexture(level.background);
+		const topKey = `${level.background}-top`;
+
+		if (this.textures.exists(topKey)) {
+			this.backgroundTop.setVisible(true);
+			this.backgroundTop.setTexture(topKey);
+			// this.backgroundTop.setTint(0xff0000); // Debug
+		} else {
+			this.backgroundTop.setVisible(false);
+		}
+
 		this.board.resize(level.width, level.height, level.cellSize);
 
 		// Clear all stations, employees, and customers