跳过导航
#MadeWithSketch

在 Sketch 中设计视频游戏:我们与 King Rabbit 团队聊聊

“对于像 King Rabbit 这样的解谜游戏,我认为必须使艺术非常清晰易读。Sketch 可以是一个很好的解决方案。”

虽然 Sketch 是一个强大的用户界面设计工具,但我们总是惊叹于人们发现的各种用途。所以当我们看到一篇关于 King Rabbit 的 Reddit 帖子时——这是一款完全在 Mac 应用程序中设计的游戏——我们很感兴趣。

为了更多地了解 King Rabbit 的创作过程,我们采访了 RareSloth 的联合创始人兼游戏设计师 Brian Oppenlander。以下是他如何使用 Sketch 创建游戏中每个资产的故事。


您能谈谈您的设计经历吗?

我拥有印第安纳大学人机交互与设计硕士学位 from Indiana University,毕业后,我曾在一家大型医疗保健软件公司的用户体验团队担任了两年交互设计师。我从未真正设想过自己会制作游戏。

我交了一个朋友,奥斯汀,他是一名程序员——后来成为了我的商业伙伴。我们决定制作一款手机游戏,花了一年时间才完成。之后我们开始了另一款游戏,并最终计划过渡到自力更生的 RareSloth 并全职制作游戏。

在医疗保健软件公司,我们使用 Adobe Fireworks,然后过渡到使用 Sketch。因此,我至少有五年使用 Sketch 进行 UI 设计和游戏的经验。

公平地说,大多数游戏设计师不会使用 Sketch 来创建他们的资源。是什么让您选择 Sketch 作为您的工具?

使用 Sketch 绝对是非传统的!我从未见过其他人使用 Sketch 进行游戏开发。但正如你所见,这是可以做到的——而且我仍然很享受它!

对于我的第一款游戏,我使用 Photoshop 和平板电脑来绘制所有资源。对于游戏美术来说,这绝对是一个更“正常”的工具。但我仍然不认为自己是一个非常好的插画家或画家,所以我更喜欢创作极简矢量艺术。

Sketch 足够灵活,我可以创建自己的“角色创建器”系统,使用 符号

在我们的第二款游戏中,我想使用一种简单的艺术风格,这样我可以更一致、更快,并且能够在我的能力范围内更好地工作。我首先使用 Illustrator 制作矢量艺术,然后过渡到 Sketch。

对于像 King Rabbit 这样的解谜游戏,我认为必须使艺术非常清晰易读。高度风格化的解谜游戏可能会很快变得视觉上令人分心,从而影响解谜体验,并可能变得令人不知所措或沮丧。

在 Sketch 中进行设计的过程与使用 Illustrator(您之前用于游戏)相比如何?

Illustrator 感觉臃肿,导出过程复杂且缓慢,这对我来说是一个巨大的痛点。我们必须非常频繁地导出资源。

Sketch 中的画板和导出管理更胜一筹——能够快速有效地管理和导出资源非常重要。 Illustrator 也会随机崩溃,我在 Sketch 中很少遇到这种情况。

我发现使用 Sketch 的资源管理和导出流程比 Adobe 的产品好得多。 Sketch 总是让人感觉工作起来更轻松,这使得工作更加愉快和高效。

将整个艺术流程包含在 Sketch 中确实简化了事情。上下文切换更少,摆弄多个程序的时间也更少。

将您的 Sketch 设计转化为可运行的游戏有多简单?

我认为 Sketch 可以成为 2D 游戏的一个很好的解决方案。它足够灵活,我可以创建自己的“角色创建器”系统,使用符号。这些单独的身体部位碎片是符号,显示了游戏中所有不同视角的角色预览。在我们的例子中,我们想为 King Rabbit 创建大量皮肤,所以我们需要重复使用动画。通过使用模板和 在 Sketch 中预览,我们可以确保在将其导出到动画软件之前,一切都已经完美对齐。事实上,我们甚至不必再打开我们的动画软件了——如果皮肤在 Sketch 中看起来不错,它就准备好生产了。

A screenshot showing Sketch Artboards containing different parts of a rabbit character model

使用导出路径命名画板可以非常快速地更新游戏项目中的资源。

A screenshot showing a Sketch Artboard with a crown graphic. The Artboard is named using the export path

我还创建了一个瓦片集创建器系统。瓦片集是像 King Rabbit 这样的自上而下 2D 游戏的常见要求。在 Sketch 中设置一个瓦片集模板很容易,该模板还显示实时预览以确保一切都是像素完美的。我们使用我们的瓦片集模板来制作地面、墙壁和路径。

