github unity 图片切换效果_你的生命是人类的货币——用Unity实现《Seed》(一)...

v2-335c276e3a45e587d3f681e3d4e987d1_1440w.jpg?source=172ae18b

嗨,大家好,我又回来啦。

这次复刻的游戏是Ludum Dare第44届72小时多人组的“Seed”,比赛主题是:“你的生命是货币”,而“Seed”说:“‘你’的生命,是‘人类’的货币“。

下面是原作的试玩页面,资源较多可能加载时间有点长,但:

强烈强烈强烈推荐大家都先去玩一下!一周目只需要几分钟,但玩了之后你就能再直接不过地体会到游戏想要传递出的东西。

游戏想要表达的思想,正可谓是典型的独立游戏精神。

Seed. by AVAVT​avavt.itch.io
v2-2cc826411b428e8693a8df17d3c2bc90_180x120.jpg

此刻写下这段话的我眼里还含着泪水,想起了那个梦全是奔跑的像素小人,耳边回荡着”这个怎么写、那个怎么写”然后在一阵绞痛种醒来的深夜。

但是这个游戏对我的吸引力实在是太大了,即使一开始就知道这个游戏并不属于我想要的“实现难度并不复杂,但趣味性又很强,特别适合用来学习”的目标游戏,但还是忍不住动手尝试,值得庆幸的是这个游戏中还是有许多值得学习的地方,并且也足够“有趣”。

游戏的玩法看起来也很简单,就是“种树”,在人类的砍伐中努力的种树,当星球上的最后一颗树被人类砍掉,星球上的一切快速的消亡,你的游戏又结束了。事先不知道的情况下都会以为是环保游戏,反而我以前做的环保小游戏一点都不环保hh。

v2-e4605fe7e8092c5df39327f05159c6ff_b.png

不知道屏幕前的你有没有对到电波,我觉得这个想法简直酷毙了,和每一个喜欢这个游戏的人一样着了魔似的想要让植物“获得胜利”,在一次又一次的尝试中觉得这个游戏越来越有趣,我觉得这一切都是有意设计的。比如:

1、除了第一颗树其他树都必须在绿地上种植,并且树的变异是渐进的,不能随便变异。这让我想起了沙漠绿化,还带着一点蜜汁生物科学。

v2-d59551531671576bb57e71a07fee493d_b.png

为了让你能理解我在说什么,我用思维导图简单表示了一下游戏中树的变异逻辑和基本属性。

v2-43482108ac776a42824e12cc16c90322_b.jpg
树的变异逻辑

2、树被砍伐之后会留下一个木桩。当全部的树都被人类的推土机推掉的时候画面上可以看到密密麻麻的树桩。

3、种的树越多,人类更多。但人类是有寿命的,并且可以被食人花杀掉。

当然还有更多的地方,不然怎么值得我这么心动呢,只是再说下去就失去玩这个游戏的兴趣啦!感兴趣的同学可以点击开头的链接去玩玩看,因为我的游戏还没有做完哒!


这么有趣的游戏怎么能不试着动手做(shouku)一下,惯例第一步是一边思考怎么做(我的目标是尽可能使用简单的少量代码的制作过程),一边准备素材。

有尝试过像素的同学应该知道,像素图都是一个像素一个像素画的,和实际游戏的比例是不一样的,如果要按照游戏画面比例画的话就会导致你扣N*N像素为一个像素这种无法形容的行为(我一开始还真是这样干的)。

我现在画面比例是16:9,在PS里面绘制素材的时候画布是1024*576,最后还是需要3*3为一个像素去修图,实际上根本不需要担心物体的比例,因为在unity里面是可以设置缩放的,所以如果万一同学们需要自己画素材就不要像我一样踩雷了。

v2-9091581e7a3314d12515231b827eafe8_b.jpg
在Unity中调整修改这两个数值

于是我扣像素图扣到做噩梦了,我觉得主要是因为我想要把游戏里第一颗种子种下的动画复原出来,但是这实在是太难了,所以后来我还是自己画了一个12帧的动画(但这是后来才完成的,中间我又去做了其他的素材)。

v2-b36f972b8898fcbe064c65cb751071d0_b.gif
第一颗种子的动画

在unity中制作动画的方法在上一篇文章中提到过,而且还制作了一个很可爱的游戏哦w,传送门:

Yumir:用Unity做一个萌萌哒游戏(附资源)​zhuanlan.zhihu.com
v2-1513640957282dea9626f4bbfd0163e2_180x120.jpg

你可以看到动图中除了12帧大树生长的图片之外还有一些其他的东西,这里用到了遮罩。

遮罩是个好东西,我的上一篇文章复刻的游戏的原作者也很喜欢这个功能,很简单又很有趣。

只需要将绿色土地的Mask Interaction设置为“Visible Inside Mask”,新建一个Sprite Mask,选择一个圆形的图片作为遮罩的Sprite,并设置Order in Layer的值,使其与绿色土地的值一致,将游戏物体保存为预制体就可以一直使用他啦。

