Cocos 3.x 入门系列一 安装环境及项目结构
本系列参考https://docs.cocos.com/creator/3.0/manual/zh/，会摘抄部分原文，并做一些个人笔记。
一、安装环境
1.建议WIN10开发
当前是2021年4月12日，我使用的WIN7系统，安装的V3.0.0经常报错。有时候刚打开一个新项目，什么都没有干就报错了。去官方论坛下载了V3.0.1先行版，还是不行，不过别的同事使用WIN10不报错。所以建议使用WIN10开发：
image.png
二、配置VSCODE
参考
配置代码编辑环境
vscode如何进行代码注释定制（koroFileHeader）
1.文件过滤
在 VS Code 的主菜单中选择 文件（Windows）／Code（Mac）-> 首选项 -> 设置
{
"search.exclude": {
"**/node_modules": true,
"**/bower_components": true,
"build/": true,
"temp/": true,
"library/": true,
"**/*.anim": true,
"**/*.meta": true,
},
"files.exclude": {
"**/.git": true,
"**/.DS_Store": true,
"**/*.meta": true,
"library/": true,
"local/": true,
"temp/": true
}
}
上面的字段将为 VS Code 设置搜索时排除的目录，和在文件列表中隐藏的文件类型。由于 build、temp、library 都是编辑器运行时自动生成的路径，而且会包含我们写入的脚本内容，所以应该在搜索中排除。而 assets 目录下的每个文件都会生成一个 .meta 文件，一般来说我们不需要关心他的内容，只要让编辑器帮我们管理这些文件就可以了。
注意：新版 VS Code 打开用户配置文件 USER SETTINGS 时可能是处于 UI 界面状态.在上方的搜索框中输入 exclude 搜索，然后在 search.exclude 和 files.exclude 模块中点击 Add Pattern 补充缺少的内容即可。
2.调试
安装vscode中的插件Debugger for Chrome
接下来在 Cocos Creator 编辑器的菜单栏中点击 开发者 -> VS Code 工作流 -> 添加 Chrome Debug 配置，这个菜单命令会在你的项目文件夹下添加一个 .vscode/launch.json 文件作为调试器的配置，之后你就可以在 VS Code 里点击左侧栏的 调试 按钮打开调试面板，并在最上方的调试配置中选择 Creator Debug: Launch Chrome，然后点击绿色的开始按钮开始调试。
调试的时候依赖 Cocos Creator 编辑器内置的 Web 服务器，所以需要在编辑器启动状态下才能进行调试。如果编辑器预览游戏时使用的端口不是默认端口，则需要手动修改 launch.json 里的 url 字段，将正确的端口添加上去。
调试过程中可以在源码文件上直接下断点，进行监控，是比使用 Chrome 内置的 DevTools 调试更方便和友好的工作流程。
image.png
注：我这里点击调试，chrome打开的是about:blank的空页签。此时检查launch.json，发现url属性里没有http://标记，修改成这样即可：
"url": "http://localhost:7456",
3.使用 VS Code 激活脚本编译
使用外部文本编辑器修改项目脚本后，要重新激活 Cocos Creator 窗口才能触发脚本编译，我们在新版本的 Creator 中增加了一个预览服务器的 API，可以通过向特定地址发送请求来激活编辑器的编译。
curl是一个命令行工具，它可以获取指定URL上的文件，又或者向指定的URL发送文件。如果在 Windows 操作系统的命令行中运行 curl 提示找不到命令，则需要先安装 curl 到你的系统：参考Windows安装curl及基本命令
在 Creator 编辑器主菜单里执行 开发者 -> VS Code 工作流 -> 添加编译任务。该操作会在项目的 .vscode 文件夹下添加 tasks.json 任务配置文件。
在 VS Code 里按下 Cmd/Ctrl+p，激活 快速打开 输入框，然后输入 task compile，选择 compile。
注：这里我运行时的快捷键是CTRL+SHIFT+P，输入task，选择Task:Run Task
image.png
然后选择CocosCreator compile
image.png
选继续而不扫描任务输出
image.png
现在改一下TS代码，执行上述任务后，chrome里并未自动刷新，需要手动刷新才能看到代码更改结果。
v3.0.0
v2.4.0
对比一下设置可以看出目前3.0版本，只能手动刷新Chrome了。
VS Code 还可以为任务配置快捷键，请打开主菜单的 Code -> 首选项 -> 键盘快捷方式，并在右侧的 keybindings.json 里添加以下条目：
image.png
[
{
"key": "ctrl+p", // 请配置自己习惯的快捷键
"command": "workbench.action.tasks.runTask",
"args": "compile"
}
]
这里官方在args填的是compile,这样的话，按下快捷键后，还要和上面一样，先选CocosCreator compile，然后再选“继续而不扫描任务输出”这两个步骤。其实参考https://code.visualstudio.com/docs/editor/tasks#_binding-keyboard-shortcuts-to-tasks，args里是可以直接填任务名的：
// 将键绑定放在此文件中以覆盖默认值
[
{
"key": "ctrl+q", // 请配置自己习惯的快捷键
"command": "workbench.action.tasks.runTask",
"args": "CocosCreator compile"
}
]
4.安装 Cocos Creator API 适配插件
3.0暂未看到
5.在项目中生成智能提示数据
3.0暂未看到
三、项目结构
image.png
-
assets：资源目录
assets用来放置游戏中所有的本地资源、脚本和第三方库文件。只有在assets目录下的内容才能显示在 资源管理器 中。assets中的每个文件在导入项目后都会生成一个相同名字的.meta文件，用于存储对应的资源配置和索引信息。.meta文件需要一并提交到版本控制系统，详见 资源管理注意事项 --- meta 文件。
一些第三方工具生成的工程或设计源文件，如 TexturePacker 的.tps文件，或 Photoshop 的.psd文件，可以选择放在assets外面管理。 -
build：构建目录（在构建某平台后会生成该目录）
在使用编辑器主菜单中的 项目 -> 构建发布 使用默认发布路径发布项目后，编辑器会在项目路径下创建 build 目录，并存放所有目标平台的构建工程。 -
library：导入的资源目录
library 是将 assets 中的资源导入后生成的，在这里文件的结构和资源的格式将被处理成最终游戏发布时需要的形式。当 library 丢失或损坏的时候，只要删除整个 library 文件夹再打开项目，就会重新生成资源库。 -
local：日志文件目录
local 文件夹中包含该项目的本机上的配置信息，包括编辑器面板布局、窗口大小、位置等信息。开发者不需要关心这里的内容。 -
profiles：编辑器配置
profiles 文件夹中包含编辑器的配置信息，包括各目标平台的构建配置信息、场景配置信息等。 -
temp：临时文件目录
temp 是临时文件夹，用于缓存一些 Cocos Creator 在本地的临时文件。这个文件夹可以在关闭 Cocos Creator 后手动删除，开发者不需要关心这里面的内容。 -
package.json：项目配置
package.json 文件和 assets 文件夹一起，作为验证 Cocos Creator 项目合法性的标志，只有包括了这两个内容的文件夹才能作为 Cocos Creator 项目打开。开发者不需要关心里面的内容。 -
extensions
extensions 文件夹用于放置此项目的自定义扩展插件。如果需要手动安装扩展插件，可以手动创建该文件夹。如需卸载扩展插件，在 extensions 中删除对应的文件夹即可。 -
settings
settings 里保存特定项目相关的设置，如 项目设置 面板中相关的配置信息等。如果需要在不同开发者之间同步项目设置，请将 settings 目录加入到版本控制。
三、版本控制
1.观察一下cocos新建项目生成的gitignore
Cocos Creator 在新建项目时，会自动生成 .gitignore 文件，用于排除不应该提交到 git 仓库的文件。如果开发者使用其它版本控制系统，或者需要提交项目到其它地方，应该注意只需要提交 assets、extensions、settings、package.json，或其它手动添加的关联文件。
以下为.gitignore文件内容：
#///////////////////////////
# Cocos Creator 3D Project
#///////////////////////////
library/
temp/
local/
build/
profiles/
native
#//////////////////////////
# NPM
#//////////////////////////
node_modules/
#//////////////////////////
# VSCode
#//////////////////////////
.vscode/
#//////////////////////////
# WebStorm
#//////////////////////////
.idea/
2.以gitee为例，新建一个仓库
可以参考git学习笔记末尾部分
image.png
这里选择不生成gitignore文件，不生成readme.md。也就是完全生成一个空的项目。
如果生成了.gitignore文件，在后面推Cocos工程时就会出现冲突，需要做merge处理。
3.把本地工程推上去
image.png
在本地的TestAni文件夹下进行关联：
git remote add origin git@gitee.com:tomttom/MyAni.git
使用sourcetree推送
gitee仓库看到结果
四、编辑器面板
image.png
这一章更像是个目录，只是大致上介绍了编辑器面板的作用。其实可以不用看，看了也不知道咋用，因为介绍得太简单了。
image.png
可以看一下预览调试部分，为快速上手：制作第一个游戏部分做准备。
