《从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的区别