Featured image of post Playcanvas本地编辑器开发方案

Playcanvas本地编辑器开发方案

playcanvas很长一段时间以来都只支持使用web编辑器来进行开发,但是个人感觉那个web编辑器还是比不上vscode用的顺手的,虽然之前也可以完全脱离playcanvas的editor,所有的内容都在本地编写并构建,但是这样的门槛又过高了,所以我们需要一种web editor和本地编辑器结合的开发方式

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

安装playcanvas-sync

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

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

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

{
  "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 执行下面的脚本复制出来

copy({
PLAYCANVAS_BRANCH_ID: config.self.branch.id,
PLAYCANVAS_PROJECT_ID: config.project.id
})

如果我们不需要使用git管理我们的项目的话,之后我们便可以输入 pcsync pullAllpcwatch 等命令来将我们的项目同步到本地,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 create branch 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 文件,内容如下:

{
  "compilerOptions": {
    "target": "ES5",
    "module": "commonjs",
  },
  "typeRoots": [
    "typings/playcanvas.d.ts",
    "typings/agora.d.ts"
  ]
}

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

comments powered by Disqus
本站访客数:
Built with Hugo
Theme Stack designed by Jimmy