How to use pixi.js to develop micro channel games

let canvas = wx.createCanvas()
let context = canvas.getContext('2d')
Copy the code

If you want to create an audio object, you need to call wx. CreateInnerAudioContext ()

let audio = wx.createInnerAudioContext()
// The SRC address is for demonstration only. It does not exist
audio.src = 'bgm.mp3'
audio.play()
Copy the code

If you want to get the width and height of the screen, you need to call wx.getSystemInfoSync()

let { screenWidth, screenHeight } = wx.getSystemInfoSync()
Copy the code

But the Pixi.js based rendering engine creates the stage and mounts it to the page in the following way

document.body.appendChild(app.view);
Copy the code

This generates an error because, as mentioned earlier, the mini-game hosting environment does not provide the global variables document and window that are built into the browser. Because the mini-game environment is a different hosting environment than the browser.

ReferenceError: document is not defined
ReferenceError: window is not defined
Copy the code

1. weapp-adapter

The running environment of small games is JavaScriptCore on iOS and V8 on Android. Both of them have no BOM and DOM running environment and no global Document and Window object. So when you try to use the DOM API to create elements like Canvas and Image, you get an error.

const canvas = document.createElement('canvas')
Copy the code

But we can use wx.createCanvas and wx.createImage to encapsulate a document.

const document = {
    createElement: function (tagName) {
        tagName = tagName.toLowerCase()
        if (tagName === 'canvas') {
            return wx.createCanvas()
        }
        else if (tagName === 'image') {
            return wx.createImage()
        }
    }
}
Copy the code

The code can then create the Canvas and Image just as it would create elements in the browser.

const canvas = document.createElement('canvas')
const image = document.createImage('image')
Copy the code

Similarly, if you want to create an Image object as new Image(), add the following code.

function Image () {
    return wx.createImage()
}
Copy the code

These libraries of code that simulates BOM and DOM using the WX API are called Adapters. As the name suggests, this is a layer of adaptation for the browser-based game engine in the small game environment, so that the game engine does not generate errors when calling the DOM API and accessing DOM properties. Adapter is an abstract layer of code, not a specific third-party library for mini-games, and each developer can implement the Adapter for his or her own project. The app provides a complete source code for developers to use and reference. Downloadable p-adapter.zip Appellant p-adapter preevaluates wx.createcanvas () to create an overscreen Canvas and expose it as a global variable Canvas.

require('./weapp-adapter')
var context = canvas.getContext('2d')
context.fillStyle = 'red'
context.fillRect(0.0.100.100)
Copy the code

In addition, the following objects and methods are simulated by THE P-Adapter:

• document.createElement
• canvas.addEventListener
• localStorage
• Audio
• Image
• WebSocket
• XMLHttpRequest
• And so on…

It is important to note that the p-Adapter is far from complete in its simulation of the browser environment. It only simulates the attributes and methods that game engines may access, and there is no guarantee that all engines will be able to access games seamlessly through p-Adapter. The app provides a “participatory P-Adapter” directly for developers to use as a reference, allowing them to extend it if needed to accommodate their own game engines.

2. pixi-adapter

Little game base libraries provide only wx. CreateCanvas and wx createImage wx API and setTimeout/setInterval/requestAnimationFrame JS method in common use.

1. Global objects

The Window object is a global object in the browser environment. There is no BOM API in the mini game runtime environment, so there is no Window object. But mini-games provide a global object called GameGlobal, and all globally-defined variables are properties of GameGlobal.

console.log(GameGlobal.setTimeout === setTimeout);
console.log(GameGlobal.requestAnimationFrame === requestAnimationFrame);
Copy the code

The above code execution results are true. Developers can mount their own wrapped classes and functions to GameGlobal as needed.

GameGlobal.render = function(){
    // Specific method implementation
}
render();
Copy the code

2

import { canvas } from './canvas'

/** * Base Element */
export class Element {
  style = { cursor: null }

  appendChild() {}

  removeChild() {}

  addEventListener() {}

  removeEventListener(){}}export const HTMLCanvasElement = canvas.constructor

export const HTMLImageElement = wx.createImage().constructor

export class HTMLVideoElement extends Element {}Copy the code

4. Unified entrance

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 / / global canvas
canvas.addEventListener = document.addEventListener
canvas.removeEventListener = document.removeEventListener

// Cannot be modified when emulator mounts 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},
  })
  / / mount the 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 = documentGameGlobal.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 || {}
}
Copy the code

The recommended method is to introduce a common Adapter and try to run it, and then solve the problems one by one.