下载 PDF [PDF 970 KB]
在强大的 2 合 1 设备上利用流行游戏的一种方法，是将知名游戏类型的最佳元素融入到一种游戏中。 2015 年英特尔® 进阶游戏大赛“最佳动作游戏”获奖作品 Synchrom游戏包含令人兴奋的经典射击和益智类游戏元素，并加入了跳动的音乐和活泼的色彩， 最后添加了非常适合当今市场的触摸屏界面，能够轻松扩展至其他平台。 Synchrom集深度与可玩性于沉浸式界面，并采取了其他许多优秀元素，非常值得深入体验。
与其他比赛获胜者设计项目的方式相比，Morphiks Studios（位于法国雷恩市）并未选择常见的引擎，如 Unity*或 Unreal*， 而使用 HTML5 编写游戏，并使用 JavaScript* 库完成其独具特色的游戏。 这一独特的方式吸引了更多的开发人员加入。
图 1. Synchrom 基于动感的音乐、生动的色彩、精确的游戏设置以及独特的背景故事。
重新构建一个“新世界”
Synchrom是一款交互简单的游戏，玩家只需随着游戏音乐移动手指或屏幕上的鼠标即可。 目标是在您控制 Synchrom 设备向屏幕中央旋转的 Cryptangle 射击时，对准正确的颜色。 这种游戏设置很聪明，也非常新颖，充分利用了 2 合 1 触摸技术的特性。
Morphiks 的两位负责人代号是 Arch 和 Fox；Arch 是工程师，Fox 是设计师。 Arch 从孩提时起就喜欢角色扮演游戏 (RPG) 和城市建设游戏，Fox 可以在白纸和石头上设计全新的平板电脑游戏（如有必要）！
一开始，Arch 和 Fox 想要设计一个简答的项目，只需合其二人之力即可，不用再增加新的人手；从实际的商业角度考虑，他们希望快速上市。 Arch 表示：“我们把喜欢的元素列出，包括音乐和流程，然后便开始设计游戏。 我们想出一种物理交互，它需要对屏幕上的一点高度关注，同时其周围的情况。 自此，我们便开始开发用户交互。”
然后他们为自己的游戏创建了一个极具吸引力的背景故事，设置了一个新世界和一群名为 Cryptangles 的机器神，他们来自异次元。 该新世界的中心是神秘的 Synchrom，游戏玩家控制该设备传送光能量脉冲，对抗 Cryptangles。
Morphiks 能够在此次英特尔比赛中获胜是因为其项目设计非常合理。 他们此前未参加过任何比赛，但是该游戏已经远远超过参赛标准。 他们已经探索过在 2 合 1 设备上的兼容性，但是由于比赛强调新型的基于触摸的技术，他们便从此方面入手。他们使用 HTML5 编写了第一个在线演示，并快速将游戏发布出去，以期获得反馈。
比如，他们在当地一家刚开业的游戏吧中举办了一场聚会，并以此来获得用户反馈。 Arch 表示：“看到游戏在大屏幕上播放，大群人观看游戏的打斗，真是太过瘾了。” 未来还会有更多更大型的活动、更大的屏幕，也会吸引更多的受众。 “在某个周末，玩游戏的人最后达到了四百人， 非常壮观。” 当宣布 2015 年英特尔® 进阶游戏大赛的获胜作品时，Synchrom位列其中。
使用 HTML5 会带来开发挑战
Synchrom是从头开始构建，未依赖任何游戏引擎。 为了在 HTML5 中创建极具吸引力的 3D 图形，Arch 和 Fox 融合了 JavaScript 库和诸如 WebGL 的 API。 级联样式表 (CSS) 可提供用户界面。 这些技术是基本的构建材料，只是构建的开始。 主要的挑战如下。
使用 CSS
使用 CSS 构建用户界面会产生许多智能手机和平板电脑的性能问题，但是该团队都一一解决了。 Arch 表示：“CSS 非常耗费资源。 你必须恰当地使用 CSS，否则操作便会非常慢。” 解决该问题的一种方法是避免在 CSS 操作上使用太多扩展。 CSS 上的任何转换或活动都会消耗大量的带宽，因此 Morphiks 对 CSS 的使用非常谨慎。 Arch 和 Fox 必须适当地平衡 CSS 为界面带来的积极影响及其带来的资源限制消极影响。
一种方法是不断删除针对 UI 的 CSS overlay 和动画，尽可能减少其数量，否则工作负载在渲染时便会冻结主线程。 CSS 仅渲染文本；其他通过 sprite 进行渲染。 Morphiks 建议尽可能使用 sprite 并避免使用 CSS。
解决内存问题
Arch 表示，使用 HTML5 和 JavaScript 库会带来特殊的复杂性。 Arch 表示：“JavaScript 使用内存的方式非常奇怪，因此你很难构建出一款拥有良好帧速率的高效游戏。 这一部分非常困难。”
图 2.颗粒、精灵、宝石和 Cryptangle 炮弹等对象在消失时并未移除，Morphiks 将其存回对象池，以便再次使用。 这是避免带来内存泄露、JavaScript 频繁垃圾回收以及高实例化成本的最佳方式。
自定义动画
动画也是一大挑战，因为 Synchrom使用的是几何函数，而非资产。 Arch 从别处学习到将函数共享到缓存区，以减少内存和绘制的调用。 Arch 表示：“我的大部分动画都是通过编程方式完成的。 我们没有使用 Blender* 这种渲染软件。 我们的动画都是使用数字来创建的。” 换而言之，Arch 需要手动输入等式来创建旋转和运动的基数，而非使用资产库。 通过逐一调整等式的数字并观察每个结果，他们了解到哪种变化产生了什么效果。 他们不断修改，观察结果。 虽然这非常慢，但是最终创建了非常有趣的动画。 Arch 表示：“强烈建议大家不要这么做。”
监控碰撞
由于游戏是 3D，所以 Arch 在维度概念上花费了很大的力气。 本质上，Cryptangles 是一个 3D 模型。 Cryptangles 突然出现在场景中并到达不同的位置，但是交互近似于 2D 效果。 “我们需要在碰撞方面做出创新”，Arch 表示，因为他们需要在几毫秒内检测到撞击。 系统需要了解撞击触碰到的是否为“正确的”颜色，这是游戏的关键。 他们预计，如果这没有解决好，游戏将无法成形。 由于他们没有预算来购买用于大型物理引擎的处理器，所以他们转而使用 three.js（一款可帮助开发人员管理 3D 场景和对象的 3D 库）来获取代码以创建简单的碰撞。
以下代码示例展示了 Morphiks 如何使用其所需的精确度来管理碰撞。
首先是碰撞的算法：
// Here is an optimized algorithm we use for shot collisions.
// Uses Three.js library for the math, but the principle is the
// same with any engine
_colliders = /* Object selected for collision, do not collide the whole scene - only what's needed*/
// Create the 2D/3D RayCaster
var rayCaster = new G.RayCaster2D3D(
player.getPosition().clone(), // Ray Start aka player position
this.boss.position.clone().sub( player.getPosition() ).normalize(), //Ray directed to the center of the cryptangle
_colliders,
player.distanceToBoss //length of the ray; you don't need to RayCast elements that are behind the player or above the Cryptangle
);
var intersects = rayCaster.collide(); // Ray Cast Bounding spheres only and sort them
var intersect = rayCaster.crossCollide( intersects, this.camera.position.z ); //Ray March spheres from the camera on the real geometry until you find a collision point
// intersect now stores the value of the nearest point to the player visible by the camera very accurately
接下来是碰撞的类：
/**
* Creates a RayCaster for 2D/3D collision
*/
G.RayCaster2D3D = function( origin, direction, objects, far ) {
this.origin = origin;
this.direction = direction;
this.objects = objects;
this.far = far
};
/** Collision sorting function */
G.RayCaster2D3D._descSort = function( a, b ) {
return a.distance - b.distance;
};
然后他们可以管理玩家操作和 Cryptangle 之间的碰撞：
/**Collide elements from the player to the center of the Cryptangle*/
G.RayCaster2D3D.prototype.collide = function() {
var intersects = [],
object,
raycaster = new THREE.Raycaster( this.origin, this.direction, 0, this.far ),
position,
intersect;
var sphere = new THREE.Sphere();
for ( var i = this.objects.length - 1; i >= 0; i-- ) {
object = this.objects[ i ];
if ( !object.geometry.boundingSphere ) {
object.geometry.computeBoundingSphere();
}
raycaster.ray.origin.setZ( 0 );
raycaster.ray.direction.setZ( 0 );
sphere.copy( object.geometry.boundingSphere );
object.updateMatrixWorld(true);
sphere.applyMatrix4( object.matrixWorld );
sphere.center.setZ( 0 );
intersect = this.intersectSphere( sphere, raycaster.ray, object );
if ( intersect ) {
intersects.push( intersect );
}
}
intersects.sort( G.RayCaster2D3D._descSort );
return intersects
};
整合视频
Arch 表示，他在游戏中整合音乐时遇到了许多挑战。 他需要在 Synchrom 开火以及动画和声音触发时获得完整的精确度，因为玩家需要击中其目标，并赢得奖励。 针对操作使用常规的 HTML5 不适用，因此团队尝试了一个名为 Howler.js的 JavaScript 库来获得所需效果，并采用了一款名为 Web Audio API的新型 API，以便能够以可预测的方式向 HTML5 中添加原生声效功能。 这有效解决了问题。 Arch 表示：“如果没有 Web Audio API，我们不可能创建如此完美的游戏声效。”
创建可执行文件
通过 HTML5 和 JavaScript 库来创建应用仍然不太常见，但是逐渐吸引更多的人加入。 团队很快发现，在没有网络连接的情况下从 Web 应用迁移至一款可玩的游戏需要更多的工具。 NW.js支持 Arch 从游戏的 JavaScript 文件中直接调用所有 Node.js 模块。
图 3.一款游戏很难在网络游戏排行榜上一直保持领先，因为游戏经常会发布补丁进行改进，从而打破平衡。 Morphiks 在 2015 年 10 月发布了补丁，刷新了排行榜。
为分发做准备
接下来，他们需要集成 Steam API，因为 Steam是诸多独立游戏制作人分发游戏的领先平台。 为了使可执行文件与 Steam 兼容，该团队使用了能够将 JavaScript 应用与 Steam 进行集成的 Greenworks.js。 Arch 表示，如果没有采用这一步，那么便无法执行将玩家进展和成果集成到云中，与所有玩家的电脑共享等任务。
本款游戏开发人员的经验
虽然 Arch 对于“专家”这个称呼愧不敢当，但是他确实有一些宝贵的意见要告诉游戏开发新手，首先是他不会再选择的一些做法。 他表示：“我会更慎重地了解所使用的技术的成熟度。 使用 HTML5 创建游戏非常少见，但是这种方法确实有一些好的方面。 调试非常简单，我们无需在更改某种特性时重新编写一款新游戏。 我们能够快速地看到开发效果，这非常酷。”
缺点是 HTML5 的基础设施不完善。 该团队经常会在使用 3D 图形创建高端游戏，以及尝试在屏幕上追踪同时发生的多个事件时遇到困难。 Arch 表示：“HTML5 技术不够成熟，无法支持我们轻松实现自己的目的。 让一切顺利开展非常困难。”
此外，Arch 还强调，团队需要具备完成项目的所有技能。 Arch 表示：“我们没有市场专家。 我们缺少向人们展示游戏的团队成员。 Fox 和我非常喜欢开发游戏。 但是当需要介绍它时，我们两个人都不太适合。 大家应该在开始新项目之前了解到这一点：知道如何在时机到来时推销它。”
当然，首先是要有可以推销的产品，而这需要一个拥有可靠技能的团队来实现。 Morphiks 团队的建议是坚持使用自己了解的技能，不要妄想可以在开发过程中随即能够学会所有技能。 Arch 强调，无论如何，学习新能力总会比较费力。 他断言：“这一点是毫无疑问的；它是一个高斯过程。” 这意味着您需要开放文档，仔细检查，观看视频或下载演示和示例代码。 Arch 的团队并没有全部完成这些事情。 他继续表示：“我们非常喜欢阅读开发人员手册。”
忠于直觉
Arch 认为他们获得“最佳动作游戏”大奖的原因是他们不顾周围的建议，始终坚持自己的愿景。 玩家喜欢 Synchrom简单的交互方式，但是有时一些新玩家会提出一些奇怪的修复或添加建议，这些建议会降低游戏的吸引力。 Arch 认为，在向玩家展示新特性时，应该认真听取，但是要坚持自己的想法。 他指出：“你不了解玩游戏和提意见的玩家的背景。 你应该读取玩家字里行间的意思，了解早期玩家和测试者真正想说的是什么。 做你想做的事情，不要只做那些别人想让你做的事情。”
图 4. Morphiks 在无穷阶段（infinity stage）不停地更换渲染器来应用游戏内的效果。 不断的尝试让他们在后来的图形中找到了一种清晰、简单的渲染器。
最后，是至关重要的结果。 他表示：“我们对效果非常满意。 这款游戏能够很好地代表我们，它就是我们的状态，以及我们想要与大家分享的游戏。 即使它从商业角度而言并不是一件完美的产品，但是它极具我们的特色。 我们认为我们选对了路。 赢得 2015 年英特尔进阶游戏大赛的大奖对于我们而言便是很好的证明。”
Morphiks 团队在 2015 年 10 月根据玩家和已知技术问题的反馈完成了一次大型更新。 他们计划继续对该项目进行更新，并准备推出 Android* 版本。 与此同时，该团队目前正在开发新的项目。 他们目前对此不想介绍太多，因为该项目目前正处于初级开发阶段。 这款游戏有可能是一款多人游戏，并且可能会使用他们开发 Synchrom所使用的引擎，但是他们的新游戏将支持更多的玩家参与，提供在线游戏方式，并且能够兼容更多移动设备。
这是一种非常聪明的方式，因为移动游戏非常热门，支持在 2 合 1 设备、智能手机、平板电脑和其他便携式设备上使用。 据调查公司 Newzoo 最新发布的一篇报告表示，到 2015 年末，移动视频游戏的年销售额预计将达到 300 亿美元，大型市场的增速将达到 50% 或更高。 智能手机上的游戏已经停止增长；该趋势的增长动力是平板电脑上的游戏，独特的新游戏（如 Synchrom）肯定会涉足该领域。 这为 Morphiks 提供了诸多向前发展的动力。
Arch 表示：“我们达到今天的成就，学到了很多，我们会继续向前发展。 英特尔有许多我们非常想要学习的工具；我们从来不害怕尝试新东西。 尤其是英特尔XDK，为我们提供了更简单的 HTML5 应用开发方式。 它是所有工具中我们最想学习的工具。”
如欲获取最新的开发人员图形指南、代码示例、工具和支持，请访问英特尔® 游戏开发人员计划
资源
查看 Steam 上的 Synchrom： http://steamcommunity.com/app/393740
了解有关 Morphiks 的更多信息： http://www.morphiks.com/
获取有关 2015 年英特尔® 进阶游戏大赛的详细内容： https://software.intel.com/sites/campaigns/levelup2015/