cocos creator 插件开发
Cocos Creator插件开发经验
这里总结一些creator插件开发的一点小经验，先干为敬！我介绍一些哪些是重点的东西，官网上重复的文档我就不搬了
一：背景
二：需要的知识
三：了解一些小概念
四：入门
五：实例
六：积百家之所长
一：背景
1：在开发中如果是creator编辑器所不能触及的地方:
比如自动为一个节点添加很多动画适用于该节点下需要绑定很多的动画场景。
- 又比如在resource下很多资源，在代码里面引用的时候可不可以不写资源的url降低出错的几率，将资源的映射关系放到一个js文件里面，这就涉及到插件的扩展功能了，有了这个js文件之后我们只要引用这个js文件，就可以访问到某个资源的url了这样岂不是很香！嗯嗯，很香走一波。
2：根据项目的定制化流程，项目里面如果套路相对固定可以考虑使用creator的插件打出一套强势的组合拳哈哈
二：需要的知识
身为一个游戏前端，在当前的大前端时代，h5方面的东西还是需要学习点的涉及html5,css3,js,vue.js,node.js，electron的话用到再查文档就行，不需要背些那些方法，会查就行
html5的话很简单看看视频或者书籍就可以快速掌握了，css3的话比较重要的是掌握flex布局，这样在处理对齐啊啥的，你就不会慌了哈哈
三：了解一些小概念:
（一） 插件三问三答
1：package.json是干啥用的？
- 官网上解释的是包描述文件，这里我不想照搬官网的解释了，感兴趣的小伙伴可以自行查阅 官方文档：你的第一个扩展包 · Cocos Creator 简单来说就是程序的主线程是哪个，菜单怎么定义的，版本是多少，这里你会问主线程又是什么鬼，接下来看看主线程是什么东西
- 2：主线程是什么？
- 先来看看一个package.json的一个定义：
{"name": "hello-world","version": "0.0.1","description": "一份简单的扩展包","author": "Cocos Creator",/** 这只就是主线程那个鬼 */"main": "main.js","main-menu": {"Packages/Hello World": {"message": "hello-world:say-hello"}}}- 上面的main.js就是主线程，负责与渲染进程进行通信，你可以理解成main.js其实就是一个服务器，它可以访问到编辑器内数据库内的一些数据例如资源的uuid等等信息，多个渲染进程其实就是一个一个的客户端，这样应该清楚了吧，什么，渲染进程又是啥？？？
- 3：渲染进程是什么？
- 渲染进程就是一个一个h5页面就是我刚才所说的需要的html5,css3的，这里我们需要vue.js来快速搭建单页面的应用，这也是官方比较推荐的插件开发姿势。
（二）：IPC消息
插件开发的时候不得不了解的概念就是IPC消息，主进程和渲染进程之间通信的桥梁就是IPC消息，creator觉得Electron做的IPC消息不是很友好（单向的就不知道该事件是否完成没有回调），creator在此基础上进行了封装，才看到今天creator里面的IPC消息的模样，详细的文档可以查看文档，我这里就不细说了，传送门
（三）：creator管理资源的方式Uuid
类似unity的guid,呸呸，完全是抄的哈哈，连meta文件都如出一辙，所以如果想给某一个节点上挂一个节点，或者给某一个节点下的sprite组件添加一个spriteFrame的话就需要使用它的uuid正确加载到creator，然后就可以挂载到对应的组件里面了。注意使用url是没有办法挂到组件上的！！！使用的方法是：
public getRes(uuid: string): Promise<any> {return new Promise((resolve,reject) => {cc.assetManager.loadAny({type: "uuid",uuid},(err,res) => {if(err) {reject();return;}if(res) {resolve(res);}}) })}四：入门
1：随便打开一个测试creator工程找到扩展-->创建新扩展插件 -->这里根据需要选择全局和项目专用插件，这里可以先选择项目专用插件测试使用
新建一个页面文件夹比如叫panel,在这下面已经为你新建了个文件叫index.js我们使用vue的时候可以拆分开为三个文件，index.js,index.html,index.css
首先改造index.js:
// panel/index.js, this filename needs to match the one registered in package.json/*** 渲染线程 *//** creator内置的第三方包的正确姿势 */const fs = require("fire-fs");const path = require("fire-path");/** 引入项目中的脚本正确姿势 */const bgCache = Editor.require("packages://autobind/bgCache.js");Editor.Panel.extend({// 读取css文件style: fs.readFileSync(Editor.url("packages://autobind/panel/index.css"),'utf-8'),// 读取html文件内容template: fs.readFileSync(Editor.url("packages://autobind/panel/index.html"),'utf-8'),// element and variable binding$: {btn: '#btn',label: '#label',},// method executed when template and styles are successfully loaded and initializedready () {new window.Vue({el: this.shadowRoot,data: {/** 需要挂载的模板数量 */mainTemplateCount: 27,},created() {},/** 监听talkNum */watch: {largeLevelNum: (val) => {bgCache.configCache.largeLevelNum = val;},talkNum: (val) => {Editor.log("val is ",typeof val);bgCache.configCache.talkNum = val;},mainTemplateCount: (val) => {bgCache.configCache.mainTemplateCount = val;}},methods: {/*** 开始绑定脚本 */startBind() {},/** 设置isDeleteOrigin属性 */setIsDelete(event) {// 开始设置状态this.isDeleteHorn = event.detail.value;},setIsDeleteReal(event) {this.isDeleteReal = event.detail.value;},setIsDeletePro(event) {this.isDeleteProgress = event.detail.value;},/** 设置是否改变环节关卡中的进度条的样式默认false */setIsChangeProgressInSection(event) {this.isChangeProgressInSection = event.detail.value;}}})},// register your ipc messages heremessages: {'autobind:hello' (event) {this.$label.innerText = 'Hello!';}}});上面就是基本的一个vue模板js文件了，一些逻辑就可以自己慢慢的新增加了。
注意点：
A: 引用creator内置的第三方npm包的时候可以直接require，其他的第三方包都需要Editor.require()
另外就是页面的html文件了，组件如果在creatorUIKView里面没有找到合适的组件的话就自己用css3写个组件，官方UIKit地址：UIKIt,感觉还是够用的
2：来个很香很有用的脚本scene-walker.js，比较重要！！！
之所以说他有用是因为它有一个绝招就是有访问assets目录下的脚本的能力，其他脚本是没有这个能力的，例如想在渲染进程里面添加一个节点
let node: cc.Node = new cc.Node();
渲染进程：对不起，我没有这个能力找scene-walker.js吧
另外它可以调用引擎API的能力就是上面的cc.Node，诸如此类
首先在package.json文件里注册它：
{"name": "hello-world","version": "0.0.1","description": "一份简单的扩展包","author": "Cocos Creator",/** 这只就是主线程那个鬼 */"main": "main.js","scene-script": "scene-walker.js""main-menu": {"Packages/Hello World": {"message": "hello-world:say-hello"}}}3:资源的管理
资源的url由形如：db://assets/path/to/scene.fire，packages://插件名/文件，db://internal,
Creator内置的一些编辑器环境下专用的api
Editor.assetdb.refresh(),Editor.assetdb.move等需要在主线程或者是scene-walker.js文件中使用，其他地方使用有可能报错。
当导入新资源的时候记得刷新一下资源数据库：
Editor.assetdb.refresh();不然的话有可能新增的资源不会显示在编辑器里面。
4：常用API：
（1): 如果想要获取一个资源的uuid怎么办呢：scene-waler.js里面使用
使用Editor.remote.assetdb.urlToUuid(url),这个url就是上面所说的资源的url形式
或者可以反过来Editor.remote.assetdb.uuidToUrl(uuid)的方法获得uuid资源对应的资源路径。
（2): 如果想要获取这个资源是否有依赖的子资源：
Editor.remote.assetdb.isSubAssetByUuid(uuid)
(3): 查询资源的信息：
Editor.assetdb.queryInfoByUuid(uuid,(err,info) => {if(err) {return;}if(info) {}})（4): 根据uuid获得对应的meta文件
let meta = Editor.assetdb.remote.loadMetaByUuid(uuid);
（5): 根据uuid获得资源的路径
let url = Editor.assetdb.remote.uuidtoFsPath(uuid)
（6): 获取选中的节点：
let selectNodeUuid = Editor.Selection.curSelection("node");
let node = cc.engine.getInstanceById(selectNodeUuid);
(7): 如果你给一个场景绑定了几个脚本，这个时候你需要保存这个场景，scene-walker.js如果直接调用保存场景的api场景是保存不成功的，需要单独发送事件到主进程中保存场景类似的操作如下：
if(canvasNode) {// canvasNode.removeComponent(`${compName}Main`);if(!canvasNode.getComponent(`${compName}Main`)) {const mainComp = canvasNode.addComponent(`${compName}Main`);mainComp.rootPrefab = await loadPrefabByUuid(uuid);// 必须主进程去保存场景Editor.Ipc.sendToMain('auto_generate_config:saveScene',err => {if(err.code === 'ETIMEOUT') {Editor.log("
cocos creator 插件开发相关推荐
- vscode函数跳转插件_人生苦短，我们为 Cocos Creator 开发的插件和工具
在使用 Cocos Creator 开发项目的过程中,为了提高开发效率我们开发了很多扩展插件,本文介绍常用的几款,抛砖引玉,希望给大家带来帮助. 腾讯开心鼠英语 网页扩展:运行时查看场景节点树 Coc ...
- Cocos Creator 预制的使用模板（一般用于UI）
Cocos Creator里绑定properties @property(cc.Prefab)XXUIPrefab: cc.Prefab = null; 在预制上挂脚本 import { Consta ...
- Cocos Creator 的 动作（Action）系统:moveBy的使用
Cocos Creator 快速上手:制作第一个游戏 可以在这里感受一下这款游戏的完成形态: http://fbdemos.leanapp.cn/star-catcher/ 准备项目和资源 我们已经为 ...
- cocos creator 安卓原生平台环境_竞技对抗小游戏单挑篮球开发历程 | Cocos技术派第12期...
本文来自于"Cocos 荣耀讲师"征稿活动第1期,最先发表于 Cocos 中文社区,作者 ID:蟹老板,2017年加入社区,文章作品包括<猎头专家的开发历程>等. Co ...
- asp.net js函数弹出登录窗口_JS基础 | Cocos Creator 开发环境搭建
编程并不只是简单地写代码,而是要将编写的代码运行在指定平台环境上,在此之前我们还需要搭建生产代码的环境. 一. 软件准备 Chrome:浏览器,用于预览.调试我们的游戏 VSCode:代码编辑器,用于 ...
- Cocos Creator—最佳构建部署实践
这篇文章主要是我们团队在使用Cocos Creator过程中的一些关于部署方面的实践总结,标题党了一回,严格来说,应该是<快看漫画游戏研发团队使用Cocos Creator构建部署最佳实践> ...
- Cocos Creator快速开通联网服务教程
继集成Egret编辑器工作流后,在最新的Cocos Creator v2.0.7 版本中, Creator服务面板也集成了游戏服务器引擎Matchvs的联网服务.现附上开通教程,方便大家更快上手. 1 ...
- Qt Creator 插件开发(1)：编译 Qt Creator
2019独角兽企业重金招聘Python工程师标准>>> 从技术架构角度来说,Qt Creator 可以看做是一个插件平台,其大部分功能都是以插件的形式提供的. 本系列文章将着重介绍如 ...
- 5弹出阴影遮罩_千文详述Cocos Creator弹出式对话框实现技术，着实硬核
正文 在Cocos Creator游戏开发中,经常需要使用到弹出式对话框,下面我们就一起来封装下自己的弹出式对话框. 一.弹出式对话框原理解析 1:对话框的结构: 1. `根节点 -->`2. ...
最新文章
- 懂数学的程序员能有多吃香？这是我听过最好的答案丨颠覆认知
- STL自定义排序函数 需要注意的问题
- 散列表的设计与实现_python基础之字典与集合实现
- ruijie交换机lacp动态_Server2016和华为s5720交换机链路聚合增加带宽
- 信息学奥赛一本通（1313：【例3.5】位数问题）
- 吴恩达深度学习 —— 2.10 m个样本的梯度下降
- Django使用问题记录
- linux重定向权限不够,linux – 如何使用sudo将输出重定向到一个我没有权限写入的位置？...
- 为什么很多公司只给博士发安家费，却不给研究生和本科生发？
- win10一直正在检查更新_win10一直存在的烦人问题，终于被彻底解决！你会选择更新么？...
- luogu 1337
- 运行Map Reduce报错Got exception: java.net.ConnectException: Call From master.localdomain/127.0.0.1 to
- 实战四：根据总步数计算消耗的热量值
- Sentiment Classification towards Question-Answering with Hierarchical Matching Network 论文阅读笔记
- 看网易云公开课代码性能开发有感，怎样提高代码的性能
- 级数收敛与交换运算顺序
- 变压器状态的监测与诊断
- 计算机基础与应用答案,第4章 课后作业【含答案】 计算机基础与应用
- 对于大数据的一些处理方法
- bga封装扇出_电路板设计BGA芯片扇出功能教程
热门文章