个性打扮！——在2D游戏中实现换装系统

绿色进士

（本文作者 郄同学）

我在bilibili看到了皮皮关老师分享的2D换装视频模块，感觉很有意思。附上链接：
但是，视频中讲的是把换装结果保存为png图片，和我想要的效果不一样。我想要的是一个支持换装功能的2D游戏，类似星露谷物语。经过一个星期的尝试，终于在我的2D小游戏里实现了换装功能：



2D换装功能展示

其中遇到了一些问题，也想到了对应的解决办法，这里分享给大家。
一、Unity动画系统的局限性

按照我一开始的思路，既然原来的案例已经将调整好的人物装扮保存成PNG图片。我只需要读取保存好的图片进行使用，合成animation动画，在游戏里面调用就完成了换装.。



皮皮关的换装案例，按导出按钮后会生成png文件

经过测试我发现——确实可以读取到图片，也可以根据视频中的方法拿到Sprite。
但是有一个问题出现了：Unity提供的创建animation的API功能，只能在Editor模式下才能执行。当我们把程序打包后是没办法执行Editor模式下的API的，会报错。
所以只能放弃该思路.
所以我只好换了一种思路：利用协程循环替换Sprite实现animation的效果，还不错哦 :)
二、项目工程准备

• 找到皮皮关老师视频中的工程，把其中的素材和代码拷贝到自己的工程里。也可以打成unity package再导入。全部素材和脚本如下图：
  

原案例的脚本和素材，全都白嫖过来

2. 查看并重新设置图片存储位置。
找到原始工程里面控制图片保存的脚本UIManager.cs，打开脚本找到存储路径位置。修改保存路径为：
string path = Application.persistentDataPath; //设置存储路径。
persistentDataPath是unity自带程序的通用存储路径。这样打包后的APP程序在安装部署后会由Unity指定存储位置，只有在这个位置Unity有读写权限。（毕竟在没有系统允许的情况下，用户随便指定的存储位置，Unity是没有读写权限的。）
具体来说，原本的代码像这样：


以上几行代码只留下string path = Application.persistentDataPath; 其他部分删除掉。
三、读取保存的装扮图片

思路：假设已经导出好了png图片，那么在persistentDataPath目录中应该有png图片。
只需要实用C#的FileStream去打开这个png图片，读取文件内容到byte数组里，最后通过texture2D.LoadImage的方法把byte数组还原为贴图即可。


FileStream、LoadImage这些函数我也不清楚怎么用，只要在用到时百度一下，找到前辈的参考案例，一般都能解决 :) 只要看懂每一步代码的作用就好了。
如何获取到保存的png文件名呢？我是从UIManager里取到的输入框的字符串：
string str_Clothes;  //保存换装的文件名
if (UIManager.Instance.exportNameField.text != "")
{
     str_Clothes = UIManager.Instance.exportNameField.text;
}
其实不用这么麻烦，为了简单你可以直接写死文件名，比如“test.png”，保存和读取都是test.png即可~~
四、根据图片生成Sprite

上一步已经通过文件还原了Texture2D，下一步是把Texture2D还原成Sprite，这里需要用到Sprite.Create这个函数来创建Sprite.
// 参数依次为：贴图，矩形区域，图片锚点（基准点），每单位像素数
// 返回值：Sprite
Sprite.Create(Texture2D texture, Rect rect, Vector2 pivot, float pixelsPerUnit);由于导出的图片是一个图集，里面包含几十个小图片，用代码耐心一个一个切出来就好了。也可以直接copy我写好的代码（下载地址我放在文末或评论区）。


以上代码，需要先创建四个列表用来保存每个方向动画的一组Sprite。
public List<Sprite> up = new List<Sprite>();
public List<Sprite> down = new List<Sprite>();
public List<Sprite> left = new List<Sprite>();
public List<Sprite> right = new List<Sprite>();
大家需要注意一点，在生成Sprite的时候，一定要根据自身需要控制Sprite像素的大小pixelsPerUnit，因为默认的pixelsPerUnit大小为100，而我们的像素画合适的值是16或32。
五、用协程实现2D动画

