Встраивание игр Phaser3 в функциональные компоненты React 18 с помощью useEffects
web-development react reactjs

Встраивание игр Phaser3 в функциональные компоненты React 18 с помощью useEffects

5 марта 2023 г.

Вот шаблон для встраивания игр Phaser3 в компоненты React.

В самой простой реализации вы можете использовать этот шаблон для добавления игр Phaser3 и обращаться с ними как с GIF-анимацией на стероидах.

В самом сложном случае я покажу вам, как запускать игры Phaser3 внутри (и из других) компонентов React, перехватывать события, происходящие внутри игры, и запускать функции в React. Эти события могут обновлять уведомления о статусе в баннере веб-сайта или отправлять данные во внутренний API вашего веб-сайта, чтобы вести постоянную запись прогресса игрока.

Как и во всех моих сообщениях, я не буду снабжать решения слишком большим количеством фрагментов «сейчас добавь это» и «затем добавь это», а просто покажу вам целые шаблоны кода, которые сработали для меня.

Предпосылки

  • Знакомство с React.
  • Знакомство с Phaser3.
  • Знакомство с JavaScript.
  • Склонность нажимать кнопки «Мне нравится этот пост».

Основной шаблон

Как и было обещано, вот основной шаблон, который мы будем использовать:

import Phaser from "phaser"
import React, { useEffect, useState } from "react"
import happyFace from "./happy-face.png"

class HappyFaceScene extends Phaser.Scene {
  preload() {
    // A convention of mine to avoid `this` confusion with sub classes is to 
    // give it a better reference name at the top of every function.
    let scene = this
    scene.load.image("happyFace", happyFace)
  }
  create(data) {
    let scene = this
    // Add your game objects and all that other stuff. It's just a simple image.
    scene.add.image(0, 0, "happyFace").setOrigin(0, 0).setDisplaySize(480, 142)
    // Finally trigger an event so that the scene is now visible. This is optional 
    // but useful if you want to transition your game's appearance.
    scene.game.events.emit("putOnAHappyFace", true)
  }
  update() {
    let scene = this
    let { lives, progress } = scene
    // For example, monitor the number of lives and exit when 
    if (!lives) {
      // Save the progress.
      game.registry.merge(progress)
      // Trigger the game end.
      scene.game.events.emit("putOnAHappyFace", false)
    }
  }
}

export const Phaser3GameComponent = () => {
  const [isReady, setReady] = useState(false);
   useEffect(() => {
     // Nothing really special here... Your phaser3 config should work just fine.  
     let config = {
       height: 320,
       width: 480,
       physics: { default: "arcade" },
       scale: {
         // Except this should match the ID of your component host element.
         parent: "phaser-game",
         mode: Phaser.Scale.FIT,
         autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
       },
       transparent: true,
       type: Phaser.AUTO,
     }
     let game = new Phaser.Game(config)
     // Triggered when game is fully visible.
     game.events.on('putOnAHappyFace', setReady)
     // Add your scene/s here (or in `scene` key of `config`).
     game.scene.add("HappyFaceScene", HappyFaceScene, true)
     // If you don't do this, you get duplicates of the canvas piling up
     // everytime this component renders. 
     return () => {
       setReady(false)
       game.destroy(true)
     }
   // You must have an empty array here otherwise the game restarts every time
   // the component renders.
   }, []) 
  // Return the host element where Phaser3 will append the canvas.
  return  <div id="phaser-game" className={isReady ? "visible" : "invisible"} />
}progress

Вы видите, насколько это просто. React делает то, для чего создан: он реагирует на происходящее в игре.

Оценка

Помимо того, что React обычно перехватывает события, вызванные игрой, его также можно подключить к настройке обратных вызовов Phaser.

В этом дополнительном фрагменте, который вы должны добавить в часть конфигурации Phaser Game приведенного выше шаблона, мы будем загружать предыдущий прогресс пользователя в «реестр» игры Phaser3 с помощью функции merge. Мы также можем отслеживать изменения в 

      ...
      physics: { default: "arcade" },
      callbacks: {
        preBoot: (game) => {
          game.registry.merge(userProgress)
          game.registry.events.on('changedata', function(parent, key, value, previousValue) => {
            updateUserProgress(key, value)
          })
        },
      },
      ...

Где userProgress выходит из хранилища, а updateUserProgress изменяет изменения обратно в хранилище.

Это показывает, насколько легко встраивать игры Phaser (либо для отображения неинтерактивной анимации, либо для воспроизведения) в React, а также передавать данные туда и обратно.

Модальный

Наконец, использование div в качестве контейнера идеально подходит, если вы хотите встроить игру в страницу. В реализации, над которой я работаю для клиента, игра отображается в полноэкранном режиме с использованием модального окна Bootstrap-React следующим образом:

  return (
    <Modal show={isReady} backdrop="static" fullscreen={true} keyboard={false}>
      <Modal.Body>{isReady && <div id="PhaserGame" />}</Modal.Body>
    </Modal>
  )

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

Оригинал

Recent Post

Categories

PREVIOUS ARTICLE
NEXT ARTICLE