为市面上唯一一款纯HTML5技术而备受瞩目的青瓷引擎(QICI Engine)，在经历了一个多月的封闭测试之后，近日全新0.95版本正式发布。据悉，该版本的青瓷引擎(QICI Engine)已具备了正式开发游戏的条件，不但保持了已有的专业HTML5引擎核心要素，对于HTML5游戏的开发服务及性能上亦进行了强化，同时还为开发者量身打造了上百个示例工程，降低学习成本，入门更加轻松。

在此之前，青瓷引擎(QICI Engine)以“让天下没有难做的游戏”为口号，出席了各大移动游戏展会及HTML5峰会，从专业的角度以及实例演示，阐述了“真正HTML5引擎究竟应该是什么样的”，吸引了大批开发者的关注。那么，这样一款纯HTML5技术的游戏引擎究竟能为开发者带来什么?0.95版本又解决了哪些问题?

【纯JavaScript语言开发 快速易用无需安装】

青瓷引擎(QICI Engine)极易入门，采用纯JavaScript语言架构，即引擎基于JavaScript，工具基于JavaScript，后台服务基于Node的JavaScript，这样的架构体系使得系统内部各个组件无缝融合，并最大化的减低了对开发人员的要求，只要懂JavaScript即可开发游戏，又可自定义扩展开发工具和后台服务的插件。另外，青瓷引擎无需插件和客户端安装即可在浏览器下运行，甚至在平板和手机上亦能做开发工作。而在0.95版本中，更是新增了上百个示例工程，为开发者的学习保驾护航。

【可视化操作 一站式集成 】

目前市面上有些HTML5引擎，只有简单的制作工具和一堆难懂的渲染API，要做出一款普通的游戏需要耗费较多的精力来开发配套工具，这对大部分普通开发者来说成本难以承受。

青瓷引擎(QICI Engine)是专为游戏开发而生的，采用的是可视化的一站式开发框架，没有复杂琐碎的插件，是为游戏量身定做的所见即所得的集成式开发工具，拥有UI控件、自适应分辨率布局系统、曲线动作编辑器、图集打包等工具，通过简单的拖拽都可以实现很多复杂的功能。最大程度简化开发者的操作。

同时，游戏数据也均为可视化，并且可以直接进行修改。游戏引擎还支持excel配置，游戏的数据、数值甚至一些规则都是可以通过excel表格直接配置。而曲线动作编辑器方面，策划或美工可以直接完成界面打开的动画、界面关闭动画、场景切换效果等等一系列界面动作。在0.95版本中，也更加完善了中文API文档和用户手册，给开发者带来了极大的便利。

【全套通用组件库解决方案 自定义编辑器插件】

青瓷引擎(QICI Engine)的编辑器工具完全基于青瓷引擎Widget全套自家通用组件库解决方案搭建而成，不依赖市面上各种层次不齐的通用组件解决方案，青瓷引擎 Widget组件库包含了树表等丰富的常规组件，以及灵活组件布局功能，组件风格操作模式统一，并且极其高性能，完全能达到和Native组件媲美的高负载和可操作性，这也是青瓷引擎编辑器工具敢于完全基于HTML5开放游戏引擎工具的根基，这样的架构很好的和青瓷引擎融合一体，无需任何插件，即可无缝的查看游戏对象层次结构和调试，并且用户可非常容易的基于青瓷引擎 Widget组件库扩展自定义编辑器插件。

青瓷引擎(QICI Engine)始终致力于开发者的核心体验，性能与高效一直是研发过程中的重中之重，伴随青瓷引擎0.95版本的到来，除了修复BUG外，还新增TiledMap支持，在性能上面也有着更加卓越的表现。

关于青瓷引擎(QICI Engine)：

青瓷引擎(QICI Engine)由厦门青瓷数码十几年实际游戏开发经验总结、提炼，汲取Unity3D大部分的优点，采用纯HTML5技术和JavaScript语言，提供一站式2D游戏开放框架及专业的编辑器工具，是一款高性能、高效率，更贴合实际，更亲近程序、美术和策划等开发人员的真正意义上的HTML5引擎。青瓷引擎将以开源和免费的形式发布。

strolid是一款采用诸多web新技术的HTML5游戏。游戏的作者treeform分别使用webGL、WebSocket、AudioContext和作者自制的响应式HTML框架来渲染图形、创建网络连接、播放音频和设计UI。另外，他还使用了Electron来将游戏打包成Windows和Mac的桌面应用程序。笔者这次给大家分享一下Istrolid作者的游戏开发心得。

2D WebGL

在使用openGL和WebGL引擎时，开发者通常会创建多个网格和纹理对象。但是Istrolid的作者却有着自己独特的建构方法。他通过一个网格和纹理对象来绘画所有的游戏内容。游戏中的飞船有非常简单的多边形构成，有的甚至是由若干个三角形构成的。因此作者认为没有必为每一个要绘制的物体都新建一个网格对象。

取而代之的是创建一个动态的网格并在每一帧画面中通过代码来调整这个网格。这样会大大加快绘制的速度。这种方法和通常被开发者们弃用的openGL的immediate模式比较类似。同时，作者不推荐使用 3D ModelView的矩阵。在编写Istrolid时，他仅仅将一个视点的矩形传递给了着色器。因此这款游戏是完全基于2D引擎的。

图1 游戏中的飞船均由简单的多边形构成

纹理对象也很简单，而且和网格对象一样是动态的。在一个区域或者地形上绘制图片时，游戏程序会加载这个纹理对象并将它放到一个实时打包的纹理地图集中。之后程序会根据新的UI坐标系来创建网格对象。

图2 2048px*2048px的地图集

