diff --git a/README.md b/README.md
index 411cd4d..e8f8686 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,5 @@
-# ccc-devtools v2.2.0
-Cocos Creator 网页调试器，运行时查看、修改节点树，实时更新节点属性。
+# ccc-devtools v2.3.0
+Cocos Creator 网页调试工具，运行时查看、修改节点树，实时更新节点属性，可视化显示缓存资源。
## 预览
@@ -25,6 +25,9 @@ v2.1.0: 区分手动刷新和自动刷新两种模式，手动刷新时支持搜
v2.2.0: 新增黑色主题(感谢[@wheatup](https://github.com/wheatup) )
+v2.3.0: 添加缓存资源查看面板；简化调试信息显示，新增纹理内存挂件。
+
+
## 使用
1. 点击 Creator 右上角进入编辑器 resources 目录，再依次进入`static/preview-templates`目录
diff --git a/css/themes/dark.css b/css/themes/dark.css
index c50693b..4669f70 100644
--- a/css/themes/dark.css
+++ b/css/themes/dark.css
@@ -66,3 +66,10 @@
color: #59a !important;
background-color: #222 !important;
}
+
+.ivu-modal-content,
+.ivu-table-column-center,
+.ivu-modal-header-inner {
+ background-color: #222 !important;
+ color: #bbb !important;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 04306ea..c40ba98 100644
--- a/index.html
+++ b/index.html
@@ -147,36 +147,15 @@
- FPS
+ 调试信息
-
-
- 帧时间
-
-
-
-
-
-
-
-
- 内存
-
-
-
-
-
-
-
-
+
暗黑主题
@@ -214,13 +193,16 @@
- ![]()
- _
+ ![]()
+ _
Detail
Release
+
+ {{row.size !== -1 ? row.size + 'MB' : '_'}}
+
@@ -229,7 +211,7 @@
-
+
diff --git a/js/app.js b/js/app.js
index 92e0a2d..1e1117f 100644
--- a/js/app.js
+++ b/js/app.js
@@ -4,9 +4,7 @@ let app = new Vue({
needUpdate: false,
is3DNode: false,
isDevMode: false,
- isShowFPS: false,
- isShowMS: false,
- isShowMB: false,
+ isShowProfile: true,
isShowCache: false,
isAutoRefreshTree: true,
isDarkTheme: false,
@@ -64,22 +62,23 @@ let app = new Vue({
sortable: true
}, {
title: 'Size',
+ slot: 'cache_size',
key: 'size',
align: 'center',
width: 120,
sortable: true
- }, {
- title: 'Queue',
- key: 'queueId',
- sortable: true,
- width: 120,
- align: 'center'
}, {
title: 'Preview',
slot: 'cache_preview',
align: 'center',
width: 150
}, {
+ title: 'Queue',
+ key: 'queueId',
+ sortable: true,
+ width: 120,
+ align: 'center'
+ },{
title: 'Action',
slot: 'cache_action',
width: 150,
@@ -243,47 +242,60 @@ let app = new Vue({
return node.name.toLowerCase().indexOf(value.toLowerCase()) !== -1;
},
openCachePanel() {
- console.log('open cache panel');
this.$data.cacheDataLoading = true;
setTimeout(() => {
let rawCacheData = cc.loader._cache;
let cacheData = [];
+ let totalTextureSize = 0;
for (let k in rawCacheData) {
let item = rawCacheData[k];
// console.log(item)
if (item.type !== 'js' && item.type !== 'json') {
let itemName = '_';
- if (item.type === 'png' && item.type !== 'jpg') {
- let texture = rawCacheData[k.replace('.png', '.json')];
+ let preview = '';
+ let content = item.content.__classname__ ? item.content.__classname__ : item.type;
+ let formatSize = -1;
+ if (item.type === 'png' || item.type === 'jpg') {
+ let texture = rawCacheData[k.replace('.' + item.type, '.json')];
if (texture && texture._owner && texture._owner._name) {
itemName = texture._owner._name;
+ preview = texture.content.url;
}
- }
- else {
+ } else {
if (item.content.name && item.content.name.length > 0) {
itemName = item.content.name;
} else if (item._owner) {
itemName = item._owner.name || '_';
}
+ if (content === 'cc.Texture2D') {
+ let texture = item.content;
+ preview = texture.url;
+ let textureSize = texture.width * texture.height * ((texture._native === '.jpg' ? 3 : 4) / 1024 / 1024);
+ totalTextureSize += textureSize;
+ // sizeStr = textureSize.toFixed(3) + 'M';
+ formatSize = Math.round(textureSize * 1000) / 1000;
+ } else if (content === 'cc.SpriteFrame') {
+ preview = item.content._texture.url;
+ }
}
cacheData.push({
queueId: item.queueId,
type: item.type,
name: itemName,
+ preview: preview,
id: item.id,
- content: item.content.__classname__ ? item.content.__classname__ : item.type,
- size: Math.random() * 10000 | 0
+ content: content,
+ size: formatSize
});
}
}
this.$data.cacheData = cacheData;
- this.$data.cacheTitle = `缓存 [文件总数:${cacheData.length}]`;
+ this.$data.cacheTitle = `缓存 [文件总数:${cacheData.length}][纹理缓存:${totalTextureSize.toFixed(2) + 'M'}]`;
this.$data.cacheDataLoading = false;
}, 0);
-
+
},
closeCachePanel() {
- console.log('close cache panel');
this.$data.cacheData = [];
this.$data.cacheTitle = `缓存`;
},
@@ -337,42 +349,34 @@ let app = new Vue({
data ? this.openCachePanel() : this.closeCachePanel();
},
handleChangeStats() {
- let panels = document.getElementsByClassName('statsPanel');
- while (panels.length > 0) {
- panels[0].parentElement.removeChild(panels[0]);
- }
- let newPanels = [];
- let array = [];
- this.$data.isShowFPS ? (array.push(0) && localStorage.setItem('isShowFPS', '1')) : localStorage
- .setItem(
- 'isShowFPS', '0');
- this.$data.isShowMS ? (array.push(1) && localStorage.setItem('isShowMS', '1')) : localStorage
- .setItem('isShowMS',
- '0');
- this.$data.isShowMB ? (array.push(2) && localStorage.setItem('isShowMB', '1')) : localStorage
- .setItem('isShowMB',
- '0');
- for (let i of array) {
+ if (this.$data.isShowProfile) {
+ let addStats = function(stats) {
+ stats.dom.style.position = 'relative';
+ stats.dom.style.float = 'right';
+ stats.dom.style.marginLeft = '10px';
+ stats.dom.style.marginBottom = '10px';
+ // stats.dom.style.pointerEvents = 'none';
+ stats.dom.className = 'statsPanel';
+ document.getElementById('panelCtl').appendChild(stats.dom);
+ localStorage.setItem('isShowProfile', '1')
+ }
+ let animate = () => {
+ if (this.$data.isShowProfile) {
+ stats.update();
+ requestAnimationFrame(animate);
+ }
+ }
let stats = new Stats();
- stats.showPanel(i); // 0: fps, 1: ms, 2: mb, 3+: custom
- stats.dom.style.position = 'relative';
- stats.dom.style.float = 'right';
- stats.dom.style.marginLeft = '10px';
- stats.dom.style.marginBottom = '10px';
- stats.dom.style.pointerEvents = 'none';
- stats.dom.className = 'statsPanel';
- document.getElementById('panelCtl').appendChild(stats.dom);
- newPanels.push(stats);
+ addStats(stats);
+ animate();
+ } else {
+ let panels = document.getElementsByClassName('statsPanel');
+ while (panels.length > 0) {
+ panels[0].parentElement.removeChild(panels[0]);
+ }
+ localStorage.setItem('isShowProfile', '0');
}
- function animate() {
- for (let i = 0; i < newPanels.length; i++) {
- let stats = newPanels[i];
- stats.update();
- }
- requestAnimationFrame(animate);
- }
- animate();
},
handleChangeTheme(isDark) {
isDark ? this.addDarkTheme() : this.removeDarkTheme();
@@ -558,9 +562,7 @@ let app = new Vue({
} else {
this.$data.isDarkTheme = false;
}
- this.$data.isShowFPS = localStorage.getItem('isShowFPS') === '1';
- this.$data.isShowMS = localStorage.getItem('isShowMS') === '1';
- this.$data.isShowMB = localStorage.getItem('isShowMB') === '1';
+ this.$data.isShorProfile = localStorage.getItem('isShorProfile') === '1';
setTimeout(() => {
this.handleChangeStats();
}, 0);
diff --git a/libs/stats/Stats.js b/libs/stats/Stats.js
new file mode 100644
index 0000000..4faee39
--- /dev/null
+++ b/libs/stats/Stats.js
@@ -0,0 +1,200 @@
+var Stats = function () {
+
+ var mode = 0;
+
+ var container = document.createElement('div');
+ container.style.cssText = 'position:fixed;top:0;left:0;cursor:pointer;opacity:0.9;z-index:10000';
+ container.addEventListener('click', function (event) {
+
+ event.preventDefault();
+ showPanel(++mode % container.children.length);
+
+ }, false);
+
+ //
+
+ function addPanel(panel) {
+
+ container.appendChild(panel.dom);
+ return panel;
+
+ }
+
+ function showPanel(id) {
+
+ for (var i = 0; i < container.children.length; i++) {
+
+ container.children[i].style.display = i === id ? 'block' : 'none';
+
+ }
+
+ mode = id;
+
+ }
+
+ function getDrawcalls() {
+ if (window.cc) {
+ return cc.renderer.drawCalls;
+ } else {
+ return Infinity;
+ }
+ }
+
+ function getTexMemory() {
+ if (window.cc) {
+ let totalTextureSize = 0;
+ let cacheData = cc.loader._cache;
+ for (let k in cacheData) {
+ let item = cacheData[k];
+ if (item.content && item.content.__classname__ && item.content.__classname__ === 'cc.Texture2D') {
+ let texture = item.content;
+ let textureSize = texture.width * texture.height * ((texture._native === '.jpg' ? 3 : 4) / 1024 / 1024);
+ totalTextureSize += textureSize;
+ }
+ }
+ return totalTextureSize;
+ } else {
+ return Infinity;
+ }
+ }
+
+ //
+
+ var beginTime = (performance || Date).now(), prevTime = beginTime, frames = 0;
+
+ var texPanel = addPanel(new Stats.Panel('纹理内存', 'MB', '#0ff', '#002'));
+ var dcPanel = addPanel(new Stats.Panel('DrawCall', '', '#ff8', '#221'));
+ var fpsPanel = addPanel(new Stats.Panel('FPS', '', '#0f0', '#020'));
+ var msPanel = addPanel(new Stats.Panel('渲染时间', 'MS', '#f08', '#201'));
+
+ // if (self.performance && self.performance.memory) {
+
+ // var memPanel = addPanel(new Stats.Panel('MB', '#f08', '#201'));
+
+ // }
+
+
+ showPanel(0);
+
+ return {
+
+ REVISION: 16,
+
+ dom: container,
+
+ addPanel: addPanel,
+ showPanel: showPanel,
+
+ begin: function () {
+
+ beginTime = (performance || Date).now();
+
+ },
+
+ end: function () {
+
+ frames++;
+
+ var time = (performance || Date).now();
+
+ msPanel.update(time - beginTime, 200);
+
+ if (time >= prevTime + 1000) {
+
+ fpsPanel.update((frames * 1000) / (time - prevTime), 100);
+
+ prevTime = time;
+ frames = 0;
+
+ // if (memPanel) {
+
+ // var memory = performance.memory;
+ // memPanel.update(memory.usedJSHeapSize / 1048576, memory.jsHeapSizeLimit / 1048576);
+
+ // }
+ texPanel.update(getTexMemory(), 1000);
+ dcPanel.update(getDrawcalls(), 500);
+
+ }
+
+ return time;
+
+ },
+
+ update: function () {
+
+ beginTime = this.end();
+
+ },
+
+ // Backwards Compatibility
+
+ domElement: container,
+ setMode: showPanel
+
+ };
+
+};
+
+Stats.Panel = function (name, unit, fg, bg) {
+
+ var min = Infinity, max = 0, round = Math.round;
+ var PR = round(window.devicePixelRatio || 1);
+
+ var WIDTH = 80 * PR, HEIGHT = 48 * PR,
+ TEXT_X = 3 * PR, TEXT_Y = 2 * PR,
+ GRAPH_X = 3 * PR, GRAPH_Y = 15 * PR,
+ GRAPH_WIDTH = 74 * PR, GRAPH_HEIGHT = 30 * PR;
+
+ var canvas = document.createElement('canvas');
+ canvas.width = WIDTH;
+ canvas.height = HEIGHT;
+ canvas.style.cssText = 'width:80px;height:48px';
+
+ var context = canvas.getContext('2d');
+ context.font = 'bold ' + (9 * PR) + 'px Helvetica,Arial,sans-serif';
+ context.textBaseline = 'top';
+
+ context.fillStyle = bg;
+ context.fillRect(0, 0, WIDTH, HEIGHT);
+
+ context.fillStyle = fg;
+ context.fillText(name, TEXT_X, TEXT_Y);
+ context.fillRect(GRAPH_X, GRAPH_Y, GRAPH_WIDTH, GRAPH_HEIGHT);
+
+ context.fillStyle = bg;
+ context.globalAlpha = 0.9;
+ context.fillRect(GRAPH_X, GRAPH_Y, GRAPH_WIDTH, GRAPH_HEIGHT);
+
+
+ return {
+
+ dom: canvas,
+
+ update: function (value, maxValue) {
+
+ min = Math.min(min, value);
+ max = Math.max(max, value);
+
+ context.fillStyle = bg;
+ context.globalAlpha = 1;
+ context.fillRect(0, 0, WIDTH, GRAPH_Y);
+ context.fillStyle = fg;
+ // context.fillText(round(value) + ' ' + name + ' (' + round(min) + '-' + round(max) + ')', TEXT_X, TEXT_Y);
+ context.fillText(name + ' ' + round(value) + unit, TEXT_X, TEXT_Y);
+
+ context.drawImage(canvas, GRAPH_X + PR, GRAPH_Y, GRAPH_WIDTH - PR, GRAPH_HEIGHT, GRAPH_X, GRAPH_Y, GRAPH_WIDTH - PR, GRAPH_HEIGHT);
+
+ context.fillRect(GRAPH_X + GRAPH_WIDTH - PR, GRAPH_Y, PR, GRAPH_HEIGHT);
+
+ context.fillStyle = bg;
+ context.globalAlpha = 0.9;
+ context.fillRect(GRAPH_X + GRAPH_WIDTH - PR, GRAPH_Y, PR, round((1 - (value / maxValue)) * GRAPH_HEIGHT));
+
+ }
+
+ };
+
+};
+
+// export { Stats as default };
diff --git a/libs/stats/stats.min.js b/libs/stats/stats.min.js
deleted file mode 100644
index 61757f3..0000000
--- a/libs/stats/stats.min.js
+++ /dev/null
@@ -1,5 +0,0 @@
-// stats.js - http://github.com/mrdoob/stats.js
-(function(f,e){"object"===typeof exports&&"undefined"!==typeof module?module.exports=e():"function"===typeof define&&define.amd?define(e):f.Stats=e()})(this,function(){var f=function(){function e(a){c.appendChild(a.dom);return a}function u(a){for(var d=0;dg+1E3&&(r.update(1E3*a/(c-g),100),g=c,a=0,t)){var d=performance.memory;t.update(d.usedJSHeapSize/
-1048576,d.jsHeapSizeLimit/1048576)}return c},update:function(){k=this.end()},domElement:c,setMode:u}};f.Panel=function(e,f,l){var c=Infinity,k=0,g=Math.round,a=g(window.devicePixelRatio||1),r=80*a,h=48*a,t=3*a,v=2*a,d=3*a,m=15*a,n=74*a,p=30*a,q=document.createElement("canvas");q.width=r;q.height=h;q.style.cssText="width:80px;height:48px";var b=q.getContext("2d");b.font="bold "+9*a+"px Helvetica,Arial,sans-serif";b.textBaseline="top";b.fillStyle=l;b.fillRect(0,0,r,h);b.fillStyle=f;b.fillText(e,t,v);
-b.fillRect(d,m,n,p);b.fillStyle=l;b.globalAlpha=.9;b.fillRect(d,m,n,p);return{dom:q,update:function(h,w){c=Math.min(c,h);k=Math.max(k,h);b.fillStyle=l;b.globalAlpha=1;b.fillRect(0,0,r,m);b.fillStyle=f;b.fillText(g(h)+" "+e+" ("+g(c)+"-"+g(k)+")",t,v);b.drawImage(q,d+a,m,n-a,p,d,m,n-a,p);b.fillRect(d+n-a,m,a,p);b.fillStyle=l;b.globalAlpha=.9;b.fillRect(d+n-a,m,a,g((1-h/w)*p))}}};return f});
diff --git a/screenshots/preview_cache.png b/screenshots/preview_cache.png
new file mode 100644
index 0000000..4fdfa9f
Binary files /dev/null and b/screenshots/preview_cache.png differ
diff --git a/version.json b/version.json
index 5677a61..334e3ea 100644
--- a/version.json
+++ b/version.json
@@ -1,6 +1,6 @@
{
"name": "ccc-devtools",
- "version": "2.2.0",
+ "version": "2.3.0",
"author": "Next",
"repo": "https://github.com/potato47/ccc-devtools.git"
}
\ No newline at end of file