Why does the DOM element content persist to the next scene with a different background?

Question

I am working on an adventure game with Phaser 3 that is a choose your own adventure style. I'm using the DOM element for HTML elements to make it accessible to text to speech technologies. I had been using a logo image for the game as a place holder image, it is a jpg file. The scenes pass from one to the next and the elements in the DOM changed until I started to change backgrounds. There are different places to explore; forests, mountains, etc. After I added a forest image, a jpg that is the same size as the logo image, when I click the button to go to a different scene, the background image does change but the DOM element contents do not. Each scene preloads and creates the background for that scene individually. I'm wondering why it's doing this and how to fix it so I can add in the different backgrounds? I am including the code for the scene that uses the forest background. If that's not enough information, please let me know so I can provide what is needed.

import { CST } from "../CST";
import Phaser, { AUTO } from "phaser";

export class RaidCombatScene extends Phaser.Scene {
    constructor() {
        super({
            key: CST.SCENES.RAIDCOMBAT
        })
    }
    init(){

    }

    preload(){
        this.load.html('raid', './assets/CoH/quests/RaidCombat.html');
        this.load.image("forestbattle", "./assets/forestbattle.jpg");

    }

    create(){

        //create background

        let background = this.add.image(0, 0, "forestbattle").setOrigin(0);
        background.setScale(2.2, 2.355);
        


        var layout = this.add.dom(-5,545).createFromCache('raid');
        layout.setDepth(1);

        layout.addListener('click');
        layout.on('click', () => {

            if (event.target.name === 'cover') {
            }

            if (event.target.name === 'fleet') {
                this.scene.start(CST.SCENES.RAIDSUCCESS);
                this.scene.stop();
            }

        })

    }
}

The game variable code:

var game = new Phaser.Game({
    type: Phaser.AUTO,
    width:1000,
    height: 800,
    parent: 'phaser-game',
    dom:{
        createContainer: true
    },
    scene:[
    // all imported scenes
    ],
})

The HTML code for the DOM element:

user_1679286 · Answer

I think it should, exactly as you described it, just be careful not to cover the canvas with setting the background color of the DOM Elements.
And you don't have to call the stop()function on the scene, since starting a new scene, does this automatically.

Here a example how i think, it should run/work.
If this example (below) doesn't help, maybe you could modify this example to replicate the error, and add it to your question:

document.body.style = 'margin:0;';

let localDOM1 = document.querySelector('#domNode1');
let localDOM2 = document.querySelector('#domNode2');

var config = {
    type: Phaser.AUTO,
    width: 536,
    height: 183,
    parent: 'phaser-game',
    dom:{
        createContainer: true
    },
    scene: [
      {key:'Scene1', create: create1, preload},
      {key:'Scene2', create: create2}
     ],
    banner: false
}; 

function preload(){
    this.load.image('bg','https://labs.phaser.io/assets/pics/taikodrummaster.jpg');
    this.load.image('bg2', 'https://labs.phaser.io/assets/pics/sukasuka-chtholly.png');
 }

function create1(){
  let layout = this.add.dom(0, 0, localDOM1);
  
  this.add.image(0, 0, 'bg').setScale(.5).setOrigin(0)

  
  this.input.on('pointerdown', () =>{
    this.scene.switch('Scene2')
  });
  
  layout.addListener('click');
  layout.on('click', () => {
      if (event.target.name === 'SceneEvnet1') {
          this.scene.start('Scene2');
      }
  })
  
}

function create2() {
    let layout = this.add.dom(0,0, localDOM2)
    this.add.image(0, 0, 'bg2').setScale(.75).setOrigin(0)
    layout.addListener('click');
    layout.on('click', () => {
        if (event.target.name === 'SceneEvnet2') {
            this.scene.start('Scene1');
        }
    })
}

new Phaser.Game(config);

body{
    color: #ffffff;    
    margin: 0;
    padding: 0;
}

.box {
    height: 60px;
    width: 536px;
    position: absolute;
    background: black;
    text-align: center;
}

.textBox{
    overflow-x: hidden;
    overflow-y: auto;
    word-wrap: normal;  
}

.textBox::-webkit-scrollbar {
    width:10px;
}

.textBox::-webkit-scrollbar-track {
    box-shadow: inset;
    -webkit-box-shadow:inset 0 0 6px rgba(227,218,201,0.3); 
    border-radius:5px;
}

.textBox::-webkit-scrollbar-thumb {
    box-shadow: inset;
    border-radius:5px;
    -webkit-box-shadow: inset 0 0 6px wheat; 
}

Why does the DOM element content persist to the next scene with a different background?

1 Answers