青瓷qici - H5小游戏 抽奖机 3 效果设置

现在是万事俱备,只欠东风,好,我们一起动手,先来东风东。

烟花粒子效果

第一个来实现我们的烟花粒子效果,点击我们的粒子,按照下图方式配置。

注意此时我们已经加入了white.png作为粒子特效使用。

 

 

这里有几个地方要注意的。在游戏后期发布的时候,我在我那战斗力只有5点的手机上面跑粒子效果,妥妥滴卡死。在优化方面考虑,删掉了ColorTint选项,没有了颜色变化,自然连下面Color over LifeSpan 颜色控制线也不需要了。不过我们现在为了自己PC看着爽,还是先勾上,到时候消除也来得及。

我们的烟花是一下一朵的,所以调整频率Frequency 0,发射角度,缩放比例,起始速度,重力。

我们这里有个play on awake先勾上,待会写代码要关掉。

 

设置scale over life span我们用一个类似sin曲线,可以达到一种烟花余烬的感觉。

 

设置完成了,我们一起来看看效果。很酷吧~

 

对于这个烟花放置,现在的方案是放在固定位置,通过程序控制是否点燃,哪个点燃,

还可以把它存成预置,在程序中动态加载并显示,加载成预置的方法如下

把我们的firework拖动到prefab文件夹中,保存为预置,等待运行时动态创建

在其他UI脚本中加入prefab接口然后在界面关联,本节先不深入讲解。

 

成为预置的firework会变色哦,以便提醒程序员哪些是动态加载的元素

 

手摇拉杆

手拉摇杆分为两个部分,分别是球的动画和拉杆的动画

球体TweenPosition动画

我们在界面或布局中选中球体,同时在属性框中为他添加一个位置变换的脚本TweenPosition

 

调整参数如下。听说越优秀的程序员越懒。所以偷下懒,“设置当前值为起始值”。“当前值为结束值”,然后在界面上调整球体的纵向位置,再点击“设为结束值”更新。

在节点的属性上,AnchoredY,鼠标悬停会变成一个左右箭头,按住,拖动,就像滑动条一样调整Y的值,又可以偷懒了吧~

 

在界面上预览一下效果,嗯~ o(* ̄▽ ̄*)o 不错不错,不是我要的。

我们想要的效果是,快速拉下来,然后回弹起来。所以不能满足我们调整下走势线。双击打开走势线。

要注意这个曲线的起始和终结点(0.0),以及最高峰(1.0),因为我们要做的效果是球体受力一拉,然后回弹到原位的效果。这里曲线为1的时候坐标意味着最大值,而恢复到0意味着球体回到原位。起始和终结都在0,原位,中间到1,也就是我们上面设置的To的点,曲线是一个抛物线,越到最下越快,然后迅速弹起来回到原位。

关闭退出自动保存,也就是意味着这个操作不能撤回。不过可以右键点击关键点删除。

预览一下效果

 

 

拉杆TweenScale

拉杆我们决定使用另外一种Tween,通过Scale缩放Y轴大小达到类似拉动拉杆效果。

我们先来调整一下拉杆的轴心点位置,Pivot设置Y为1,意味着偏移整个元素的高

 

修改pivot轴心点,移动到拉杆下方,原本是左上角,pivot Y 为1的时候就位于左下角,

添加一个TweenScale脚本

 

通过纵向变形反方向60%来达到我们的效果,同时调整运动曲线,类似于小球的运动轨迹。

现在走势跟小球一样一样的了。

走起预览一下

 

 

滚动抽奖效果

实现滚动抽奖的效果,我们分成两个模块。一个是快速滚动模块,带有残影效果。

一个是最后奖品花落谁家的停止状态。

快速滚动

在UIRoot下面创建获奖空节点Node,然后下方创建两个图形。fast就是本元素。

 

为fast绑定位置移动TweenPosition。

调整起始和终止位置,分别超出我们的遮罩区域。

后续我们通过调整duration运动耗时来改变运动速度。

 

预览下效果其他不需要调整

 

动态模糊

我们下落那么快,不搞点动态模糊都对不住引擎啦,我们现在加个着色器,如图所示。很简单,到后面我们代码会控制Blur动态模糊值,一遍慢慢变慢的时候会越来越清晰。

 

停止回弹

现在我们来设置最终定奖品结果。我们给他加一个TweenPosition,跟前面完全下落不一样,我们目标是定在屏幕中间的。

设置定位回弹效果,我们来调整运动曲线。后面多加些余波可以更酷哦

 

来我们看看效果

 

 

兑奖按钮抖动

我们最后显示的兑奖提示效果加个一放一缩增强点击欲望。

 

加个TweenScale,等比缩放

 

预览一下效果

时间: 2025-01-31 07:47:59

青瓷qici - H5小游戏 抽奖机 3 效果设置的相关文章

青瓷qici - H5小游戏 抽奖机 2 界面布局

背景图片 首先我们需要在当前场景下面创建UI的根节点,这个根节点决定了我们整个游戏的元素布局,以及适应多分辨率的缩放布局问题,所以我们其他的元素都要放在UIRoot下面. 考虑到我自己测试的时候在PC下面也想看得舒服,所以UIRoot的布局采用居中宽高比固定,然后在最下面Manual Type 设置为Expand 匹配宽或高,让显示区域在显示屏内填充满.   分辨率设置好了,我们现在来贴背景图.当前背景图为两张,一张是正常背景,用来显示玩的界面.一张背景图是较暗的,用来显示抽奖后烟火的效果. 在

