随笔
主页
  • 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 Editor
      • 功能
      • 使用编辑
        • 属性
      • 多边形大小调整
        • Change Shape切换形状
    • Sprite Packer
    • Sorting Group
    • Sprite Slice
    • Sprite Mask
    • Sprite Atlas
  • Physical2D

  • UGUI

  • Animation

  • Animator

  • Unity
  • 2D
dong
2021-01-16

Sprite Editor

# Sprite Editor

有时候精灵纹理只包含一个图形元素,但将几个相关图形组合成单个图像通常更方便。例如,图像可以包含单个角色的组成部分,就像汽车的车轮独立于车身移动一样。Unity为此提供了一个Sprite Editor 来从合成图像中提取元素。

注意:

  1. 确保要编辑的图形已将其 Texture Type 设置为Sprite(2D and UI)。
  2. 具有多个元素的精灵纹理需要在Inpsector中将 Sprite Model设置为 Multiple。

# 打开 Sprite Editor

  1. 从 Project 视图 中选择要编辑的2D图像。
  2. 单击Texture Import Inspector中的 Sprite Editor, 随后将显示 Sprite Editor。

随合成图像一起还会在窗口丁兰中显示大量控件。 右上角的滑动条控制缩放,而其左侧的颜色条按钮用于选择是查看图像本身还是Alpha级别。最右边的滑动调控制纹理的像素化(Mipmap)。向左移动滑动条会降低精灵纹理的分辨率。最重要的控件还是左上角的 Slice 菜单,此控件提供了自动分离图像元素的选项,最后 Apply和Revert按钮用于保存或放弃所做的任何更改。

# 功能

  • Sprite Editor: 精灵编辑器

  • Slice: 切片模式

    • Type: 类型

    • Automatic

    • Grid By Cell Size

    • Grid By Cell Count

    • Pivot: 轴心

    • Center: 中心

    • Top Left: 左上

    • Top: 顶部

    • Top Right: 右上

    • Left: 左

    • Right: 右

    • Bottom Left: 坐下

    • Bottom: 底部

    • Bottom Right: 右下

    • Cusstom: 自定义

      • Custom Pivot: 自定义轴心
      • X
      • Y
    • Method:方法

    • Delete Existing: 删除现有

    • Smart: 智能

    • Safe: 安全

      • Slice: 切片
    • Trim: 剪裁(裁剪选定的矩形框 快捷键 T)

  • Custom Outline: 自定义轮廓

  • Snap: 捕捉

  • Outline Tolerance: 轮廓公差 0 ~ 1

  • Generate: 生成

  • Custom Physics Shape: 自定义物理性状

  • Snap: 捕捉

  • Outline Tolerance: 轮廓公差 0 ~ 1

  • Generate: 生成

# 使用编辑

使用编辑最直接方式是手动识别元素, 如果单击图像,则会一个矩形形状选择区域,该区域的四个角有控制柄。通过拖动矩形的控制柄或边缘可以围绕特定元素调整矩形大小。在隔离一个元素后,可通过在图像的单独部分拖拽出一个新矩形来添加另一个元素。选择了一个矩形后会窗口右下角出现一个面板,如下图所示:(只在Sprite Editor模式下生效)

# 属性

  • Name: 图像名称

  • Position: 位置信息

  • X: 左下角X位置

  • Y: 左下角y位置

  • W: 宽

  • H: 高

  • Border: 边界

  • Pivot: 轴心

  • Center: 中心

  • Top Left: 左上

  • Top: 顶部

  • Top Right: 右上

  • Left: 左

  • Right: 右

  • Bottom Left: 坐下

  • Bottom: 底部

  • Bottom Right: 右下

  • Cusstom: 自定义

    • Custom Pivot: 自定义轴心
    • X
    • Y
  • Pivot Unit Mode: 轴心单元模式

  • Normalized: 已经归一化

  • Pixels: 像素

注意:: 仅UI系统支持边框, 而2D SpriteRenderer 不支持边框。

# 多边形大小调整

注:

  1. 确保要编辑的图形已将其 Texture Type 设置为Sprite(2D and UI)。
  2. Inpsector中将 Sprite Model设置为 Polygon。

多边形图像设置如下:

# Change Shape切换形状

唤醒面板:

Sides: 多边形数量

#unity
Sprite Creator
Sprite Packer

← Sprite Creator Sprite Packer→

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