在构建游戏界面方面，业界有很多成熟的工作流程。有像 .cc 和 .js 这样的解决方案，完全将界面和交互留给设计，也有为此类设计师提供的跨平台界面编辑器。 ，有基于引擎界面编辑器的组件化解决方案，也有利用引擎的插件系统引入设计背景图片作为布局参考的便捷解决方案。从库开发到封装的界面编辑器，我们的游戏界面构建效率其实是非常高的sketch怎么合并图层，但是从设计稿开始，业界就一直没有停止过尝试，一些比较主流的引擎像laya、unity等相关插件都比较少-用于从设计草稿生成屏幕的ins。这次，一鸣利用工具链实现了一个界面搭建的插件。

它是一个附带的命令行工具，我们可以使用它对文档执行某些操作，例如读取设计稿的图层节点、导出资源等。

const execSync = require("child_process").execSync;
const BINARY_PATH = "/Applications/Sketch.app/Contents/Resources/sketchtool/bin/sketchtool";

// 读取稿子的图层信息
const scheme = execSync(`${BINARY_PATH} list layers ./test.sketch`).toString();
console.log(scheme)

获取结构

您还可以使用它导出资源和指定资源。

const execSync = require("child_process").execSync;
const BINARY_PATH = "/Applications/Sketch.app/Contents/Resources/sketchtool/bin/sketchtool";

// 导出画板artboards、页面pages、切片slices等
execSync(`${BINARY_PATH} export pages ./test_sketch.sketch --output=./output`);

// 根据图层id，精确导出某一个图层
const itemId = "8F64B8D9-21BB-4202-984E-488DB00A381E";
execSync(`${BINARY_PATH} export layers ./test_sketch.sketch --output=./output --item=${itemId}`);

出口资源

由于它与and强相关，不同版本的and可能不兼容，所以不建议将其作为单独的依赖，而应参考用户本地的安装路径。另外，网上有很多封装的阅读工具，比如node-等，但是说到资源导出，还是少不了的。目前还没有发现这个同义词有比较完整的轮子功能。有兴趣的同学可以封装一下。 。

有了结构描述文件+设计稿的资源，在引擎界面编辑器上还原就比较简单了。有两种方法。一种是直接转换，将设计稿描述文件转换到引擎界面编辑器中。服务器的火灾描述文件和引擎生成的界面描述语言的源代码均不开源。我们需要自己进行比较和转换，这将非常耗费人力并且难以维护。第二种方式是使用引擎提供的编辑器扩展功能。在插件运行过程中，调用引擎的面板进程，递归遍历并动态插入节点到场景中，还原界面。阴阳这次的演示是基于第二种。两个进程之间的简单信息流如下：

获取结构

进程间通信是通过引擎公开的IPC机制。实际上是在插件进程中对资源进行处理，然后在面板进程中加载​​资源并递归插入节点。这部分的代码如下：

/**
 * 添加节点到画面中
 * @param {*} parent 父节点
 * @param {*} node 要插入的节点
 */
function addNodeToScene(parent, node) {
  const { id, props, children } = node;
  const { width, height } = props.style;
  const { x, y, source } = props.attrs;

  const ccNode = new cc.Node();
  ccNode.name = id;
  ccNode.width = width;
  ccNode.height = height;
  ccNode.x = x;
  ccNode.y = y;

  parent ? parent.addChild(ccNode) : cc.find('Canvas').addChild(ccNode);

  if (source) {
    
    const dbPath = source.match(/\w+.png$/)[0];

    cc.resources.load(dbPath, cc.SpriteFrame, (err, spriteFrame) => {
      const sprite = ccNode.addComponent(cc.Sprite);
      sprite.spriteFrame = spriteFrame;
    });
  }

  children.forEach((child) => addNodeToScene(ccNode, child));
}

您可以点击原文跳转查看完整的demo代码。这是一个演示级演示，仅生成节点和映射。有兴趣的读者可以自行扩展。该demo没有实现生成JSON的步骤，而是直接读取给定的JSON（由第三方工具生成）。您可能有一些疑问。文章开头提到设计稿的节点信息是可以读取的，那么直接递归遍历节点不就可以生成对应的描述文件了吗？

对于游戏开发场景来说，因为游戏中的基本单元是，所以对于阅读设计稿的要求会比较低。只需要准确生成图片并导出即可sketch怎么合并图层，所以很多插件都是粗暴的通过这种方式实现的。 ，但这也导致该类插件的界面还原度很低，无法在生产环境中使用。因为简单的读取和导出设计稿的结构已经不能满足需要。最直接的原因就是设计稿中会存在大量的冗余节点，因为草稿中还节省了设计者创建的一些中间流程，比如大量的路径。导出时需要筛选未合并的图层。同时，设计者在创建时还需要按照一定的规范来约束层次关系，或者通过标记等方式对节点进行标注等。除了创建规范之外，还存在一些标识问题，比如做层的大小等。不包括阴影，切割后如何同步层的box的宽度和高度等，这些细节的实现需要更多的规范和程序处理。虽然这种还原设计稿的方法比较粗糙，但在一些游戏场景比较简单、需要量产的绘本游戏中，这套工作流程标准化后还是有其应用场景的。我们可以参考一下行业的领军人物。它是如何实现的。

近年来前端一个非常前沿的方向就是前端智能化，利用AI/CV技术让前端工具链具备理解能力，从而辅助开发，提高研发效率。其中，基于设计稿的智能布局和构件智能识别就是其中之一。 。在上周的腾讯TLC大会上，一鸣了解到淘宝已经在阿里巴巴落地，并产生了巨大的商业价值。它开源了一套设计约束规范和相应的插件。一鸣demo中的都是通过的。

链接拆解

但对于游戏来说，我们可能不需要这么细粒度的设计稿识别。比如一个圆角按钮，在游戏中应该是圆角矩形，但是通过的识别可能并不能提取成图片，因为对于web来说，使用css来实现是常态。它还提供DSL扩展并支持用户定义的语言。如果有一天我们看到有小伙伴支持一款真正的（高识别、高还原）一键工具，那绝对是一件很棒的事情。版本可通过查看原文进行跳转。

甚至

许多

精制

颜色

如有侵权请联系删除！