Unity实现老虎机滚动抽奖效果的示例代码

直接看下效果图吧:

制作思路:

设计四张图片,五个点,每个图片同时向下一个点移动,到最后一个就回到0号点,以此循环。

场景搭建:

  • 创建Image命名为Bg作为电视框背景;
  • 创建Image命名Mask并添加Mask组件作为电视框内容显示遮罩框;
  • 创建四个Image作为滚动图片;
  • 创建开始抽奖按钮;

PS:实际项目中可以根据需求来动态修改图片显示,以达到的控制每次抽奖奖品内容。

源码分享:

using System.Collections;
using UnityEngine;
using UnityEngine.UI;

public class ScollToDraw : MonoBehaviour
{
      // 抽奖按钮
      public Button DrowBtn;

      // 奖励图片
      public Image[] ArardImgArr;

      // 转盘速度
      public float AniMoveSpeed = 3f;

      // 进度
      private float[] progress = new[] {0f, 1f, 2f, 3f, 4f};

      // 转动动画位置
      private Vector3[] AniPosV3 = new[]
            {Vector3.up * 240, Vector3.up * 120, Vector3.zero, Vector3.down * 120, Vector3.down * 240};

      // 自动暂停标识
      private bool isAutoStop;
      // 抽奖结束 停止刷新界面UI
      private bool isStopUpdatePos;

      void Start()
      {
            DrowBtn.onClick.AddListener(DrawFun);
            isAutoStop = false;
            isStopUpdatePos = false;
      }

      void Update()
      {
            if (isStopUpdatePos) return;

            float t = Time.deltaTime * AniMoveSpeed;
            for (int i = 0; i < ArardImgArr.Length; i++)
            {
                  progress[i] += t;
                  ArardImgArr[i].transform.localPosition = MovePosition(i);
            }
      }

      // 获取下一个移动到的位置
      Vector3 MovePosition(int i)
      {
            int index = Mathf.FloorToInt(progress[i]);
            if (index > AniPosV3.Length - 2)
            {
                  //保留其小数部分,不能直接赋值为0
                  progress[i] -= index;
                  index = 0;
                  // 索引为2的到底了,索引为0的就在正中心
                  if (i == 2 && isAutoStop)
                  {
                        isStopUpdatePos = true;
                        Debug.Log("展示奖励界面...");
                        // todo...获取奖励数据维护
                  }
                  return AniPosV3[index];
            }
            else
            {
                  return Vector3.Lerp(AniPosV3[index], AniPosV3[index + 1], progress[i] - index);
            }
      }

      /// <summary>
      /// 点击抽奖
      /// </summary>
      void DrawFun()
      {
            isAutoStop = false;
            isStopUpdatePos = false;
            StartCoroutine(SetMoveSpeed(2));
            // DoTween 按钮下拉动画
            // Transform tran = DrowBtn.transform;
            //tran.DOLocalMoveY(-60, 0.2f).OnComplete(() =>
            //{
            //      tran.DOLocalMoveY(50, 0.2f);
            //
            //});
      }

      // 抽奖动画速度控制
      IEnumerator SetMoveSpeed(int time)
      {
            AniMoveSpeed = 10;
            yield return new WaitForSeconds(time);
            AniMoveSpeed = 1;
            yield return new WaitForSeconds(time);
            isAutoStop = true;
      }
}

