super1 发表于 2021-12-20 07:22

Unity实现游戏UI滑动效果指南

废话不多说,先上视频。


当然这个动画还是很简单的,所以我就突发奇想把它弄得更加复杂,更加有意思了点,当然我印象中,一些商业游戏也有些类似的效果。


这个动画效果第一阶段是点击其中一个物体,其他物体朝左右散开,点击的物体移至最左边,第二个阶段是,从他的背后缓缓往右展开一个画卷,第三阶段是点击周围,画卷缓缓返回,之前的物体再缓缓归位。
这套动画,加上好的资源,将会产生很好的效果,光UI来说,很多大厂做的游戏也就是这个样子了,做出来之后,去公司面试,薪酬也可以要得稍微高点。
那么究竟该如何实现它,并在面试的过程中增加更多印象分呢?
拿起小本本记好,开课啦!

首先创建一个这样的预制体:


有几个点需要注意一下,首先是层级关系,射线在越下面,优先级越高,会遮挡他上面的射线事件,有时候按钮按了没反应,可能就是因为射线被遮挡的缘故。
Content下面先暂时用5个button写死,正常在项目中是动态生成的,而且也不会单独用scrollview做滑动列表,都是重新封装的,只生成几个子物体可循环利用的滑动列表。
新建一个main脚本,按照下图绑好节点,就可以开始书写代码啦!


先上一部分代码,这个代码主要是刚刚开始一阶段的。
1. 首先引用dotween的命名空间,不知道怎么安装dotween的,我会在文章最后写上;
2. 写一个button的集合。
3. 注意,c#和lua不一样,没有闭包,要重新写一个局部变量保存,要不然监听事件里面的i(t)会是6.
4. 点击的物体向左移动到本地x坐标为100的位置,时间为1秒,oncomplete表示完成之前的动画后,执行括号内panelmove方法。
5. 此处是三元,在点击物体左边的物体移至本地x坐标-300的位置,右边的物体移至本地坐标1000的位置。


如果有同学想要本篇文章的素材或是其他案例视频教学资源,可以点击下方的卡片获取。
下图是中间画卷移出动画,先获取他当前的本地x坐标,再设置他在本地坐标-300的位置,再设置它显示,最后再用dotween移至他原本的位置。其中一个注意的点是,要在他的父物体上加一个mask遮罩,超出他父物体的区域就不显示了,这样才能有一种画卷是从那个点击物体中移出来的感觉。


接下来就是点击物体周围关闭的动画了。

效果:


点击事件


画卷移回后所调用的方法。


好了,大功告成啦。


如果有同学想要本篇文章的素材或是其他案例视频教学资源,可以点击下方的卡片获取。
接下来关于dotween的下载,我这边就不再赘述了,去网上搜一下就会有很详细的步骤。
我写个大概的:unity菜单栏window找到assetstore 搜索dotween,下载个免费的,然后再setup一下就好了。



为了让大家从每次案例开发中有尽可能多的收获,我们不定期开设了近乎免费的游戏项目实战训练营,通过一个个不同游戏类型的Demo研发,让大家在过程中不知不觉入门Unity游戏开发,并能为自己的简历积累不少完成度不错的项目作品。
每期也配备相应的老师进行问题解答,用最快的方式解决你的问题。
我们目前已经开设过的训练营案例有:
1) 《一周学会ARPG游戏开发》
2) 《FPS游戏5天集训营》
3) 《ARPG战斗优化训练营》
4) 《元气骑士类全屏弹幕攻击训练营》
5) 《潜行机器人AI训练营》
6) 《空洞骑士5天训练营》
7) 《饥荒生存类游戏5天训练营》


目前为止,我们收获了众多学习者的五星好评,在每期的训练营中,我们不仅带大家实现具体的项目Demo,更会涉及到架构设计、系统设计以及代码设计三大层面的设计问题,不仅如此,我们每期训练营还会专门讲解求职和简历撰写相关的问题。
本期,我们开设了全新的 《三国杀卡牌游戏》5天训练营,手把手带大家从0实现一个卡牌类游戏Demo~
原价198,现在限时仅需1元!


课程每晚8点以直播方式进行,报名后还会进入专属的学习辅导群,课程大纲如下 :


现在点击下方卡片就可报名参加!
学完你能收获什么?
1) 掌握游戏开发基本流程
2) 掌握游戏开发基础场景搭建与逻辑
3) 掌握重度使用Unity协程实现卡牌回合
4) 掌握玩家操作与完整循环机制
5) 掌握求职阶段准备方式和流程,具备应对面试的能力
6) 了解游戏开发工程师职业发展路径
7) 针对个人情况,在直播现场得到职业发展建议
连续5天,450+分钟
不仅仅让你做出三国杀卡牌游戏Demo,更会让你了解游戏行业求职所面临最重要的问题,让你在入行前避过这些坑。
快点击下方立刻报名参加本次训练营吧!

jquave 发表于 2021-12-20 07:28

Mecanim 发表于 2021-12-20 07:37

[赞同]

DungDaj 发表于 2021-12-20 07:42

嵌个网页不好吗
页: [1]
查看完整版本: Unity实现游戏UI滑动效果指南