cocos2d-cli 1.5.2 → 1.6.2

package/bin/cocos2d-cli.js

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-/**     
+/**       
  * Cocos Creator CLI
  * Command-line tools for AI to read and manipulate Cocos Creator 2.4.x project scenes
  */
@@ -18,7 +18,8 @@ const commands = {
     'remove': '../src/commands/remove',
     build: '../src/commands/build',
     'create-prefab': '../src/commands/prefab-create',
-    'create-scene': '../src/commands/create-scene'
+    'create-scene': '../src/commands/create-scene',
+    'screenshot': '../src/commands/screenshot'
 };
 
 // 帮助信息
@@ -41,6 +42,7 @@ Cocos Creator CLI - 场景/预制体操作工具集
   build <项目目录>                              构建组件映射
   create-prefab [JSON文件路径] <输出.prefab>    创建预制体（不传JSON则创建默认）
   create-scene [JSON文件路径] <输出.fire>       创建场景（不传JSON则创建默认）
+  screenshot <json文件> [选项]                  渲染JSON并截图
 
 节点路径格式:
   Canvas                    - 根节点下的 Canvas
@@ -79,41 +81,21 @@ add 支持的选项:
   --string=<文字>        Label 文字内容 (配合 --type=label)
   --fontSize=<数值>      Label 字体大小 (配合 --type=label)
 
-JSON 格式 (create-prefab / create-scene):
-  注意: 参数必须是 JSON 文件路径，不支持直接传递 JSON 字符串
-
+JSON 格式:
+  详见 SKILL.md 完整文档。简要示例：
   {
-    "name": "节点名称",
-    "width": 400,
-    "height": 300,
-    "x": 0,
-    "y": 0,
-    "color": "#336699",
-    "opacity": 255,
+    "name": "Node",
+    "width": 400, "height": 300,
+    "x": 0, "y": 0,
+    "anchorX": 0, "color": "#336699",
     "components": [
-      "sprite",
-      { "type": "widget", "top": 0, "left": 0, "right": 0, "bottom": 0 },
-      { "type": "label", "string": "Hello", "fontSize": 32 }
+      { "type": "label", "string": "Hello", "horizontalAlign": "left" },
+      { "type": "richText", "string": "<color=#3cb034>绿色</color>" }
     ],
     "children": [...]
   }
 
-  节点属性: name, width, height, x, y, color, opacity, anchorX, anchorY, rotation, scaleX, scaleY, active
-
-  组件写法:
-    简写: "sprite" 或 "label"
-    完整: { "type": "sprite", "sizeMode": 1 }
-    完整: { "type": "label", "string": "文本", "fontSize": 32, "color": "#fff" }
-
-  组件类型:
-    sprite   - 精灵（默认白色方块，节点设置什么颜色就显示什么颜色）
-    label    - 文本，支持 string, fontSize, color(兼容)
-    button   - 按钮，通常配合 sprite 使用才能看见
-    widget   - 对齐，支持 top, bottom, left, right
-    layout   - 布局，自动排列子节点
-    canvas   - 画布，根节点使用
-    camera   - 相机
-    particle - 粒子效果
+  提示：配合 anchorX + horizontalAlign 实现靠左/靠右布局（见 SKILL.md）
 
 示例:
   cocos2d-cli tree assets/main.fire
@@ -136,6 +118,10 @@ JSON 格式 (create-prefab / create-scene):
 
   # 创建默认预制体（不传JSON）
   cocos2d-cli create-prefab assets/NewNode.prefab
