使用 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