Skip to content

Commit

Permalink
添加缓存资源查看面板，纹理内存挂件
Browse files Browse the repository at this point in the history
  • Loading branch information
@potato47
potato47 committed Apr 16, 2019
1 parent dd6fdbe commit 9c604e3
Show file tree
Hide file tree
Showing 8 changed files with 279 additions and 90 deletions.
7 changes: 5 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
# ccc-devtools v2.2.0
Cocos Creator 网页调试器，运行时查看、修改节点树，实时更新节点属性。
# ccc-devtools v2.3.0
Cocos Creator 网页调试工具，运行时查看、修改节点树，实时更新节点属性，可视化显示缓存资源。

## 预览

Expand All @@ -25,6 +25,9 @@ v2.1.0: 区分手动刷新和自动刷新两种模式，手动刷新时支持搜
v2.2.0: 新增黑色主题(感谢[@wheatup](https://github.com/wheatup) )
![dark-theme](./screenshots/dark-theme.png)

v2.3.0: 添加缓存资源查看面板；简化调试信息显示，新增纹理内存挂件。
![cache](./screenshots/preview_cache.png)

## 使用

1. 点击 Creator 右上角进入编辑器 resources 目录，再依次进入`static/preview-templates`目录
Expand Down
7 changes: 7 additions & 0 deletions css/themes/dark.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
36 changes: 9 additions & 27 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,36 +147,15 @@
</el-row>
<el-row style="margin:5px 0;">
<el-col :span="12" style="text-align:left;padding-top:7px;padding-left:5px;">
FPS
调试信息
</el-col>
<el-col :span="12">
<el-switch style="margin: 5px;" v-model="isShowFPS" @change="handleChangeStats"
<el-switch style="margin: 5px;" v-model="isShowProfile" @change="handleChangeStats"
active-color="#0099ff" inactive-color="gray">
</el-switch>
</el-col>
</el-row>
<el-row style="margin:5px 0;">
<el-col :span="12" style="text-align:left;padding-top:7px;padding-left:5px;">
帧时间
</el-col>
<el-col :span="12">
<el-switch style="margin: 5px;" v-model="isShowMS" @change="handleChangeStats"
active-color="#0099ff" inactive-color="gray">
</el-switch>
</el-col>
</el-row>
<el-row style="margin:5px 0;">
<el-col :span="12" style="text-align:left;padding-top:7px;padding-left:5px;">
内存
</el-col>
<el-col :span="12">
<el-switch style="margin: 5px;" v-model="isShowMB" @change="handleChangeStats"
active-color="#0099ff" inactive-color="gray">
</el-switch>
</el-col>
</el-row>
<!-- TODO: -->
<!-- <el-row style="margin:5px 0;">
<el-col :span="12" style="text-align:left;padding-top:7px;padding-left:5px;">
缓存
</el-col>
Expand All @@ -185,7 +164,7 @@
active-color="#0099ff" inactive-color="gray">
</el-switch>
</el-col>
</el-row> -->
</el-row>
<el-row style="margin:5px 0;">
<el-col :span="12" style="text-align:left;padding-top:7px;padding-left:5px;">
暗黑主题
Expand Down Expand Up @@ -214,13 +193,16 @@
<Modal v-model="isShowCache" width="800" :mask-closable="false" :mask="false" scrollable @on-cancel="closeCachePanel()" :title="cacheTitle" footer-hide="true">
<i-table border :columns="cacheColumns" height="600" size="small" :data="cacheData" :loading="cacheDataLoading">
<template slot-scope="{ row, index }" slot="cache_preview">
<img :src="window.location.href + row.id" style="max-height: 40px;max-width: 120px;" v-if="row.type === 'png' || row.type === 'jpg'">
<div v-if="row.type !== 'png' && row.type !== 'jpg'" style="max-height: 40px;">_</div>
<img :src="window.location.href + row.preview" style="max-height: 40px;max-width: 120px;" v-if="row.preview">
<div v-if="!row.preview" style="max-height: 40px;">_</div>
</template>
<template slot-scope="{ row, index }" slot="cache_action">
<i-button type="primary" size="small" @click="showCacheItem(row.id)">Detail</i-button>
<i-button type="error" size="small" @click="releaseCacheItem(row.id)">Release</i-button>
</template>
<template slot-scope="{ row, index }" slot="cache_size">
{{row.size !== -1 ? row.size + 'MB' : '_'}}
</template>
</i-table>
</Modal>
</div>
Expand All @@ -229,7 +211,7 @@
<script type="text/javascript" charset="utf-8" src="app/editor/static/preview-templates/ccc-devtools/libs/vue-beauty/js/vue-beauty.min.js"></script>
<script type="text/javascript" charset="utf-8" src="app/editor/static/preview-templates/ccc-devtools/libs/element/js/element-ui.js"></script>
<script type="text/javascript" charset="utf-8" src="app/editor/static/preview-templates/ccc-devtools/libs/iview/js/iview.js"></script>
<script type="text/javascript" charset="utf-8" src="app/editor/static/preview-templates/ccc-devtools/libs/stats/stats.min.js"></script>
<script type="text/javascript" charset="utf-8" src="app/editor/static/preview-templates/ccc-devtools/libs/stats/Stats.js"></script>
<script type="text/javascript" charset="utf-8" src="app/editor/static/preview-templates/ccc-devtools/config.js"></script>
<script type="text/javascript" charset="utf-8" src="app/editor/static/preview-templates/ccc-devtools/js/app.js"></script>

112 changes: 57 additions & 55 deletions js/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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 = `缓存`;
},
Expand Down Expand Up @@ -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);
}

function animate() {
for (let i = 0; i < newPanels.length; i++) {
let stats = newPanels[i];
stats.update();
addStats(stats);
animate();
} else {
let panels = document.getElementsByClassName('statsPanel');
while (panels.length > 0) {
panels[0].parentElement.removeChild(panels[0]);
}
requestAnimationFrame(animate);
localStorage.setItem('isShowProfile', '0');
}
animate();

},
handleChangeTheme(isDark) {
isDark ? this.addDarkTheme() : this.removeDarkTheme();
Expand Down Expand Up @@ -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);
Expand Down
Loading

0 comments on commit 9c604e3

Please sign in to comment.