前端游戏引擎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则是更好的选择。

猜你喜欢

转载自blog.csdn.net/qq_38316721/article/details/81512465