文档章节

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

JetLua
 JetLua
发布于 2018/04/23 16:08
字数 823
阅读 5.4K
收藏 1

源码

预览

闲来无事就又折腾起微信小游戏来,其实国内几大游戏引擎都支持一键发布到微信小游戏。但是对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
})

一切正常的话,结果应该如下图。

image.png

在把pixi-filtersdemo搬过来之前,先把之前遇到的坑填一下。

我们先在场景中添加一张图片,然后让他点击隐藏。

image.png

问题是,我们点击非但不消失,还报错了。

image.png

这个报错,是因为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.createCanvascanvas,显然是没有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.loaderajax 相关的问题

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

剩下的就是pixi.js的基本操作,就不写了。顺便添加了一个点击波纹效果。

广而告之时间:

Pixi.js 写的小游戏上线了,欢迎试玩。

colloc

© 著作权归作者所有

JetLua
粉丝 12
博文 2
码字总数 1463
作品 0
杭州
前端工程师
私信 提问
加载中

评论(6)

快速开发师
快速开发师
我只想说,牛皮!
ChenchenNe
ChenchenNe
源碼在哪,私發一下給我
JetLua
JetLua 博主

引用来自“吾字天河”的评论

果然很钟爱鱼呀
😄
吾字天河
吾字天河
果然很钟爱鱼呀
JetLua
JetLua 博主

引用来自“红薯”的评论

把源码放到码云上吧,方便别人在线浏览:)
嗯,放了
红薯
红薯
把源码放到码云上吧,方便别人在线浏览:)
HTML5 游戏引擎深度测评

最近看到网上一篇文章,标题叫做《2016年 最火的 15 款 HTML5 游戏引擎》。目前针对HTML5游戏的解决方案已经非常多,但谁好谁差却没有对比性资料。特意花了几天时间,针对文章中出现的12款免...

memda
2016/04/15
4.9K
8
2016年 最火的 15 款 HTML5 游戏引擎

HTML5游戏从2014年Egret引擎开发的神经猫引爆朋友圈之后,就开始一发不可收拾,今年《传奇世界》更是突破流水2000万!从两年多的发展来看,游戏开发变得越来越复杂,需要制作各种炫丽的效果,...

qixinghaitang
2016/04/01
4.4W
8
Pixi.js 渲染 Tilemap

源码预览 游戏开发中或多或少都有接触过,在编辑器里编辑好地图之后,导出数据,然后在游戏引擎(Cocos...)里就可以直接使用了,确实很方便。 由于自身并不支持的解析渲染,所以我一直在尝试了...

雨里有条鱼
2018/07/04
836
0
HTML5游戏开发(四):飞机大战之显示场景和元素

《HTML5游戏开发》系列文章的目的有:一、以最低的成本去入门egret小项目开发,官方的教程一直都是面向中重型;二、egret可以很轻量;三、egret相比PIXI.js和spritejs有他的优势所在;四、学...

wildfirecode13
2018/10/29
0
0
Phaser 3.0.0 Beta6 发布,优秀的 HTML5 游戏框架

Phaser 3.0.0 Beta6 已发布,这是 Phaser 3 的第六个测试版本。 Phaser 是一款非常优秀的 HTML5 游戏框架,致力于发展 PC 端和移动端的 HTML5 游戏,是一款不可多得的神器。基于 Pixi.js,支...

王练
2017/10/10
1.6K
1

没有更多内容

加载失败,请刷新页面

加载更多

Kettle自定义jar包供javascript使用

我们都知道 Kettle 是用 Java 语言开发,并且可以在 JavaScript 里面直接调用 java 类方法。所以有些时候,我们可以自定义一些方法,来供 JavaScript 使用。 本篇文章有参考自:https://www...

CREATE_17
昨天
102
0
处理CSV文件中的逗号

我正在寻找有关如何处理正在创建的csv文件的建议,然后由我们的客户上传,并且该值可能带有逗号(例如公司名称)。 我们正在研究的一些想法是:带引号的标识符(值“,”值“,”等)或使用|...

javail
昨天
79
0
如何克隆一个Date对象?

将Date变量分配给另一个变量会将引用复制到同一实例。 这意味着更改一个将更改另一个。 如何实际克隆或复制Date实例? #1楼 简化版: Date.prototype.clone = function () { return new ...

技术盛宴
昨天
73
0
计算一个数的数位之和

计算一个数的数位之和 例如:128 :1+2+8 = 11 public int numSum(int num) { int sum = 0; do { sum += num % 10; } while ((num = num / 10) > 0); return sum;......

SongAlone
昨天
124
0
为什么图片反复压缩后普遍会变绿,而不是其他颜色?

作者:Lion Yang 链接:https://www.zhihu.com/question/29355920/answer/119088684 来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 业余版概要:安卓的...

shzwork
昨天
81
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部