A screenshot showing how different wall blocks fit together to create patterns in the game

您还可以使用 Sketch 设计和预览您自己的重复纹理,使用 9x9 的符号网格。这是一个用于泥土/石墙的纹理示例。

A screenshot showing two Sketch Artboards — one with a single tile of an illustrated dirt block, and the second showing how that single block can be tiled in a three-by-three grid

虽然可能有其他工具可以做这些事情,但将整个艺术流程包含在一个软件中确实简化了事情。上下文切换更少,摆弄多个程序的时间也更少。将所有内容(颜色样式符号,UI 元素等等)放在一个地方非常方便。

您是否遇到任何问题?您是如何克服它们的?

当文件开始变得很大,包含大量符号时,事情开始变得有点慢。我认为这是由使用大量符号引起的,并且这似乎已在 Sketch 67 中得到改进。为了克服这个问题并减少内存需求,我将资源分成单独的页面或文件——UI、角色、瓦片集、项目等等。

A screenshot showing 18 Sketch Artboards, each with a different kind of in-game item

您对 King Rabbit(和 RareSloth)的未来有什么计划? Sketch 会成为其中的一部分吗?

宏伟的计划! King Rabbit 是一种社区驱动的体验,您可以在其中参与塑造其他玩家的体验。我们的玩家已经建造了大约 150,000 个 King Rabbit 关卡,免费提供了几乎无限的内容流。

在下一个主要更新中,我们将添加兔子市场,允许玩家直接从其他玩家那里购买和出售兔子。我们的皮肤与大多数游戏不同,因为它们仅限于 100 个!我们认为使皮肤稀缺对玩家有好处,因为它们保留了它们的价值。如果您厌倦了某个皮肤,您可以将其出售以换取高级货币并购买新皮肤。这创造了一种动态的最终游戏体验,玩家可以竞争收集兔子并炫耀他们的收藏。为了获利而倒卖兔子是玩家参与的另一种元游戏。看看它会如何发展将是一件有趣的事情。

我们甚至不必再打开我们的动画软件了——如果皮肤在 Sketch 中看起来不错,它就准备好生产了。

我们正在测试的另一件事是让设计师和艺术家使用 Sketch 提交他们自己的矢量资源。例如,您可以创建自定义的兔子皮肤或瓦片集。设计师不仅会获得对其贡献的补偿,还会获得社区的认可。

如果设计师感兴趣,他们可以在我们的网站上注册以获取角色和瓦片集模板,他们也可以将它们用于自己的项目。

我们确实计划制作更多游戏,但我们希望 King Rabbit 继续成为一款活生生的游戏,我们将不断改进并为其添加新内容。这是一种沙盒体验,具有很大的扩展和发展潜力。

就我个人而言,我计划继续使用 Sketch 来制作我们的游戏。我们有一个不错的资源库,可以重复使用或重新用于未来的游戏,这将真正有助于加快开发时间。

对于正在考虑使用 Sketch 来设计游戏的同行设计师,您有什么技巧或建议可以分享吗?

从小处着手,不断迭代!范围把控是一项需要管理的技能……

我遵循一个扩张和收缩的过程。在扩张阶段,你可以放松自己,发挥创造力。通常会有点混乱。然后在收缩阶段,你回去重新组织,把事情整理好。重复这个过程。

A screenshot of King Rabbit taken from someone playing the game on an iPad Pro

如果你总是处于收缩模式,你可能过度优化,过于追求完美。设计师们承受着很大的压力,要创造出像素完美的作品。过度优化是我在一些游戏美术方面遇到的陷阱——试图让一切都像素完美且一致,这会真的让你慢下来并限制你。当然,这取决于你正在做什么样的工作以及你的限制。

我认为独立游戏开发者常犯的错误之一是追求过高的保真度,以至于一切都花费太长时间,游戏永远无法完成。有效利用时间很重要,而 Sketch 帮助我保持简单。


您可以免费下载 King Rabbit,网址分别是 iOSAndroidSteam,_亲眼目睹#MadeWithSketch 的艺术作品在动画和互动中焕发光彩。非常有趣。

您是否使用 Sketch 绘制详细的建筑蓝图?创作动画卡通系列?或者更令人印象深刻的东西?请在 Twitter 上告诉我们——我们很乐意讲述您的故事。

您可能也喜欢

免费试用 Sketch

无论您是 Sketch 的新手,还是回来看看有什么新功能,我们都会在几分钟内让您设置好并准备好完成最好的工作。

免费开始
免费开始