使用 Pixi.js 开发微信小游戏

  

• 2019/06/27: colloc
  

import './libs/weapp-adapter'
import * as PIXI from './libs/pixi.min'
const {pixelRatio, windowWidth, windowHeight} = wx.getSystemInfoSync()
new PIXI.Application({
  width: windowWidth * pixelRatio,
  height: windowHeight * pixelRatio,
  view: canvas
})

//  src/EventIniter/TouchEvent.js 
// 修改第五行：
export default class TouchEvent {
...
// src/window.js 
// 添加
export TouchEvent from './EventIniter/TouchEvent'

mapPositionToPoint(point, x, y)
  {
    let rect;
    // IE 11 fix
    if (!this.interactionDOMElement.parentElement)
    {
      rect = { x: 0, y: 0, width: 0, height: 0 };
    }
    else
    {
      rect = this.interactionDOMElement.getBoundingClientRect();
    }
    const resolutionMultiplier = navigator.isCocoonJS ? this.resolution : (1.0 / this.resolution);
    point.x = ((x - rect.left) * (this.interactionDOMElement.width / rect.width)) * resolutionMultiplier;
    point.y = ((y - rect.top) * (this.interactionDOMElement.height / rect.height)) * resolutionMultiplier;
  }

// 因为在微信小游戏里canvas肯定是全屏的，所以映射起来就很简单暴力
// 可以有两种修改
app.renderer.plugins.interaction.mapPositionToPoint = (point, x, y) => {
  point.x = x * pixelRatio
  point.y = y * pixelRatio
}
PIXI.interaction.InteractionManager.prototype.mapPositionToPoint = (point, x, y) => {
  point.x = x * pixelRatio
  point.y = y * pixelRatio
}

import './libs/weapp-adapter'
import * as PIXI from './libs/pixi.min'
const {pixelRatio, windowWidth, windowHeight} = wx.getSystemInfoSync()
const app = new PIXI.Application({
  width: windowWidth * pixelRatio,
  height: windowHeight * pixelRatio,
  view: canvas
})
app.renderer.plugins.interaction.mapPositionToPoint = (point, x, y) => {
  point.x = x * pixelRatio
  point.y = y * pixelRatio
}
const bkg = PIXI.Sprite.fromImage('./textures/bkg.jpg')
bkg.interactive = true
bkg.on('pointerdown', ev => {
  bkg.visible = false
})
app.stage.addChild(bkg)

// weapp-adapter 源码
// src/XMLHttpRequest.js
// 添加 addEventListener 方法 
addEventListener(ev, cb) {
  this[`on${ev}`] = cb
}