作者对着色器的操作也很简单。他将所有的颜色都转换到了HSV颜色空间中以便于进行颜色的调整。

图3 HSV颜色空间

Coffee Script

JavaScript快得难以置信。作者原本利用Panda3d和Python来编写却发现Python并不能满足他对速度的需求。他认为不断发展壮大的JavaScript在满足他对速度的追求的同时还能实现更多的功能。他使用CoffeeScript来编写整个游戏并非常喜爱它的缩进排版和箭头标识符。特别令他印象深刻的一点是箭头标识符可以非常快速的创建内联函数。

他利用自己三年前编写的基于HTML的编辑器在服务器上编写代码。这样的好处是他可以通过访问编辑器的URL来在任意一台电脑上开始他的开发工作。他用过Windows、Mac和ChromeOS并非常支持ChromeOS的云理念。

图4 作者自制的基于网络的编辑器

WebSocket和服务器

作者利用CoffeeScript来编写服务器端程序并用Node.js来运行。他希望这款游戏能够同时支持单人模式和多人模式。当玩家进行单人模式游戏时会开启一个本地服务器。程序通过一个伪WebSocket来连接到本地服务器。这样的好处是可以在一个真实的网络环境中来测试代码，从而简化调试的过程。所有的调试和单步调试都在一个进程中完成。另外，他还可以在这个伪WebSocket中设置网络延时和抖动来模拟复杂的网络环境。

在开发即时战略类游戏时，开发者通常会选择锁步（Lock Step）方法。但是Istrolid得作者并没有这么做。他认为锁步已经过时，不易于编写（尤其是用JavaScript编写时）。而且在这个个人电脑普遍拥有高带宽的时代，锁步的优势已不再明显。他采用delta编码方式，并仅将变动的数据从服务器传给每个玩家的服务器上。

图5 Istrolid的网络结构

AudioContext

浏览器的音频播放能力已经改善许多。作者通过过程生成技术来创建背景音乐，并创建一个随着游戏的进行动态响应的鼓。当一个单位被集中或者爆炸时他会提高这个鼓的音量。他将每一个武器开火时的声音的音量设定成一个随机数以保证每一个武器的声音都有差别，尽管这个差别很细微。除非要开发一个音乐游戏否则作者不推荐在这方面花太多时间。

HTML UI

如果游戏中的UI非常多的话，那么完全靠自己用代码来实现就会非常困难。这时就需要一些些复杂的UI框架来进行辅助。对于HTML5游戏来说，无需使用复杂的工具包即可实现复杂的UI效果。作者还利用HTML5的特性自己设计了一个响应式框架从而简化UI的编写过程。

Electorn “Shell”

如今将HTML5游戏编译成适合于Windows、Mac或Linux的桌面应用程序非常容易。Istrolid的作者非常推荐那些因为插件拓展、浏览器过时或者驱动故障等问题头疼的开发者尝试一下Electron。同时这也为把你的游戏发布到类似Steam这样需要提供可下载文件的游戏平台创造了可能。

图6 Electron

点击阅读原文，查看原文章～

页游戏的开发流程可以根据项目的规模和复杂性而有所不同，但通常包括以下一般步骤，希望对大家有所帮助。北京木奇移动技术有限公司，专业的软件外包开发公司，欢迎交流合作。

1.需求分析：

确定游戏的概念、目标受众和核心功能。了解玩法、游戏性、关卡设计等方面的需求。明确项目范围，包括技术要求和预算。

2.概念和设计：

开发游戏的创意概念，包括角色、故事情节、关卡设计和用户界面。创建草图和原型，以可视化游戏的外观和功能。

3.技术栈选择：

选择适当的开发技术和框架，例如HTML5、JavaScript、Canvas/WebGL、游戏引擎（如Phaser、Three.js）等。确定开发团队的技能和工具。

4.游戏引擎或框架的设置：

如果使用游戏引擎或框架，设置游戏引擎环境，导入资源和创建游戏基础结构。

5.角色和资源设计：

设计游戏中的角色、道具、背景和音频。创建或获取所需的游戏资源，如图形、声音、音乐和动画。

6.编码和开发：

根据游戏设计，编写游戏的前端代码，包括游戏逻辑、用户界面和控制。集成游戏资源，创建游戏界面和玩法。

7.测试：

进行功能测试，包括游戏性测试、界面测试和性能测试。修复和调整问题，确保游戏的稳定性和可玩性。

8.优化：

进行性能优化，确保游戏在不同设备和浏览器上顺畅运行。考虑加载时间、帧速率和内存使用。

9.用户界面（UI）和用户体验（UX）：

设计和测试用户界面，确保用户界面友好且易于导航。考虑用户体验，以提高游戏的吸引力。

10.多平台适配：

确保游戏能够在各种设备上运行，包括桌面、移动设备和不同浏览器。进行跨浏览器和跨设备测试。

11.发布和部署：

准备游戏发布的版本，包括打包和构建。将游戏部署到Web服务器或游戏平台，确保在线可访问。

12.营销和推广：

制定游戏的营销和推广策略，包括社交媒体宣传、应用商店提交、广告等方式来吸引玩家。

13. 监控和反馈：

使用分析工具跟踪游戏性能和玩家行为。收集用户反馈，了解他们的需求和意见。

14. 更新和维护：

定期更新游戏，添加新功能、修复错误和改进性能。与玩家互动，以满足他们的期望。

15. 合规性和法规：

确保游戏符合适用法规和合规性要求，尤其是涉及隐私、儿童保护和知识产权方面的法规。

以上是一般的网页游戏开发流程，但具体的流程可能因项目类型、规模和需求而有所不同。成功的网页游戏开发需要协同合作的开发团队，包括程序员、设计师、艺术家和测试人员，以确保游戏的质量和可玩性。