《从Cocos到Unity》- 2.UI-UGUI-精灵

本期涉及到的Cocos的知识点

1.导入普通图片和TexturePacker打包出的图片集。
2.图片的格式选择和九宫格边界的划分。
3.2D最基础的元素-精灵。

导入图片到Unity中

1.最简单的小图,直接拖动到Assets文件夹下即可(和Cocos的操作一模一样)

2.使用TexturePacker导出的图集,则和Cocos有很大不同。需要按照一下操作流程来
(1)打开TexturePacker选择导出格式为Unity格式。点击导出后会导出 xxx.png和xxx.tpsheet2个文件。(导出Cocos格式的时候是xxx.png和xxx.plist后缀)
(2)Unity本身也不能直接解析导出的2个文件。需要点击Window - Asset Store打开unity的商店。搜索texturepacker-importer插件,并且安装到你的项目里。
(3)这个时候将TexturePacker生成的2个文件导入到工程中。插件会自动帮助你解析这个图集。最后的效果如下图所示

成功的解析效果图

图片的格式选择

1.点击导入工程的图片,在属性检查器上也能看到导入的类型Texture Type。这点也和Cocos非常相似,它决定了一张图片是被当做精灵图片还是纹理,或者是法线贴图等等来使用

截屏2022-03-08 下午9.41.54.png

2.点击Sprite Editor按钮,将会进入九宫格边界的编辑模式。需要注意的时,单张图片的编辑模式和Cocos一模一样,但是如果是贴图集,那么需要点击整张贴图集(这里不是点击贴图集里的单张小图,这点要注意。)然后弹出来的界面如下图所示。可以对每一个小图片设置九宫格的边界。

贴图集如何设置九宫格边界

UGUI-精灵(Image 和 SpriteRenderer傻傻分不清楚)

Image

  1. 在场景树上右键 - UI - Image即可创建一个Image。成功创建后各位会发现它会自动帮助你生成一个Canvas节点。那么现在场景树上就如图所示了。这点和Cocos也一样。
    成功创建了一个Image节点

2.点击image节点,可以看到节点上挂载了一个Image组件,其中各项属性和Cocos里的精灵机会一样。
Image组件的各项属性

3.在这里,我们先浅显的理解 Unity - Image 等同于 Cocos - Sprite

SpriteRenderer

1.我们选中场景树的根节点。右键 - 2D Object - Sprites - Square创建了一个Square的GameObject(类似于Cocos的Node)。注意此节点不需要在Canvas下创建而是直接创建到了场景根节点上。

2.点击这个Square,可以看到Sprite Renderer组件,该组件的各项属性也和Cocos里的精灵十分相似。但是它可以不依赖于Canvas组件存在。这里我们肤浅的理解为Sprite Renderer是一个3D空间里的Plane(类似于Cocos3D里的Plane) + 一张贴图。


Sprite Renderer组件

Image和Sprite Renderer的异同

  1. Unity Image 等同于 Cocos里的Sprite

  2. Unity SpriteRender等同于 Cocos里的3D Plane(作为一个Cocos老鸟,看到SpriteRenderer会理所当然的认为这是一个Cocos Sprite,但是实际上不是。)

3.两者更加详细的区别可以看这篇博文:
Unity2D:Sprite和Image的区别

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 222,104评论 6 515
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 94,816评论 3 399
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 168,697评论 0 360
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,836评论 1 298
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,851评论 6 397
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 52,441评论 1 310
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,992评论 3 421
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,899评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 46,457评论 1 318
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,529评论 3 341
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,664评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 36,346评论 5 350
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 42,025评论 3 334
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,511评论 0 24
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,611评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 49,081评论 3 377
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,675评论 2 359

推荐阅读更多精彩内容