+
+  # 截图
+  cocos2d-cli screenshot data.json
+  cocos2d-cli screenshot data.json -o ./screenshots --width 1080 --height 1920
 `);
 }
 

package/package.json

@@ -1,10 +1,10 @@
 {
-  "name": "cocos2d-cli", 
-  "version": "1.5.2",
+  "name": "cocos2d-cli",
+  "version": "1.6.2",
   "description": "Command-line tools for AI to read and manipulate Cocos Creator 2.4.x project scenes",
   "main": "bin/cocos2d-cli.js",
   "bin": {
-    "cocos2d-cli": "./bin/cocos2d-cli.js"
+    "cocos2d-cli": "bin/cocos2d-cli.js"
   },
   "files": [
     "bin",
@@ -19,11 +19,15 @@
     "cocos-creator",
     "cli",
     "scene",
-    "fire"
+    "fire",
+    "screenshot"
   ],
   "author": "",
   "license": "MIT",
   "engines": {
     "node": ">=14.0.0"
+  },
+  "dependencies": {
+    "playwright": "^1.58.2"
   }
 }

package/src/commands/create-scene.js

@@ -82,8 +82,8 @@ function createDefaultScene(asset, resolution) {
     
     // Canvas 组件
     const canvasComp = new CCCanvas();
-    canvasComp.setDesignResolution(width, height);
-    canvasComp.node = canvas;
+    canvasComp._designResolution.set(width, height);
+    canvas.addChild(canvasComp);
     
     // Widget 组件
     const widget = new CCWidget();
@@ -95,11 +95,6 @@ function createDefaultScene(asset, resolution) {
     
     // 创建 Main Camera 节点
     const camera = new CCNode('Main Camera');
-    camera._contentSize.width = 0;
-    camera._contentSize.height = 0;
-    camera._anchorPoint.x = 0.5;
-    camera._anchorPoint.y = 0.5;
-    camera._is3DNode = false;
     camera._id = generateCompressedUUID();
     
     // Camera 组件

package/src/commands/screenshot.js

@@ -0,0 +1,100 @@
+/**
+ * screenshot 命令  
+ * 渲染 JSON 数据并截图
+ */
+
+const path = require('path');
+const { takeScreenshot } = require('../lib/screenshot-core');
+
+function showHelp() {
+    console.log(`
+用法:
+  cocos2d-cli screenshot <json文件> [选项]
+
+选项:
+  -o, --output <目录>     输出目录，默认当前目录
+  --width <数值>          视口宽度，默认 750（不支持简写）
+  --height <数值>         视口高度，默认 1334（不支持简写）
+  --full-page             全页截图（默认）
+  --no-full-page          仅视口截图
+  --debug-bounds          叠加节点边界框和名称，方便定位布局问题
+  --timeout <毫秒>        页面加载超时，默认 30000
+  --wait <毫秒>           截图前等待时间，默认 1000
+
+示例:
+  cocos2d-cli screenshot data.json
+  cocos2d-cli screenshot data.json -o ./screenshots
+  cocos2d-cli screenshot data.json --width 1080 --height 1920
+  cocos2d-cli screenshot data.json --debug-bounds
+  cocos2d-cli screenshot data.json --no-full-page
+`);
+}
+
+function parseArgs(args) {
+    const options = {
+        jsonPath: null,
+        outputDir: '.',
+        viewport: { width: 750, height: 1334 },
+        fullPage: true,
+        debugBounds: false,
+        timeout: 30000,
+        waitTime: 1000
+    };
+
+    let i = 0;
+    while (i < args.length) {
+        const arg = args[i];
+        
+        if (arg === '--help' || arg === '-h') {
+            showHelp();
+            process.exit(0);
+        }
+        
+        if (arg === '-o' || arg === '--output') {
+            options.outputDir = args[++i];
+        } else if (arg === '--width') {
+            options.viewport.width = parseInt(args[++i], 10);
+        } else if (arg === '--height') {
+            options.viewport.height = parseInt(args[++i], 10);
+        } else if (arg === '--full-page') {
+            options.fullPage = true;
+        } else if (arg === '--no-full-page') {
+            options.fullPage = false;
+        } else if (arg === '--debug-bounds') {
+            options.debugBounds = true;
+        } else if (arg === '--timeout') {
+            options.timeout = parseInt(args[++i], 10);
+        } else if (arg === '--wait') {
+            options.waitTime = parseInt(args[++i], 10);
+        } else if (!arg.startsWith('-')) {
+            options.jsonPath = arg;
+        }
+        
+        i++;
+    }
+
+    return options;
+}
+
+async function run(args) {
+    const options = parseArgs(args);
+
+    if (!options.jsonPath) {
+        console.error('错误: 请指定 JSON 文件路径');
+        showHelp();
+        process.exit(1);
+    }
+
+    options.jsonPath = path.resolve(options.jsonPath);
+    options.outputDir = path.resolve(options.outputDir);
+
+    try {
+        const result = await takeScreenshot(options);
+        console.log(`\n截图成功: ${result.screenshotPath}`);
+    } catch (error) {
+        console.error(`\n截图失败: ${error.message}`);
+        process.exit(1);
+    }
+}
+
+module.exports = { run };

package/src/lib/cc/CCCanvas.js

@@ -8,35 +8,25 @@ class CCCanvas extends CCComponent {
     constructor() {
         super();
         this.__type__ = 'cc.Canvas';
-        
+
         this._designResolution = new CCSize(960, 640);
         this._fitWidth = false;
         this._fitHeight = true;
     }
 
-    /**
-     * 设置设计分辨率
-     */
-    setDesignResolution(width, height) {
-        this._designResolution.set(width, height);
-        return this;
-    }
-
-    /**
-     * 设置适配模式
-     */
-    setFit(fitWidth, fitHeight) {
-        this._fitWidth = fitWidth;
-        this._fitHeight = fitHeight;
+    setProp(props) {
+        super.setProp(props);
+        if (props.designResolution) {
+            this._designResolution = new CCSize(props.designResolution.width, props.designResolution.height);
+        }
+        if (props.fitWidth !== undefined) this._fitWidth = props.fitWidth;
+        if (props.fitHeight !== undefined) this._fitHeight = props.fitHeight;
         return this;
     }
 
-    /**
-     * 转换为属性面板显示格式
-     */
-    toPanelJSON() {
+    getProp() {
         return {
-            ...super.toPanelJSON(),
+            ...super.getProp(),
             designResolution: {
                 width: this._designResolution?.width ?? 960,
                 height: this._designResolution?.height ?? 640

package/src/lib/cc/CCComponent.js

@@ -8,13 +8,13 @@ class CCComponent extends CCObject {
     constructor() {
         super('');
         this.__type__ = 'cc.Component';
-        
+
         // 关联的节点
         this.node = null;
-        
+
         // 启用状态
         this._enabled = true;
-        
+
         // 唯一标识（22位压缩格式）
         this._id = generateId();
     }
@@ -27,19 +27,12 @@ class CCComponent extends CCObject {
         return this;
     }
 
-    /**
-     * 设置启用状态
-     */
-    setEnabled(enabled) {
-        this._enabled = enabled;
-        return this;
-    }
-
     /**
      * 获取属性（子类重写）
      */
     getProp() {
         return {
+            class: this.__type__,
             enabled: this._enabled
         };
     }

package/src/lib/cc/CCLabel.js

@@ -74,6 +74,31 @@ class CCLabel extends CCComponent {
         };
     }
 
+    /**
+     * 将语义化对齐字符串转为数字
+     * horizontalAlign: left=0, center=1, right=2
+     * verticalAlign:   top=0,  center=1, bottom=2
+     */
+    static parseHAlign(value) {
+        if (typeof value === 'number') return value;
+        switch (String(value).toLowerCase()) {
+            case 'left':   return 0;
+            case 'center': return 1;
+            case 'right':  return 2;
+            default:       return 1;
+        }
+    }
+
+    static parseVAlign(value) {
+        if (typeof value === 'number') return value;
+        switch (String(value).toLowerCase()) {
+            case 'top':    return 0;
+            case 'center': return 1;
+            case 'bottom': return 2;
+            default:       return 1;
+        }
+    }
+
     /**
      * 设置属性
      */
@@ -82,8 +107,8 @@ class CCLabel extends CCComponent {
         if (props.fontSize !== undefined) this.setFontSize(props.fontSize);
         if (props.lineHeight !== undefined) this._lineHeight = props.lineHeight;
         if (props.fontFamily !== undefined) this.setFontFamily(props.fontFamily);
-        if (props.horizontalAlign !== undefined) this._N$horizontalAlign = props.horizontalAlign;
-        if (props.verticalAlign !== undefined) this._N$verticalAlign = props.verticalAlign;
+        if (props.horizontalAlign !== undefined) this._N$horizontalAlign = CCLabel.parseHAlign(props.horizontalAlign);
+        if (props.verticalAlign !== undefined) this._N$verticalAlign = CCLabel.parseVAlign(props.verticalAlign);
         return this;
     }
 

package/src/lib/cc/CCNode.js

@@ -12,37 +12,37 @@ class CCNode extends CCObject {
     constructor(name = 'Node') {
         super(name);
         this.__type__ = 'cc.Node';
-        
+
         // 父子关系
         this._parent = null;
         this._children = [];
-        
+
         // 激活状态
         this._active = true;
-        
+
         // 组件列表
         this._components = [];
-        
+
         // 预制体信息
         this._prefab = null;
-        
+
         // 显示属性
         this._opacity = 255;
         this._color = new CCColor();
         this._contentSize = new CCSize();
         this._anchorPoint = new CCVec2(0.5, 0.5);
-        
+
         // 变换属性
         this._trs = new CCTrs();
         this._eulerAngles = new CCVec3();
         this._skewX = 0;
         this._skewY = 0;
         this._is3DNode = false;
-        
+
         // 分组
         this._groupIndex = 0;
         this.groupIndex = 0;
-        
+
         // 唯一标识（预制体中为空，场景中生成）
         this._id = '';
     }
@@ -193,7 +193,7 @@ class CCNode extends CCObject {
             scaleY: trs[8],
             rotation: this._eulerAngles?.z ?? 0,
             opacity: this._opacity ?? 255,
-            color: this._color ? `#${this._color.r.toString(16).padStart(2,'0')}${this._color.g.toString(16).padStart(2,'0')}${this._color.b.toString(16).padStart(2,'0')}` : '#ffffff'
+            color: this._color ? `#${this._color.r.toString(16).padStart(2, '0')}${this._color.g.toString(16).padStart(2, '0')}${this._color.b.toString(16).padStart(2, '0')}` : '#ffffff'
         };
         return result;
     }
