英特尔® 进阶游戏大赛获胜作品 Synchrom 集成了色彩、音乐和触摸等方面的多种出色特性

下载 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 应用开发方式。 它是所有工具中我们最想学习的工具。”

Achievement Unlocked
如欲获取最新的开发人员图形指南、代码示例、工具和支持,请访问英特尔® 游戏开发人员计划

资源

查看 Steam 上的 Synchromhttp://steamcommunity.com/app/393740

了解有关 Morphiks 的更多信息: http://www.morphiks.com/

获取有关 2015 年英特尔® 进阶游戏大赛的详细内容: https://software.intel.com/sites/campaigns/levelup2015/

Para obtener información más completa sobre las optimizaciones del compilador, consulte nuestro Aviso de optimización.