Unity实战Web3游戏开发
本文记录作者如何使用Unity、ThirdWeb GamingKit 和 ContractKit 构建了爬山游戏的 Web3 克隆。

一键发币: SUI | SOL | BNB | ETH | BASE | ARB | OP | POLYGON | AVAX | FTM | OK
在过去的一个月里,我参加了 ThirdWeb 黑客马拉松,其中我给自己设定了一个挑战,即使用 ThirdWeb GamingKit 和 ContractKit 构建 The Hill Climb 游戏的 web3 克隆版本。 我很高兴有机会探索利用以太坊区块链创建具有独特功能的游戏的不同方式。
在这篇文章中,我将分析我在过去一个月中构建的游戏的不同部分。 我将解释如何使用 ThirdWeb GamingKit 和 ContractKit 自定义不同的游戏部分。 最后,我将向你展示如何自定义此游戏来构建自己的去中心化版本的《The Hill Climb》。
1、模型分析
模型分析是一种使我们能够理解特定软件(在本例中为游戏)的先决条件以及它们如何相互交互的方法。 这种技术让我们对构建游戏必须做什么以及开发游戏的计划有一个高层次的概述。
1.1 用例图

用例图概述了用户和软件之间的交互。 它说明了用户的活动以及它们如何相互关联。 玩家通过完成一系列由模块/面板表示的活动来完成游戏。 每个面板代表不同的游戏阶段,玩家必须完成每个面板中的所有任务才能进入下一个面板。
当玩游戏的用户触发服务器运行并且游戏已加载时,该用例图开始。 用户连接钱包,选择汽车和级别,然后开始玩游戏。 当他们玩的时候,他们可能会升级他们的车辆。
步骤如下:
- 转到仪表板。
- 申领 NFT 以授予游戏访问权限。
- 进入游戏的主菜单。
- 连接钱包。
- 选择一个级别。
- 选择一辆车。
- 升级你的车。
- 游戏已加载。
1.2 活动图

活动图是一个很好的工具,可以更好地理解完成任务所需执行的活动的顺序以及它们之间的关系。 它主要用于识别潜在的改进领域。
通过阅读上面右上角的活动图,你可以全面了解该项目。
1.3 架构

2、ThirdWeb集成
本节介绍如何将 ThirdWeb 集成到该游戏中。
2.1 智能合约
使用 ThirdWeb ContractKit CLI,我们只需关注智能合约本身就可以快速编写和部署安全合约。 下面的代码片段代表了一个自定义的 ERC721 Drop 合约。
// SPDX-License-Identifier: Apache-2.0
pragma solidity ^0.8.0;
import "@thirdweb-dev/contracts/base/ERC721Drop.sol";
import "@thirdweb-dev/contracts/extension/Permissions.sol";
contract Contract is ERC721Drop, Permissions {
// An array of notes.
mapping(uint256 => string) public notes;
constructor(
string memory _name,
string memory _symbol,
address _royaltyRecipient,
uint128 _royaltyBps,
address _primarySaleRecipient
)
ERC721Drop(
_name,
_symbol,
_royaltyRecipient,
_royaltyBps,
_primarySaleRecipient
)
{
_setupRole(DEFAULT_ADMIN_ROLE, msg.sender);
}
/**
* A function that allows writing notes to the owner of the NFT.
*/
function writeNote(uint256 _tokenId, string memory _msg) public {
require(
msg.sender == ownerOf(_tokenId),
"You are not the token owner."
);
notes[_tokenId] = _msg;
}
/**
* A function that allows notes update only to holders of the NFT that has the `DEFAULT_ADMIN_ROLE` permission.
*/
function updateNote(
uint256 _tokenId,
string memory _msg
) public onlyRole(DEFAULT_ADMIN_ROLE) {
notes[_tokenId] = _msg;
}
}
代码显示,只有给定 NFT 的所有者才有权写入、更新和读取给定代币的注释。
之所以选择ERC721 Drop合约,是因为以下特点:
- 批量上传,因为它可以节省上传过程的时间和汽油费。
- 设置强大的声明选项来向用户声明这些令牌,例如设置允许列表等。
- 非常适合 PFP 项目,例如我们的游戏。
有关如何构建和部署此合约的更多信息,可以参考此存储库。
3、游戏
该游戏利用 Unity 和 ThirdWeb GamingKit 打造强大独特的 web3 游戏体验。 该游戏是在 Unity 版本 2021.15.1f 中开发的,因为它是我的 PC 上唯一现有的版本。 因此,请确保使用此版本来构建和部署游戏。 有关如何构建和部署游戏的更多信息,请参阅此存储库。
4、Unity开发
在撰写本指南时,有四个可玩的级别和菜单场景。 双击场景开始编辑。
4.1 关卡
开发游戏时,您必须考虑玩家将经历的不同级别。 每个级别可以具有相似的游戏对象和组件,以保持整个游戏的连续性。 但是,您还需要自定义每个级别的地形高度; 这就是 2D 地形编辑器派上用场的地方。
要创建新关卡,只需为每个关卡自定义地形高度即可。 你可以使用 2D 地形编辑器来实现此目的。 该工具可以随机生成金币、燃料和其他物品。
输入组件附加到画布上,并在每个平台上的键盘和触摸按钮之间自动切换。
4.2 菜单
主菜单系统是游戏的关键部分,提供对所有必要功能的访问,并允许我们轻松地浏览游戏。 该系统基于激活和停用菜单面板,这些菜单面板存储在空游戏对象下。
正如你所注意到的,主菜单由五个不同的面板组成。 如果想切换到特定的菜单面板,可以通过右键单击所需面板并单击“切换活动状态”来相应地激活或停用它。

