找回密码
 立即注册
查看: 412|回复: 0

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

[复制链接]
发表于 2022-3-9 11:34 | 显示全部楼层 |阅读模式
本期涉及到的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

    在场景树上右键 - 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的异同


    Unity Image 等同于 Cocos里的Sprite

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

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

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

×
懒得打字嘛,点击右侧快捷回复 【右侧内容,后台自定义】
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Unity开发者联盟 ( 粤ICP备20003399号 )

GMT+8, 2024-11-17 01:52 , Processed in 0.091256 second(s), 26 queries .

Powered by Discuz! X3.5 Licensed

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表