我们的关卡是由充当图块的不同块组成的。 硬编码所有职位不仅对我本人,开发人员,而且对游戏设计师而言都是一种痛苦。
我需要使设计和测试水平足够快的东西。 并独立于开发人员。 因此,游戏设计师只需将一个文件放入Unity中即可读取,并且关卡将显示在屏幕上。
我虽然一会儿怎么做。 我首先介绍JSON文件。 我来自移动应用程序世界,因此我习惯于将JSON用于所有内容,因此在这里使用它似乎也是合乎逻辑的。
但是后来,游戏设计师想到了一个更好的主意。 为什么不使用图像? 它的视觉效果更好,并且可以足够小,因此不会占用太多空间。 因此,我决定使用该方法。
如何使用图像生成关卡?
这个想法很简单:从图像中读取1个像素,对颜色进行解码,然后在该位置放置一个图块。 图像将是宽度的图块数x高度的图块数。
所以我们从这里开始:
![](https://i-blog.csdnimg.cn/blog_migrate/27a3f312b40177b07211ffa6f31d8348.png)
对此:
![](https://i-blog.csdnimg.cn/blog_migrate/97ad235101dd17336914dde6bedb7222.png)
免责声明 :这些示例中使用的所有资产均来自Kenney Game Assets 2 。 从这里感谢Kenney提供了如此出色的资产:)如果您喜欢它们,可以考虑从他的背包中拿出一包。
我们的资产
我们将在后台中间生成一个级别以进行测试。 因此,如果这是我们的背景图片:
![](https://i-blog.csdnimg.cn/blog_migrate/630a8d62504bfa0c4104903e7bce9106.png)
我们希望将图块放在此另一张图片的选中区域中:
![](https://i-blog.csdnimg.cn/blog_migrate/92aafaf89b019534677fdbcaad7f112e.png)
这只是为了将它们吸引到中间。 我选择该图块和位置的数量没有特别的原因,请随时适应您的游戏需求。
这些是将要使用的图块:播放器的女孩(水平地图纹理中的蓝色像素),僵尸(绿色像素),火(红色像素),沙子(黄色像素)和石头(灰色像素)
![](https://i-blog.csdnimg.cn/blog_migrate/a70b36d6ef08b9589261a149c996ded7.png)
让我们开始编码
我不会详细介绍Unity的工作原理,因此我只解释与该主题相关的代码,该代码从图像生成关卡。
我在场景中的游戏对象包含我LevelGenerator脚本。 该脚本具有以下公共变量(因此我可以从编辑器中调整某些参数):
![](https://i-blog.csdnimg.cn/blog_migrate/3c28ff26d6e4eb2c289efb448d86a26d.png)
然后,在我们的Start方法中,我们只需要调用一次GenerateLevel方法。 它是这样的:
![](https://i-blog.csdnimg.cn/blog_migrate/3c28ff26d6e4eb2c289efb448d86a26d.png)
我们遍历包含关卡设计的纹理的宽度和高度。 然后我们获得像素颜色,然后检查哪个对象是代表该颜色的对象。 如果没有该像素颜色的对象,则GetGameObject方法将返回null,然后我们将继续下一个像素。 当读取背景像素(在我的情况下为白色)时,会发生这种情况。
一旦获得要实例化的对象名称,就需要知道它的位置。 为此,我们有2种方法:一种从图块转换为背景中以像素为单位的点(该方法还考虑了上面显示的startingPosition变量),另一种将该像素位置转换为Vector3世界位置。
之后,它将仅实例化该位置的对象,然后循环继续进行直到纹理结束。
让我们看看那里使用的其他3种方法:
![](https://i-blog.csdnimg.cn/blog_migrate/3c28ff26d6e4eb2c289efb448d86a26d.png)
我认为代码在这里很容易解释。
第一种方法只是将关卡设计纹理中的x,y磁贴转换为背景中的像素位置。
第二种方法将那些像素位置转换为游戏世界点。
第三个只是一个巨大的开关,带有我们瓷砖的颜色代码及其相应的预制名称。
![](https://i-blog.csdnimg.cn/blog_migrate/4bc9e32353718873e5e58128f8c8495a.png)
有了这段代码,我们终于从那个小图像中获得了成功。
我希望这段代码可以帮助想要做与我们类似的事情的人。 如果您有任何疑问,请随时提问。
From: https://hackernoon.com/generating-a-level-from-an-image-in-unity3d-225b51a68172