upate
33
README.md
@ -1,32 +1,17 @@
|
||||
# ccc-devtools v3.0.0
|
||||
Cocos Creator 网页调试工具,运行时查看、修改节点树,实时更新节点属性,可视化显示缓存资源。
|
||||
Cocos Creator 网页调试工具,运行时查看、修改节点树,实时更新节点属性。
|
||||
|
||||
## 预览
|
||||
|
||||
v1.0.0
|
||||
![preview](./screenshots/preview.gif)
|
||||
![preview](./screenshots/preview.png)
|
||||
|
||||
v1.1.0: 拖拽节点,增加开关
|
||||
## 功能
|
||||
|
||||
![t5](./screenshots/t4.gif)
|
||||
|
||||
v1.2.0: 控制台输出节点信息
|
||||
|
||||
![t6](./screenshots/t5.png)
|
||||
|
||||
v2.0.0: 节点信息自动同步,避免手动刷新。增加组件信息显示。增加内存、FPS、渲染时间显示。更新提醒。
|
||||
|
||||
![preview2](./screenshots/preview2.png)
|
||||
|
||||
v2.1.0: 区分手动刷新和自动刷新两种模式,手动刷新时支持搜索和拖拽节点;添加圈出节点位置功能;添加控制台节点树,cc.tree();
|
||||
|
||||
![preview3](./screenshots/preview3.png)
|
||||
|
||||
v2.2.0: 新增黑色主题(感谢[@wheatup](https://github.com/wheatup) )
|
||||
![dark-theme](./screenshots/dark-theme.png)
|
||||
|
||||
v2.3.0: 添加缓存资源查看面板;简化调试信息显示,新增纹理内存挂件。
|
||||
![cache](./screenshots/preview_cache.png)
|
||||
1.场景节点树实时显示
|
||||
2.搜索节点
|
||||
3.节点、组件属性实时显示更改
|
||||
4.圈出节点位置
|
||||
5.输出节点、组件引用到控制台
|
||||
|
||||
## 使用
|
||||
|
||||
@ -40,8 +25,6 @@ v2.3.0: 添加缓存资源查看面板;简化调试信息显示,新增纹理
|
||||
|
||||
3. 打开`index.jade`,找到`body`里最后一个`div`,在下面添加`include ./ccc-devtools/index.html`,**注意用tab键与上面的div对齐**
|
||||
|
||||
![t3](./screenshots/t3.png)
|
||||
|
||||
|
||||
## 已知问题
|
||||
|
||||
|
12
index.html
@ -4,9 +4,6 @@
|
||||
<v-app id="app">
|
||||
<v-app-bar app clipped-left color="gray" dense v-if="true">
|
||||
<v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
|
||||
<!-- <v-toolbar-title class="mr-5 align-center">
|
||||
<span class="title"><a>ccc-devtools</a></span>
|
||||
</v-toolbar-title> -->
|
||||
<div id="recompiling"><span>Recompiling...</span></div>
|
||||
<v-spacer></v-spacer>
|
||||
<div class="toolbar">
|
||||
@ -48,6 +45,7 @@
|
||||
<div class="item">
|
||||
<v-btn id="btn-recompile" small height="25"><span style="color: #aaa;">Recompile</span></v-btn>
|
||||
</div>
|
||||
<v-icon @click="openGithub" small>mdi-home</v-icon>
|
||||
</div>
|
||||
</v-app-bar>
|
||||
|
||||
@ -75,8 +73,9 @@
|
||||
<span style="margin-left: 10px;">{{ nodeSchema.title }}</span>
|
||||
</div>
|
||||
<div class="float-right">
|
||||
<v-icon style="margin-left: 10px;margin-right: 10px;">mdi-adjust</v-icon>
|
||||
<v-icon>mdi-send</v-icon>
|
||||
<v-icon style="margin-left: 10px;margin-right: 10px;" @click="drawNodeRect()">
|
||||
mdi-adjust</v-icon>
|
||||
<v-icon @click="outputNodeHandler()">mdi-send</v-icon>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
@ -104,7 +103,7 @@
|
||||
<span style="margin-left: 10px;">{{ component.title }}</span>
|
||||
</div>
|
||||
<div class="float-right">
|
||||
<v-icon>mdi-send</v-icon>
|
||||
<v-icon @click="outputComponentHandler(component.key)">mdi-send</v-icon>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
@ -150,6 +149,7 @@
|
||||
<script src="ccc-devtools/libs/js/vue.min.js"></script>
|
||||
<script src="ccc-devtools/libs/js/vuetify.js"></script>
|
||||
<script src="ccc-devtools/config.js"></script>
|
||||
<script src="ccc-devtools/libs/js/cc-console-utils.js"></script>
|
||||
<script src="ccc-devtools/preview.js"></script>
|
||||
|
||||
<!-- app/editor/static/preview-templates/ -->
|
118
libs/js/cc-console-utils.js
Normal file
@ -0,0 +1,118 @@
|
||||
const initConsoleUtil = function () {
|
||||
if (cc.tree) return;
|
||||
cc.tree = function (key) {
|
||||
let index = key || 0;
|
||||
let treeNode = function (node) {
|
||||
let nameStyle =
|
||||
`color: ${node.parent === null || node.activeInHierarchy ? 'green' : 'grey'}; font-size: 14px;font-weight:bold`;
|
||||
let propStyle =
|
||||
`color: black; background: lightgrey;margin-left: 5px;border-radius:3px;padding: 0 3px;font-size: 10px;font-weight:bold`;
|
||||
let indexStyle =
|
||||
`color: orange; background: black;margin-left: 5px;border-radius:3px;padding:0 3px;fonrt-size: 10px;font-weight:bold;`
|
||||
let nameValue = `%c${node.name}`;
|
||||
let propValue =
|
||||
`%c${node.x.toFixed(0) + ',' + node.y.toFixed(0) + ',' + node.width.toFixed(0) + ',' + node.height.toFixed(0) + ',' + node.scale.toFixed(1)}`
|
||||
let indexValue = `%c${index++}`;
|
||||
if (node.childrenCount > 0) {
|
||||
console.groupCollapsed(nameValue + propValue + indexValue, nameStyle,
|
||||
propStyle, indexStyle);
|
||||
for (let i = 0; i < node.childrenCount; i++) {
|
||||
treeNode(node.children[i]);
|
||||
}
|
||||
console.groupEnd();
|
||||
} else {
|
||||
console.log(nameValue + propValue + indexValue, nameStyle, propStyle,
|
||||
indexStyle);
|
||||
}
|
||||
}
|
||||
if (key) {
|
||||
let node = cc.cat(key);
|
||||
index = node['tempIndex'];
|
||||
treeNode(node);
|
||||
} else {
|
||||
let scene = cc.director.getScene();
|
||||
treeNode(scene);
|
||||
}
|
||||
return '属性依次为x,y,width,height,scale.使用cc.cat(id)查看详细属性.';
|
||||
}
|
||||
cc.cat = function (key) {
|
||||
let index = 0;
|
||||
let target;
|
||||
let sortId = function (node) {
|
||||
if (target) return;
|
||||
if (cc.js.isNumber(key)) {
|
||||
if (key === index++) {
|
||||
target = node;
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
if (key.toLowerCase() === node.name.toLowerCase()) {
|
||||
target = node;
|
||||
return;
|
||||
} else {
|
||||
index++;
|
||||
}
|
||||
}
|
||||
if (node.childrenCount > 0) {
|
||||
for (let i = 0; i < node.childrenCount; i++) {
|
||||
sortId(node.children[i]);
|
||||
}
|
||||
}
|
||||
}
|
||||
let scene = cc.director.getScene();
|
||||
sortId(scene);
|
||||
target['tempIndex'] = cc.js.isNumber(key) ? key : index;
|
||||
return target;
|
||||
}
|
||||
cc.list = function (key) {
|
||||
let targets = [];
|
||||
let step = function (node) {
|
||||
if (node.name.toLowerCase().indexOf(key.toLowerCase()) > -1) {
|
||||
targets.push(node);
|
||||
}
|
||||
if (node.childrenCount > 0) {
|
||||
for (let i = 0; i < node.childrenCount; i++) {
|
||||
step(node.children[i]);
|
||||
}
|
||||
}
|
||||
}
|
||||
let scene = cc.director.getScene();
|
||||
step(scene);
|
||||
if (targets.length === 1) {
|
||||
return targets[0];
|
||||
} else {
|
||||
return targets;
|
||||
}
|
||||
}
|
||||
cc.where = function (key) {
|
||||
let target = key.name ? key : cc.cat(key);
|
||||
if (!target) {
|
||||
return null;
|
||||
}
|
||||
let rect = target.getBoundingBoxToWorld();
|
||||
let bgNode = new cc.Node();
|
||||
let graphics = bgNode.addComponent(cc.Graphics);
|
||||
let scene = cc.director.getScene();
|
||||
scene.addChild(bgNode);
|
||||
bgNode.position = rect.center;
|
||||
let isZeroSize = rect.width === 0 || rect.height === 0;
|
||||
if (isZeroSize) {
|
||||
graphics.circle(0, 0, 100);
|
||||
graphics.fillColor = cc.Color.GREEN;
|
||||
graphics.fill();
|
||||
} else {
|
||||
bgNode.width = rect.width;
|
||||
bgNode.height = rect.height;
|
||||
graphics.rect(-bgNode.width / 2, -bgNode.height / 2, bgNode.width, bgNode.height);
|
||||
graphics.strokeColor = cc.Color.RED;
|
||||
graphics.lineWidth = 10;
|
||||
graphics.stroke()
|
||||
}
|
||||
setTimeout(() => {
|
||||
if (cc.isValid(bgNode)) {
|
||||
bgNode.destroy();
|
||||
}
|
||||
}, 2000);
|
||||
return target;
|
||||
}
|
||||
}
|
40
preview.js
@ -1,4 +1,3 @@
|
||||
/* eslint-disable no-undef */
|
||||
const app = new Vue({
|
||||
el: '#app',
|
||||
vuetify: new Vuetify({
|
||||
@ -14,7 +13,10 @@ const app = new Vue({
|
||||
componentsSchema: [],
|
||||
},
|
||||
created() {
|
||||
this.startUpdateTree();
|
||||
this.waitCCInit().then(() => {
|
||||
this.startUpdateTree();
|
||||
initConsoleUtil();
|
||||
});
|
||||
},
|
||||
computed: {
|
||||
treeFilter() {
|
||||
@ -71,6 +73,16 @@ const app = new Vue({
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
waitCCInit() {
|
||||
return new Promise((resolve, reject) => {
|
||||
let id = setInterval(() => {
|
||||
if (window.cc) {
|
||||
resolve();
|
||||
clearInterval(id);
|
||||
}
|
||||
}, 500);
|
||||
});
|
||||
},
|
||||
refreshTree: function () {
|
||||
if (!this.$data.drawer || !window.cc || !cc.director.getScene() || !cc.director.getScene().children) return;
|
||||
this.$data.treeData = getChildren(cc.director.getScene());
|
||||
@ -83,6 +95,30 @@ const app = new Vue({
|
||||
stopUpdateTree: function () {
|
||||
clearInterval(this.$data.intervalId);
|
||||
},
|
||||
outputNodeHandler(id) {
|
||||
let i = 1;
|
||||
while (window['temp' + i] !== undefined) {
|
||||
i++;
|
||||
}
|
||||
window['temp' + i] = this.selectedNode;
|
||||
console.log('temp' + i);
|
||||
console.log(window['temp' + i]);
|
||||
},
|
||||
outputComponentHandler(component) {
|
||||
let i = 1;
|
||||
while (window['temp' + i] !== undefined) {
|
||||
i++;
|
||||
}
|
||||
window['temp' + i] = this.selectedNode.getComponent(component);
|
||||
console.log('temp' + i);
|
||||
console.log(window['temp' + i]);
|
||||
},
|
||||
drawNodeRect() {
|
||||
cc.where(this.selectedNode);
|
||||
},
|
||||
openGithub() {
|
||||
window.open('https://github.com/potato47/ccc-devtools');
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
|
Before Width: | Height: | Size: 713 KiB |
Before Width: | Height: | Size: 1.5 MiB |
BIN
screenshots/preview.png
Normal file
After Width: | Height: | Size: 160 KiB |
Before Width: | Height: | Size: 267 KiB |
Before Width: | Height: | Size: 252 KiB |
Before Width: | Height: | Size: 334 KiB |
Before Width: | Height: | Size: 59 KiB |
Before Width: | Height: | Size: 390 KiB |
Before Width: | Height: | Size: 95 KiB |