到此这篇关于Unity实现老虎机滚动抽奖效果的示例代码的文章就介绍到这了,更多相关Unity老虎机滚动抽奖内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • unity实现简单抽奖系统

    这段时间工作比较空闲,想做个抽奖系统,发现网上的抽奖系统看不懂,然后自己做了一个可以随意定义奖品概率,不管什么时候停下来指针最终都会转到指定的奖品哪. 废话不多说,动手一步一步来. 这个抽奖系统就使用了两张图片,一个指针,一个圆形的图片. 然后做一个预制体,图片就是圆形图片,image type选择filled,fill amount控制这个图片的面积大小,同时也是该图片的概率,Text组件是该奖品的名称. 再接下来就做一下界面布局的工作 Bg就是那个灰色的图片,Rotate是个空物体,用来挂在

  • Unity实现跑马灯抽奖效果

    Unity 跑马灯抽奖效果实现代码,供大家参考,具体内容如下 这边用到插件是NGUI+Dotween,思路简单说下:先排版,通过移动图片蒙版来实现效果. 下面是排版和文件目录. 代码部分是通过余数去确认停的位置,boxlist通过unity拖拉加入数据,chooseBoxList直接通过余数判断添加. 代码量很少,稍微看下就明白了. 直接上代码了: using System; using System.Collections; using System.Collections.Generic;

  • Unity 2017使用UGUI实现大转盘抽奖

    本文实例为大家分享了Unity 2017实现大转盘抽奖的具体代码,供大家参考,具体内容如下 涉及到的插件:Dotween 在"Hierarchy"面板创建一个Image,这个Image用来显示大转盘的那个圆盘,我用的UGUI里默认的那个圆圆的图片,放大后很模糊,不过不打紧 接着创建一个Panel名字改成"奖品组",这个是奖品的父物体,记得吧Panel里的Image,Canvas Renderer组件删了 然后在创建一个Panel名字改成"Awar"

  • Unity实现老虎机滚动抽奖效果的示例代码

    直接看下效果图吧: 制作思路: 设计四张图片,五个点,每个图片同时向下一个点移动,到最后一个就回到0号点,以此循环. 场景搭建: 创建Image命名为Bg作为电视框背景: 创建Image命名Mask并添加Mask组件作为电视框内容显示遮罩框: 创建四个Image作为滚动图片: 创建开始抽奖按钮: PS:实际项目中可以根据需求来动态修改图片显示,以达到的控制每次抽奖奖品内容. 源码分享: using System.Collections; using UnityEngine; using Unit

  • jQuery实现类似老虎机滚动抽奖效果

    本文实例讲述了jQuery实现类似老虎机滚动抽奖效果.分享给大家供大家参考.具体如下: 这里使用jquery实现类似老虎机的网页抽奖功能,只是一个简单的投资功能实现,还有一些地方是需要完善的,比如抽奖快结束的时候,不会自动变慢速度,哪位高手感兴趣的话可以加以完善. 实现效果如下图所示: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/

  • Vue组件实现数字滚动抽奖效果

    本文实例为大家分享了Vue组件实现数字滚动抽奖效果的具体代码,供大家参考,具体内容如下 可调整数字滚动速度,可指定开奖延迟时间,可指定开奖数字,按个人需求自行改动(录了个效果供参考,临时找的录屏,表介意)不一一精简了 组件代码 <template>     <div class="info-span04" style="color: #333333;">         中奖号码:         <div style="ve

  • vue实现公告栏文字上下滚动效果的示例代码

    本文详细的介绍了vue实现公告栏文字上下滚动效果的示例代码,分享给大家,具体入如下: 代码实现: 在项目结构的components中新建text-scroll.vue文件 <template> <div class="text-container"> <transition class="" name="slide" mode="out-in"> <p class="text

  • Unity之跑马灯抽奖效果单抽与连抽(附demo)

    本文主要介绍了Unity之跑马灯抽奖效果单抽与连抽,分享给大家,具体如下: 效果图 单次抽奖效果 跳过动画抽奖效果 三连抽抽奖效果 设计思路 点击按钮 ,根据需求(概率)计算本次抽奖获得物品模拟转动 (先加速后减速), 一段时间后停止连抽的情况下等所有奖品动画都表演完成才结束跳过动画设计,有跳过时抽奖速度直接到最大,并进入可中奖 场景搭建 一个按钮,一个组奖品放到一个父物体上. 奖品元素,有两种状态,一种旋转状态,一种中奖状态. 代码 using System; using System.Col

  • Flutter实现文本滚动高亮效果的示例讲解

    目录 前言 功能实现 前言 最近有个需求是人工语音播放时文本能随语音朗读时像歌词滚动的效果. 原本第一考虑的时能随时间字体渐变成更改后的颜色, 有比较流畅的走马灯效果. 但最终实践了几次后发现要能够逐字逐行渐变有一些麻烦, 不好实现. 所以转而变为将字体直接将字体高亮, 一段文本区分成两个部分, 一个部分是高亮文本, 也就是已朗读的部分, 一个部分是剩下未朗读的非高亮文本. 通过时时渲染页面就能达成滚动高亮的效果. 功能实现 因为在Text中会存在两段文本, 所以就不能单只用Text组件, 而改

  • Unity实现跑马灯效果的示例代码

    目录 一.效果 二.需要动画插件DOTween 三.脚本 1.每个格子上的脚本文件 2.管理脚本文件 一.效果 二.需要动画插件DOTween 下载地址 三.脚本 1.每个格子上的脚本文件 using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; using DG.Tweening; public class MarqueeUIItem : MonoBe

  • Qt实现字幕滚动效果的示例代码

    目录 一.项目介绍 二.项目基本配置 三.UI界面设计 四.主程序实现 4.1 widget.h头文件 4.2 widget.cpp源文件 五.效果演示 一.项目介绍 利用QTimer实现字幕滚动功能,可以实现自行更改文本内容.自适应文本大小.自由调整速度等功能. 二.项目基本配置 新建一个Qt案例,项目名称为“TextScroll”,基类选择“QWidget”,取消创建UI界面复选框的选中状态,完成项目创建. 三.UI界面设计 无UI界面 四.主程序实现 4.1 widget.h头文件 声明私

  • 使用原生JS实现滚轮翻页效果的示例代码

    一.滚轮事件 当用户通过鼠标滚轮与页面交互.在垂直方向上滚动页面时,就会触发mousewheel事件,这个事件就是实现全屏切换效果需要用到的.在IE6, IE7, IE8, Opera 10+, Safari 5+中,都提供了 "mousewheel" 事件,而 Firefox 3.5+ 中提供了一个等同的事件:"DOMMouseScroll".与mousewheel事件对应的event对象中我们还会用到另一个特殊属性-wheelDelta属性. 1."m

  • JavaScript实现九宫格抽奖功能的示例代码

    目录 效果图 实现流程 主要代码 效果图 话不多说,直接上效果: 实现流程 主要流程为: 1. 根据效果图,构建静态页面 2. 获取元素(自带的属性) 3. 绑定事件 4. 事件触发之后 4.1 所有的li元素 在指定的时间间隔下 颜色随机变化 4.2 延时器 2秒后 清除定时器 4.3 在清除定时器之后,所有的li背景色复位,随机选一个 主要代码 <!DOCTYPE html> <html lang="en"> <head> <meta ch

随机推荐