如何实现一个好看的金币效果

简介: 如图,是我最新上线的游戏【彩虹星球大冒险】中的金币拾取效果,打金币作为这个游戏中的一个非常重要的体验,把金币拾取效果做的好看就显得尤为重要。今天就跟大家分享一个,如何实现一个这样好看的金币拾取效果。观察一下上面的动图,金币从出现到消失总共是分为两个过程的。金币从爆炸的物体中向上弹出,并进行旋转下落玩家碰到金币后,金币放大旋转然后飞到屏幕的左上角记录金币的位置后消失接下来我们以一个具体的实例,来逐步的实现整个金币效果。

嗨!大家好,我是小蚂蚁。

如图,是我最新上线的游戏【彩虹星球大冒险】中的金币拾取效果,打金币作为这个游戏中的一个非常重要的体验,把金币拾取效果做的好看就显得尤为重要。今天就跟大家分享一个,如何实现一个这样好看的金币拾取效果。

观察一下上面的动图,金币从出现到消失总共是分为两个过程的。

  • 金币从爆炸的物体中向上弹出,并进行旋转下落
  • 玩家碰到金币后,金币放大旋转然后飞到屏幕的左上角记录金币的位置后消失

接下来我们以一个具体的实例,来逐步的实现整个金币效果。

如图,我们实现一个这样的示例:从屏幕中的大金币处不停的生成小金币,角色碰到小金币后,会拾取金币,被拾取的金币飞到屏幕的左上角消失,最后将金币数字增加 1 。

首先,我们来布置一下示例的场景。

可以看到这里面有 4 种不同的金币角色,这里我们重点需要关注的是“掉落金币”和“飞行金币”。

掉落金币

先来看“掉落金币”,掉落金币负责完成第一阶段的任务,即金币在某个位置上创建出来之后,要有一个先向上飞,再向下落的抛物线的轨迹(想象一下我们向上抛一个东西),要实现这种移动,需要借助工具提供的“物理行为”。

我们为“掉落金币”增加一个物理行为,将“能否倾倒”的选项关闭,因为在金币下落的过程中,我们希望它能够一直保持直立的状态。

接着,来看一下“掉落金币”的积木逻辑。

掉落金币被克隆出来之后,给它向上施加一个随机的角度(70~110),随机的力(1~2),以此来实现一种随机向上抛出的效果。接下来金币下落的过程,其实就完全交由“物理行为”来控制了。

至于金币是如何旋转的呢?用一个带有旋转动画的金币造型,然后使用动画播放积木进行循环播放即可。

飞行金币

再来看“飞行金币”,飞行金币负责完成第二阶段的任务,即从拾取的位置放大弹出来并进行翻转,然后飞到屏幕左上角记录金币的位置。为了实现更好的金币翻转和飞行效果,我们可以借助“翻转”和“缓动动画”这两个行为。

接着,来看一下飞行金币上的积木逻辑。

逻辑并不复杂,这里重点是通过一些细节的处理,来让整个金币拾取的过程看上去更自然,更美观。例如,使用翻转来表明金币被吃到了,翻转过后增加一小段向左上方的旋转移动过程,相当于让吃到的金币多显示一会儿,而不是吃到后就直接飞走了。为了让吃金币的效果更明显,我们增加了“飞行金币”的大小,并且调整了飞行金币的旋转,这样可以让金币的翻转变得更自然。

通过以上的两步,我们就能实现了一个更好看的金币效果了。整体实现上并不复杂,但是有一些细节需要我们重点处理。

毕竟在游戏中拾取金币对于玩家来讲是很爽的,让这种体验再好一点儿是我们游戏开发者的责任。一个效果最终呈现的如何,能够给玩家带来怎样的体验,需要的不止是开发技术,还需要更多的用心思考,以及对于细节不停雕琢和打磨的耐心。

知识也学到了,来支持一下我的最新游戏呗!