青瓷qici - H5小游戏 抽奖机 0 创建工程

安装运行平台需要nodejs,具体方法请参照官方说明文档. 运行后打开了一个空空的窗口. 首先我们进行工程设置,菜单>工程>设置 菜单里面设置我们游戏的名称,到时候会显示在游戏的title上面,设置版本 这里其中关键的地方我们要设计一个竖屏的游戏,分辨率是640*960,游戏帧率设置为30帧,让编辑时和实际手机运行效果同等. 应用,生效设计到工程中. 保存我们当前未命名的场景到工作目录中,以后我们运用的所有变化就在这个场景之中了. 注意尽量少使用中文,毕竟大家都懂得..

青瓷qici - H5小游戏 抽奖机 4 运行脚本编写

hello,小伙伴们,我们来继续编写相关的程序. 前几章我们已经基本把界面等问题搞定了,现在我们就来写脚本让整个流程统一起来. 看看我们现在有了什么?一个界面还有他的层次结构 青瓷界面绑定UI.js创建   化成关系图如下,我们调整一下, 因为背景应该上面抽出一层,作为公共背景,让这个背景来控制自己到底显示高亮还是暗黑   调整完毕后,我们来划分需要编写的逻辑,前面最高控制整个程序的是UIRoot我们为他创建一个脚本.下面每个脚本控制一个效果.   好的,我们来动手写程序.可以看到我们当前的目录

青瓷qici - H5小游戏 抽奖机 1 素材

素材链接- 我们准备好所有素材 青瓷的素材引入,可以通过拖动的方式.我们打开windows的资源管理器,所有素材拖动到texture里面 框架会帮你进行预处理方便加载 我们在atlas文件夹里面新建目录 一律添加@atlas结尾,这样系统就可以自动帮我们剪裁成雪碧图了(Sprite图,精灵图). 全部拖到刚刚新建的文件夹中 选择重新打包成图集, 我们使用的时候就可以通过图片的帧名来切换了 后面添加新文件,只需要在文件夹中把对应的文件拖到对应的工程文件夹中即可. 我们后面还会添加一个放烟花用的图片

已被多次定制!!“模拟微信答题"的H5小游戏

今天推荐一款“模拟微信”答题的H5小游戏,这个也是涛舅舅这边客户定制的最多的一款游戏,曾经为现代汽车.万达.和<三妹>电视剧都作过定制! 以下是<三妹>定制的版本,推荐给大家! 扫一扫直接体验游戏 非vip会员:只接受定制,不出售源码,请联系涛舅舅报价 vip会员:可以购买源码,价格咨询涛舅舅

原生JS实现的h5小游戏-植物大战僵尸

代码地址如下:http://www.demodashi.com/demo/12755.html 项目介绍 本项目是利用原生js实现的h5小游戏-植物大战僵尸,主要结合了一下自己对于h5小游戏的理解,结合面向对象的编程思想进行开发,在实现时使用了部分es6语法,对于es6语法不太熟悉的小伙伴可以先查阅相关资料了解一下. 如有需要,可根据自己的需求修改源码样式.源码配置属性代码,实现个性化定制. 以下为文件目录结构示意图,核心代码在js文件夹下的四个common.js.main.js.game.js

【H5小游戏开发教程】如何限制微信游戏只能在微信端打开?

在这行里接触的时间多了,就会发现很多有意思的东西. 比如,很多微信小游戏会限制只能在微信端打开,有木有? 有这样的, 也有这样的, 妈蛋,不能用PC访问,这游戏就没法扒呀..... 其实涛舅舅告诉你,这两种都可以扒 而且是用PC! 但是今天,我不教你扒皮 我要教你的是,怎么让你的微信游戏也能限制PC打不开 很想学吧  准备开始! 1.第一种不提了,因为人家是设置了微信授权登录,从微信那里就拦截住了,只能用微信访问,你可能弄不了这么高级的微信授权这块,如果你真能弄,这一讲你也不用听了,因为你已经能

用canvas写一个h5小游戏

这篇文章我们来讲一讲用canvas画一个躲水果的小游戏.就是通过手指控制一个人物移动来躲避水果,若发生碰撞,则游戏结束. 我们定义一个game_control对象来处理初始化,事件绑定,游戏开始,游戏结果判定,游戏结束等判定. 在游戏中,我们需要一个人物以及三种水果的图片,我们做成了雪碧图. 接下来直接上代码吧~ 首先我们定义一个ship对象,3个水果.一个人物都是基于这个对象的. function ship(options){ if (options) { var width=options.

手把手教学h5小游戏 - 贪吃蛇

简单的小游戏制作,代码量只有两三百行.游戏可自行扩展延申. 源码已发布至github,喜欢的点个小星星,源码入口:game-snake 游戏已发布,游戏入口:http://snake.game.yanjd.top 第一步 - 制作想法 游戏如何实现是首要想的,这里我的想法如下: 利用canvas进行绘制地图(格子装). 利用canvas绘制蛇,就是占用地图格子.让蛇移动,即:更新蛇坐标,重新绘制. 创建四个方向按钮,控制蛇接下来的方向. 随机在地图上绘制出果子,蛇移动时"吃"到果子,增