织工





5.00/5 (13投票s)
AIO 的多用户游戏,玩家在其中构建自己的蜘蛛网
应用程序名称:Weaver
类别和平台: 游戏(一体化平台)
Weaver – 一款网络精彩的游戏
Weaver 是一款支持触屏的游戏,旨在为家庭娱乐而设计,充分利用大尺寸触摸屏。每个玩家控制一只蜘蛛,围绕屏幕上的树叶、树枝和其他物体建造蛛网,捕捉接近的昆虫并收集积分。该游戏因其易于上手、趣味十足的多人游戏玩法,以及吸引人的图形和逼真的蜘蛛网和昆虫行为物理模拟而脱颖而出。
游戏以及整个开发过程——从游戏概念的创建到代码的编写——都专门针对联想的 AIO Horizon 27 英寸显示屏进行了调整,并专为本次比赛而设计。在不到 6 周的时间里,我们就成功地将我们的想法付诸实践。
本文介绍了游戏本身,以及我们在开发过程中为使其成为联想一体机上的一款成功游戏所遵循的目标。此外,本文还阐述了实施 Weaver 的原因,最后提供了一些开发过程中的见解。
Weaver
在Weaver 中,每个玩家用手指控制一只蜘蛛,在场景中的固定物体周围建造蛛网。接近的昆虫可能会被玩家的蛛网缠住。当昆虫被捕捉到时,它们应该尽快被吃掉,否则它们可能会挣脱、破坏蛛网的一部分然后飞走。 每吃掉一只昆虫都会增加玩家的分数。分数最高的玩家赢得游戏。
玩家可以在三个不同的关卡之间选择,所有关卡都有令人惊叹的图形,但外观不同。第一个关卡是一个森林场景,玩家在树叶和树枝之间编织蛛网。第二个场景展示了一个雪白色的风景,上面有一些被雪覆盖的杜松子,而第三个场景则是一个阁楼的场景,里面有晾衣绳、椅子和钉子,用于在游戏中固定蛛网。
游戏还实现了复杂的蛛网建造机制:由于人类缺乏建造蛛网的经验,我们集成了一个算法,可以根据用户的输入自动生成更自然的蛛网。为此,我们分析了真实蜘蛛的蛛网以及连接时细线的物理行为。其结果是一种更自然的体验。
目标
在开始构思游戏之前,我们已经就最终应用程序的一系列目标达成一致。它们为后续阶段奠定了基础,并通过关注引人入胜的游戏玩法、直观的交互模式和出色的图形,确保为大尺寸触摸屏提供最佳的用户体验。
- 动态玩家数量和并行游戏。 全家人都应该能够一起并行享受游戏。虽然存在物理限制(平板电脑周围的空间)和技术限制(一次只能检测十个手指),但我们希望设计一个不进一步限制玩家数量的游戏。因此,游戏玩法需要适合一名到最多十名玩家。
- 无界面方向。 与普通显示器上的应用程序不同,我们在普通显示器上知道相对于用户的顶部和底部,玩家围着桌子站立(见下图)。因此,我们需要一个不受方向限制的应用程序,可以从平板电脑的任何一侧以相同的质量感知。显然,显示文本变得越来越复杂,甚至不可能。另一个需要解决的问题是场景对象的透视,因为游戏应该是三维的。
- 避免界面元素。 另一个目标是实现高度直观的游戏,没有令人分心的界面来纯粹显示信息或向玩家提供提示。 像分数或剩余时间这样的必要数据应该通过集成在游戏玩法中的其他方法来展示。
- 具有不同复杂度和时间设定的游戏模式。 我们的游戏适合所有人,包括小孩和他们的父母,以及更有经验的玩家。因此,游戏需要灵活的机制来激励初学者玩这款游戏,同时让高级玩家保持兴趣。
- 直观的触摸模式来控制游戏对象。 这当然是为大尺寸触摸屏设计游戏的一个逻辑结果,然而,我们想在这里提及它,因为它也是我们每个人在开发过程中都牢记的要点之一。 我们的目标是达到一种不需要任何额外说明就可以玩游戏的高度直观的水平。
从不同角度看游戏的视图。我们不想要固定的方向,所以没有玩家会在视觉上处于不利地位。因此,像文本这样的元素必须谨慎使用,甚至不使用。
选择 Weaver
在设计过程开始时(在第一轮截止日期前几天),我们收集了一些关于在联想 Horizon 平板电脑上制作合适游戏的想法,从技巧游戏到真实世界模拟或某种手指扭转游戏。最后,我们讨论了十个不同的游戏创意。最终决定选择 Weaver,因为我们的大部分目标都反映在这个想法中,正如“游戏玩法”一章中所解释的那样。
Weaver 最适合我们制作一款全家人可以聚在一起玩的游戏的目标:由于直观的手势,它易于学习,并且与人们围坐在桌子旁的位置无关,因为由玩家控制的蜘蛛可以遍布整个平板电脑。此外,任何数量的玩家都可以通过添加更多的蜘蛛和昆虫来参与。最后,这是一款目前不存在的同类游戏。
游戏场景。所有家庭成员都可以一起玩——没有上下颠倒的 GUI 阻碍,Weaver 可以从 AIO 的任何一侧玩,甚至可以在玩游戏时轻松更换位置。
设计与开发
本章介绍了我们团队以及我们在开发所有阶段的进展。主要开发平台是 Unity3D,它拥有易于访问的图形和资源框架。
团队
我们的团队由三人组成。我们中的两个人分别在游戏和交互设计领域拥有五年经验,而我们中的一个人是七年的开发人员和软件架构师。我们都对移动应用和响应式软件的开发有深入的了解,尤其是在使用新颖的交互方案和为客户创造体验方面。
我们的作品示例包括:
- MohWorld(利用设备传感器的智能手机多人游戏宇宙),尚未发布
- Metaworlds(互动氛围世界构建)
- Iterazer(Android 上的生成艺术,多点触控,多人)
- GyroDroid(Unity3D 最流行的 Android 传感器框架)
- Lichtbar/Raumfrequenzen(使用多点触控控制界面进行的公共协作的投影映射)
概念
概念是我们想法的产物,并考虑了我们的目标。并非所有概念都反映在最终游戏中,但它们构建了一套合适想法来解决游戏中的一些主要问题。大多数概念都是在纸上通过数十次草图手工创建的。本节展示了其中的几个,以提供我们如何开始工作的想法。
交互模式
Menu
要开始游戏,玩家必须指定三个参数:难度级别、时间和玩家数量。下图展示了一些关于选择的思考,任何围坐在桌子旁的玩家都可以进行选择,而不会因为定向的界面而偏向任何玩家。
玩家可以将他们喜欢的蜘蛛移动到中心。可以通过左右滑动来选择关卡。
蛛网
蛛网应以真实的方式运行。例如,如果丝线附着在现有细线上,则现有细线会弯曲。因此,我们可以创建比仅仅连接细线更真实的蛛网。
在附加一条新丝线时弯曲蛛网。
游戏玩法
关卡循环
玩家有设定的时间(默认为 2 分钟)来建造他们的蛛网并捕捉接近的昆虫。根据蛛网的尺寸和结构,一些昆虫会被捕捉到,另一些则只是穿过蛛网,还有一些则会破坏蛛网的一部分。在此期间,他们必须确保修复和扩展蛛网。当时间即将结束时,这由昼夜循环在视觉上显示,会出现一个结果屏幕并选出获胜者。
根据关卡的长度和难度,我们计划拥有多种类型的昆虫。有些很弱,很容易捕捉,而有些则很大,可以提供额外的分数。
蜘蛛建造蛛网的丝线是有限的。它再生缓慢,但是,每吃掉一只昆虫都会提供少量额外的丝线来建造更多的蛛网。
吃掉被捕获的昆虫
处理被捕获昆虫的流程。玩家可以将蜘蛛移到昆虫处,然后将其吃掉(也许蜘蛛需要先将其包裹起来并等待一段时间)。如果蛛网太脆弱或玩家太慢,昆虫可能会挣脱并破坏蛛网的一部分。
设计
图形
游戏中最重要的问题之一是图形。本节讨论了我们做出的一些方法。
蜘蛛
蜘蛛是游戏中最重要的单位,因为游戏就是关于它们的。我们试图让它们不受视角限制,以便赋予它们情感(例如“吃掉脏虫子”、“饥饿”、“死亡”或“获胜”),并让它们平滑移动。以下草图展示了一些实现我们要求的方法:
一些设计蜘蛛的初步尝试。
模型蜘蛛,可以通过更改身体部位的大小和颜色进行个性化设置。嘴巴和眼睛的位置是表达情感的有用工具,如视频中所展示的。此外,不同的眼睛配置会产生不同的情感。
声音和音乐
要创造一款出色的游戏,良好的音乐和声音设计至关重要。我们在这一方面得到了 Christian Freitag,一位多媒体和声音设计师的帮助。在与他讨论了基本情绪(非常轻快、可爱的音乐)后,他创作了几个不同的版本,我们从中选择了最合适的版本。他对其进行了改进,并创作了菜单循环以及不同关卡的歌曲和游戏事件(如获胜)的声音。
由 Christian Freitag 创作的 Weaver 主题曲 (MIDI 文件链接)
开发
本节概述了我们在开发过程中遇到的一些问题。
安装程序
英特尔和联想为 Visual Studio 提供了在联想 Aura 环境中安装应用程序的说明。我们决定使用开源安装程序 NSIS,因为它使用方便、体积小且免费。遵循英特尔的说明集并非难事,但是,由于我们不经常做这些事情,所以遇到了一些问题(例如,在 64 位系统上查找 32 位应用程序的 HKLM)。如果您想或需要为您的项目使用 NSIS,并且您需要脚本,请给我们发送消息。
Application
我们使用Unity3D开发游戏本身,它是一个强大的场景创建工具。它使我们能够非常快速地操作游戏元素并评估原型,我们还可以轻松地将它们导出到Unity 的 Web Player,这使我们能够让远程测试人员试用新功能并提供直接反馈。
结合 PlayMaker 使用 Unity3D
我们使用有限状态机来处理应用程序逻辑中更通用的部分。 PlayMaker是一个 Unity 扩展,它允许快速开发,同时又具有所需的可扩展性。然而,游戏玩法元素(蛛网建造、蜘蛛移动等)直接在 Unity 中的 C# 中实现。
构建我们自己的着色器
Unity 包含许多集成材质,但是我们想要的外观用它们很难实现。这意味着我们不得不自己实现一部分着色器,从而实现诸如轮廓光、发光叶子或通过后期处理着色器调整时间(白天/黑夜)之类的效果。
使用 Autodesk 3ds max 创建 3D 模型、动画和纹理
所有场景元素都使用 Autodesk 的 3ds max 进行建模和纹理处理。特别注意确保模型的实时兼容性,将多边形数量减少到视觉上所需的最低限度。
建造蛛网
蛛网附加算法旨在创建尽可能自然的蛛网。我们将丝线在新增附加的位置分开,并根据三根交织细线的长度将其拉向新细线的方向。可以在此处看到一个示例。 彩球代表蜘蛛,可以通过鼠标点击移动。白球代表目前无法捕捉的昆虫。
蛛网建造使用 Verlet 积分和自定义算法的组合来实现逼真的外观和感觉。通过将细线建模为节点之间的连接,并仔细处理所有边缘情况(节点-细线、节点-节点、节点-分支;取消编织、分裂线、结束编织等),我们实现了非常直观的编织蛛网的方式。但该算法不仅必须能够创建逼真的螺旋状蛛网,而且在使用户决定 i.e. 只是之字形移动时也能保持稳健。
尽管已实现并且技术上可行,但出于性能原因,我们决定不使用动画末端节点(例如,附着在移动分支上的丝线)。
在游戏选项中可以选择创建的蛛网是否会被另一个玩家征服。这可以通过玩家附加到现有细线上来实现,这带来了有趣的玩法变化。
以下是蛛网建造不同模式和情况的一个(略微简化的)代码示例:
public class Strand : WebPart {
// strand is always connection between two knots
public Knot a;
public Knot b;
// ...
}
public class Knot : WebPart {
public bool isFixed;
public List<Strand> strands = new List<Strand>();
// ...
}
public class Web : MonoBehaviour {
public List<Knot> knots = new List<Knot>();
public List<Strand> strands = new List<Strand>();
public Spider owningSpider;
// update knots and strands and their constraints
void FixedUpdate () {
foreach(Knot k in knots) {
k.ResetForces();
}
foreach(Knot k in knots) {
k.RunFixedUpdate();
}
foreach(Strand s in strands) {
s.ConstrainKnots();
}
foreach(Knot k in knots) {
k.UpdatePosition();
}
}
Knot SplitStrand(Strand s, Vector3 point) {
// create knot in the middle, replace strand by two
var k1 = CreateKnot(point);
var s1 = CreateStrand(s.a, k1);
var s2 = CreateStrand(s.b, k1);
knots.Add(k1);
AddStrand(s1);
AddStrand(s2);
RemoveStrand(s);
return k1;
}
public Knot Connect(Strand s, Vector3 point) {
// remove strand, create two new strands with knot in the middle
var k1 = SplitStrand(s, point, newParts);
var k2 = CreateKnot(point);
var s3 = CreateStrand(k1, k2);
knots.Add(k2);
AddStrand(s3);
return k2;
}
public Knot Connect(Knot k, Vector3 point) {
// create new knot and a strand between them
var k2 = CreateKnot(point);
var s = CreateStrand(k, k2);
knots.Add(k2);
AddStrand(s);
return k2;
}
public void RemoveStrand(Strand s) {
// remove strand from knots, remove strand
s.a.strands.Remove(s);
s.b.strands.Remove(s);
strands.Remove(s);
s.Destroy();
}
void AddStrand(Strand s) {
// add strand to knots, add strand
s.a.strands.Add(s);
s.b.strands.Add(s);
strands.Add(s);
}
public void RemoveKnot(Knot k) {
// remove knot and all attached strands
knots.Remove(k);
for(int i = k.strands.Count - 1; i > -1; i--)
RemoveStrand(k.strands[i]);
k.Destroy();
}
public Knot Connect(Vector3 point1, Vector3 point2) {
// connect two points with a strand, create knots at the ends
var k1 = CreateKnot(point1);
var k2 = CreateKnot(point2);
var s = CreateStrand(k1, k2);
knots.Add(k1);
knots.Add(k2);
AddStrand(s);
return k2;
}
public Knot EndConnect(Knot k, Strand s) {
// split the strand and end the webbing here
var k1 = SplitStrand(s, k.transform.position, newParts);
return EndConnect(k, k1, newParts);
}
public Knot EndConnect(Knot k1, Knot k2) {
// find strand for k1, remove strand, keep point k0 that is not k1
// add strand from k0 to k2, return k2
Strand s = k1.strands[0];
var k0 = s.a == k1 ? s.b : s.a;
var s1 = CreateStrand(k0, k2);
AddStrand(s1);
RemoveStrand(s);
knots.Remove(k1);
k1.Destroy();
return k2;
}
public Knot EndConnect(Knot k, Vector3 point) {
k.transform.position = point;
return k;
}
}
用于蛛网建造的略微简化的代码,展示了其中发生的不同模式和情况。
使用专用显卡实现高**性能**
从技术角度来看,联想 AIO 平台是一款笔记本电脑:它包含一个集成显卡(Intel HD4000)和一个独立显卡(GeForce GT620M)。默认情况下,使用集成显卡,虽然不差,但远不如独立显卡强大。因此,我们决定实现自动配置文件生成,这意味着在首次启动时,Weaver 会创建一个 NVidia 设置配置文件以启用独立显卡。这大约将帧速率加倍,并帮助我们实现了景深和全屏色彩校正等效果。当然,功耗更高,尽管我们发现使用时间仍能保持约 2 小时。
测试
蛛网建造和蜘蛛移动的复杂算法经过了严格的测试,并使用了不同的设置,以涵盖尽可能多的边缘情况。它仍然不是无错误的,但剩余的问题相当小。
与任何项目一样,我们需要确保我们的原始设计目标得到满足,用户界面易于使用,并且玩家真正喜欢这款游戏。特别是对于 Weaver,我们还需要确保游戏最多支持十名玩家。
为此,我们对熟悉游戏的人和从未见过游戏的人进行了大量测试。AIO 平台的便携性对此非常有帮助——只要有机会,我们就征求真实的反馈,而且,更重要的是,我们观察了使用模式,并从交互的角度推断出需要更改的内容。最终版本成功地与一组八名随机参与者进行了测试,没有任何介绍。
已知问题
- 在关卡选择视图中,蜘蛛可以在相邻的关卡之间拖动。
- 很少情况下,当超过六名玩家同时编织时,一些细线会“爆炸”,视觉上遮挡屏幕。
- 如果蜘蛛靠得很近,触摸输入可能无法正确分配给它们。点击自己蛛网的某处会导致它们移到那里,从而解决问题。
- 昆虫的移动不是很吸引人,可能有更多不同的飞行模式。
- 更多具有不同能力的昆虫类型。