mirror of
https://github.com/potato47/ccc-devtools.git
synced 2024-12-25 11:19:10 +00:00
支持creator3d
This commit is contained in:
nextfu
parent
6bf3876262
commit
924e29ec99
60
config.js
60
config.js
@ -1,27 +1,19 @@
|
|||||||
const NEX_CONFIG = {
|
const NEX_CONFIG = {
|
||||||
nodeSchema: {
|
nodeSchema: {
|
||||||
node2d: {
|
node: {
|
||||||
title: 'Node',
|
title: 'Node',
|
||||||
key: 'cc.Node',
|
key: 'cc.Node',
|
||||||
rows: [
|
rows: [
|
||||||
{ name: 'Name', key: 'name', type: 'text' },
|
{ name: 'Name', key: 'name', type: 'text' },
|
||||||
{ name: 'X', key: 'x', type: 'number' },
|
{ name: 'Position.X', parentKey: 'position', key: 'x', type: 'object_number', method: 'setPosition' },
|
||||||
{ name: 'Y', key: 'y', type: 'number' },
|
{ name: 'Position.Y', parentKey: 'position', key: 'y', type: 'object_number', method: 'setPosition' },
|
||||||
{ name: 'Width', key: 'width', type: 'number' },
|
{ name: 'Position.Z', parentKey: 'position', key: 'z', type: 'object_number', method: 'setPosition' },
|
||||||
{ name: 'Height', key: 'height', type: 'number' },
|
{ name: 'Angle.X', parentKey: 'eulerAngles', key: 'x', type: 'object_number', method: 'setRotationFromEuler' },
|
||||||
{ name: 'Angle', key: 'angle', type: 'number' },
|
{ name: 'Angle.Y', parentKey: 'eulerAngles', key: 'y', type: 'object_number', method: 'setRotationFromEuler' },
|
||||||
{ name: 'ScaleX', key: 'scaleX', type: 'number' },
|
{ name: 'Angle.Z', parentKey: 'eulerAngles', key: 'z', type: 'object_number', method: 'setRotationFromEuler' },
|
||||||
{ name: 'ScaleY', key: 'scaleY', type: 'number' },
|
{ name: 'Scale.X', parentKey: 'scale', key: 'x', type: 'object_number', method: 'setScale' },
|
||||||
{ name: 'Opacity', key: 'opacity', type: 'number' },
|
{ name: 'Scale.Y', parentKey: 'scale', key: 'y', type: 'object_number', method: 'setScale' },
|
||||||
{ name: 'Color', key: 'hex_color', type: 'color' },
|
{ name: 'Scale.Z', parentKey: 'scale', key: 'z', type: 'object_number', method: 'setScale' },
|
||||||
{ name: 'Group', key: 'group', type: 'text' },
|
|
||||||
]
|
|
||||||
},
|
|
||||||
node3d: {
|
|
||||||
title: 'Node',
|
|
||||||
key: 'cc.Node',
|
|
||||||
rows: [
|
|
||||||
// TODO:
|
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
@ -30,16 +22,37 @@ const NEX_CONFIG = {
|
|||||||
title: 'cc.Camera',
|
title: 'cc.Camera',
|
||||||
key: 'cc.Camera',
|
key: 'cc.Camera',
|
||||||
rows: [
|
rows: [
|
||||||
{ name: 'Zoom Ratio', key: 'zoomRatio', type: 'number' },
|
{ name: 'ClearDepth', key: 'clearDepth', type: 'number' },
|
||||||
{ name: 'Depth', key: 'depth', type: 'number' },
|
{ name: 'ClearColor', key: 'hex_clearColor', rawKey: 'clearColor', type: 'color' },
|
||||||
{ name: 'Bacground Color', key: 'hex_backgroundColor', rawKey: 'backgroundColor', type: 'color' },
|
]
|
||||||
{ name: 'Align with Screen', key: 'alignWithScreen', type: 'bool' },
|
},
|
||||||
|
'cc.DirectionalLight': {
|
||||||
|
title: 'cc.DirectionalLight',
|
||||||
|
key: 'cc.DirectionalLight',
|
||||||
|
rows: [
|
||||||
|
{ name: 'UseColorTemperature', key: 'useColorTemperature', type: 'bool' },
|
||||||
|
{ name: 'ColorTemperature', key: 'colorTemperature', type: 'number' },
|
||||||
|
{ name: 'Illuminance', key: 'illuminance', type: 'number' },
|
||||||
|
{ name: 'Color', key: 'hex_color', rawKey: 'color', type: 'color' },
|
||||||
|
]
|
||||||
|
},
|
||||||
|
'cc.UITransform': {
|
||||||
|
key: 'cc.UITransform',
|
||||||
|
title: 'cc.UITransform',
|
||||||
|
rows: [
|
||||||
|
{ name: 'Width', key: 'width', type: 'number' },
|
||||||
|
{ name: 'Height', key: 'height', type: 'number' },
|
||||||
|
{ name: 'AnchorX', key: 'anchorX', type: 'number' },
|
||||||
|
{ name: 'AnchorY', key: 'anchorY', type: 'number' },
|
||||||
|
{ name: 'Priority', key: 'priority', type: 'number' },
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
'cc.Sprite': {
|
'cc.Sprite': {
|
||||||
key: 'cc.Sprite',
|
key: 'cc.Sprite',
|
||||||
title: 'cc.Sprite',
|
title: 'cc.Sprite',
|
||||||
rows: []
|
rows: [
|
||||||
|
{ name: 'Color', key: 'hex_color', rawKey: 'color', type: 'color' },
|
||||||
|
]
|
||||||
},
|
},
|
||||||
'cc.Label': {
|
'cc.Label': {
|
||||||
title: 'cc.Label',
|
title: 'cc.Label',
|
||||||
@ -48,6 +61,7 @@ const NEX_CONFIG = {
|
|||||||
{ name: 'String', key: 'string', type: 'textarea' },
|
{ name: 'String', key: 'string', type: 'textarea' },
|
||||||
{ name: 'Font Size', key: 'fontSize', type: 'number' },
|
{ name: 'Font Size', key: 'fontSize', type: 'number' },
|
||||||
{ name: 'Line Height', key: 'lineHeight', type: 'number' },
|
{ name: 'Line Height', key: 'lineHeight', type: 'number' },
|
||||||
|
{ name: 'Color', key: 'hex_color', rawKey: 'color', type: 'color' },
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
77
index.html
77
index.html
@ -1,6 +1,6 @@
|
|||||||
<link href="app/editor/static/preview-templates/ccc-devtools/libs/css/materialdesignicons.min.css" rel="stylesheet"
|
<link href="./ccc-devtools/libs/css/materialdesignicons.min.css" rel="stylesheet"
|
||||||
type="text/css">
|
type="text/css">
|
||||||
<link href="app/editor/static/preview-templates/ccc-devtools/libs/css/vuetify.min.css" rel="stylesheet" type="text/css">
|
<link href="./ccc-devtools/libs/css/vuetify.min.css" rel="stylesheet" type="text/css">
|
||||||
<style>
|
<style>
|
||||||
html {
|
html {
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
@ -12,18 +12,18 @@
|
|||||||
<v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
|
<v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
|
||||||
<div id="recompiling"><span>Recompiling...</span></div>
|
<div id="recompiling"><span>Recompiling...</span></div>
|
||||||
<v-spacer></v-spacer>
|
<v-spacer></v-spacer>
|
||||||
<div class="toolbar">
|
<div class="toolbar disabled">
|
||||||
<div class="item">
|
<div class="item">
|
||||||
<select id="opts-device">
|
<select id="opts-device" value="<%=config.device%>">
|
||||||
<option value="0">Default</option>
|
<% Object.keys(devices).forEach((key) => {%>
|
||||||
|
<option value="<%=key%>"><%=devices[key].name%>(<%=devices[key].width%> X <%=devices[key].height%>)</option>
|
||||||
|
<% }) %>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="item"><button id="btn-rotate" class="<%=config.rotate ? 'checked' : ''%>">Rotate</button></div>
|
||||||
|
<span style="font-size: small;" class="item">Debug Mode:</span>
|
||||||
<div class="item">
|
<div class="item">
|
||||||
<v-btn id="btn-rotate" small height="25"><span style="color: #aaa;">Rotate</span></v-btn>
|
<select id="opts-debug-mode" value="<%=config.debugMode%>">
|
||||||
</div>
|
|
||||||
<span style="font-size: small;display: none;" class="item">Debug Mode:</span>
|
|
||||||
<div class="item" style="display: none;">
|
|
||||||
<select id="opts-debug-mode">
|
|
||||||
<option value="0">None</option>
|
<option value="0">None</option>
|
||||||
<option value="1">Info</option>
|
<option value="1">Info</option>
|
||||||
<option value="2">Warn</option>
|
<option value="2">Warn</option>
|
||||||
@ -33,24 +33,12 @@
|
|||||||
<option value="6">Error For Web Page</option>
|
<option value="6">Error For Web Page</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="item"><button id="btn-show-fps" class="<%=config.showFps ? 'checked' : ''%>">Show FPS</button></div>
|
||||||
<div class="item">
|
<div class="item">
|
||||||
<v-btn id="btn-show-fps" small height="25"><span style="color: #aaa;">Show FPS</span></v-btn>
|
<span style="font-size: small;" class="item">FPS:</span><input id="input-set-fps" type="number" value="<%=config.fps%>" />
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<span style="font-size: small;color: #aaa;" class="item">FPS:</span><input id="input-set-fps"
|
|
||||||
type="number" />
|
|
||||||
</div>
|
|
||||||
<div style="margin-right: 0px;" class="item">
|
|
||||||
<v-btn id="btn-pause" small height="25"><span style="color: #aaa;">Pause</span></v-btn>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<v-btn id="btn-step" style="display: none;" small height="25">
|
|
||||||
<span style="color: #aaa;">Step</span>
|
|
||||||
</v-btn>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<v-btn id="btn-recompile" small height="25"><span style="color: #aaa;">Recompile</span></v-btn>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div style="margin-right: 0;" class="item"><button id="btn-pause">Pause</button><button id="btn-step">Step</button></div>
|
||||||
|
<div class="item"><button id="btn-step" style="display: none;">Step</button></div>
|
||||||
<v-icon @click="openCocosDocs" small>mdi-cloud-search</v-icon>
|
<v-icon @click="openCocosDocs" small>mdi-cloud-search</v-icon>
|
||||||
<v-icon @click="openCocosForum" small>mdi-forum</v-icon>
|
<v-icon @click="openCocosForum" small>mdi-forum</v-icon>
|
||||||
<v-icon @click="openCacheDialog" small>mdi-table</v-icon>
|
<v-icon @click="openCacheDialog" small>mdi-table</v-icon>
|
||||||
@ -108,14 +96,14 @@
|
|||||||
hide-details clearable clear-icon="mdi-close-circle-outline"></v-text-field>
|
hide-details clearable clear-icon="mdi-close-circle-outline"></v-text-field>
|
||||||
<v-treeview :items="treeData" item-key="id" dense activatable :search="treeSearchText"
|
<v-treeview :items="treeData" item-key="id" dense activatable :search="treeSearchText"
|
||||||
:active.sync="selectedNodes">
|
:active.sync="selectedNodes">
|
||||||
<template v-slot:label="{ item, active }">
|
<template v-slot:label="{ item, active, open }">
|
||||||
<label v-if="item.active" style="color: white;">{{ item.name }}</label>
|
<label v-if="item.active" style="color: white;">{{ item.name }}</label>
|
||||||
<label v-else style="color: gray;">{{ item.name }}</label>
|
<label v-else style="color: gray;">{{ item.name }}</label>
|
||||||
</template>
|
</template>
|
||||||
</v-treeview>
|
</v-treeview>
|
||||||
</v-container>
|
</v-container>
|
||||||
<v-container style="border-top: 2px solid darkgray;height: 50%;overflow-y: auto;">
|
<v-container style="border-top: 2px solid darkgray;height: 50%;overflow-y: auto;">
|
||||||
<template v-if="selectedNode">
|
<template v-if="selectedNode && selectedNode.parent">
|
||||||
<!-- Node -->
|
<!-- Node -->
|
||||||
<table style="width: 100%;color: white;" border="1">
|
<table style="width: 100%;color: white;" border="1">
|
||||||
<thead>
|
<thead>
|
||||||
@ -134,13 +122,15 @@
|
|||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr v-for="row in nodeSchema.rows" :key="row.key">
|
<tr v-for="row in nodeSchema.rows" :key="row.name">
|
||||||
<td style="padding: 10px;width: 40%;">{{ row.name }}</td>
|
<td style="padding: 10px;width: 40%;">{{ row.name }}</td>
|
||||||
<td style="width: 60%;">
|
<td style="width: 60%;">
|
||||||
<v-color-picker v-if="row.type == 'color'" class="ma-2" canvas-height="80" width="259"
|
<v-color-picker v-if="row.type == 'color'" class="ma-2" canvas-height="80" width="259"
|
||||||
v-model="selectedNode[row.key]"></v-color-picker>
|
v-model="selectedNode[row.key]"></v-color-picker>
|
||||||
<v-simple-checkbox v-else-if="row.type == 'bool'" v-model="selectedNode[row.key]"
|
<v-simple-checkbox v-else-if="row.type == 'bool'" v-model="selectedNode[row.key]"
|
||||||
style="padding: 10px;width: 100%;"></v-simple-checkbox>
|
style="padding: 10px;width: 100%;"></v-simple-checkbox>
|
||||||
|
<input v-else-if="row.type == 'object_number'" type="number" v-model.number="selectedNode[row.parentKey][row.key]"
|
||||||
|
style="padding: 10px;width: 100%;" @input="onSubPropInput(selectedNode, row)"></input>
|
||||||
<input v-else :type="row.type" v-model="selectedNode[row.key]"
|
<input v-else :type="row.type" v-model="selectedNode[row.key]"
|
||||||
style="padding: 10px;width: 100%;"></input>
|
style="padding: 10px;width: 100%;"></input>
|
||||||
</td>
|
</td>
|
||||||
@ -175,6 +165,8 @@
|
|||||||
<v-simple-checkbox v-else-if="row.type == 'bool'"
|
<v-simple-checkbox v-else-if="row.type == 'bool'"
|
||||||
v-model="selectedNode[component.key][row.key]" style="padding: 10px;width: 100%;">
|
v-model="selectedNode[component.key][row.key]" style="padding: 10px;width: 100%;">
|
||||||
</v-simple-checkbox>
|
</v-simple-checkbox>
|
||||||
|
<input v-else-if="row.type == 'number'" type="number" v-model.number="selectedNode[component.key][row.key]"
|
||||||
|
style="padding: 10px;width: 100%;"></input>
|
||||||
<input v-else :type="row.type" v-model="selectedNode[component.key][row.key]"
|
<input v-else :type="row.type" v-model="selectedNode[component.key][row.key]"
|
||||||
style="padding: 10px;width: 100%;"></input>
|
style="padding: 10px;width: 100%;"></input>
|
||||||
</td>
|
</td>
|
||||||
@ -182,6 +174,9 @@
|
|||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</template>
|
</template>
|
||||||
|
<template v-else-if="selectedNode && !selectedNode.parent">
|
||||||
|
<!-- TODO:场景根节点 -->
|
||||||
|
</template>
|
||||||
</v-container>
|
</v-container>
|
||||||
</v-navigation-drawer>
|
</v-navigation-drawer>
|
||||||
|
|
||||||
@ -189,15 +184,23 @@
|
|||||||
<v-container fill-height>
|
<v-container fill-height>
|
||||||
<div id="content" class="content">
|
<div id="content" class="content">
|
||||||
<div class="contentWrap">
|
<div class="contentWrap">
|
||||||
<div id="GameDiv" class="wrapper"><canvas id="GameCanvas"></canvas>
|
<div id="GameDiv" class="wrapper">
|
||||||
|
<canvas id="GameCanvas"></canvas>
|
||||||
<div id="splash">
|
<div id="splash">
|
||||||
<div class="progress-bar stripes"><span></span></div>
|
<div class="progress-bar stripes"><span></span></div>
|
||||||
</div>
|
</div>
|
||||||
<div id="bulletin">
|
<div id="bulletin">
|
||||||
<div id="sceneIsEmpty" class="inner">预览场景中啥都没有，加点什么，或在编辑器中打开其它场景吧</div>
|
<div id="sceneIsEmpty" class="inner"><%=tip_sceneIsEmpty%></div>
|
||||||
|
</div>
|
||||||
|
<div class="error" id="error">
|
||||||
|
<div class="title">Error <i>(Please open the console to see detailed errors)</i></div>
|
||||||
|
<div class="error-main"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<p class="footer">
|
||||||
|
Created with <a href="https://www.cocos.com/products" target="_blank" title="Cocos Creator 3D">Cocos Creator 3D</a>
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</v-container>
|
</v-container>
|
||||||
</v-content>
|
</v-content>
|
||||||
@ -242,8 +245,10 @@
|
|||||||
|
|
||||||
</v-app>
|
</v-app>
|
||||||
|
|
||||||
<script src="app/editor/static/preview-templates/ccc-devtools/libs/js/vue.min.js"></script>
|
<script src="./ccc-devtools/libs/js/vue.min.js"></script>
|
||||||
<script src="app/editor/static/preview-templates/ccc-devtools/libs/js/vuetify.js"></script>
|
<script src="./ccc-devtools/libs/js/vuetify.js"></script>
|
||||||
<script src="app/editor/static/preview-templates/ccc-devtools/config.js"></script>
|
<script src="./ccc-devtools/config.js"></script>
|
||||||
<script src="app/editor/static/preview-templates/ccc-devtools/libs/js/cc-console-utils.js"></script>
|
<script src="./ccc-devtools/libs/js/cc-console-utils.js"></script>
|
||||||
<script src="app/editor/static/preview-templates/ccc-devtools/preview.js"></script>
|
<script src="./ccc-devtools/preview.js"></script>
|
||||||
|
|
||||||
|
<%- include(cocosTemplate, {}) %>
|
||||||
|
|||||||
@ -11,12 +11,12 @@ const initConsoleUtil = function () {
|
|||||||
`color: orange; background: black;margin-left: 5px;border-radius:3px;padding:0 3px;fonrt-size: 10px;font-weight:bold;`
|
`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 nameValue = `%c${node.name}`;
|
||||||
let propValue =
|
let propValue =
|
||||||
`%c${node.x.toFixed(0) + ',' + node.y.toFixed(0) + ',' + node.width.toFixed(0) + ',' + node.height.toFixed(0) + ',' + node.scale.toFixed(1)}`
|
`%c${node.position.x.toFixed(0) + ',' + node.position.y.toFixed(0)}`
|
||||||
let indexValue = `%c${index++}`;
|
let indexValue = `%c${index++}`;
|
||||||
if (node.childrenCount > 0) {
|
if (node.children.length > 0) {
|
||||||
console.groupCollapsed(nameValue + propValue + indexValue, nameStyle,
|
console.groupCollapsed(nameValue + propValue + indexValue, nameStyle,
|
||||||
propStyle, indexStyle);
|
propStyle, indexStyle);
|
||||||
for (let i = 0; i < node.childrenCount; i++) {
|
for (let i = 0; i < node.children.length; i++) {
|
||||||
treeNode(node.children[i]);
|
treeNode(node.children[i]);
|
||||||
}
|
}
|
||||||
console.groupEnd();
|
console.groupEnd();
|
||||||
@ -53,8 +53,8 @@ const initConsoleUtil = function () {
|
|||||||
index++;
|
index++;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (node.childrenCount > 0) {
|
if (node.children.length > 0) {
|
||||||
for (let i = 0; i < node.childrenCount; i++) {
|
for (let i = 0; i < node.children.length; i++) {
|
||||||
sortId(node.children[i]);
|
sortId(node.children[i]);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -70,8 +70,8 @@ const initConsoleUtil = function () {
|
|||||||
if (node.name.toLowerCase().indexOf(key.toLowerCase()) > -1) {
|
if (node.name.toLowerCase().indexOf(key.toLowerCase()) > -1) {
|
||||||
targets.push(node);
|
targets.push(node);
|
||||||
}
|
}
|
||||||
if (node.childrenCount > 0) {
|
if (node.children.length > 0) {
|
||||||
for (let i = 0; i < node.childrenCount; i++) {
|
for (let i = 0; i < node.children.length; i++) {
|
||||||
step(node.children[i]);
|
step(node.children[i]);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -89,35 +89,49 @@ const initConsoleUtil = function () {
|
|||||||
if (!target) {
|
if (!target) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
let rect = target.getBoundingBoxToWorld();
|
let rect;
|
||||||
let bgNode = new cc.Node();
|
let transform = target.getComponent(cc.UITransformComponent);
|
||||||
let graphics = bgNode.addComponent(cc.Graphics);
|
if (transform) {
|
||||||
|
rect = getSelfBoundingBoxToWold(transform);
|
||||||
|
} else {
|
||||||
|
let worldPos = cc.v3();
|
||||||
|
target.getWorldPosition(worldPos);
|
||||||
|
rect = cc.rect(worldPos.x, worldPos.y, 0, 0);
|
||||||
|
}
|
||||||
|
let canvasNode = new cc.Node('Canvas');
|
||||||
let scene = cc.director.getScene();
|
let scene = cc.director.getScene();
|
||||||
scene.addChild(bgNode);
|
scene.addChild(canvasNode);
|
||||||
bgNode.position = rect.center;
|
canvasNode.addComponent(cc.Canvas);
|
||||||
bgNode.group = target.group;
|
let bgNode = new cc.Node();
|
||||||
bgNode.zIndex = cc.macro.MAX_ZINDEX;
|
let graphics = bgNode.addComponent(cc.GraphicsComponent);
|
||||||
|
let bgTransform = bgNode.addComponent(cc.UITransformComponent);
|
||||||
|
canvasNode.addChild(bgNode);
|
||||||
|
let centerPos = cc.v3(rect.center.x, rect.center.y, 0);
|
||||||
|
let localPos = cc.v3();
|
||||||
|
canvasNode.getComponent(cc.UITransformComponent).convertToNodeSpaceAR(centerPos, localPos);
|
||||||
|
bgNode.setPosition(localPos);
|
||||||
|
bgNode.layer = target.layer;
|
||||||
let isZeroSize = rect.width === 0 || rect.height === 0;
|
let isZeroSize = rect.width === 0 || rect.height === 0;
|
||||||
if (isZeroSize) {
|
if (isZeroSize) {
|
||||||
graphics.circle(0, 0, 100);
|
graphics.circle(0, 0, 100);
|
||||||
graphics.fillColor = cc.Color.GREEN;
|
graphics.fillColor = cc.Color.GREEN;
|
||||||
graphics.fill();
|
graphics.fill();
|
||||||
} else {
|
} else {
|
||||||
bgNode.width = rect.width;
|
bgTransform.width = rect.width;
|
||||||
bgNode.height = rect.height;
|
bgTransform.height = rect.height;
|
||||||
graphics.rect(-bgNode.width / 2, -bgNode.height / 2, bgNode.width, bgNode.height);
|
graphics.rect(-bgTransform.width / 2, -bgTransform.height / 2, bgTransform.width, bgTransform.height);
|
||||||
graphics.fillColor = new cc.Color().fromHEX('#E91E6390');
|
graphics.fillColor = new cc.Color().fromHEX('#E91E6390');
|
||||||
graphics.fill();
|
graphics.fill();
|
||||||
}
|
}
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
if (cc.isValid(bgNode)) {
|
if (cc.isValid(canvasNode)) {
|
||||||
bgNode.destroy();
|
canvasNode.destroy();
|
||||||
}
|
}
|
||||||
}, 2000);
|
}, 2000);
|
||||||
return target;
|
return target;
|
||||||
}
|
}
|
||||||
cc.cache = function () {
|
cc.cache = function () {
|
||||||
let rawCacheData = cc.loader._cache;
|
let rawCacheData = cc.loader._pipes[0].pipeline._cache;
|
||||||
let cacheData = [];
|
let cacheData = [];
|
||||||
let totalTextureSize = 0;
|
let totalTextureSize = 0;
|
||||||
for (let k in rawCacheData) {
|
for (let k in rawCacheData) {
|
||||||
@ -129,7 +143,7 @@ const initConsoleUtil = function () {
|
|||||||
let formatSize = -1;
|
let formatSize = -1;
|
||||||
if (item.type === 'png' || item.type === 'jpg') {
|
if (item.type === 'png' || item.type === 'jpg') {
|
||||||
let texture = rawCacheData[k.replace('.' + item.type, '.json')];
|
let texture = rawCacheData[k.replace('.' + item.type, '.json')];
|
||||||
if (texture && texture._owner && texture._owner._name) {
|
if (texture && texture._owner) {
|
||||||
itemName = texture._owner._name;
|
itemName = texture._owner._name;
|
||||||
preview = texture.content.url;
|
preview = texture.content.url;
|
||||||
}
|
}
|
||||||
@ -141,13 +155,13 @@ const initConsoleUtil = function () {
|
|||||||
}
|
}
|
||||||
if (content === 'cc.Texture2D') {
|
if (content === 'cc.Texture2D') {
|
||||||
let texture = item.content;
|
let texture = item.content;
|
||||||
preview = texture.url;
|
preview = texture._mipmaps[0].url;
|
||||||
let textureSize = texture.width * texture.height * ((texture._native === '.jpg' ? 3 : 4) / 1024 / 1024);
|
let textureSize = texture.width * texture.height * ((texture._native === '.jpg' ? 3 : 4) / 1024 / 1024);
|
||||||
totalTextureSize += textureSize;
|
totalTextureSize += textureSize;
|
||||||
// sizeStr = textureSize.toFixed(3) + 'M';
|
// sizeStr = textureSize.toFixed(3) + 'M';
|
||||||
formatSize = Math.round(textureSize * 1000) / 1000;
|
formatSize = Math.round(textureSize * 1000) / 1000;
|
||||||
} else if (content === 'cc.SpriteFrame') {
|
} else if (content === 'cc.SpriteFrame') {
|
||||||
preview = item.content._texture.url;
|
preview = item.content._texture._mipmaps[0].url;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
cacheData.push({
|
cacheData.push({
|
||||||
@ -164,4 +178,22 @@ const initConsoleUtil = function () {
|
|||||||
let cacheTitle = `缓存 [文件总数:${cacheData.length}][纹理缓存:${totalTextureSize.toFixed(2) + 'M'}]`;
|
let cacheTitle = `缓存 [文件总数:${cacheData.length}][纹理缓存:${totalTextureSize.toFixed(2) + 'M'}]`;
|
||||||
return [cacheData, cacheTitle];
|
return [cacheData, cacheTitle];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function getSelfBoundingBoxToWold(transform) {
|
||||||
|
let _worldMatrix = cc.mat4();
|
||||||
|
if (transform.node.parent) {
|
||||||
|
transform.node.parent.getWorldMatrix(_worldMatrix);
|
||||||
|
let parentMat = _worldMatrix;
|
||||||
|
let _matrix = cc.mat4();
|
||||||
|
cc.Mat4.fromRTS(_matrix, transform.node.getRotation(), transform.node.getPosition(), transform.node.getScale());
|
||||||
|
const width = transform._contentSize.width;
|
||||||
|
const height = transform._contentSize.height;
|
||||||
|
const rect = cc.rect(-transform._anchorPoint.x * width, -transform._anchorPoint.y * height, width, height);
|
||||||
|
cc.Mat4.multiply(_worldMatrix, parentMat, _matrix);
|
||||||
|
rect.transformMat4(_worldMatrix);
|
||||||
|
return rect;
|
||||||
|
} else {
|
||||||
|
return transform.getBoundingBox();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
36
preview.js
36
preview.js
@ -51,14 +51,6 @@ const app = new Vue({
|
|||||||
if (!this.selectedNodes.length) return undefined
|
if (!this.selectedNodes.length) return undefined
|
||||||
let node = getNodeById(this.selectedNodes[0]);
|
let node = getNodeById(this.selectedNodes[0]);
|
||||||
if (node) {
|
if (node) {
|
||||||
if (!node.hex_color) {
|
|
||||||
cc.js.getset(node, 'hex_color', () => {
|
|
||||||
return '#' + node.color.toHEX('#rrggbb');
|
|
||||||
}, (hex) => {
|
|
||||||
node.color = new cc.Color().fromHEX(hex);
|
|
||||||
}, false, true);
|
|
||||||
}
|
|
||||||
|
|
||||||
let superPreLoad = node._onPreDestroy;
|
let superPreLoad = node._onPreDestroy;
|
||||||
node._onPreDestroy = () => {
|
node._onPreDestroy = () => {
|
||||||
superPreLoad.apply(node);
|
superPreLoad.apply(node);
|
||||||
@ -66,7 +58,7 @@ const app = new Vue({
|
|||||||
this.selectedNodes.pop();
|
this.selectedNodes.pop();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
this.nodeSchema = NEX_CONFIG.nodeSchema.node2d;
|
this.nodeSchema = NEX_CONFIG.nodeSchema.node;
|
||||||
let componentsSchema = [];
|
let componentsSchema = [];
|
||||||
for (let component of node._components) {
|
for (let component of node._components) {
|
||||||
let schema = NEX_CONFIG.componentsSchema[component.__classname__];
|
let schema = NEX_CONFIG.componentsSchema[component.__classname__];
|
||||||
@ -109,8 +101,16 @@ const app = new Vue({
|
|||||||
});
|
});
|
||||||
},
|
},
|
||||||
refreshTree: function () {
|
refreshTree: function () {
|
||||||
if (!this.$data.drawer || !window.cc || !cc.director.getScene() || !cc.director.getScene().children) return;
|
if (!this.$data.drawer || !window.cc) {
|
||||||
this.$data.treeData = getChildren(cc.director.getScene());
|
return;
|
||||||
|
}
|
||||||
|
let currentScene = cc.director.getScene();
|
||||||
|
if (!currentScene || !currentScene.children) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// 包含场景根节点
|
||||||
|
// this.$data.treeData = [{ id: currentScene._id, name: 'Scene', active: currentScene.activeInHierarchy, open: true, children: getChildren(currentScene) }];
|
||||||
|
this.$data.treeData = getChildren(currentScene);
|
||||||
},
|
},
|
||||||
startUpdateTree: function () {
|
startUpdateTree: function () {
|
||||||
this.$data.intervalId = setInterval(() => {
|
this.$data.intervalId = setInterval(() => {
|
||||||
@ -120,6 +120,16 @@ const app = new Vue({
|
|||||||
stopUpdateTree: function () {
|
stopUpdateTree: function () {
|
||||||
clearInterval(this.$data.intervalId);
|
clearInterval(this.$data.intervalId);
|
||||||
},
|
},
|
||||||
|
onSubPropInput: function (target, row) {
|
||||||
|
let value = target[row.parentKey][row.key];
|
||||||
|
if (typeof value === 'number' && !isNaN(value)) {
|
||||||
|
if (row.method === 'setRotationFromEuler') {
|
||||||
|
target.setRotationFromEuler(target.eulerAngles.x, target.eulerAngles.y, target.eulerAngles.z);
|
||||||
|
} else {
|
||||||
|
target[row.method](target[row.parentKey]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
outputNodeHandler(id) {
|
outputNodeHandler(id) {
|
||||||
let i = 1;
|
let i = 1;
|
||||||
while (window['temp' + i] !== undefined) {
|
while (window['temp' + i] !== undefined) {
|
||||||
@ -179,8 +189,8 @@ function getNodeById(id) {
|
|||||||
target = node;
|
target = node;
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if (node.childrenCount) {
|
if (node.children.length) {
|
||||||
for (let i = 0; i < node.childrenCount; i++) {
|
for (let i = 0; i < node.children.length; i++) {
|
||||||
if (!target) {
|
if (!target) {
|
||||||
search(node.children[i]);
|
search(node.children[i]);
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user