From 6bce6b97816eeca01191139964553725870a3fc1 Mon Sep 17 00:00:00 2001 From: nextfu Date: Tue, 14 Apr 2020 21:38:52 +0800 Subject: [PATCH] update readme --- README.md | 68 +++++++++++++++++++++++------------- index.html | 27 ++++++++------ libs/js/cc-console-utils.js | 11 +++--- screenshots/preview.png | Bin 163823 -> 0 bytes screenshots/preview1.gif | Bin 0 -> 869792 bytes screenshots/preview2.png | Bin 0 -> 123554 bytes screenshots/preview3.png | Bin 0 -> 122032 bytes screenshots/preview4.png | Bin 0 -> 210247 bytes screenshots/preview5.png | Bin 0 -> 193374 bytes screenshots/t3.png | Bin 0 -> 215618 bytes version.json | 2 +- 11 files changed, 67 insertions(+), 41 deletions(-) delete mode 100644 screenshots/preview.png create mode 100644 screenshots/preview1.gif create mode 100644 screenshots/preview2.png create mode 100644 screenshots/preview3.png create mode 100644 screenshots/preview4.png create mode 100644 screenshots/preview5.png create mode 100644 screenshots/t3.png diff --git a/README.md b/README.md index f848b2d..d868ffe 100644 --- a/README.md +++ b/README.md @@ -1,35 +1,57 @@ # ccc-devtools v3.0.0 -Cocos Creator 网页调试工具,运行时查看、修改节点树,实时更新节点属性。 - -## 预览 - -![preview](./screenshots/preview.png) +Cocos Creator 网页调试工具,运行时查看、修改节点树,实时更新节点属性,可视化缓存资源。 ## 功能 -1.场景节点树实时显示 -2.搜索节点 -3.节点、组件属性实时显示更改 -4.圈出节点位置 -5.输出节点、组件引用到控制台 +- 场景节点树实时显示,节点、组件属性实时显示更改 -## 使用 +![preview](./screenshots/preview1.gif) + +- 可视化缓存资源 + +![preview](./screenshots/preview2.png) + +- 标记场景中节点位置 + +![preview](./screenshots/preview3.png) + +- 输出节点、组件引用到控制台 + +![preview](./screenshots/preview4.png) + +- cc控制台功能扩展 + +![preview](./screenshots/preview5.png) + +## 全局使用 1. 点击 Creator 右上角进入编辑器 resources 目录,再依次进入`static/preview-templates`目录 ![t1](./screenshots/t1.png) -2. 将本项目clone到上面的目录下,**如果使用下载压缩包的方式记得把后缀名-master去掉** +2. 将本项目clone到上面的目录下,**如果使用下载压缩包的方式记得把后缀名-master去掉** ![t2](./screenshots/t2.png) -3. 打开`index.jade`,找到`body`里最后一个`div`,在下面添加`include ./ccc-devtools/index.html`,**注意用tab键与上面的div对齐** +3. 打开 `index.jade`,找到 `body` 将中间部分替换为 `include ./ccc-devtools/index.html`,**注意用tab键对齐** + ![t3](./screenshots/t3.png) -## 已知问题 +## 项目使用 -- 当升级 Cococs Creator 时会清空resources目录,需要重新下载配置,如自定义了一些配置,请做好备份。 -- 开启节点树会增加渲染消耗,非调试阶段请关闭。 +Cocos Creator 从 v2.2 开始新增了自定义网页预览功能。 + +1. 重复上面的操作步骤,将修改后的 `preview-templates` 目录拷贝到项目根目录 + +2. 将 `ccc-devtools/index.html` 里所有引用的资源路径 `app/editor/static/preview-templates/ccc-devtools/...` 替换为 `ccc-devtools/...` + +3. 重启 Cocos Creator + +## 自定义 + +- 本项目使用了 vue 和 vuetify,可根据 [vuetify 文档](https://vuetifyjs.com/en/getting-started/quick-start/) 对页面进行修改 + +- 节点、组件显示属性可在 `config.js` 里配置,目前支持 text,number,textarea,color,bool 几种类型 ## 需求、更新 @@ -42,17 +64,13 @@ https://github.com/potato47/ccc-devtools ## 贡献指南 - 版本号命名规则 https://semver.org/lang/zh-CN/ ,简单来讲,新功能第二位加一,修复bug第三位加一 + - 如果新增功能请在README中添加预览截图说明 + - 记得更新version.json中的版本号 -## 本项目依赖以下开源项目 +## 前人种树 -https://github.com/vuejs/vue +- https://github.com/vuejs/vue -https://github.com/ElemeFE/element - -https://github.com/iview/iview - -https://github.com/FE-Driver/vue-beauty - -https://github.com/mrdoob/stats.js +- https://github.com/vuetifyjs/vuetify diff --git a/index.html b/index.html index d9b8588..763bbc7 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,5 @@ - - + +