Sprite Editor图片编辑器的使用_unity基础开发教程

这篇具有很好参考价值的文章主要介绍了Sprite Editor图片编辑器的使用_unity基础开发教程。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

什么是Sprite Editor

SpriteEditor是Unity引擎中的一个工具,用于创建和编辑2D图片。它提供了一系列功能,可以对图片进行剪裁、切割、翻转、旋转、调整大小等操作,以及设置图片的碰撞检测形状和渲染模式。

SpriteEditor可以帮助开发者将多张图片合并成动画精灵,并为每一帧设置播放时间和循环方式。

如果项目不是2D的,是3D项目,则可能要在Package Manager安装2D Sprite插件才能使用Sprite Editor。在Sprite Editor中进行了任何的操作,都必须点击右上角得Apply按钮才会生效,一定要记得,否则就白改了。Revert按钮则用于还原。

安装插件(3D项目)

如果你的项目是3D项目需要装一下插件,2D项目在创建的时候会自动安装,2D项目可以跳过这部分。(这里用之前的场景进行演示)

3D项目在选中图片进行切割编辑的时候会弹出一个提示窗口,提示你需要进行安装插件,下面教大家进行插件的安装。
sprite editor,Unity开发,编辑器,unity,游戏引擎,unity开发,游戏开发

  1. 选择Window,点击Package Manager
    sprite editor,Unity开发,编辑器,unity,游戏引擎,unity开发,游戏开发
  2. 窗口左上角的Packages属性选择Unity Registry(unity注册表),
    找到2D Sprite插件,点击选中一下,
    点击右下角进行Install安装一下
    sprite editor,Unity开发,编辑器,unity,游戏引擎,unity开发,游戏开发
    sprite editor,Unity开发,编辑器,unity,游戏引擎,unity开发,游戏开发
  3. 安装完成之后再选中图片,点击Sprite Editor就会出现图片编辑窗口了。
    sprite editor,Unity开发,编辑器,unity,游戏引擎,unity开发,游戏开发

切片方式

这里只演示Sprite Editor部分,其他的三个放在后面的文章讲解。
sprite editor,Unity开发,编辑器,unity,游戏引擎,unity开发,游戏开发


首先说一下图片切割方式。如果图片是多图,图片的Sprite Mode要选择Multiple多图。改完别忘了Appply一下

sprite editor,Unity开发,编辑器,unity,游戏引擎,unity开发,游戏开发

这里图片切割方式有四种

  • Automatic:自动切片
  • Grid By Cell Size:按照像素大小进行切片
  • Grid By Cell Count:按照个数进行切片
  • Isometric Grid:等距网格切片

sprite editor,Unity开发,编辑器,unity,游戏引擎,unity开发,游戏开发

Automatic:自动切片

Pivot表示图片的轴心位置,可选值有Center、Top Left、…(图片上那些,不一一列举了),比较特殊的是Custom自定义的,选中Custom之后可以在Custom Pivot设置具体位置进行微调。

Method表示切片的处理方式,可选值有:Delete ExistingSmartSafe

  • Delete Existing(删除现有):选择该方式时,会删除现有的切片,并根据设置的切片参数创建新的切片。这意味着在Sprite Editor中创建新的切片时会覆盖原有的切片。
  • Smart(智能):选择该方式时,Unity会根据已有的切片和设置的切片参数创建新的切片,同时保留原有的切片。这种方式下,如果新创建的切片与原有的切片有重叠,Unity会智能地处理重叠部分,以避免覆盖原有的切片。
  • Safe(安全):选择该方式时,Unity会检查新创建的切片是否与原有的切片有重叠,如果有重叠,会提示开发者进行处理。这种方式下,不会覆盖原有的切片,但需要进行额外的检查和处理。

这些切片方式可以根据实际需求进行选择。如果需要覆盖原有的切片并创建新的切片,可以选择Delete Existing方式;如果希望保留原有的切片并智能地处理重叠部分,可以选择Smart方式;如果需要避免覆盖原有的切片并进行额外的检查和处理,可以选择Safe方式。

sprite editor,Unity开发,编辑器,unity,游戏引擎,unity开发,游戏开发

Grid By Cell Size:按照像素大小进行切片

顾名思义,就是按照图片的像素值进行切割。下面具体讲一下各个属性的用法。

  • Pixel Size(像素大小):该属性用于指定每个单元格的像素大小。开发者可以输入一个正整数,表示每个单元格的宽度和高度(以像素为单位)。例如,如果将Pixel Size设置为32,则每个单元格的宽度和高度都为32像素。
  • Offset(偏移量):该属性用于设置每个单元格的偏移量。偏移量可以理解为每个单元格距离图片左上角的相对位置。开发者可以输入X和Y方向的偏移量,以确定每个单元格的位置。
  • Padding(间距):该属性用于设置单元格之间的间距。间距可以理解为每个单元格之间的空白区域。开发者可以输入X和Y方向的间距,以确定单元格之间的间距大小。
  • Keep Empty Rects(保留空矩形区域):该属性用于确定是否保留空的矩形区域。如果勾选该选项,则会在图片中保留空的矩形区域,即不进行切片操作。这可以用于创建背景或空白区域。如果不勾选该选项,则会对图片进行切片操作,不考虑空矩形区域。