使用协程的理由:
    Unity自带的Animation是控制循环播放帧图像来实现动画效果，而且前面说到，使用代码生成Animation只能在Unity Editor模式下进行(项目打包后会报错)，所以这里可以选择用协程来完美实现同样的效果动画效果，还能避免项目打包的问题。



这里相当于用协程代替了animation实现了序列帧动画

这里相当于用协程代替了animation实现了动画播放。
之后，在移动时，只要启动协程就能让动画播放了：



角色上下左右移动时，开启协程（别忘了先全部已有的协程）

六、游戏流程说明

其实到这里，换装的主要功能模块都已经实现了。光看文章可能有点懵，我来介绍一下实际游戏的流程。

• Player主角触碰猫头鹰NPC后，点击空格按钮来执行场景切换。切换到换装的场景。
  
• 在玩家处于换装场景的时候，可以随意换装，点击保存的时候，会保存png图片并切换回主场景。另外也可以点击ESC按键切换回主场景。
  
• 回到主场景时，执行前面说的一系列步骤，从png文件中读取还原主角的图片。这样换装功能就完成了。
  

1. 触碰猫头鹰商店，按空格键进入换装界面



随意换装，然后点击右上角“导出”回到主场景



换装完成！

七、Scene场景切换的注意事项

由于我是直接借用了原来的换装工具场景，会带来一点小问题——当场景中同时存在两个EventSystem或者两个Audio Listener的话，系统会报错提示。
解决方案：在从副场景回调到主场景的时候，需要把副场景的EventSystem对象和Camera对象进行隐藏然后再回到主场景。



从主场景到换装场景时，禁用所有当前场景的物体



从换装场景回到主场景时，关闭换装场景的EventSystem和Main Camera

当然，最好的做法是重新实现换装场景。但是为了简单起见我没有改写原来的功能。但是没想到在切换场景时带来一大堆问题  :)
结语

说说这次整合的经历和感受。
Unity引擎很强大，虽然不够智能，但这也许是优点。随着对引擎深入的了解，你会发现总能通过技术手段实现玩家各种离奇的想法。
虽然在调试过程中，总会在认为不可能有问题的地方遇到意想不到的问题，不过引擎也提供了很多的小功能或者笨功能去逐步解决问题。
分享自己的一个心得：
开始做自己从未尝试过的小功能的时候，首先需要有一个大概的方向思路，确保大方向没问题。如果最开始方向错误了，做到最后就像感觉撞了南墙。
不过没关系，任何尝试都是对自身的一次提高，大胆去进行尝试就好。
最后，很感谢分享各种功能知识点的博主，相信他们也是经历过各种尝试后提炼出来的精华分享给了大家。

工程链接（百度网盘）：https://pan.baidu.com/s/1Ro7Kr8dJXVm4ePbzprjcIg?pwd=pv44
欢迎加入游戏开发群欢乐搅基：1082025059
对学习游戏开发、游戏制作感兴趣的童鞋，欢迎访问咱们的主页：

火炏焱焱

三丰云速度挺快的.
免费云服务器和免费云虚拟主机，希望三丰云可以越做越好
为广大学生及开发者提供优质免费服务器、免费主机！
三丰云的免费主机速度很好，免费云服务器的服务也很满意，能有的都有了，1G1核的速度足以满足大部分需求，每个设备都有独立IP，为广大用户提供了更方便的体验。免费云服务器不仅速度快，效率高，而且没有丝毫卡顿，整体流畅。
三丰云的服务器速度让人很满意用这么久了确实很稳定，访问速度特别快，在校学生使用很好不用花钱而且连接速度很快可以是云和本地计算的组合，也可以是一组专用于支持不同功能的云服务。随着业务的增长，用户可以扩展其免费虚拟主机计划，以包括更多存储，更多应用程序以及主机提供的更多服务。三丰云虚拟主机.和云服务器都是永久免费的，速度和付费产品基本一样，十分推荐!http://sanfengyun.com

装萌兔

日本一在psp上的的经典地下城可以用点绘自制服装武器外形，还挺有意思的。