Назад Вперед

Передача данных между сценами. Опция отключения звука.

Разберу просто пример передачи данных между сценами, которые находятся в разных файлах, на примере опции отключения звука в проекте PingPong. На стартовой сцене будет размещена кнопка. По нажатию клавиши мыши по ней фоновая музыка будет включаться и выключаться.

Для решения поставленной задачи нужны две иконки: для включения и выключения звука. Буду использовать стандартные, доступные в Интернете для скачивания.

Иконка звука

Загружаю их в сцене PreloadScene.js в месте загрузки всех изображений.

Файл PreloadScene.js:


    ...
    this.load.image('playAudio', './assets/image/play.png');
    this.load.image('noPlayAudio', './assets/image/noplay.png');
    ...
 

Загрузка изображений

Теперь перехожу к стартовой сцене в файле StartScene.js. Необходимо разместить изображения на сцене. Я выбрал для них левый нижний угол. Для начала размещаю обе иконки и сохраняю их в отдельные переменные.

Файл StartScene.js:


    ...
    let btnAudio = this.add.image(0, heightGame-30, 'playAudio').setOrigin(0);
    let btnAudioNo = this.add.image(0, heightGame-30, 'noPlayAudio').setOrigin(0);
    ...
 

Размещение изображений

К созданным переменным необходимо применить метод setInteractive(), который позволит взаимодействовать с ними. И второй иконке выключенного звука записываю свойство visible равное false. Она сразу отображаться не будет на игровой сцене.

Файл StartScene.js:


    ...
    btnAudio.setInteractive();
    btnAudioNo.setInteractive();
    btnAudioNo.visible = false;
    ...
 

Инициализирую еще одну переменную, которая также будет иметь булевское значение. Она и будет передаваться в игровую сцену.

Файл StartScene.js:


    ...
    this.playAudio = true;
    ...
 

Следом создаю 2 слушателя для каждой кнопки, которые при нажатии будут изменять свойство visible второй иконки. Т.е. нажал на первую иконку — появилась вторая, нажал на вторую — она же снова спряталась. При этом будет изменяться и значение переменной this.playAudio с true на false и обратно.

Файл StartScene.js:


    ...
    btnAudio.on('pointerdown', () => {
        btnAudioNo.visible = true;
        this.playAudio = false;
    });
        
    btnAudioNo.on('pointerdown', () => {
        btnAudioNo.visible = false;
        this.playAudio = true;
    });
    ...
 

В этом файле осталось лишь изменить слушатель кнопки START. В самом методе загрузки следующей сцены в фигурных скобках добавляю аргумент playAudio и присваиваю ему значение созданной ранее переменной. Таким образом эта переменная будет передаваться в следующую сцену.

Файл StartScene.js:


    ...
    btnStart.on('pointerdown', () => {
        this.scene.start('GameScene', {playAudio: this.playAudio});
    });
    ...
 

Размещение изображений

Перехожу к игровой сцене. Открываю файл GameScene.js. Кроме уже использованных ранее функций create(), update() и preload(), существует еще одна зарезервированная функция init(). Код в ней выполняется во время инициализации сцены, т.е. до момента ее создания. Ее можно использовать для получения сохраненных данных.

Создаю функцию init() с аргументом data.

Файл GameScene.js:


    ...
    init(data) {

    }
    ...
 

В ней создаю еще одну переменную, которая уже принадлежит игровой сцене и присваиваю ей значение переменной, созданной в стартовой сцене.

Файл GameScene.js:


    ...
    this.playAudio = data.playAudio;
    ...
 

Осталось в остальной части кода везде, где запускается или останавливается фоновая музыка записать проверку для созданной переменной. Т.е. если ее значение равно true, фоновая музыка будет включаться и наоборот.

Файл GameScene.js:


    ...
    if (this.playAudio) {
        this.fonAudio = this.sound.add('fonSound');
        ...
        }
    ...
 

Игровая сцена

Таким образом выполнена передача данных между сценами. Такой способ можно использовать для запуска, например, определенного уровня или передачи имени игрока, записанного в стартовой сцене.

Спасибо за внимание!

Назад Вперед