随笔
主页
  • Unity
  • 前端文章

    • JavaScript
    • Vue
  • 学习笔记

    • 《JavaScript教程》笔记
    • 《JavaScript高级程序设计》笔记
    • 《ES6 教程》笔记
  • 数据库

    • Redis
  • Html 文档
  • CSS 文档
  • Vue 文档
  • TypeScript
  • Golang
  • 版本控制

    • Git 文档
    • Svn 文档
  • 技术文档

    • Markdown语法
    • GitHub技巧
    • Nodejs
  • 分类
  • 标签
  • 时间线
  • 目录结构
  • 配置和约定
  • 主题配置
  • 首页配置
  • front matter
  • 目录页配置
  • 摘要
  • 主题颜色
  • 评论栏
  • Markdown扩展
GitHub
主页
  • Unity
  • 前端文章

    • JavaScript
    • Vue
  • 学习笔记

    • 《JavaScript教程》笔记
    • 《JavaScript高级程序设计》笔记
    • 《ES6 教程》笔记
  • 数据库

    • Redis
  • Html 文档
  • CSS 文档
  • Vue 文档
  • TypeScript
  • Golang
  • 版本控制

    • Git 文档
    • Svn 文档
  • 技术文档

    • Markdown语法
    • GitHub技巧
    • Nodejs
  • 分类
  • 标签
  • 时间线
  • 目录结构
  • 配置和约定
  • 主题配置
  • 首页配置
  • front matter
  • 目录页配置
  • 摘要
  • 主题颜色
  • 评论栏
  • Markdown扩展
GitHub
  • 基础

  • 资源导入

  • 2D

    • 2D游戏
    • Sprite Creator
    • Sprite Editor
    • Sprite Packer
    • Sorting Group
    • Sprite Slice
      • 设置九宫切片精灵
      • 对精灵进行 9 切片
      • 九宫格切片和碰撞体
        • 限制和已知问题
    • Sprite Mask
    • Sprite Atlas
  • Physical2D

  • UGUI

  • Animation

  • Animator

  • Unity
  • 2D
dong
2021-01-16

Sprite Slice

# 九宫格图像

# 设置九宫切片精灵

首先,需要确保 Mesh Type 设置为 Full Rect。要应用此设置,请选择精灵,然后在 Inspector 窗口中单击 Mesh Type 下拉选单并选择 Full Rect。如果 Mesh Type 设置为 Tight,由于设置 9 切片精灵时精灵渲染器 (Sprite Renderer) 生成和渲染精灵的方式,9 切片可能运行不正常

使用 Sprite Editor 窗口可定义精灵的边框(即,想要定义平铺区域的位置,例如墙壁或地板瓦片)。为此,请使用 Sprite 控制面板的 L、R、T 和 B 字段(分别表示左、右、上和下)。或者,单击并拖动顶部、底部和两侧的绿点

单击 Sprite Editor 窗口的顶栏中的 Apply。关闭 Sprite Editor 窗口,然后将精灵从 Project 窗口拖入 Scene 视图,从而开始对其进行处理。

# 对精灵进行 9 切片

在 Scene 视图或 Hierarchy 窗口中选择精灵。在 Inspector 窗口中,导航到 Sprite Renderer 组件,然后更改 Draw Mode 属性。

默认情况下,此属性设置为 Simple;要应用 9 切片,根据所需要的行为,请将其设置为 Sliced`` 或Tiled`。以下部分使用下面所示的精灵来说明每个选项的行为:

  • Simple 这是默认的精灵渲染器行为。当图像尺寸发生变化时,图像朝所有方向缩放。Simple 不用于 9 切片。

  • Sliced 在 Sliced 模式下,角点的大小保持不变,精灵的顶部和底部水平拉伸,精灵的两侧垂直拉伸,精灵的中心水平和垂直拉伸,从而适应精灵的大小。将精灵的 Draw Mode 设置为 Sliced 时,可以选择使用精灵渲染器或矩形变换组件工具上的 Size 属性来更改大小。这种情况下,仍然可以使用变换组件属性或变换组件工具来缩放精灵;但是,变换组件会在不应用 9 切片的情况下缩放精灵。

  • Tiled 在 Tiled 模式下,精灵保持相同的大小,不会缩放。取而代之的行为是,精灵的顶部和底部水平重复,精灵的两侧垂直重复,精灵的中心以平铺形式重复,从而适应精灵的大小。将精灵的 Draw Mode 设置为 Sliced 时,可以选择使用精灵渲染器或矩形变换组件工具上的 Size 属性来更改大小。这种情况下,仍然可以使用变换组件属性或变换组件工具来缩放精灵;但是,变换组件会在不应用 9 切片的情况下缩放精灵。

    • Tile Mode 当 Draw Mode 设置为 Tiled 时,使用 Tile Mode 属性可控制当精灵的尺寸发生变化时各部分的重复方式。
      • Continuous: 默认情况下,Tile Mode 设置为 Continuous。当精灵的大小改变时,重复部分在精灵中均匀重复。

      • Adaptive 当 Tile Mode 设置为 Adaptive 时,重复部分仅在精灵的尺寸达到 Stretch Value 时才进行重复。
        Stretch Value 0.1:

        Stretch Value 0.5:

# 九宫格切片和碰撞体

如果精灵已附加 Collider2D,需要确保在更改精灵的尺寸时,Collider2D 随之改变。

Unity 中支持 9 切片的 Collider2D 组件只有 2D 盒型碰撞体 (Box Collider 2D) 和 2D 多边形碰撞体 (Polygon Collider 2D)。这两个 Collider2D 具有 Auto Tiling 复选框。要确保 Collider2D 组件设置为支持 9 切片,请选择要应用组件的精灵,导航到 Inspector 窗口中的 Collider2D,然后勾选 Auto Tiling 复选框。这样可以自动更新 Collider2D 的形状,意味着精灵的尺寸变化时,会自动重新调整形状。如果没有启用 Auto Tiling,即使精灵的尺寸变化,Collider2D 也会保持相同的形状和大小。

# 限制和已知问题

  • 只有两个 Collider2D 支持 9 切片,分别为 BoxCollider2D 和 PolygonCollider2D。

  • 精灵渲染器的 Draw Mode 设置为 Sliced 或 Tiled 时,无法编辑 BoxCollider2D 和 PolygonCollider2D。Inspector 窗口中会禁用编辑功能,并告知由于 Collider2D 由精灵渲染器组件的平铺属性所驱动,因此无法对其进行编辑。

  • 以 Auto Tiling 模式重新生成该形状时,其他边缘可能出现在 Collider2D 的形状之内。这可能会对碰撞产生影响。

#unity
Sorting Group
Sprite Mask

← Sorting Group Sprite Mask→

Theme by Vdoing | Copyright © 2021-2023 Evan Dong MIT License | 粤ICP备2021052092号
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式
×