v2-e55a6994de2a1fff4579dc5f685d157e_b.jpg

UI按钮也用到了遮罩(为了不多画素材!)UI中的遮罩使用就简单很多了,只要在被遮挡的UI物体的父物体上添加一个mask组件就可以了,但是相对来说也没有前面的Sprite Mask灵活。

v2-38bf3bc5f25d3bc190bbf2e7cfa7b2c1_b.jpg

I have a FaFa, I have a Mask, En! FaFaButton !

v2-80ce44f8545b0aac84c37c6a1e7b7280_b.jpg

树的预制体是我这段时间除了画素材之外花费时间最多的地方,我想了很多方案,遇到了很多问题,到现在其实也没有完全确定实施哪一个。

-------------------废话不看分割线Began-----------------------

开始制作前首先要了解清楚需求,我需要一个通用的树的预制体,一开始是一个树苗,后来是一颗大树,小树苗不会被砍不需要碰撞体,大树会被砍所以需要碰撞体,大树长成后会滋养土地,也就是将Mask遮罩一点点放大。

方案一:动画控制碰撞体的启用

v2-764081d964627c964cdf2a9ad1ec560b_b.gif

方案二:通过两个图片的显示和隐藏却换有无碰撞体的状态。

v2-adb835652a6c20743f992626d0b15bb5_b.png

因为树被攻击的时候是会抖动的,所以我加了一个状态,然后我遇到了这样的问题:

v2-2adfd6ebcc65e43aadb8961e05ce00d6_b.gif

虽然明显是因为我傻但是我...

好吧就是我傻。

v2-7f252c3396ef7dd1a77f4b635ae4bf52_b.jpg

解决方法:加一个树的游戏物体,在动画结束之后显示,在树上加一个状态机,idle状态什么都不做,被攻击的时候抖两下。

动画中图片切换:

v2-1bf6156f4667ac712b6a72aeefb88ee1_b.gif

还有很多问题,比如部分被攻击的时候的动画是不同的,人类的动画只有装饰物有差别,那么可不可以做到只用一个预制体去制作呢,通过查阅资料找到一个替换动画的方法:

AnimatorOverrideController​docs.unity3d.com

但重写动画状态机的消耗很大,而且所有的同类型游戏物体都用同一个状态机意味着一旦更改就是全部都改了。于是我又白干了,但是我学到了新的知识,所以我还是开(ku)心(zhe)的分享给大家。

通过一番测试实验最终答案只有一个——我确实需要逐个植物和人类做不同的预制体。

v2-c31bec9bf517da5574b60b342e26d819_b.jpg

-------------------废话不看分割线End--------------------------

由于我打算导出APK文件,所以操作上不能继续沿用鼠标左右键的方法,于是我想到了使用拖拽,后来发现拖拽的用户体验不行,又推翻,改为点击选择种子,再点一次取消选择。为此画了一个用于标志选中的框框,顺手做了个动图,也是全新体验。

public 

这里通过标志图片的位置和是否显示来判断当前是否已经选中种子,如果位置一致并且是显示状态,说明上一个选中的就是这个位置。因为这个方法是在点击种子按钮的时候才触发的,所以并不会让标志出现在其他位置。

至于种子的CD则是在预制体中添加一个灰色的image,将其作为遮罩的子物体,放在树种图的前面,将“Image Type”设置为“Filled”通过协程控制“Fill Amount”实现CD效果。

IEnumerator CD()
    {
        isCDOver = false;
        CDImage.fillAmount = 1;
        while (CDImage.fillAmount > 0)
        {
            yield return new WaitForSeconds(0.1f);
            CDImage.fillAmount -= 1/(CDTime / 0.1f);
        }
        isCDOver = true;
    }

v2-5cbea7710ff4653137fec8872ec1b3df_b.gif
树种UI按钮的CD效果

由于游戏内容太多,这里会将教程分割一下,以上是第一部分的内容。还有很多未知的问题和未知的坑在后面等着大家。

v2-d67b21e75d3ba3e2a505895fb28d7e6a_b.jpg
怕了没?

所以我决定看看有多少同学想看我做完,如果你也对这个游戏的制作分享感兴趣就给我点个赞吧,如果没有很多人想看,那我分享下几个我觉得比较有趣的功能就结束啦~

我已经把目前的进度上传到GitHub,并且会定时更新,因为这次的素材做的不太好就不单独弄网盘咯。

peiyl/Seed​github.com
v2-450a4972f00df99fffed98b3edb66301_ipico.jpg

——分割线离远点——

欢迎加入游戏开发群欢乐搅基:869551769

有意向参与线下游戏开发学习的读者可戳这里:http://www.levelpp.com/

——再来个分割线——

最后有人对我自己原创制作的环保游戏感兴趣吗,可以在评论区留言哦w

v2-9583535f5282d8067190a51ea75a21cf_b.jpg
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值