2. 开发环境搭建：Cocos Creator 引擎安装、微信/抖音开发者工具配置、真机调试流程

说实话，很多新手一上来就急着写代码，结果卡在环境搭建上大半天。我见过太多人，工具没装对，折腾一整天连个 Hello World 都没跑起来。这一章，咱们就把这些基础工作一次性搞定。

2.1 Cocos Creator 引擎安装

Cocos Creator 是目前小游戏开发的主流引擎。我个人习惯用 LTS（长期支持）版本，稳定，坑少。

安装步骤：

1. 去 Cocos 官网下载 Cocos Dashboard
2. 打开 Dashboard，在「编辑器」页面选择对应版本
3. 我推荐 3.7.x 或 3.8.x，这两个版本对抖音小游戏支持最好
4. 点击「下载」并等待安装完成

安装完成后，打开 Dashboard，你会看到这样的界面：

Dashboard
├── 编辑器 (Editor)
│   └── 版本列表 (3.7.3, 3.8.0 ...)
├── 项目 (Projects)
└── 商店 (Store)

嗯，这里要注意：如果你同时做微信和抖音小游戏，建议装两个不同版本的 Cocos Creator。为什么？因为不同平台的插件兼容性不一样。我一般用 3.7.3 做抖音，3.8.0 做微信。

2.2 微信开发者工具配置

微信小游戏开发，离不开微信开发者工具。说白了，它就是你的调试战场。

下载与安装：

• 搜索「微信开发者工具」官网下载
• 安装时选择「稳定版」，别用 Nightly Build
• 用微信扫码登录，绑定你的小程序 AppID

配置要点：

配置项	推荐值	说明
AppID	你的小程序ID	没有就去微信公众平台注册
项目目录	build/wechatgame	Cocos 构建后自动生成
调试基础库	2.30.0+	太旧不支持新API
不校验域名	勾选	开发阶段必须开

2.3 抖音开发者工具配置

抖音小游戏的工具链和微信类似，但细节上有差异。你想想看，字节跳动和腾讯的生态能一样吗？

安装步骤：

1. 去「字节跳动开发者工具」官网下载
2. 安装后，用抖音扫码登录
3. 创建项目时选择「小游戏」模板

关键配置：

• AppID： 在抖音开放平台创建应用后获取
• 项目路径： Cocos 构建输出目录，一般是 build/ttgame
• 模拟器： 抖音工具自带，但性能不如真机

我个人习惯在抖音工具里开启「自动预览」功能。每次 Cocos 构建完，工具自动刷新，省得手动点。效率提升很明显。

2.4 真机调试流程

模拟器跑得再欢，也得上真机。为什么？因为性能、触摸、网络，模拟器和真机完全是两码事。我记得有一次，模拟器上帧率 60，真机上卡成 PPT，最后发现是纹理压缩格式没适配。

微信小游戏真机调试：

1. 在 Cocos 中点击「构建」，选择「WeChat Game」
2. 构建完成后，用微信开发者工具打开 build/wechatgame
3. 点击工具栏的「预览」按钮，生成二维码
4. 用手机微信扫码，即可在真机上运行

抖音小游戏真机调试：

1. Cocos 构建选择「ByteDance MiniGame」
2. 用抖音开发者工具打开 build/ttgame
3. 点击「预览」，生成抖音扫码二维码
4. 用抖音 App 扫码，开始真机测试

调试过程中，我建议你重点关注三件事：

• 启动速度： 首屏加载时间，超过 3 秒用户就跑光了
• 内存占用： 抖音小游戏限制 200MB 以内，超了直接闪退
• 触摸响应： 点击、滑动是否流畅，有没有延迟

嗯，这里再分享一个我的习惯：每次真机调试前，我都会先清空手机缓存。不然旧版本的数据会干扰测试结果。你想想看，测了半天发现是缓存问题，多冤啊。

2.5 常见问题与解决方案

环境搭建这块，我踩过的坑比走过的路还多。挑几个典型的说说：

问题	原因	解决方法
Cocos 构建失败	Node.js 版本不匹配	安装 Node 16.x LTS 版本
微信工具白屏	AppID 未配置或无效	检查 AppID，重新登录
抖音扫码后无反应	工具版本太旧	更新到最新版开发者工具
真机调试看不到日志	未开启 vConsole	在代码中调用 tt.setEnableDebug(true)

好了，环境搭建就这些。工具装好，配置搞定，下一步就是真刀真枪地写代码了。记住，环境搭得稳，开发才不慌。别嫌这一步麻烦，后面你会感谢现在的自己。