天天看点

Unity图文混排的几种方式

方法一:TextMesh  

- TextMesh是Unity原生的支持图文混排的方式。  

- 使用方法  

    在GameObject下挂上TextMesh,会自动追加上MeshRender,之后在Materials里追加对应的图片材质球,即可通过<quad material=1>来使用图片,还可以通过size、x、y、width、height来设置图片属性。   

        各个属性的含义  

        material=1 选择的材质下标为1  

        size=20 图像高度为20像素  

        x=0.5 y=0.7 显示图像的矩形区域的起点为x=0.5 y=0.7  

        width = 1 height = 0.5 显示图像的矩形宽度为1,高度为0.5  

- 优化空间:将所有需要图文混排的图片打成一张图集,并制作成一个统一的材质球,通过x、y、width、height去设置图片偏移来渲染不同的图片  

- 效果图  

Unity图文混排的几种方式

方法二:TextMeshPro  

- TextMeshPro原本是一个第三方插件,后被Unity收购后并入Unity,现在可以免费使用,对于Unity2018及以后的版本,可以从菜单栏Window > Package Manager中安装TextMesh Pro。

- 使用方法

    1. 将所需要的图文混排图片资源的属性设置为Sprite(2D and UI),SpriteMode设置为Multiple    

Unity图文混排的几种方式

    2. 打开SpriteEditor,将图片切割好,可通过Slice快速切割成多张图片,再根据所需慢慢调整  

Unity图文混排的几种方式

    3. 选中图片资源,通过Assets-Create-TextMeshPro-SpriteAsset,或者直接右键图片资源Create-TextMeshPro-SpriteAsset创建出对应的图片Asset  

    4. 在TextMeshPro组件中设置对应的SpriteAsset,然后通过<sprite=9>或者<sprite name="Grinning face">来渲染对应的图片,其中sprite=9代表Asset中的Index=9,"Grinning face"代表Asset中的Name="Grinning face"

    5. 如果遇到要使用多个图片Asset资源的情况,需要将图片Asset放在Editor-ProjectSettings-TextMeshPro-Setting里的defaultSpriteAsset所设置的目录下,该目录的起始位置在Assets/TextMesh Pro/Rescources。之后使用<sprite="DefaultSprites" index=0>或者<sprite="DefaultSprites" name="Unity">来使用对应的图片,其中"DefaultSprites"是该图片Asset的名字,index=0代表Asset中的Index=0,name="Unity"代表Asset中的name="Unity"

Unity图文混排的几种方式

- 效果图  

Unity图文混排的几种方式

方法三:Layout Group  

- Unity自带的Layout Group的作用是让在这个脚本Go下的子物体根据Layout Group所设置的进行自动对齐排序,这种方法不需要使用富文本,只要设置好正确的对齐方式即可。

- 效果图

Unity图文混排的几种方式