pixi.js を使用して WeChat ゲームを開発する方法を学ぶ

WeChat ミニ プログラム開発 コラムでは、pixi.js を使用して WeChat ミニ ゲームを開発する方法を紹介します。

1. PixiJS レンダリング エンジンを使用する

WeChat ミニ ゲームはブラウザとは異なる JavaScript 実行環境であり、BOM や DOM API はありません。ただし、pixi.js は、JavaScript と他の HTML5 テクノロジーを組み合わせて、メディアの表示、アニメーションの作成、またはインタラクティブな画像の管理を使用します。これは、ブラウザーによって提供される BOM および DOM API に依存します。したがって、WeChat ミニゲームで pixi.js を使用したい場合は、エンジンを変更する必要があります。

ただし、ミニ ゲームは、ほとんどの Canvas 2d および WebGL 1.0 機能のサポートを提供します。サポート情報については、「RenderingContext」を参照してください。pixi.js は、グラフィックの作成に WebGL または Canvas のどちらが使用されるかを自動的に検出できます。

エンジンの種類に関係なく、ゲームの実行中に最終的に行われることのほとんどは、ユーザー インタラクションによる 画面の更新とサウンドの再生です。ミニゲームの開発言語は JavaScript であるため、エンジンの最下位レベルでは描画 API と音声 API を JavaScript 経由で呼び出す必要があります。
JavaScript コードの一部が実行時に呼び出すことができる API は、
ホスト環境によって異なります。最も一般的に使用される console.log は JavaScript 言語のコアの一部でもありませんが、ブラウザーのホスティング環境によって提供されます。一般的なホスティング環境には、ブラウザ、Node.js などが含まれます。ブラウザーには BOM および DOM API がありますが、Node.js にはありません。Node.js には、fs や net などの Node.js コア モジュールによって提供されるファイル API とネットワーク API がありますが、ブラウザーにはこれらのモジュールがありません。たとえば、ブラウザーで正常に実行される次のコードは、Node.js で実行するとエラーが報告されます。

let canvas = document.createElement('canvas')复制代码

Node.js ホスト環境では、組み込みのグローバル変数ドキュメントがまったく提供されないためです。

ReferenceError: document is not defined复制代码

ミニゲームの実行環境はブラウザとは別のホスト環境となり、BOMやDOM APIは提供されず、wx APIが提供されます。開発者は、wx API を通じて、ネイティブが提供する描画、オーディオとビデオ、ネットワーク、ファイル、その他の機能を呼び出すことができます。

キャンバスを作成したい場合は、wx.createCanvas()を呼び出す必要があります。

let canvas = wx.createCanvas()let context = canvas.getContext('2d')复制代码

オーディオ オブジェクトを作成したい場合は、wx を呼び出す必要があります。 .createInnerAudioContext()

let audio = wx.createInnerAudioContext()// src 地址仅作演示，并不真实存在audio.src = 'bgm.mp3'audio.play()复制代码

画面の幅と高さを取得したい場合は、wx.getSystemInfoSync()

let { screenWidth, screenHeight } = wx.getSystemInfoSync()复制代码

を呼び出す必要がありますが、レンダリング エンジンは pixi に基づいています.js は次の方法でステージを作成しマウントします

document.body.appendChild(app.view);复制代码

ページに移動するとエラーが発生します 理由は上記の通りです ミニゲームのホスト環境にはドキュメントとドキュメントが提供されていませんウィンドウ、ブラウザに組み込まれている 2 つのグローバル変数。ミニゲーム環境はブラウザとは異なるホスティング環境であるため。

ReferenceError: document is not definedReferenceError: window is not defined复制代码

したがって、pixi.js の実装では多かれ少なかれ BOM や DOM などのブラウザを使用する可能性があるため、基本的に pixi.js に基づいて開発された小規模ゲームを直接小規模ゲームに移行して使用することはできません。 API。 pixi.js を変換し、BOM および DOM API 呼び出しを wx API 呼び出しに変更することによってのみ、ミニゲーム環境で実行できます。

