Figma的桌面游戏开发

iCloudiris
770 阅读5分钟

原文链接：mastery.games/post/board-…

我和朋友们都痴迷于 The Duke这款棋盘游戏。我们抓住一切机会来一场智力较量。没有什么比用一个完美执行的策略来超越你的朋友感觉更棒的了。

流行病使得人们很难常聚在一起。但是我的朋友Adam Christiansen决心不让一场的区区毁灭世界瘟疫干扰我们的激情。他将他非凡的设计技能应用到工作中，用流行的设计工具Figma重新创造了The Duke，我用来创造mastery games logo 也是同样的工具。Figma以其出色的多人游戏功能尤其适合开发桌面游戏。

设计

你好，我是Adam。接下来将介绍我是如何使用Figma开始设计the Duke这款桌面游戏的。 The Duke 在很多方面都很像国际象棋。两名玩家在棋盘的两侧对峙，试图抓住一个关键的棋子:公爵。

镜像

我必须面对的第一个难题是如何确保这款游戏不像一堆破烂的垃圾：

  • 如何在在像Figma的单向界面中，制作玩家面对相反方向的游戏？

  • 如何在不妨碍对手的情况下将玩家的行动呈现出来？

解决上述问题的答案显而易见，但是很酷。我做了两个页面，玩家一人一个。然后我为每个玩家创建了一个主棋盘组件。然后我把它的一个实例放在对手的页面上，旋转180度。我还锁定了这个实例，使其显示出来，但没有互动。有了这个设置，白方可以在他们的棋盘/页面上采取一个行动，而黑方页面上被锁定/旋转的实例将反映这个行动。

例如，这里是白方棋手看到的情况：

而这里是从黑方旗手的角度看同一游戏：

这种镜像技巧让你感觉你的对手就坐在你的正对面！

游戏玩法

公爵与国际象棋不同的是，你开始时只有三个棋子。在你的回合中，你可以移动一个现有的棋子，或者从你的袋子中随机抽出一个新的棋子。每个棋子都在前面印有特定的可用移动选项。不过在你移动之后，你必须翻转被移动的棋子，揭示完全不同的移动机制。我们需要一种方法来快速切换，以及在抽出棋子之前将其遮住。Figma’s 变体非常适合来做这件事。我为每个棋子创建了三个变体。 隐藏式、 正面式 和 背面式。

现在要拖动一个新的棋子，你只需在你的袋子里选择一个 隐藏式 的棋子，然后把它切换到 正面式 的变体。在移动一个棋子后，你可以切换到 正面式 或 背面式 的变体。

从这里开始，我们就开始玩了! 说实话，这真的很不错。我很幸运地成为一名设计师，有三个最好的朋友，他们都是杀手级的开发者（Merrick Christensen, Dave Geddes 和 Joshy Robertson），所以当我们一起玩Figma时，他们自然看到了将事情提升到新水平的潜力。

我将把解释如何把公爵带到时髦小镇的任务交给Dave，

编码

有几件事我们必须用手去做，感觉很不方便。每当你移动或吃掉对手的棋子时，你都要在Figma的页面和层上花功夫。呃...呃! 手动洗牌尤其令人痛苦。

在思考如何改进Figma棋盘游戏体验时，我们想到Figma现在支持自定义的JavaScript plugins 包括 TypeScript.

你甚至可以用现代的HTML/CSS为你的插件编写UI。如果你相信的话，这使得了解CSS网格更加 有效。 Figma还带有Chrome devtools ，因此您可以调试您的脚本并检查布局。

游戏设置

在游戏间隙你需要手动执行这些步骤：

  • 把所有的棋子拖动归位。
  • 将它们翻转到 隐藏式 变体
  • 手动洗牌，然后再次对齐
  • 准备好你的三个首发棋子

当代码可以做到，为什么要自己做这些事情呢？！

为了使设置自动化，我给每个作品分配了一个唯一的 "id"--类似于HTML的 "id"--这样就可以用Figma plugin API找到并控制这些棋子。一开始我试着用图层名称访问棋子，但在这样一个有很多图层的文件中，这样做太慢了。

const getInstance = (id) => {
  return figma.getNodeById(id);
}

一旦你的代码有了对一个棋子的引用，你就可以把它移到你想要的地方：

const movePiece = (piece, x, y) => {
  piece.x = x;
  piece.y = y;
}

或者控制显示哪个变量：

piece.mainComponent = WhiteDragoonBack;

既然我知道了如何用代码来控制游戏中的棋子，写一个游戏设置脚本就小菜一碟了。游戏重置脚本使棋子回到袋子里并进行适当的Fisher-Yates shuffle洗牌。 下场比赛一切准备就绪！

杀死他!

The Duke 全部都在于移动你的棋子和捕捉你的对手的棋子。这些都是只需几步的手动过程。所以我做了一个 杀戮模式，在每个敌人的棋子上生成一个新的红色Figma层。然后，您可以选择您要捕获的棋子，插件代码就会处理它！

超强能力

棋盘游戏是最棒的，它真的帮助我度过了这场艰难的大疫情。一旦我得到《公爵》出版商的许可，我就会分享这个Figma文件和插件。

Figma是一个令人 难以置信 的设计和协作工具--非常适合与朋友们进行远程游戏或制作您自己的棋盘游戏原型。

知道如何编程是一种超能力。这就感觉就像使用强大的魔法把生命注入到你其它所有的爱好和激情中。当我学习JavaScript的时候，并不知道有一天它会让我和我的朋友们共度时光。没有比现在更好的时间来编码你喜欢做的事情了。

avatar
文章
阅读
粉丝