新春“码”启 | Cocos 3D 开发微信小游戏（第3天）：场景搭建与游戏链路基础开发

news/2025/1/31 10:05:30/文章来源:https://www.cnblogs.com/obullxl/p/18693236/NTopic2025012501

今天是实施新春小游戏计划的第 3 天，前面 2 天主要是入门和了解，我们对微信小游戏以及 Cocos 编辑器有了初步的认识。

第 1 天：新春“码”启 | 0 基础开发微信小游戏，Cocos 游戏引擎 + AI 辅助编程（第 1 天）
第 2 天：新春“码”启 | 0 基础开发微信小游戏，Cocos 游戏引擎 + AI 辅助编程（第 2 天）

接下来，现在我们就开始正式实战研发小游戏了：

设计小游戏的总体方案，包括场景及其内容等方面。
开发小游戏基础框架，跑通整个游戏链路，细节部分就后续逐步完善补充。

总体设计方案

到现在，老牛同学还尚未确定小游戏的创意，这时候大模型好像没什么用了，给的想法总是达不到要求。

虽然没有明确的创意，但是老牛同学玩了几款热门的微信小游戏，再结合自己的经验，初步设计出了这个小游戏：

总体设计方案

老牛同学的设计思路是这样的：

游戏采用通关模式，最少有 1 个关卡，关卡难度由易到难递增。
明确每个关卡的通关时间限制，如果时间用完或者工具用完（像子弹、生命等），就算通关失败。
要是通关成功了，就进入下一个关卡；如果失败了，还可以选择复活，不过复活需要玩家参与互动（比如学习游戏操作手册等）。

由于这个游戏不允许有杀戮、战争等场景，所以通关的方式就不能是用子弹之类的了。

研发基础框架

接下来，开始用 Cocos 研发基础框架，目的是串联整个游戏流程，那些不明确的部分就先跳过。例如，我们可以通过点击“成功”和“失败”这两个按钮，分别代表通关成功和失败。

今天核心目标完成前面 3 个场景的研发：

场景一：开始场景

开始场景主要表达角色设定、背景介绍、任务说明，还有进入游戏或者退出游戏的操作按钮。

在“资源管理器”面板中，在assets目录右键新建目录scenes，用于存放小游戏场景内容，我们新建一个名为SceneStart的场景并双击打开它。

由于小游戏主要在手机端运行，需要设置小游戏的宽度和高度：

打开项目设置面板，路径：“项目” - “项目设置”
在“项目数据”配置项中，调整参数：“设计宽度”为720（像素），“设计高度”为1280（像素），同时勾选“适配屏幕宽度”和“适配屏幕高度”复选框

项目设置

我们在“场景一”中，创建一个“开始游戏”按钮，点击按钮则进入“场景二”：

在“层级管理器”中创建画布：右键 - “创建” - “UI 组件” - “Canvas (画布)”，并重命名为“CavansStart”
在“场景编辑器”中，切换到“2D”视图，点击“3D”或者按下2快捷键
在“层级管理器”中空接口，UI 节点都放到这个节点下：“Canvas”右键 - “创建” - “空节点”，并命名为“MenuView”，代表一个菜单
在“层级管理器”中创建按钮：“Canvas”右键 - “创建” - “2D 对象” - “Sprite (精灵)”，主要是用于设置背景
在精灵的“属性检测器”中，调整精灵的大小、背景和组件：

大小：“Content Size”中，宽600（像素），高700（像素）
背景：“Sprite Frame”中，选择“default_panel”；“type”中，选择“SLICED”
增加“cc.Widget”组件，并设置为“水平居中”、“垂直居中”

在“层级管理器”中创建按钮：“Canvas”右键 - “创建” - “UI 组件” - “Button (按钮)”，并重命名为“BtnStart”
在按钮的“属性检测器”中，调整按钮大小和文案（“Label”的内容）

场景一布局

接下来，对“开始游戏”按钮增加点击事件，点击则切换到“场景二”界面：

在“资源管理器”面板中，在assets中右键新建目录scripts，用户存放小游戏 TypeScript 脚本文件，我们新建一个名为BtnStart的脚本并双击打开它。
在BtnStart的脚本内容如下：

import { _decorator, Component, director, Node } from 'cc';
const { ccclass, property } = _decorator;@ccclass('BtnStart')
export class BtnStart extends Component {start() {this.node.on(Node.EventType.TOUCH_END, this.toScene1, this);}protected onDestroy(): void {this.node.off(Node.EventType.TOUCH_END, this.toScene1, this);}private toScene1() {director.loadScene('SceneLevel1');}
}

我们用director.loadScene方法切换不同的场景，从脚本可以看出：点击开始按钮，则切换到SceneLevel1场景。
接下来，在“层级管理器”中选择“BtnStart”按钮，在“属性检查器”中，绑定点击事件：
- 点击事件：设置“Click Events”为1，即代表只有 1 个事件
- 点击函数：选择“BtnStart”节点，选择“BtnStart”脚本，最后选择“toScene1”函数

按钮点击事件