しかし、pixi.js のコードを変更することはできず、API 実装を直接変更する方法はありません。別の適応方法として、レンダリング エンジンの間にシミュレートされた BOM と DOM のレイヤーを追加する方法があります。 API のアダプテーション層はアダプターと呼ばれます。このアダプテーション層は、エンジンが環境の違いを感じられないように、エンジンが wx API を通じてアクセスするウィンドウおよびドキュメント オブジェクトのプロパティとメソッドをグローバルにシミュレートします。

アダプターはユーザー コードであり、基本ライブラリの一部ではありません。アダプターの概要については、チュートリアル「アダプター」を参照してください。

2. アダプター アダプター

1. weapp-adapter

ミニゲームの実行環境は、iOS では JavaScriptCore、Android では V8 であり、どちらも BOM とDOM: 実行環境にはグローバル ドキュメントおよびウィンドウ オブジェクトがありません。そのため、DOM APIを使用してCanvasやImageなどの要素を作成しようとするとエラーが発生します。

const canvas = document.createElement('canvas')复制代码

しかし、wx.createCanvas と wx.createImage を使用してドキュメントをカプセル化できます。

const document = {    createElement: function (tagName) {
        tagName = tagName.toLowerCase()        if (tagName === 'canvas') {            return wx.createCanvas()
        }        else if (tagName === 'image') {            return wx.createImage()
        }
    }
}复制代码

この時点で、コードはブラウザで要素を作成するのと同じように Canvas と Image を作成できます。

const canvas = document.createElement('canvas')const image = document.createImage('image')复制代码

同様に、new Image() を使用して Image オブジェクトを作成する場合は、次のコードを追加するだけです。

function Image () {    return wx.createImage()
}复制代码

这些使用 wx API 模拟 BOM 和 DOM 的代码组成的库称之为 Adapter。顾名思义，这是对基于浏览器环境的游戏引擎在小游戏运行环境下的一层适配层，使游戏引擎在调用 DOM API 和访问 DOM 属性时不会产生错误。

Adapter 是一个抽象的代码层，并不特指某一个适配小游戏的第三方库，每位开发者都可以根据自己的项目需要实现相应的 Adapter。官方实现了一个 Adapter 名为 weapp-adapter， 并提供了完整的源码，供开发者使用和参考。
**
Adapter 下载地址 weapp-adapter.zip

weapp-adapter 会预先调用 wx.createCanvas() 创建一个上屏 Canvas，并暴露为一个全局变量 canvas。

require('./weapp-adapter')var context = canvas.getContext('2d')
context.fillStyle = 'red'context.fillRect(0, 0, 100, 100)复制代码

除此之外 weapp-adapter 还模拟了以下对象和方法：

• document.createElement
• canvas.addEventListener
• localStorage
• Audio
• Image
• WebSocket
• XMLHttpRequest
• 等等...

需要强调的是，weapp-adapter 对浏览器环境的模拟是远不完整的，仅仅只针对游戏引擎可能访问的属性和调用的方法进行了模拟，也不保证所有游戏引擎都能通过 weapp-adapter 顺利无缝接入小游戏。直接将 weapp-adapter 提供给开发者，更多地是作为参考，开发者可以根据需要在 weapp-adapter 的基础上进行扩展，以适配自己项目使用的游戏引擎。

2. pixi-adapter

小游戏基础库只提供 wx.createCanvas 和 wx.createImage 等 wx API 以及 setTimeout/setInterval/requestAnimationFrame 等常用的 JS 方法。

1.全局对象

window对象是浏览器环境下的全局对象。小游戏运行环境中没有BOM API，因此没有window对象。但是小游戏提供了全局对象GameGlobal，所有全局定义的变量都是GameGlobal的属性。

console.log(GameGlobal.setTimeout === setTimeout);console.log(GameGlobal.requestAnimationFrame === requestAnimationFrame);复制代码

