作者：Christopher Brousseau
背景
我是Chris，就职于Big Viking Games这家移动/社交游戏开发工作室。我们目前正面向iOS制作一款HTML5游戏，并计划向Facebook、Android平台发布游戏。Big Viking致力于成为当代领先的HTML5游戏开发商，我原先是设计师，后来升任制作人职位，负责监管整个游戏制作流程。
我已经在PC端看到一些令人印象深刻的HTML5内容，但使用UIWebView在iOS移动平台环境中开发这种游戏要面临更大挑战。以下将列出一些HTML5的技术局限性，并分享克服这些障碍以传递出色游戏体验的创意方法。
HTML5的技术局限性
那些没有技术背景的人如何制作HTML5游戏？我个人并非团队中最佳技术达人，但我之前已经有了一些编程经验（多为C#）。我相信你之前已经看过网站，虽然网站是由许多模块组成，但它的主要成份还是图片和文本，对吗？
HTML5也是由这些元素组成，因此当你在制作游戏的时候，你就会受限于图片和文本。区别就在于，你在网站上点击一个按钮时，另一个页面就会开始加载，当前页面会发生一些变化。而在游戏中，当你点击某物时，它是通过动画或声音形式来呈现变化——这一切都是完整的客户端/服务器组件之间的对话。
因为我们是用Javascript制作动画，这非常棘手，因为在移动设备的CPU上，即使是很简单的动画也需要大量加载。更复杂的是，iOS 6引进了一个取消一些GPU卸载工作的漏洞，这严重阻碍了我们的操作计划。
当你玩《Mech Force》并进入一场战役，门砰地关上，东西开始旋转。当我找到开发团队时，提出了在该页面添加一些爆炸效果的建议，程序员惊讶地盯着我，好像我脸上有什么异常。因为添加爆炸效果可能让游戏从每秒60帧变成20帧！
enter a battle(from gamasutra)
在以上图片中，每个重甲战士（Mechs)都是由14个独立图片组成，而门则是5个图片，因为中间的圆圈采用了旋转动画和重叠文本。每个窗口都是2张图片，除此之外上面还有一些命值条和文本。每个动画都只是一个精灵表，我们循环播放并依次展示这些图片，使其呈现动画外观。无需赘述，大家都看得出来这个截图中已经有太多需要运行的东西，所以若是添加一个简单的爆炸效果就会让游戏在iPhone 4S上严重延迟运行。虽然iPhone 5可能会支持这种效果，但我们认为最好让这款游戏同时兼容于iPhone 4S和iPhone 5。
内存是我们在HTML5开发过程中遇到的另一个问题。在屏幕上同时运行这么多图片需要许多内存，而这又会导致游戏随时崩溃。iOS设备在内存不足的情况下最先出现问题的是声音。这意味着《Mech Force》中的音乐会时不时中断，这会极大影响用户体验。
游戏+HTML5
那么如何让HTML5运用于游戏领域呢？游戏当然有可能采用HTML5，只是这种游戏不可以对画面要求太高。最适合采用HTML5的游戏应该是基于文本或卡牌游戏。使用HTML5开发游戏好比是针对SNES开发游戏。游戏的发展变化创造了人们的更高期望——例如粒子效果、动画图片和声音！
想象一下！早在SNES时代人们就对此寄以期望。然而，今天的画面效果更好，能够在小型设备（例如iPad 3）上以更高分辨率运行。另一个选择就是让游戏尽量少用动画。记信，移动平台很容易出现内存问题，经常难以在屏幕上一次性运行太多图片。
但对于我们另一款正在发开中的HTML5游戏《Tiny Kingdom》，我们根据从《Mech Force》中汲取的经验重建了我们的游戏引擎。我们希望在屏幕上同时兼容四比四的战役，这似乎是最为可行的选择。但我们实际上用了一些非常愚蠢，并且毫无意义的小技巧去实现这一点。例如，如果你在动画前将不透明度设置为100%，然后在动画之后将其调至100%，你就会遇到每秒仅运行20帧的问题。
所以，RPG很适用于HTML5——你可以制作巨大的“世界”和一款极为出众的游戏，但在动画效果上的表现未必会很出色。HTML5游戏的第二种理想选择是卡牌游戏。或者可以说，只需要创造内容，无需过多动画的游戏都很适合采用HTML5。《Kingdoms of Camelot》就是一个可以轻松地用HTML5开发，并且质量毫不逊色的游戏典型。另一方面，《愤怒的小鸟》这类游戏并非HTML5的理想。任何需要让某物作出快速反应的动作类游戏都不宜选择HTML5。因此，第一人称射击游戏和平台跳跃游戏也要回避HTML5。HTML5游戏选择就这么多，就看你要创造什么内容了。
HTML5和创意设计决策
根据我最近的制作经历，我遇到了许多需要返功以便优化HTML5功能的创意障碍。
尤其是在《Mech Force》中，我们在打算将原来的理念运用于HTML5时遇到了许多棘手问题。例如，在创造史诗般的重甲战士的战役之前，我们只能选择在幕后模拟战役。
模拟战役要求我们重新调整原来的计划，并添加额外选项。我们对《Mech Force》战役的原计划是在玩家挑选对手时，向其呈现自己的作战对象。但是，我们在向玩家呈现这些内容之前，得加载14张图片并对其重新着色，这就需要花费1.2秒的加载时间。所以我们没有选择呈现令人抓狂的加载条，而是创造了一个动画，让Mechs瞬间移动。
teleportation(from gamasutra)
第二个挑战是解决Mechs如何在整款游戏中穿行。我们发现自己无法让Mechs按原计划那样移动，因为这在技术上无法实现。我们聚到一块想出了瞬间传送的方法，让Mechs以一种很棒的方式瞬间移动。
我目前的创意挑战在于设计一种允许玩家突袭其他基地的功能。为了让玩家看到自己所有的战舰都出兵作战，我不得不考虑这种效果所需要的图片数量，我得想出一个让玩家无需看到这些内容就能想象出战斗场景的创意方式。
转向《Tiny Kingdom》项目，我们计划让角色受到攻击时闪现一种不同的颜色。但这需要大量计算处理能力，因此我们无法采用这种设计。为此，我们针对游戏中的每一个敌人制作了一种攻击动画。这种做法更费工时，但为了实现目标我们只能如此妥协。为了保持游戏质量，一些小小的让步无疑更具进步意义。
小型UI
创造智能的UI或许是我们在HTML5开发过程中遇到的最大挑战，尤其是当我们还是针对iPhone 4S开发内容之时。创造智能而有效的UI迫使我们重新考虑如何让游戏在不同设备上加载。用户体验极依赖响应时间，如果加载时间太长，游戏就会让人觉得不舒服或不具可玩性。《Mech Force》在一定程度上就是如此设计，以便一切事物都能同时运行，并且只有在所有环节都准备就绪时才会呈现。但是，这会让游戏在得各个章节中花费更多秒进行加载。从一个任务切换到另一个任务可能需要3.5秒，我们认为这种设置实在让人难以接受。
这让《Mech Force》团队花费大量时间学习如何开发和部署理想的UI。例如，游戏中任何事物都是3片或9片。这意味着这些事物是由3或9张小图片构成，这些图片会延展和重复以便呈现一个更大的外观。这为了我们节省了一些内存，只是想出这个方法颇费了些功夫。
为了创造用户友好型界面，我们从苹果设计师的做法中汲取灵感。如果你有iPhone，请打开通用设置，或者Facebook，你会最先注意到其出现的框架。
为什么？
它的设计方式就是让用户一摁下按钮，就会发生一些情况——你马上就会获得反馈！即使你想到看到的并不是空屏，它也还是会给你一种快速响应的感觉（或者幻觉）。使用这种模式，我们重新回头重构了每个屏幕，令其以这种方式呈现。当你玩《Mech Force》的时候，你会看到所有屏幕加载特定的UI成份，其余内容也会紧随其后快速跟上。
步骤1：在摁下按钮时就加载背景画面。
background images(from gamasutra)
步骤2：淡入其余内容。
fade in the rest(from gamasutra)
以这种方式制作UI当然并非最有趣的选择，但有趣并非制作原代码的必要选择，因为这里的所有内容都需要比原来快100倍。然而，因为你是在自己的设备上的一个网站中体验整款游戏，我们并不想以HTML5作为游戏运行表现不佳的借口，所以投入了许多时间和精力，以便让这看起来不像是一款典型的HTML5游戏。
未来发展
展望未来，随着硬件技术的发展，我们已经看到iPhone 4S和iPhone 5之间双倍提升的性能，这有助于我们制作出外观更出色的HTML5游戏。但我们所获取的UI知识和创意技巧，可以让我们制作看似运行更为快速的游戏。在这个过程中，我也学到了许多游戏设计知识，这不只是关于制作有趣的游戏，更重要的是整体用户体验。
技术局限性不成为我们制作出想象中游戏的障碍，而应该是迫使你去寻找创意解决方案以达到理想效果的动力。
来源:游戏邦
| 
发表于 2013-3-25 11:32:32
:lol:lol