obsidian/笔记文件/2.笔记/飘字系统.md

#unity/日常积累

首先，需要设置一下，项目属性；

![[Pasted image 20220426112306.png]]

设置图集模式成，默认开启；

![[Pasted image 20220426112401.png]]

这时候，这段代码才会正常生效；

![[Pasted image 20220426112500.png]]

这里就是程序的入口；

![[Pasted image 20220428150235.png]]

运行程序，是可以正常显示飘字内容的；

![[Pasted image 20220428150303.png]]

场景中，只有一个GameObject物体；

![[Pasted image 20220428150616.png]]

上面挂载的脚本和控件是这些； 先看一下这个；

![[Pasted image 20220428150710.png]]

是这个类型的；

![[Pasted image 20220428150907.png]]

其中，只包含了这个数组；

![[Pasted image 20220428151240.png]]

点击，索引过去；

![[Pasted image 20220428151317.png]]

配置文件的数组，目前只设置了一个；

![[Pasted image 20220428151355.png]]

继续点击，索引过去；

![[Pasted image 20220428151411.png]]

这个图集，代码上对应的是：

![[Pasted image 20220428151454.png]]

然后，就是一个Sprite图片列表；

![[Pasted image 20220428151552.png]]

根据这个继承关系，可知，它是一个序列化文件；

![[Pasted image 20220430152213.png]]

根据这个可知，这个序列化文件，是可以通过右键创建出来的；

![[Pasted image 20220430152306.png]]

试一下；

![[Pasted image 20220430152400.png]]

创建了这个；

![[Pasted image 20220430152500.png]]

上面的sprite，是拖曳的这个图集；

![[Pasted image 20220430152553.png]]

继续分析一下，挂载在脚本上的材质； 这是一个使用了默认shader的材质，没啥特别的；

![[Pasted image 20220430152700.png]]

索引过去：

![[Pasted image 20220430152735.png]]

是用了内置的shader文件；

![[Pasted image 20220430152751.png]]

然后，演示物体上，还有其他插件，也是输入字符添加或者拖曳即可；

![[Pasted image 20220430152847.png]]

双击，打开一下这个脚本文件；

![[Pasted image 20220430152915.png]]

在Start入口函数中，前面说了开始显示字的； 在开始显示之前，是有一个Fill()函数，这就是处理图集的；

![[Pasted image 20220430153057.png]]

在最开始的位置，循例，还是做一下判空操作，还有一些添加组件的处理；

![[Pasted image 20220430153713.png]]

像这些个；

![[Pasted image 20220430153822.png]]

![[Pasted image 20220430153836.png]]

都会索引到这里，在游戏运行的时候，会展示出来；

![[Pasted image 20220430153900.png]]

就是前面的这个面板；

![[Pasted image 20220430153952.png]]

前面会定义几个List，用来存储顶点等信息；

![[Pasted image 20220430154812.png]]

回到Fill()函数中，这里有俩，是否在编辑器模式下的，赋值处理； 貌似是同一个玩意儿，互相赋值吧，分别是否在运行时候；

![[Pasted image 20220430154924.png]]

然后，就是开辟空间了；

![[Pasted image 20220430155113.png]]

设置图集的index序号，还有材质的主texture；

![[Pasted image 20220430155236.png]]

这里的texture索引过去看一下；

![[Pasted image 20220430155343.png]]

就是拿到图集索引；

![[Pasted image 20220430155712.png]]

非运行状态下，只会拿到一个图片； 所以在非运行状态下，只显示了这个；

![[Pasted image 20220430155745.png]]

剩下的这些个，用来存储顶点信息的List，长度都是这个；

![[Pasted image 20220430155849.png]]

其中，这个mText实际上，指的就是传参进去的；

![[Pasted image 20220430155921.png]]

![[Pasted image 20220430155937.png]]

然后，就开始遍历文本，去拿图片了；

![[Pasted image 20220430160019.png]]

索引过去看看；

![[Pasted image 20220430160042.png]]

这里显示返回一个null值，没关系，因为是有重载的；

![[Pasted image 20220430160107.png]]

这就是重载函数；

![[Pasted image 20220430160132.png]]

索引过去看看；

![[Pasted image 20220430160239.png]]

这是一个字符为key，sprite图片为value的字典；

![[Pasted image 20220430160310.png]]

如果为空，就是最开始的时候，就会更新函数；

![[Pasted image 20220430160431.png]]

判空，三元运算符，初始化，然后clear清空一下；

![[Pasted image 20220430160504.png]]

索引过去这个的：

![[Pasted image 20220501152759.png]]

在这个类里，是有相关定义的；

![[Pasted image 20220501152848.png]]

继续索引一下，往这个图片列表添加的函数，是在这里：

![[Pasted image 20220501152955.png]]

是这个方法里，包含了添加函数；

![[Pasted image 20220501153532.png]]

这种写法，表示是设计了，unity该控件的右侧面板，在这里是CSSpriteAtlas类；

![[Pasted image 20220501153644.png]]

是对应上这个的；

![[Pasted image 20220501153719.png]]

可以看到，是通过点击按钮，就可以执行这个函数；

![[Pasted image 20220501155119.png]]

然而点击之后，就报错了；

![[Pasted image 20220501155154.png]]

IO路径报错相关；

![[Pasted image 20220501155213.png]]

说明不是这个方法添加的； 实际上，因为是public的，而且Sprite类型，unity的编辑面板，是可以直接识别出来的；

![[Pasted image 20220501155528.png]]

所以，实际上就是这一段了；

![[Pasted image 20220501155545.png]]

知道了数据来源之后，直接往字符图片字典，添加数据就好，其中key值就是图片的名字；

![[Pasted image 20220501155704.png]]

因此，前面那个获取图片的方法，在知道了图片名字之后，就可以获取得到，图片了；

![[Pasted image 20220501155818.png]]

回到Fill()函数中，拿到图片之后，就设置宽度参数相关的了；

![[Pasted image 20220501155916.png]]

然后，就是设置锚点相关的了，目前基本用不上； 还有，就是继续获取图片，然后设置索引之类的了；

![[Pasted image 20220501160013.png]]

然后，这部分就是构建模型网格，相关的方法了，暂时没看懂；

[[Unity中Mesh Filter、Mesh Renderer的作用]]

![[Pasted image 20220501160128.png]]

索引这个方法，过去看看；

![[Pasted image 20220501160207.png]]

可以发现，也是构建网格尺寸相关的了；

![[Pasted image 20220501160243.png]]

查了一下：

![[Pasted image 20220501160420.png]]

网格构建完成之后，就是设置进meshfitter了； 需要注意的是，编辑器非运行状态用Mesh会报错；

![[Pasted image 20220501161458.png]]

以上，就是飘字系统的核心逻辑，Fill的方法了； 因为图片字典，是以图片名称作为key的，所以只需要填写数字，就可以显示当前飘字的原因了；

至于飘的动作，就是在update函数里面，通过倒计时的形式，到了某个时间节点，就改变物体的localposition就好； 如果移动要添加各运动曲线，也是这里设置上就好；

![[Pasted image 20220501161849.png]]