使用Phaser构建2.5D的在线展览系统

 

近几年举办线下展览活动由于疫情受到了不小的影响，所以，网站举办展览也渐渐流行起来，线上办展的形式多种多样，除了 VR 导览这种形式之外，也有类似于平面画廊展览的方式。

纯粹的VR构建成本相对比较高，尤其要建模，开发等，并且要专用设备来体验，所以要发挥价值难度还是挺高的，本文讨论的便是画廊展览这种方式，类似如下的动图，2D时间轴的方式，将一个画廊娓娓展开，配合上点击的交互功能，可以让用户体验身临其境的参观方式，比如点击、视频、音频等功能的集成。

这种展览我们采用尤其引擎Phaser构建，并且后台做出来一个可视化的效果，所见即所得方式实现，大大降低了这种展览的成本，提高了速度，可以快速生成在线展览。

 

 

 

 

 

为什么选择Phaser

 

对于画廊展览这种方式来说，最好的载体就是 Web 网页，由于 Web 网页在各种设备上都可以浏览，有着很好的兼容性，这可让展览在各种设备平台上都有不错的观看体验。

既然是 Web 网页，我们最常想到的方式便是利用 HTML 提供的图片、音频和视频等标签来实现，这种方式虽然简单明了，但无论是制作、修改和管理上都需要很多手动修改网页源码来调试的地方，实现的展览效果也不够流畅。为了解决这些问题，我们决定采用 Phaser 这一 2D 游戏框架来实现在线展览的产品。

Phaser 是一款针对桌面及移动场景制作 HTML5 2D 游戏的 JavaScript 框架，基于 MIT 协议开源，在国外 Web 网页游戏制作上有着不错的流行度。相较于国内先前流行的白鹭引擎而言，Phaser 的社区支持更好，开发活跃，对于 Web 技术的支持更好，而白鹭引擎由于公司破产的缘故已停止更新多年，使用量也越来越少。

市面上的H5引擎并不少，但是Phaser可以说是2D中最出色的一个。Phaser提供的功能非常全面，比如物理引擎，Phaser默认内置3种物理引擎，ARCADE，P2，Ninja，各自有各自的适用场景，使用起来也非常方便。

同时，Phaser还支持瓦片地图、定时器、渐变动画、帧动画、滚动背景、对象池、照相机、粒子系统、图形绘制、位图、像素图、图集、加载管理、多点触摸、音视频等等几乎你能够想到的所有做游戏需要的基础功能，是目前市面上2D的H5游戏引擎中功能最丰富的一个。

所以，Phaser本身比较强大，我们用来做2D展览其实只是冰山一角，理论上可以做出更高级、更复杂的功能，更多案例可以到这里来查看。

https://phasereditor2d.com/start/

 

 

 

 

在线展览使用 Phaser 的优点

Phaser的优点

  • Phaser 采用 Canvas 或 WebGL 这两种渲染方式，它实现的展览的流畅度要远远优于直接操作 Web 多媒体元素。
  • Phaser 提供了一套完善的资源管理，对于图片视频等资源的处理要好于 Web 多媒体元素实现的版本，也可以通过对优化图片视频等资源的加载策略来减少用户看到展览的等待时间。
  • Phaser 有着优秀的缩放机制，可以轻松应对各种设备和资源的尺寸。

 

Phaser的缺点

  • 国内使用者不多，中文资料较少。
  • 从零开发的难度要高于直接使用 HTML 多媒体元素。
  • 由于是游戏引擎的原因，开发者需要先了解基础游戏开发的知识点。

 

 

在线展览使用 Phaser 的原因

 

我们调研过其他相关游戏引擎，unity3d、cocos2d、egret，它们的特点是有丰富的IDE，工具链，缺点是不易上手，初学者配置一个开发环境就要半天。

而Phaser的开发环境配置起来特别简单，只需要引入一个js文件即可。你可以用任何编写js的IDE来写Phaser，比如Sublime、WebStorm或者nodepad++，然后把项目放到服务器环境即可跑起来。

此外，Phaser不像egret那样必须用TypeScript来开发。Phaser非常灵活，你可以用es5来开发它，也可以用es6，也可以用TypeScript，哪个用着顺手就用哪个。

 

另外，相比较WEBGL或者Canvas，我们采用Phaser作为展览的引擎，有以下原因：

  • Phaser 采用 Canvas 或 WebGL 这两种渲染方式，它实现的展览的流畅度要远远优于直接操作 Web 多媒体元素。
  • Phaser 提供了一套完善的资源管理，对于图片视频等资源的处理要好于 Web 多媒体元素实现的版本，也可以通过对优化图片视频等资源的加载策略来减少用户看到展览的等待时间。
  • Phaser 有着优秀的缩放机制，可以轻松应对各种设备和资源的尺寸。

 

因此，我们最终采用Phaser作为2D展览开发的工具，详情可以参考我们的案例。

 

比较项目

Phaser

HTML 多媒体元素

开发难度

较高

低

性能

更好

较差

加载速度

更快

较慢

交互性

更好

较差

 

 

欢迎转载，请注明出处！

 

关于展览和图库的构建，也可以参考我们之前相关的文章介绍，

1. 如何建设在线展览和多媒体展览？

2. 晓安VR在线展览/云展览平台介绍

3. 如何基于开源系统构建图片/图库管理系统

4. CMS如何存储和管理大量图片/海量图片？