@@ -220,37 +220,6 @@ class CCNode extends CCObject {
         return this;
     }
 
-    /**
-     * 转换为属性面板显示格式（人类可读）
-     */
-    toPanelJSON() {
-        const trs = this._trs?.array || [0, 0, 0, 0, 0, 0, 1, 1, 1, 1];
-        const result = {
-            name: this._name,
-            active: this._active,
-            position: { x: trs[0], y: trs[1] },
-            rotation: this._eulerAngles?.z ?? 0,
-            scale: { x: trs[7], y: trs[8] },
-            anchor: { x: this._anchorPoint?.x ?? 0.5, y: this._anchorPoint?.y ?? 0.5 },
-            size: { w: this._contentSize?.width ?? 0, h: this._contentSize?.height ?? 0 },
-            color: this._color ? `#${this._color.r.toString(16).padStart(2,'0')}${this._color.g.toString(16).padStart(2,'0')}${this._color.b.toString(16).padStart(2,'0')}` : '#ffffff',
-            opacity: this._opacity ?? 255,
-            skew: { x: this._skewX ?? 0, y: this._skewY ?? 0 },
-            group: this._groupIndex ?? 0
-        };
-        
-        // 组件列表
-        if (this._components && this._components.length > 0) {
-            result.components = {};
-            this._components.forEach(c => {
-                const typeName = c.__type__.replace('cc.', '');
-                result.components[typeName] = c.getProp ? c.getProp() : {};
-            });
-        }
-        
-        return result;
-    }
-
     toJSON(indexMap) {
         // 处理引用
         const parent = this._parent ? (indexMap ? { __id__: indexMap.get(this._parent) } : this._parent) : null;

package/src/lib/cc/CCRichText.js

@@ -0,0 +1,44 @@
+const CCComponent = require('./CCComponent');
+
+/**
+ * Cocos Creator RichText 组件
+ * 支持 BBCode 标签语法：
+ *   <color=#ff0000>红色</color>
+ *   <size=30>大字</size>
+ *   <b>加粗</b>  <i>斜体</i>  <u>下划线</u>
+ *   <br/>  换行
+ */
+class CCRichText extends CCComponent {
+    constructor() {
+        super();
+        this.__type__ = 'cc.RichText';
+
+        this._string = '';
+        this._horizontalAlign = 0; // 0=LEFT 1=CENTER 2=RIGHT
+        this._fontSize = 40;
+        this._maxWidth = 0;
+        this._lineHeight = 40;
+        this._imageAtlas = null;
+        this._handleTouchEvent = true;
+    }
+
+    toJSON() {
+        return {
+            __type__: this.__type__,
+            _name: this._name,
+            _objFlags: this._objFlags,
+            node: this.node,
+            _enabled: this._enabled,
+            _string: this._string,
+            _horizontalAlign: this._horizontalAlign,
+            _fontSize: this._fontSize,
+            _maxWidth: this._maxWidth,
+            _lineHeight: this._lineHeight,
+            _imageAtlas: this._imageAtlas,
+            _handleTouchEvent: this._handleTouchEvent,
+            _id: this._id
+        };
+    }
+}
+
+module.exports = CCRichText;

package/src/lib/cc/CCSprite.js

@@ -1,7 +1,8 @@
 const CCComponent = require('./CCComponent');
-const CCColor = require('./CCColor');
 const CCVec2 = require('./CCVec2');
 
+const default_sprite_splash = 'a23235d1-15db-4b95-8439-a2e005bfff91';
+
 /**
  * Cocos Creator Sprite 组件
  */
@@ -9,19 +10,21 @@ class CCSprite extends CCComponent {
     constructor() {
         super();
         this.__type__ = 'cc.Sprite';
-        
+
         this._materials = [{ __uuid__: 'eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432' }];
         this._srcBlendFactor = 770;
         this._dstBlendFactor = 771;
         this._spriteFrame = null;
         this._type = 0;
-        this._sizeMode = 1;
+        this._sizeMode = 0;
         this._fillType = 0;
         this._fillCenter = new CCVec2();
         this._fillStart = 0;
         this._fillRange = 0;
         this._isTrimmedMode = true;
         this._atlas = null;
+
+        this.setSpriteFrame(default_sprite_splash);
     }
 
     /**
@@ -34,7 +37,7 @@ class CCSprite extends CCComponent {
 
     /**
      * 设置尺寸模式
-     * 0: CUSTOM, 1: RAW, 2: TRIMMED
+     * 0: CUSTOM, 1: TRIMMED, 2: RAW
      */
     setSizeMode(mode) {
         this._sizeMode = mode;

package/src/lib/cc/index.js

@@ -16,6 +16,7 @@ const CCCamera = require('./CCCamera');
 const CCSprite = require('./CCSprite');
 const CCLabel = require('./CCLabel');
 const CCButton = require('./CCButton');
+const CCRichText = require('./CCRichText');
 
 module.exports = {
     CCObject,
@@ -36,5 +37,6 @@ module.exports = {
     CCCamera,
     CCSprite,
     CCLabel,
-    CCButton
+    CCButton,
+    CCRichText
 };

package/src/lib/json-parser.js

@@ -3,7 +3,7 @@
  * 将简化JSON转换为CCNode对象树
  */
 
-const { CCNode, CCCanvas, CCWidget, CCSprite, CCLabel, CCButton, CCCamera } = require('./cc');
+const { CCNode, CCCanvas, CCWidget, CCSprite, CCLabel, CCButton, CCCamera, CCRichText } = require('./cc');
 const { parseColor } = require('./utils');
 
 /**
@@ -11,13 +11,14 @@ const { parseColor } = require('./utils');
  */
 function createComponent(type) {
     switch (type.toLowerCase()) {
-        case 'canvas': return new CCCanvas();
-        case 'widget': return new CCWidget();
-        case 'sprite': return new CCSprite();
-        case 'label': return new CCLabel();
-        case 'button': return new CCButton();
-        case 'camera': return new CCCamera();
-        default: return null;
+        case 'canvas':    return new CCCanvas();
+        case 'widget':    return new CCWidget();
+        case 'sprite':    return new CCSprite();
+        case 'label':     return new CCLabel();
+        case 'button':    return new CCButton();
+        case 'camera':    return new CCCamera();
+        case 'richtext':  return new CCRichText();
+        default:          return null;
     }
 }
 
@@ -59,7 +60,25 @@ function applyComponentProps(comp, props, node) {
             case 'sizeMode':
                 if (comp._sizeMode !== undefined) comp._sizeMode = value;
                 break;
+            case 'horizontalAlign':
+                // 支持语义化字符串：left / center / right
+                if (comp._N$horizontalAlign !== undefined) {
+                    comp._N$horizontalAlign = CCLabel.parseHAlign(value);
+                } else if (comp._horizontalAlign !== undefined) {
+                    comp._horizontalAlign = CCLabel.parseHAlign(value);
+                }
+                break;
+            case 'verticalAlign':
+                // 支持语义化字符串：top / center / bottom
+                if (comp._N$verticalAlign !== undefined) {
+                    comp._N$verticalAlign = CCLabel.parseVAlign(value);
+                } else if (comp._verticalAlign !== undefined) {
+                    comp._verticalAlign = CCLabel.parseVAlign(value);
+                }
+                break;
             case 'color':
+                // 兼容写法：组件内的 color 同步到节点颜色
+                // （Cocos 中文字/富文本颜色本质是节点颜色，不是组件属性）
                 if (node) {
                     const parsed = parseColor(value);
                     if (parsed && node._color) {