PivotCustom PivotMethod属性前面说过这里不再进行说明,这些属性可以根据实际需求进行设置,以创建符合项目要求的切片效果。通过调整这些属性,可以控制切片的细节和效果。

sprite editor,Unity开发,编辑器,unity,游戏引擎,unity开发,游戏开发

Grid By Cell Count:按照个数进行切片

根据我们输入的Column(行)和Row(列)的数量进行切片。

sprite editor,Unity开发,编辑器,unity,游戏引擎,unity开发,游戏开发

Isometric Grid:等距网格切片

切片方式以交替排列的半高菱形行中排列,切片后的图片将具有与半高菱形相对应的自定义轮廓和物理形状。

这是一种特殊的切片方式,它允许我们将图片按照等距网格进行切割。这种切片方式常用于制作像3D的2D游戏(下面的图片这种)的地图和场景,可以方便地创建等距视角下的游戏元素。

sprite editor,Unity开发,编辑器,unity,游戏引擎,unity开发,游戏开发

等距网格切片的特点是将图片按照等距的网格进行划分,每个单元格的大小相同,且每个单元格的宽高比相同。这样可以保证在等距视角下,每个元素的大小和位置都是一致的,从而呈现出更加规整和美观的效果。

这里有一个新的属性:Is Alternate,用于指定是否按照交替顺序进行切片。如果勾选该选项,则会在每次迭代时沿相反的方向进行切片,这样可以创建出更加多样化的切片效果。


补充说明一下什么是等距视角

等距视角(Isometric Perspective) 是一种特殊的视角,它允许观察者从正面和顶面对一个对象进行观察。在等距视角下,对象的长宽比与实际比例相同,但观察者看到的图像是经过透视变形的。这种视角常用于2D游戏的场景和地图制作,因为它可以呈现出立体感,同时又保留了2D游戏的优点。
sprite editor,Unity开发,编辑器,unity,游戏引擎,unity开发,游戏开发


所以在等距网格切片中,等距视角意味着切片的网格是按照等距的透视关系进行排列的。每个单元格的大小和宽高比都相同,这样可以保证在等距视角下观察时,每个元素的大小和位置都是一致的,呈现出规整和美观的效果。

虽然有点晦涩难懂,简单来说,就是用于切割特殊图片,比如上面说的像3D的2D图片,这种切片方式下的Is Alternate属性用于指定是否按照交替顺序进行等距网格切片,而等距视角则是这种切片方式所基于的视角概念。在2D游戏的制作中,使用等距网格切片和等距视角可以方便地创建出具有立体感和美观效果的场景和元素。

sprite editor,Unity开发,编辑器,unity,游戏引擎,unity开发,游戏开发

切片属性

这里就比较简单了,可以设置的属性值如下:(切割后的一小块一小块的图片一般称之为“瓦片”)

  • Name(名称):用于给瓦片设置一个唯一的名称,当然编辑器也可以自动生成名称。有需要的话也可以给每个瓦片设置不同的名称,便于在后续开发中快速识别和选择它们。
  • Position(位置):用于设置瓦片在游戏场景中的位置。可以通过输入X和Y坐标来确定瓦片的具体位置。
  • Border(边框):给瓦片设置边框,就是图片大小和实际刚体的距离。
  • Pivot(中心点):设置瓦片的旋转中心点。除固定点之外也可以自定义Custom
  • Pivot Unit Mode(中心点单位模式):确定设置瓦片旋转中心点的单位模式。可选值有:NormalizedPixels。在Normalized模式下,中心点的位置是相对于瓦片的左下角进行计算的,Custom Pivot这个属性的可选值是0到1。在Pixels模式下,中心点的位置是相对于整个瓦片的像素值进行计算的,两个值的起始点都是瓦片左下角。
  • Custom Pivot(自定义中心点):此属性允许你为瓦片设置自定义的旋转中心点。你可以通过输入X和Y坐标来指定自定义的中心点位置。此属性可以覆盖Pivot属性设置的中心点位置,提供更多的灵活性和控制。

这些属性可以帮助我们精确地控制瓦片的各种属性,以满足我们的项目需求。通过调整这些属性,可以创建出各种不同形状、大小和样式的瓦片,并在游戏场景中进行拼接和布局。