彩虹星球大冒险

冒险王的位置就等你来了!

小程序

*该教程已收录到【知识卡片库】中,在文末我为大家准备了教程中示例的开源链接,以及示例中所使用的金币素材资源包,所有小蚂蚁的学员可前往【知识卡片库】中获取。

这里是我的游戏开发课程服务,不只是一门课,而是围绕着新手学习做游戏有关的一整套服务。致力于帮助更多的人学会做游戏并做出自己的游戏,欢迎来跟一百多位同学一起学习做游戏。【点击这里】了解课程服务详情。

这里是小蚂蚁的小游戏系列,闲暇之余希望能给你带来片刻的放松和愉悦。无需下载安装,点击下方的游戏卡片就可以直接玩啦!









也欢迎加个微信,交个朋友,朋友圈每日分享与做游戏有关的知识和内容,可以来围观。备注“学习做游戏”可免费领取学习做游戏的原创教程资料。接受付费咨询,不闲聊,望见谅。






相关文章
|
6月前
|
前端开发 JavaScript 程序员
程序员教你用代码制作3d爱心跳动特效,正好拿去送给女神给她个惊喜
使用HTML、CSS和JavaScript实现了一个三维网格采样器`MeshSurfaceSampler`,适用于任意浏览器,推荐谷歌。代码创建了一个类,从缓冲几何体的三角形网格中进行随机采样。提供了设置权重属性、构建分布和自定义随机数生成器的功能。用户只需将代码复制到文本文档并保存为HTML文件,即可运行。适合编程爱好者尝试,也可分享给他人。
192 1
|
JSON 自然语言处理 前端开发
用D3制作一张有翻页特效的手撕日历(只需100行代码)
在D3中用十分简单的代码就可以实现丰富的动画,下面来看一下手撕日历的动画效果吧
271 1
用D3制作一张有翻页特效的手撕日历(只需100行代码)
|
6月前
扑克牌翻牌记忆小游戏源码
扑克牌翻牌记忆小游戏源码
121 0
扑克牌翻牌记忆小游戏源码
|
6月前
|
开发者
如何在游戏中实现一个好看的金币效果
如何在游戏中实现一个好看的金币效果
83 1
|
6月前
uniapp九宫格概率抽奖功能
uniapp九宫格概率抽奖功能
59 0
|
6月前
只用一个背景图片实现九宫格抽奖(uniapp纯代码)
只用一个背景图片实现九宫格抽奖(uniapp纯代码)
71 0
|
存储 Java API
一个精美的主界面窗口功能的设计和实现原来如此简单,万字肝爆
一个精美的主界面窗口功能的设计和实现原来如此简单,万字肝爆
110 0
|
小程序 JavaScript
小程序实现大转盘仿天猫抽奖 跑马灯效果(有图有源码)---微信小程序源码大集004
小程序实现大转盘仿天猫抽奖 跑马灯效果(有图有源码)---微信小程序源码大集004
278 0
|
图形学
如何做出好看的粒子效果
嗨!大家好,我是小蚂蚁。 微信小游戏制作工具提供了简单的粒子插件,使用起来简单明了(如果你用过Unity的粒子组件就知道这个有多简单明了了),虽然功能相对简单,可设置的属性也有限,但是我们仍然能够用它在游戏中做出漂亮的效果。 比如说在彩虹星球大冒险中,所有的爆炸都是使用的粒子效果来实现的。
132 0
|
开发者
不会美术如何做出好看的游戏
我不会美术怎么做游戏嘞?这也是一个经常有人问的问题,尤其是对于很多的技术而言,想要自己做个游戏,却苦于自己搞不定美术,上网找素材,东拼西凑看起来缺乏整体性,找人画的话价格昂贵,找美术合作的话,又不太容易找的到合适的。 那对于不会美术的人来讲,是不是就做不出游戏了?或者说就做不出好看的游戏了?当然不是。
135 0