Playcanvas本地编辑器开发方案

playcanvas很长一段时间以来都只支持使用web编辑器来进行开发，但是个人感觉那个web编辑器还是比不上vscode用的顺手的，虽然之前也可以完全脱离playcanvas的editor，所有的内容都在本地编写并构建，但是这样的门槛又过高了，所以我们需要一种web editor和本地编辑器结合的开发方式——在web编辑器中进行一些实体位置、光照、模型等参数的设置，而使用本地的编辑器对脚本文件进行编辑并同步到playcanvas的editor，最终通过playcanvas的editor来构建发布我们的项目，好消息是官方提供的playcanvas-sync可以满足我们的这一需求。

安装playcanvas-sync

当前playcanvas-sync需要通过npm由git仓库进行安装。

1
2
3
4
git clone https://github.com/playcanvas/playcanvas-sync.git
cd playcanvas-sync
npm install -g
# 之后输入 pcsync 可以查看是否安装成功

然后我们需要在用户目录 C:\Users\你的用户名 或者 /home/username 下创建一个名为 .pcconfig 的配置文件，内容如下:

1
2
3
4
5
6
7
8
{
  "PLAYCANVAS_BRANCH_ID": "b4eddd41-29f9-45c4-9cd5-ca88b4965f80",
  "PLAYCANVAS_PROJECT_ID": 10,
  "PLAYCANVAS_TARGET_DIR": "C:\\Users\\username\\dev\\js\\player-demo\\Playcanvas",
  "PLAYCANVAS_API_KEY": "",
  "PLAYCANVAS_BAD_FILE_REG": "^\\.|~$",
  "PLAYCANVAS_BAD_FOLDER_REG": "\\."
}

需要修改的内容有:

PLAYCANVAS_BRANCH_ID
项目的分支id
PLAYCANVAS_PROJECT_ID
项目的id，可以在你的项目的url中看到 playcanvas.com/project/xxx/overview/
PLAYCANVAS_TARGET_DIR
项目需要同步到的目标目录
PLAYCANVAS_API_KEY
api密钥，可以前往个人头像下拉菜单中的Account页面中创建

前两者还可以通过在编辑器页面中 f12-console 执行下面的脚本复制出来

1
2
3
4
copy({
PLAYCANVAS_BRANCH_ID: config.self.branch.id,
PLAYCANVAS_PROJECT_ID: config.project.id
})

如果我们不需要使用git管理我们的项目的话，之后我们便可以输入 pcsync pullAll 或 pcwatch 等命令来将我们的项目同步到本地，pcwatch还会实时的将我们本地的改动同步回playcanvas中，另外注意一点，pcsync同步的只有playcanvas上的脚本文件，模型等素材是没有同步下来的。

sync pull

与git协同工作

但是很多时候，只有playcanvas的版本控制是不太够的，比如我们的一个项目可能还需要github actions来执行一些自动化的工作，并且对于多人协作下的代码的编写，git还是要更合适一些。所以我们同时还需要使用git进行版本控制。

初次创建一个项目

我在进行项目初始化的时候做了一些操作，在pcsync的配置中 “PLAYCANVAS_TARGET_DIR”: “C:\Users\username\dev\js\player-demo\Playcanvas” 这一行，我指定的目录是player-demo目录下的Playcanvas目录，而我们需要在 player-demo 中执行git init等操作，以及通过npm安装我们所需要的包，我这样做是因为我希望playcanvas的project中只包含playcanvas的脚本文件，而不需要对package.json、.github等文件(夹)进行同步，这些文件交由git来进行处理，pcsync只负责项目目录中和playcanvas直接相关的文件的同步即可。

在已有项目上进行开发

官方文档对于多人协作的几种工作流都有描述，我这里记录一下我们采用的方案——多用户多playcanvas分支(每分支上只有一个用户)并使用git。

在playcanvas网页编辑器中基于一个检查点(checkpoint)创建出一个新的分支用于开发 记录此时的project id和branch id
从github上clone当前项目，并创建一个对应的新分支，将其中的 Playcanvas子目录设置为.pcconfig的目标目录
运行pcwatch，在本地进行开发，此时我们本地所做的改动都会同步到远程的playcanvas上，而我们也可以launch一个debug模式的游戏场景来查看我们的改动带来的变化，一般延迟几秒刷新一下就能看到了。
本地开发完成所需功能后合并当前主分支最新的提交，解决冲突后提交到github，并在github上发起一次pull request，当在github上完成合并后，本地需要切换回主分支，并pull当前最新的远程主分支，再执行一次 pcsync pushAll将合并后的分支推送到playcanvas的分支上。
在playcanvas的功能分支上创建一个checkpoint(类似于commit)
在playcanvas的编辑器-版本控制页面中切换到主分支，然后进行合并操作，将feature分支合并到主分支中

本地代码补全方案

如果打算采用js进行开发，那么首先会面临一个问题，本地编辑器中无法对第三方库(playcanvas)的代码进行提示，虽然可以直接使用npm在项目目录下直接装一个playcanvas，也可以实现代码补全的需求，但是这样会导致项目文件中多出一大堆用不到的文件，因此我们可以采用另一个方案，使用类型定义文件 d.ts,在playcanvas或者agora等第三方库的项目build目录中(比如在jsdelivr中)，我们可以找到对应的类型定义文件，可以用来实现代码的提示与补全。

在我们的项目目录(player-demo)下新建一个typings目录，然后把这些定义文件放进去，再在项目根目录下新建一个 jsconfig.json 文件，内容如下:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
{
  "compilerOptions": {
    "target": "ES5",
    "module": "commonjs",
  },
  "typeRoots": [
    "typings/playcanvas.d.ts",
    "typings/agora.d.ts"
  ]
}

如此这般便能实现本地的代码提示了。