支持creator3d

config.js

@@ -1,27 +1,19 @@
 const NEX_CONFIG = {
 	nodeSchema: {
-		node2d: {
+		node: {
 			title: 'Node',
 			key: 'cc.Node',
 			rows: [
 				{ 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',
 			key: 'cc.Camera',
 			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': {
 			key: 'cc.Sprite',
 			title: 'cc.Sprite',
-			rows: []
+			rows: [
+				{ name: 'Color', key: 'hex_color', rawKey: 'color', type: 'color' },
+			]
 		},
 		'cc.Label': {
 			title: 'cc.Label',
@@ -48,6 +61,7 @@ const NEX_CONFIG = {
 				{ name: 'String', key: 'string', type: 'textarea' },
 				{ name: 'Font Size', key: 'fontSize', type: 'number' },
 				{ name: 'Line Height', key: 'lineHeight', type: 'number' },
+				{ name: 'Color', key: 'hex_color', rawKey: 'color', type: 'color' },
 			]
 		}
 	}

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">
-<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>
     html {
         overflow-y: auto;
@@ -12,18 +12,18 @@
         <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
         <div id="recompiling"><span>Recompiling...</span></div>
         <v-spacer></v-spacer>
-        <div class="toolbar">
+        <div class="toolbar disabled">
             <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>
             </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">
-                <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="1">Info</option>
                     <option value="2">Warn</option>
@@ -33,24 +33,12 @@
                     <option value="6">Error For Web Page</option>
                 </select>
             </div>
+            <div class="item"><button id="btn-show-fps" class="<%=config.showFps ? 'checked' : ''%>">Show FPS</button></div>
             <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 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="openCocosForum" small>mdi-forum</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>
             <v-treeview :items="treeData" item-key="id" dense activatable :search="treeSearchText"
                 :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-else style="color: gray;">{{ item.name }}</label>
                 </template>
             </v-treeview>
         </v-container>
         <v-container style="border-top: 2px solid darkgray;height: 50%;overflow-y: auto;">
-            <template v-if="selectedNode">
+            <template v-if="selectedNode && selectedNode.parent">
                 <!-- Node -->
                 <table style="width: 100%;color: white;" border="1">
                     <thead>
@@ -134,13 +122,15 @@
                         </tr>
                     </thead>
                     <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="width: 60%;">
                                 <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-simple-checkbox v-else-if="row.type == 'bool'" v-model="selectedNode[row.key]"
                                     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]"
                                     style="padding: 10px;width: 100%;"></input>
                             </td>
@@ -175,6 +165,8 @@
                                 <v-simple-checkbox v-else-if="row.type == 'bool'"
                                     v-model="selectedNode[component.key][row.key]" style="padding: 10px;width: 100%;">
                                 </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]"
                                     style="padding: 10px;width: 100%;"></input>
                             </td>
@@ -182,6 +174,9 @@
                     </tbody>
                 </table>
             </template>
+            <template v-else-if="selectedNode && !selectedNode.parent">
+                <!-- TODO:场景根节点 -->
+            </template>
         </v-container>
     </v-navigation-drawer>
 
@@ -189,15 +184,23 @@
         <v-container fill-height>
             <div id="content" class="content">
                 <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 class="progress-bar stripes"><span></span></div>
                         </div>
                         <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>
+                <p class="footer">
+                    Created with <a href="https://www.cocos.com/products" target="_blank" title="Cocos Creator 3D">Cocos Creator 3D</a>
+                </p>
             </div>
         </v-container>
     </v-content>
@@ -242,8 +245,10 @@
 
 </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, {}) %>

libs/js/cc-console-utils.js

@@ -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;`
             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)}`
+                `%c${node.position.x.toFixed(0) + ',' + node.position.y.toFixed(0)}`
             let indexValue = `%c${index++}`;
-            if (node.childrenCount > 0) {
+            if (node.children.length > 0) {
                 console.groupCollapsed(nameValue + propValue + indexValue, nameStyle,
                     propStyle, indexStyle);
-                for (let i = 0; i < node.childrenCount; i++) {
+                for (let i = 0; i < node.children.length; i++) {
                     treeNode(node.children[i]);
                 }
                 console.groupEnd();
@@ -53,8 +53,8 @@ const initConsoleUtil = function () {
                     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]);
                 }
             }
@@ -70,8 +70,8 @@ const initConsoleUtil = function () {
             if (node.name.toLowerCase().indexOf(key.toLowerCase()) > -1) {
                 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]);
                 }
             }
@@ -89,35 +89,49 @@ const initConsoleUtil = function () {
         if (!target) {
             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();
-        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;
         if (isZeroSize) {
             graphics.circle(0, 0, 100);
             graphics.fillColor = cc.Color.GREEN;
             graphics.fill();
         } 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.fill();
         }
         setTimeout(() => {
-            if (cc.isValid(bgNode)) {
+            if (cc.isValid(canvasNode)) {
-                bgNode.destroy();
+                canvasNode.destroy();
             }
         }, 2000);
         return target;
     }
     cc.cache = function () {
-        let rawCacheData = cc.loader._cache;
+        let rawCacheData = cc.loader._pipes[0].pipeline._cache;
         let cacheData = [];
         let totalTextureSize = 0;
         for (let k in rawCacheData) {
@@ -129,7 +143,7 @@ const initConsoleUtil = function () {
                 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) {
+                    if (texture && texture._owner) {
                         itemName = texture._owner._name;
                         preview = texture.content.url;
                     }
@@ -141,13 +155,13 @@ const initConsoleUtil = function () {
                     }
                     if (content === 'cc.Texture2D') {
                         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);
                         totalTextureSize += textureSize;
                         // sizeStr = textureSize.toFixed(3) + 'M';
                         formatSize = Math.round(textureSize * 1000) / 1000;
                     } else if (content === 'cc.SpriteFrame') {
-                        preview = item.content._texture.url;
+                        preview = item.content._texture._mipmaps[0].url;
                     }
                 }
                 cacheData.push({
@@ -165,3 +179,21 @@ const initConsoleUtil = function () {
         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();
+    }
+}

preview.js

@@ -51,14 +51,6 @@ const app = new Vue({
             if (!this.selectedNodes.length) return undefined
             let node = getNodeById(this.selectedNodes[0]);
             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;
                 node._onPreDestroy = () => {
                     superPreLoad.apply(node);
@@ -66,7 +58,7 @@ const app = new Vue({
                         this.selectedNodes.pop();
                     }
                 }
-                this.nodeSchema = NEX_CONFIG.nodeSchema.node2d;
+                this.nodeSchema = NEX_CONFIG.nodeSchema.node;
                 let componentsSchema = [];
                 for (let component of node._components) {
                     let schema = NEX_CONFIG.componentsSchema[component.__classname__];
@@ -109,8 +101,16 @@ const app = new Vue({
             });
         },
         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 () {
             this.$data.intervalId = setInterval(() => {
@@ -120,6 +120,16 @@ const app = new Vue({
         stopUpdateTree: function () {
             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) {
             let i = 1;
             while (window['temp' + i] !== undefined) {
@@ -179,8 +189,8 @@ function getNodeById(id) {
             target = node;
             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) {
                     search(node.children[i]);
                 }