sprite editor,Unity开发,编辑器,unity,游戏引擎,unity开发,游戏开发

最后别忘了Apply文章来源地址https://www.toymoban.com/news/detail-789217.html

到了这里,关于Sprite Editor图片编辑器的使用_unity基础开发教程的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3富文本编辑器vue-quill-editor、图片缩放ImageResize详细配置及使用教程

    官网地址:https://vueup.github.io/vue-quill/ 效果图  1、安装 2、在vue.config.js中添加配置,否则quill-image-resize-module会出现Cannot read property ‘imports‘ of undefined报错问题 3、创建quillTool.js(用于添加超链接、视频) 4、完整代码

    2024年02月04日
    浏览(50)
  • vue-quill-editor富文本编辑器-扩展表格、图片调整大小

    上篇文章已经讲到、vue-quill-editor的基本配置和图片转成url 这篇文章主要使用插件来完成 图片调整大小 和 表格的插件使用( 这两个目前quill 版本并不兼容 如果有大神解决了还望指点 ) 参考文章: vue-quill-editor 富文本编辑器支持图片拖拽和放大缩小_*且听风吟的博客-CSDN博

    2024年02月04日
    浏览(59)
  • Unity编辑器拓展——Editor模式下屏幕坐标转换为世界坐标

    发会牢骚,最近一直在做Unity的编辑器拓展,其中难的地方不少,但不至于到看不懂的地步,可一做到关于坐标转换的内容时把我弄不会了。 这个不查不知道,一查吓一跳,Unity的坐标系非常多,有世界坐标,屏幕坐标,局部坐标,视窗坐标等等,而且每一个都是不一样的坐

    2024年02月03日
    浏览(47)
  • uniapp中使用编辑器editor

    开发小程序时,想要在手机上添加编辑内容,使用u–textarea时,换行操作不显示,为此使用了uniapp自带的组件editor来实现: 具体可参考官网:https://uniapp.dcloud.net.cn/component/editor.html

    2024年02月07日
    浏览(39)
  • Monaco Editor教程(二十):在编辑器的某个特定位置插入自定义的dom内容,图片,表单,表格,视频

    哇咔咔,这是我的第20篇Monaco教程,写完这一篇会暂时休息一段时间,练练字,存存稿,读读书,顺便修修文章。 目前全网成系统的monaco中文专栏应该只有我这一个,欢迎评论区打脸。自结束了GitLab CI/CD的专栏后,我就一直在利用业余时间学习Monaco相关的知识,一是为了弥补

    2023年04月16日
    浏览(55)
  • 微信小程序使用editor 富文本编辑器

    1、注册editor 1、注册editor 1、初始化一个实例 2、失去焦点后收起键盘 3、获取输入的总内容 4、获取每次输入后的内容 tip:3、4选一种就可以 5、回显

    2024年02月08日
    浏览(66)
  • 小程序Editor富文本编辑器-封装使用用法

    本文章主要讲述editor中小程序的图片上传和pc端数据不同步的问题,建议多看下代码 完整代码在最下面 1、创建个用于组件封装的editor文件夹,存放三个文件  2、editor.vue文件是主要封装代码 3、editor-icon.css文件样式 5、如果上传图片失败或者是图片裂开,和pc端数据不同步的话

    2024年02月11日
    浏览(43)
  • 富文本编辑器 ck-editor5 的使用

    最近在项目中需要用到富文本编辑器,据说ck-editor5很不错,于是就使用它了,不过在期间也遇到了很多问题,这里记录下。 一、引入ck-editor5 文档地址:Predefined builds - CKEditor 5 Documentation 这里有个坑,我最初是根据文档执行下面的npm命令下载的,最后捣腾了半天发现里面功能

    2024年01月20日
    浏览(45)
  • vue-quill-editor富文本编辑器使用步骤

    首先放上效果图 目录 1.安装 2.引入到项目中 3.在页面上写组件 4.配置option 5.给工具栏鼠标悬停加上中文释义 6.上传图片到七牛云 7.自定义控制图片大小 1.安装 2.引入到项目中         有两种挂载方式: 全局挂载 和 在组件中挂载,根据自己的项目需求选择,一般用到富文

    2024年02月06日
    浏览(44)
  • 富文本编辑器 VUE-QUILL-EDITOR 使用教程

    1、NPM 导入 VUE-QUILL-EDITOR 2、引入 VUE-QUILL-EDITOR 在全局中引入 在指定的 vue 文件中引入 3、在 VUE 中使用 到这里一个默认的富文本编辑器已经导入使用了,如下图所视! 一般的,我们在使用的时候并不需要这么多功能,可以适当的对编辑器配置项进行配置。 可以根据自己的实际

    2024年02月09日
    浏览(62)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包