同样,可以单击特定面板并选中与检查器中面板名称左对齐的框。
每个面板的组件都是完全可定制的; 你可以在当前激活的面板下自定义对象的不同属性(例如颜色、宽度、高度、脚本等)。
4.3 主菜单
当打开 MainMenu 游戏场景时,首先看到的是主菜单。 它默认处于激活状态,因此可以连接钱包并开始玩。 你可以在主菜单中找到游戏的所有选项和设置。

该面板有两个主要组件:已连接和已断开。 这些组件根据钱包连接状态以编程方式激活和停用。 尝试成功后,“已连接”组件将被激活,“已断开连接”组件将被停用。 这为我们提供了一种简单的方法来检查钱包连接状态。

创建新的输入组件非常简单。 要创建新的输入组件,您可以根据自己的喜好复制、粘贴和自定义它。
4.4 设置菜单

设置菜单是你可以完全控制游戏体验的地方。 它提供对各种功能和设置的访问,以便你可以尽可能地定制他们的游戏。
例如,如果想使用游戏中的特定功能,你可以在设置菜单中找到它,然后只需单击几下即可激活它。 同样,也可以通过在此处启用或禁用某些图形选项来自定义您的体验。 使用此菜单系统,你可以控制你的游戏体验并根据需求和偏好进行自定义。
另一个例子是通过像滑动窗口一样向左或向右滑动指示器来改变背景音乐的音量。 可以关闭音乐和音效,在玩耍时享受更宁静的氛围。 你还可以调整屏幕上显示的每个像素的质量。
创建新组件非常简单。 要创建新组件,可以复制、粘贴和自定义它。
4.5 关卡选择菜单

级别选择菜单易于使用和导航。 您单击屏幕上的 LevelSelect GameObject 图标,然后向下滚动到检查器中的项目图标,您可以在其中从四个可用级别中进行选择。 这些级别根据长度、价格和地形难度从左到右排序。
如果要添加新关卡,可以单击检查器中的加号图标,然后将关卡精灵拖放到屏幕上。 之后,可以根据需要更改其动画、声音和图标。
4.5 选车菜单

该面板是一个功能强大的工具,可让您添加新车、控制动画等。 此菜单与上一个菜单类似。
4.6 升级菜单

升级菜单是您可以自定义最近选择的汽车的地方。 您可以调整发动机、燃油、车轮和速度级别。
4.7 创建新的菜单面板
你还可以使用 Unity 中内置的 Empty GameObject 创建新面板。 为此,请在画布下选择 GameObject > Create Empty。
这将创建一个新的空 GameObject,你可以将其重命名为您喜欢的任何名称,即 YourCustomPanelName。

由于该对象是不可见的,因此你需要向其添加一个画布渲染器,以便我们可以在场景视图中看到画布内的某些内容。 然而,这与动画状态无关。 它只是为我们提供了面板的屏幕表示。

添加Canvas Renderer组件后,就可以添加Image组件了。 图像组件提供了许多用于自定义图像外观的选项。 你可以从各种预设中进行选择或自行自定义设置。

图像组件现在在场景中可见。 要将精灵附加到该组件,请将图像从“项目”窗口拖到检查器中。

如果您希望将面板用户体验提升到一个新的水平,您甚至可以将脚本附加到组件,以根据自定义逻辑控制其行为。 这意味着您可以完全控制面板的外观和行为。

现在,您可以开始添加自定义面板组件子项。 您可以从现有面板中获取灵感。
4.10 面板之间切换
您可以将按钮附加到当前面板以在面板之间切换。 要使该按钮切换到下一个按钮,您可以通过单击加号图标在 OnClick 标题下添加运行时事件。 现在,您必须将画布拖放到 GameObject 占位符中。

现在您可以附加游戏中可用的自定义函数,在本例中是这样,它接受 GameObject。

游戏对象代表下一个面板。 此功能将显示下一个面板。 同样,要隐藏当前面板,请将当前面板作为参数拖放到 setFalse。
4.11 初始状态

当您第一次打开画布时,游戏初始状态的所有值都显示在那里。 您可以在检查器的画布脚本下控制游戏变量的初始值。 初始状态很重要,因为它们设定了玩家动作的起点。 如果您想更改游戏的玩法,可以通过更改初始状态来实现。
4.12 创造一辆新车

制造一辆新车相对容易。 要创建新预制件,请复制并粘贴汽车预制件,然后在“层次结构”选项卡下更改其对象。 要增强汽车的性能,请在“层次结构”选项卡中打开“车身”对象。 然后从列表中选择任何这些组件,以根据您的车身定制它们。
要更改车身图像,请单击“层次结构”选项卡中的“VehicleSprite”对象。 现在您需要指定汽车图像。

现在,您需要更改车身碰撞器的包围体积。 为此,请单击“层次结构”选项卡中的“碰撞体”对象。 现在您需要单击检查器中的编辑碰撞器以匹配最近添加的汽车精灵。

Dead 触发器组件控制何时设置丢失状态。 如果车顶接触地面,你会输掉比赛。
同样,您可以自定义汽车的其余组件。 根据您的喜好更改所有这些属性后,您的新车辆就可以在游戏中使用了!
原文链接:I Built A Web3 Clone Of The Hill Climb Game Using Unity...
DefiPlot翻译整理,转载请标明出处
免责声明:本站资源仅用于学习目的,也不应被视为投资建议,读者在采取任何行动之前应自行研究并对自己的决定承担全部责任。