以上代码执行结果均为true。 开发者可以根据需要把自己封装的类和函数挂载到GameGlobal上。

GameGlobal.render = function(){    // 具体的方法实现}
render();复制代码

2. Element 元素构造

import { canvas } from './canvas'/**
 * Base Element
 */export class Element {
  style = { cursor: null }  appendChild() {}  removeChild() {}  addEventListener() {}  removeEventListener() {}
}export const HTMLCanvasElement = canvas.constructorexport const HTMLImageElement = wx.createImage().constructorexport class HTMLVideoElement extends Element {

}复制代码

3. document 构造

import { Canvas } from './canvas'import Image from './Image'import { Element } from './element'const stack = {}/** 
 * document 适配
 */export default {  body: new Element('body'),  addEventListener(type, handle) {
    stack[type] = stack[type] || []
    stack[type].push(handle)
  },  removeEventListener(type, handle) {    if (stack[type] && stack[type].length) {      const i = stack[type].indexOf(handle)
      i !== -1 && stack[type].splice(i)
    }
  },  dispatch(ev) {    const queue = stack[ev.type]
    queue && queue.forEach(handle => handle(ev))
  },  createElement(tag) {    switch (tag) {      case 'canvas': {        return new Canvas()
      }      case 'img': {        return new Image()
      }      default: {        return new Element()
      }
    }
  }
}复制代码

4.统一入口

import { noop } from './util'import Image from './Image'import { canvas } from './canvas'import location from './location'import document from './document'import WebSocket from './WebSocket'import navigator from './navigator'import TouchEvent from './TouchEvent'import XMLDocument from './XMLDocument'import localStorage from './localStorage'import XMLHttpRequest from './XMLHttpRequest'import { Element, HTMLCanvasElement, HTMLImageElement, HTMLVideoElement } from './element'const { platform } = wx.getSystemInfoSync()

GameGlobal.canvas = canvas // 全局canvascanvas.addEventListener = document.addEventListener
canvas.removeEventListener = document.removeEventListener// 模拟器 挂载window上不能修改if (platform === 'devtools') {  Object.defineProperties(window, {    Image: {value: Image},    Element: {value: Element},    ontouchstart: {value: noop},    WebSocket: {value: WebSocket},    addEventListener: {value: noop},    TouchEvent: {value: TouchEvent},    XMLDocument: {value: XMLDocument},    localStorage: {value: localStorage},    XMLHttpRequest: {value: XMLHttpRequest},    HTMLVideoElement: {value: HTMLVideoElement},    HTMLImageElement: {value: HTMLImageElement},    HTMLCanvasElement: {value: HTMLCanvasElement},
  })  // 挂载 document
  for (const key in document) {    const desc = Object.getOwnPropertyDescriptor(window.document, key)    if (!desc || desc.configurable) {      Object.defineProperty(window.document, key, {value: document[key]})
    }
  }
} else {
  GameGlobal.Image = Image
  GameGlobal.window = GameGlobal
  GameGlobal.ontouchstart = noop
  GameGlobal.document = document
  GameGlobal.location = location
  GameGlobal.WebSocket = WebSocket
  GameGlobal.navigator = navigator
  GameGlobal.TouchEvent = TouchEvent
  GameGlobal.addEventListener = noop
  GameGlobal.XMLDocument = XMLDocument
  GameGlobal.removeEventListener = noop
  GameGlobal.localStorage = localStorage
  GameGlobal.XMLHttpRequest = XMLHttpRequest
  GameGlobal.HTMLImageElement = HTMLImageElement
  GameGlobal.HTMLVideoElement = HTMLVideoElement
  GameGlobal.HTMLCanvasElement = HTMLCanvasElement
  GameGlobal.WebGLRenderingContext = GameGlobal.WebGLRenderingContext || {}
}复制代码

思路建议为先引入通用的 Adapter 尝试运行，然后遇到的问题再逐个解决掉。

相关免费学习推荐：微信小程序开发

以上がpixi.js を使用して WeChat ゲームを開発する方法を学ぶの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。