使用 Pixi.js 開發微信小遊戲

源碼

閑來無事就又折騰起微信小遊戲來，其實國内幾大遊戲引擎都支援一鍵釋出到微信小遊戲。但是對

pixi.js

情有獨鐘，是以開始進入正題。

目标：把

pixi-filters

的線上

demo

放到微信小遊戲上。

首先通過微信開發工具建立一個空項目，同時引入

pixi.js

和官方提供的

weapp-adapter.js

。

在

game.js

裡寫入：

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
})
           

一切正常的話，結果應該如下圖。

在把

pixi-filters

的

demo

搬過來之前，先把之前遇到的坑填一下。

我們先在場景中添加一張圖檔，然後讓他點選隐藏。

問題是，我們點選非但不消失，還報錯了。

這個報錯，是因為

pixi.js

裡有個判斷：

ev instanceof ToucEvent

。但是微信官方的

weapp-adapter.js

并沒有把

TouchEvent

綁到

window

，是以就出問題了。解決辦法也很簡單，改一下

weapp-adapter.js

的源碼然後重新打包一下。

//  src/EventIniter/TouchEvent.js 
// 修改第五行：
export default class TouchEvent {
...

// src/window.js 
// 添加
export TouchEvent from './EventIniter/TouchEvent'
           

修改完畢後，重新打包并替換掉我們

libs

目錄裡的

weapp-adapater.js

。

這時候，又會有問題，就是控制台不報錯了，但是圖檔還是不會消失。這确實很坑。 問題其實就在于

pixi.js

的一個

mapPositionToPoint

的實作，在這裡行不通。

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;
    }
           

上面的

interactionDOMElement

就是

wx.createCanvas

的

canvas

，顯然是沒有

parentElement

，也沒有

getBoundingClientRect

。

這個重新映射的原理很簡單。簡單說就是

canvas

的尺寸與渲染尺寸。

以

iphone5

為例，全屏

canvas

(landscape)大小是

568x320

而渲染尺寸(devicePixelRatio=2)是

1136x640

。

事件監聽捕獲到的位置是基于

canvas

(裝置)的，比如有個

sprite

在螢幕右下角，此時

pixi.js

擷取到的點選坐标是

568, 320

，而

sprite

在渲染尺寸的位置是

1136, 640

，如果不進行正确的映射就無法觸發

pixi.js

内部實作的監聽函數。

// 因為在微信小遊戲裡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)
           

還有一個

PIXI.loader

和

ajax

相關的問題

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

剩下的就是

pixi.js

的基本操作，就不寫了。順便添加了一個點選波紋效果。

廣而告之時間：

Pixi.js 寫的小遊戲上線了，歡迎試玩。

版權聲明：本文為CSDN部落客「weixin_34367845」的原創文章，遵循CC 4.0 BY-SA版權協定，轉載請附上原文出處連結及本聲明。

原文連結：https://blog.csdn.net/weixin_34367845/article/details/92026790