前端游戏引擎CreateJS与PixiJS之比较

1. 简介

经过数年的发展演化，HTML 5 为基础的游戏引擎很多，本文将就其中两个国外的著名的引擎CreateJS和PixiJS进行比较分析。

1.1 CreateJS

CreateJS 有Adobe的背景, 官网：https://www.createjs.com/ 上面介绍说：CreateJS 是一组模块化代码库和工具套件，可以独立工作也可以组合工作，用于通过HTML5技术来在网页上开发丰富的交互式内容。

1.1.1 CreateJS的主要组件

• EaselJS: CreateJS 核心库，提供在HTML5 Canvas 上轻松创建操控元素的功能。
• TweenJS: 用于提供平滑动画效果
• SoundJS: 声音播放器
• PreloadJS: 资源加载器

1.1.2 CreateJS工具

CreateJS 官网列出了很多相关工具，这里只介绍我用过的两个：

• Adobe Animate: Adobe主打工具软件之一，貌似前身是Flash编辑器，现在加了HTML5的支持。它可以输出JS和HTML文件，其中的JS文件就是调用了CreateJS引擎。
• TexturePacker: 著名的精灵表制作软件，可以输出CreateJS格式的精灵表（JSON）。

1.2 PixiJS

PixiJS的官网http://www.pixijs.com/ 上面说：使用最快，最灵活的2D WebGL 渲染器来创建漂亮的数码内容。
PixiJS库只有一个文件，其中包含了引擎主要功能和加载器，但不像CreateJs一样包括Tween和声音引擎。但是PixiJS有非官方的插件。

2. 比较

2.1 主要对象

PixiJS 和 Create JS 的主要对象定义很类似：

• Container: 容器，用于创建嵌套的层次结构
• Sprite: 精灵，用于显示对象
• Graphics: 图形，画基本图形
• Text: 文本，绘制文本
• Ticker: 图像刷新时钟信号

2.2 功能

2.2.1 渲染

PixiJS同时支持WebGL和Canvas 2D两种渲染方式，并且可以自适应。CreateJS只支持Canvas 2D渲染，虽然其官网博客2014年初就宣称WebGL的渲染器已经是Beta版本了。

2.2.2 声音

PixiJS 不包含声音播放器。CreateJS包含。

2.3 性能

PixiJS默认60帧, CreateJS 默认30帧。
在较好的设备（比如功能比较强的电脑，比较新的手机）上, CreateJS也能跑到60帧。在刷新率比较高的设备上，PixiJS甚至能跑120帧。
在低端设备上的一些测试表明，PixiJS游戏仍能勉强保持10帧左右的性能，CreateJS就惨不忍睹了。

2.4 工具

公预善其事，必先利其器。是否有好用的工具，直接关系到开发的难易度，进而关系到工作量，工期以及开发成本。
Adobe 是做工具软件的老牌公司，其从Flash发展而来的Animate直接支持生成CreateJS的布局与动画代码，可谓是原生支持。
PixiJS主要是想做轻量级的引擎，所以没有强大的原生的编辑工具。但是网上还是有一些实用的第三方工具可用的。比如用于实时调试Pixi的Chrome扩展。也有可以将flash的动画与布局导出并用pixi渲染的工具。

2.5 引擎代码的维护和开发

PixiJS 代码的维护和开发处于十分活跃的状态，每隔一小段时间就会有新版本发布，包含新特性和bug fix。记得以前曾经发现Pixi的一个bug，去网上搜时发现已经在最新版上修复了。
相比之下，CreateJS则显得死气沉沉，自2015 年末0.8.2以来近两年没有一个新版本。就在我以为这个项目已经死了的时候，他们突然宣布升级到1.0版。我以为项目复活了，但是几个月过去了，可下载的代码还是0.8.2的。看来还是没有复活…

3. 总结

鉴于CreateJS有工具帮忙又集成了声音引擎，所以如果对性能和兼容性要求不高，希望进行短期快速简单的开发，可以选择CreateJS。但由于性能问题和无法期望其进行延续行的开发和支持，如果项目希望有更好的品质，而且资源，时间充足，Pixi则是更好的选择。