跳转至

结构节点与 Wide Bus

视频教程 —— 即将推出

一个槽位可以围绕它的 drawing 搭出四个层级节点。本页讲每一个是干什么的、它们怎么排序,以及决定你的 Node View 是否可读的那部分 —— OSA 把它们放在哪

Inspector 里的 Hierarchy Nodes

四个组件

  • Peg —— P


    变换。命名为 <name>-P。携带 PositionSeparate / 3D Path)、ScaleSeparate / Locked)、Enable 3DExclude AutoPivot

  • Group —— G


    作用域。命名为 <name>-G。group 是让一个槽位成为自足单元的东西 —— 在它里面的一切就在它里面。

  • Composite —— C


    汇聚点。命名为 <name>-C。携带 composite 模式和它的 Order

  • Backdrop —— BD


    Node View 里围住这条分支的矩形,带颜色和一条注记。纯粹是组织用的 —— 也是布局引擎由内向外量尺寸的对象。

Peg Order:Parent 还是 Child

Peg 和 Group 可以互换位置,由 Peg 区块上的 Order 下拉框决定:

Order 结果 读作
Outside Group Peg → Group → 内容 peg 带动整个 group
Inside Group Group → Peg → 内容 peg 带动内容,在 group 的作用域之内

Details 列始终反映你做的选择:(Peg > Group > Read)(Group > Peg > Read)

Composite 的 Order 与模式

Composite 区块带着同样的 Order 选择(Inside Group / Outside Group),更重要的是带着 composite 模式

模式 作用
As Bitmap 把它的输入压平成一张位图
As Seamless Bitmap 同上,但相邻画稿之间没有接缝瑕疵
As Vector 让矢量数据穿过 composite 保留下来
Pass Through 不合成 —— 把输入原样向上传

这些写的是关键字,不是序号

这些标签与 Harmony 存储值之间的映射是在一套 Harmony 24 安装上实测出来的,不是猜的 —— 每个工具都带着的那张映射表里,四条中有三条是错的(As Vector 写的是 Seamless 的值;Pass Through 写的是 Vector 的值)。如果某个 composite 表现得像另一个和它标签不符的模式,那就是该怀疑的那类 bug,而 OSA 站在实测的那一边。

两套层级,并行

Node View 同时承载两张图,OSA 也把它们当作两张来布局:

层级 颜色 连接 规则
Input / Transform 🟢 绿 Peg → 子级 缩进意味着子级
Output / Composite 🔵 蓝 Comp → 下方的兄弟 comp 汇聚它下方的兄弟

它们是分开的,因为一个 peg 可以驱动多个互不相同的合成。变换和合成不是同一棵树,而把它们画成一棵,正是手工搭的图变得不可读的原因。

composite 汇聚什么

一个 comp 收子级还是收兄弟,只取决于一件事:这个槽位有没有一个绿色容器来创建作用域。

槽位有 comp 汇聚
单独的 C 下方的兄弟
D-C 下方的兄弟
BD-CBD-D-C 下方的兄弟 —— backdrop 是视觉的
P-CG-CP-D-CBD-P-C 子级

只有 PG 是绿色容器。 backdrop 画一个框;它不拥有任何连接,所以它从不改变谁汇聚什么。

当一个 comp 在同一层遇到另一个 comp 时,当前区块被冲刷 —— 那就是区块边界。

完整规则,连同流向和端口顺序:汇聚与 sibling aggregator

The Wide Bus

OSA 不会把节点丢在 Harmony 随便想放的地方。它把 Node View 当作一个逻辑矩阵并预先分配空间,让图从左往右流动,而不是堆成一坨。

占用者
顶行 master peg / master group / master drawing —— 看这个 super node 有哪个
中间行 车间地面:drawing、group 和小节点,并排排列
底部 composite,偏移到它所汇聚的东西下方
FX 带 五个预留位(OPCUTBLDGLWBLR),位于那些直接挂在 backdrop 或 super node 本身之下的 composite 下方

因为 FX 带是预留的而不是按需分配的,之后再加效果不会把图的其余部分往旁边挤。

可扩展的 backdrop

backdrop 生来就有三个节点列的最小宽度,并且刻意在最后一个内容节点和最终的 composite 之间留出战术性的空白。那段空隙不是马虎 —— 它是你以后往里拖新节点而不破坏布局的地方。

套娃:嵌套的 backdrop

backdrop 可以包含 backdrop,尺寸是自底向上、由内向外计算的。

常量
COL_WIDTH 200 px 一列
ROW_HEIGHT 80 px 一行
PAD_SIDE 50 px backdrop 侧边留白,每边
PAD_TOP 100 px 留给 backdrop 标题的空间
PAD_BOTTOM 150 px 留给 comp 和 FX 区域的空间
GAP 20 px 兄弟之间的间距

宽度

  • 一个叶子(drawing,或没有 backdrop 的 peg)是 1 列;
  • 一个嵌套的 backdrop 是 sum(children) + gaps + 2 × PAD_SIDE,向上取整到整列;
  • 父 backdrop 对它子级的已算出的宽度套用同一个公式。

高度

  • 一个叶子是 2 行(peg 行 + drawing 行);
  • 一个 backdrop 是 PAD_TOP + max(children heights) + PAD_BOTTOM

根本规则: 嵌套的 backdrop 从不从父级继承宽度。每一个都量自己的内容,而父级去适应它的子级。正是这一点让一个深度嵌套的场景出来时一切都看得见,而不是被裁掉或者相互重叠。

Root-BD  (computed last)
├── Nested-BD-A  (4 cols)
│   ├── D1  (1 col)
│   └── D2  (1 col)          → inner 2 cols + gap → 4 with padding
├── Nested-BD-B  (6 cols)
│   ├── Sub-BD  (3 cols)
│   │   └── D3  (1 col)
│   └── D4  (1 col)          → inner 5 cols + gap → 6 with padding
└── Sibling-Peg (2 cols)

Root inner = 4 + 6 + 2 + gaps = 14 cols
Root total = max(14, MIN_WIDTH) + padding

Backdrop 的颜色与注记

Backdrop 区块

Backdrop 区块带着一个名称、一个颜色色块和一条注记。颜色是 Node View 里唯一能挺过重新打开和一次交接的东西 —— 用它来传达你希望一个陌生人在三秒内读到的信息。