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

烟花粒子效果

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

注意此时我们已经加入了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,等比缩放

预览一下效果

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

  1. 青瓷qici - H5小游戏 抽奖机 “one-arm bandit”

    写在前面 本文实现一个简单的抽奖效果,使用青瓷qici引擎,其中应用了Tween动画,粒子系统,遮罩,UI界面布局,项目设置,发布等功能呢. 目前开发采用1.0.7版本,后续如果界面有所变化请参考这个 ...

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

    背景图片 首先我们需要在当前场景下面创建UI的根节点,这个根节点决定了我们整个游戏的元素布局,以及适应多分辨率的缩放布局问题,所以我们其他的元素都要放在UIRoot下面. 考虑到我自己测试的时候在PC ...

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

    安装运行平台需要nodejs,具体方法请参照官方说明文档. 运行后打开了一个空空的窗口. 首先我们进行工程设置,菜单>工程>设置 菜单里面设置我们游戏的名称,到时候会显示在游戏的title ...

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

    hello,小伙伴们,我们来继续编写相关的程序. 前几章我们已经基本把界面等问题搞定了,现在我们就来写脚本让整个流程统一起来. 看看我们现在有了什么?一个界面还有他的层次结构 青瓷界面绑定UI.js创 ...

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

    素材链接… 我们准备好所有素材 青瓷的素材引入,可以通过拖动的方式.我们打开windows的资源管理器,所有素材拖动到texture里面 框架会帮你进行预处理方便加载 我们在atlas文件夹里面新建目 ...

  6. Egret白鹭H5小游戏开发入门(二)

    前言: 昨天的文章中简单的介绍了Egret白鹭引擎从安装到基本的使用配置等问题,今天着重介绍H5小游戏开发的起步阶段,如Wing面板的使用,素材的处理,类的说明,开始布局等等. 整体概况: 根据上一篇 ...

  7. Egret白鹭H5小游戏开发入门(三)

    前言: 在上一篇文章中着重介绍了H5小游戏开发的起步阶段,如Wing面板的使用,素材的处理,类的说明等等,那么今天主要是涉及到场景的创建,loading的修改等等的代码编写. 对于这一节,我在讲解的过 ...

  8. Egret白鹭H5小游戏开发入门(一)

    前言: 好久没更新博客了,以前很多都不会,所以常常写博客总结,倒是现在有点点经验了就懒了.在过去的几个月里,在canvas游戏框架方面,撸过了CreateJS,玩得了Egret,又学过PIXI.js. ...

  9. 开发H5小游戏

    Egret白鹭H5小游戏开发入门(一)   前言: 好久没更新博客了,以前很多都不会,所以常常写博客总结,倒是现在有点点经验了就懒了.在过去的几个月里,在canvas游戏框架方面,撸过了CreateJ ...

随机推荐

  1. SQLite 入门教程(三)好多约束 Constraints(转)

    转于: SQLite 入门教程(三)好多约束 Constraints 一.约束 Constraints 在上一篇随笔的结尾,我提到了约束, 但是在那里我把它翻译成了限定符,不太准确,这里先更正一下,应 ...

  2. vc关于文件拷贝

    单个文件的拷贝 system  针对单个文件 CopyFile  针对单个文件 /** @file_extension egg: .txt .png **/ void CopyFileToDir(CS ...

  3. ubuntu14.04如何卸载qq

    ubuntu安装了wine qq怎么去卸载呢?现在wine qq 比较好用的有ubuntukylin官网与deepin linux官网使用的deepin版本wine qq 2012国际版,还有Long ...

  4. 【转】Java中Vector和ArrayList的区别

    首先看这两类都实现List接口,而List接口一共有三个实现类,分别是ArrayList.Vector和LinkedList.List用于存放多个元素,能够维护元素的次序,并且允许元素的重复.3个具体 ...

  5. ThinkPHP3.1新特性: 多层MVC支持

    ThinkPHP基于MVC(Model-View-Controller,模型-视图-控制器)模式,不过均支持多层(multi-Layer)设计. 模型(Model)层:默认的模型层由Model类构成, ...

  6. 实战RPM包制作

    在开发中经常会用到一些rpm包,但是一直没有自己手动制作过.今天在制作的时候意外地还解决了自己以前一直困惑的问题,就是怎么制作rpm debuginfo包,类似CentOS官网那样的debuginfo ...

  7. 初学ios遇到问题记录01

    刚刚接触IOS,花了一段时间看我基础部分的OC后 就想试着弄个小程序,于是看到 http://www.cnblogs.com/LooDo/p/3907064.html博文中的小程序,博主分析的很详细, ...

  8. 【Android】BroadCast广播机制应用与实例

    如何编写广播接收器 第一步:需要继承BroadcastReceiver类,覆写其中的onReceive()方法. class MyBroadcastReceiver extends Broadcast ...

  9. 动手写一个快速集成网易新闻,腾讯视频,头条首页的ScrollPageView,显示滚动视图

    最终效果 更新示例.gif 示例效果.gif 示例效果1.gif 示例效果2.gif 示例效果3.gif 示例效果4.gif 示例效果5.gif 示例效果6.gif 一.构思部分: 打算分为三个部分, ...

  10. L2TP

    点击查看详情>>   我的贡献 |退出 L2TP 编辑词条 L2TP是一种工业标准的Internet隧道协议,功能大致和PPTP协议类似,比如同样可以对网络数据流进行加密.不过也有不同之处 ...