Back to home

Vue.js 结合 PIXI.js 实践

介绍

一个小游戏的任务,准确的说是幻灯片。没有复杂交互,只有一个场景选择逻辑。

IMG_0644 2.PNGIMG_0645 2.PNGIMG_0643 2.PNG

实现细节

之前使用过 Qunitus,过于轻量,对于图片没有太多处理。以及是一个两年前的项目,作者是某公司 CTO 已经一年没 checkin code 了。 这次就选择 Pixi.js,使用之后发现对于元素控制要强大一些,但是对于游戏本身的框架结构就没有啥支持,且整体都是一个“更新”,“绘制”的模型。Qunitus 至少提供了场景切换。当然,这些自己写也不复杂,比如这一次就实现了一个类似的机制。

框架选用 Vue.js,搭配它自身的 vue-cli,直接上手拿来即用的 JavaScript 工程结构。 创建一个简单的 Component,作为基本的 canvas 容器。这次上手发现 ES6 异常好用。最喜欢 Module Loader 特性,让之前“猜测”外部引用的库文件,变成了显示导入。在这个 Vue Instance 里,data 属性存放基本的信息,然后在 mounted 方法开始加载 Pixi.js 对象,进行绘制逻辑。

舞台切换类似如下逻辑:

switchStage: function (stgName) {
  log.trace(`switch Stage to ${stgName}`)  this.stage.removeChildren()  for (let stg in this.stages) {    this.disableStage(this.stages[stg])  }  if (this.stages[stgName] === undefined) {    this.stages[stgName] = this[`buildStage${stgName}`]()  }  this.stages[stgName].visible = true  this.stage.addChild(this.stages[stgName])  this.currentStage = this.stages[stgName]  this.enableStage(this.currentStage)
}

开发测试时经常需要查看元素位置是否放对,需要直接渲染指定场景,然后定义了一些工厂方法,没有特别 OO,直接将元素拼凑逻辑写在了这些方法里。直接切换配合 WebPack 的 live-reload 组件,就是每修改一行代码,就行看到效果,效率不要太高。

全频幕适配,还是设置一些常见的尺寸比例,然后判断平台做设置具体长宽。位置一般选择相对位置,这样是全平台横竖屏表现近似。但是缺点是无法精细控制像素。当然不嫌麻烦,可以用多套像素位置标记。这里有人列举了常见 iOS 平台比率,总之不要碰到既想横屏又想竖屏的无理需求。

下面列出一些学到的资料:

碰到的坑

  • 在将自己手绘 Graphics 对象转为 Sprite 时,需要设置大小,默认的边界不会包括笔触大小,所以往往会截断图形
  • Sprite.visible = false 也会触发 click 事件,tink 的问题
  • WebPack 的 live-reload 不会清空全局对象,所以 Pixi.js 默认的 loader 再次加载时会报错。简单判断是否加再过,再手工触发加载完成事件就好
  • WebGL 中对于已经绘制(调用 endfill())的 Graphics 对象,再次绘制会失效
  • MovieClip 超级吃 CPU
  • MovieClip.animationSpeed 设置在各个平台表现不一。可能是随 CPU 强度不同。PC 上非常快,移动端则很慢
  • 发布时链接需要关注,默认是根目录,要收工修改。WebPack.js 的机制不是完美的,CSS background:url 以及 Pixi.js 带 baseUrl 的 Loader 无法被捕获。需要自己手工做修改
  • 微信分享在没有调用 SDK 的情况(需要后端支持用 AppId 和微信服务端交互拿到 token),在页面内部放入一个长宽大于 270px 的图片即可,影响页面美观就用绝对位置拖出页面内容区就看不见了。设置 display: none 会让无法抓取

总结

Pixi.js 似乎还有很多优化的手段,因为官方 demo 就是酷炫狂拽吊炸天,而且很快。自己实践下来却是“才几个小人动画,我的手机就在发烫”。整个 JavaScript 开发流程已经和当初 ActionScript 没多大区别了,我上次导入 MoiveClip 还是从 Flash8 中的事。应该可以拿来做一些有趣的应用了。吧?(如果需要投入大量成本,优化保证流畅度,那又是一个大大的问好了)