我创建了一个开源包，来为 Unity UI Toolkit 提供缺失的 CSS 特性（如 Flexbox Gap 和 Skew 布局）-墙外贴吧

大家好，我最近一直在使用 Unity 的 UI Toolkit，遇到了许多令人沮丧的限制，例如缺乏原生的 gap 属性和难以绘制倾斜/扭曲的形状。为了解决这个问题，我创建了 Playsmart UI Toolkit Extensions，这是一个开源库，它添加了这些布局工具和自定义组件到你的项目中。仓库链接：github.com/Drwuu/playsmart-unity-uitoolkit-extensions OpenUPM 链接：openupm.com/packages/com.playsmart.uitoolkit-extensions/（或通过 Git URL 安装）

关键功能

<ps:Gap>（模拟 Flexbox Gap）
Unity USS 不原生支持 gap。如果你写入它，会得到未知属性警告。这一元素读取一个自定义 --gap 属性，并动态处理布局间距。
Flex-Direction 优先级：自动检测父容器是否是 Row、Column、RowReverse 或 ColumnReverse，并应用正确边缘的边距。
显示-感知间距：如果子元素有 display: none（例如过滤列表项），间距管理器会忽略它并重置边距，以避免双倍间距或空白边距块。
清除边距：自动清除最后可见子元素的间距，以防止布局偏移bug。
<ps:Skew> & <ps:SkewButton>（倾斜容器 & 按钮）
标准 CSS transform: skewX 倾斜子元素，需要在标签上写入反向倾斜的hack以保持它们的直立状态。
直立内部：组件使用 MeshGenerationContext 绘制一个倾斜的向量背景，同时保持所有文本和子元素的直立状态和清晰度。
倾斜点击检测：覆盖 ContainsPoint 以使用三角函数边界检测。点击仅在鼠标位于倾斜形状内部时才注册，精确匹配正负角度的视觉几何学。
清晰边界：包含形状在布局盒的边界内，以防止视觉溢出和裁切在父元素中。

快速示例

使用 Gap 在 UXML & USS 中：

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:ps="Playsmart.UIToolkit">
  <ps:Gap class="flex-row-container">
    <ui:VisualElement class="box" />
    <ui:VisualElement class="box" />
    <ui:VisualElement class="box" />
  </ps:Gap>
</ui:UXML>

.flex-row-container {
  flex-direction: row;
  --gap: 20; /* 动态间距子元素20px */
}

使用 SkewButton 在 UXML & USS 中：

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:ps="Playsmart.UIToolkit">
  <ps:SkewButton name="ConfirmButton" text="START GAME" class="slanted-btn"/>
</ui:UXML>

.slanted-btn {
  width: 150px;
  height: 45px;
  --skew-angle: 15; /* 倾斜背景15度 */
  --skew-fill-color: #1e1e32;
  --skew-stroke-color: #00f0ff;
  --skew-stroke-width: 1.5;
}

开放贡献！

我的目标是不断扩展这个包成为UI Toolkit的完整布局和样式扩展库。如果你解决了其他USS/UXML问题或想添加组件，请自由打开一个问题或提交一个拉取请求！

https://preview.redd.it/w5m7lri64tdh1.png?width=1917&format=png&auto=webp&s=dca7b7bc46a58ef2626dcbe1eee7b1386752cfbc

我创建了一个开源包，来为 Unity UI Toolkit 提供缺失的 CSS 特性（如 Flexbox Gap 和 Skew 布局）

评论 (0)

推荐帖子