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

本文实例为大家分享了Unity 2017实现大转盘抽奖的具体代码，供大家参考，具体内容如下

涉及到的插件：Dotween

在“Hierarchy”面板创建一个Image，这个Image用来显示大转盘的那个圆盘，我用的UGUI里默认的那个圆圆的图片，放大后很模糊，不过不打紧

接着创建一个Panel名字改成“奖品组”，这个是奖品的父物体，记得吧Panel里的Image，Canvas Renderer组件删了
然后在创建一个Panel名字改成“Awar”用制作奖品的，一样的吧Image，CanvasRenderer组件删除

然后在Awar中创建Image，Text，分别吧名字改为“Ico，desc”，然后设置一下自己想要的效果，我设置的Ico上方，Desc下方

如图：

结构图：

*需要注意的地方：把Awar的小蓝点移动到圆盘的中心如图：

如果这步没做后面的自动生成代码生成就不准喽

然后写一个代码：生成的脚本

public class GenerateAwar:MonoBehaviour{
 public GameObject AwarGameObject; //上面制作的Awar物体
 public int Count = 10; // 生成个数，当你根据数据生成个数的时候记得修改

 void OnEnable ()
 {
  var angle = 360 / Count; // 计算每个奖品的Z轴度数
  var additionAngle = 0; //当前角度
  for (var i = 0; i < Count; i++)
  {
   var obj = Instantiate(AwarGameObject);
   additionAngle = angle + additionAngle;
   obj.transform.Rotate(Vector3.forward,additionAngle);
   Log.Error(obj.transform.localRotation.eulerAngles.z);
   obj.transform.SetParent(transform,false);
   obj.SetActive(true);
  }
 }
}

然后挂到”奖品组“身上
如：

那个奖品就是Awar，我名字改不回来了，似乎是unity的问题，哇哈哈哈
然后运行，就能看到如图效果：

然后创建一个指针放在中心编写一个脚本：旋转指针的脚本

//这个脚本挂在指针身上，
//然后在抽奖按钮的Button事件里拖入指针选择这个类的SetTime方法
public class RotatePointer : MonoBehaviour
{

 private bool _isRotate = false;//是否旋转
 public float ContinuousTime = 2;//旋转时间
 public float Speed = 2000;//旋转速度
 public float Angle = 0; // 这个是设置停止的角度
 private float _time;
 // Update is called once per frame
 void Update () {

  if (!_isRotate)return; //不旋转结束

  if (Time.time < _time) // 没结束
  {
   transform.Rotate(Vector3.forward * Speed * Time.deltaTime);
  }
  else
  {
  //结束，使用DoTween旋转到结束角度，耗时1秒
  //这里有个360，使用来防止指针回转的，如果不加这个360，你会看到指针倒退
   transform.DORotate(new Vector3(0, 0, 360 + Angle), 1f, RotateMode.FastBeyond360);
   _isRotate = false; // 设置不旋转
  }
 }

 //外部调用，初始化时间和打开旋转
 public void SetTime()
 {
  _time = Time.time + ContinuousTime;
  _isRotate = true;
 }
 //外部调用，设置停止角度
 public void SetAngle(float angle)
 {
  Angle = angle;
 }
}

指针:

开始按钮：

因为电脑上没什么制作动图的软件，如果效果我就结束，旋转个1张

旋转：

结束：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Unity3D实现鼠标控制旋转转盘

    Unity3D实现鼠标控制旋转转盘

    在培训模拟考试软件中,我们经常会遇到类似用鼠标旋转转盘打开开关的需求.让用户更加真实的操作设备仪器.接下来说下我的解决方案. 因为鼠标操作是在UI平面上,所以我们要先将被操作的模型的世界坐标转换到屏幕坐标上.代码如下: ModelScreenPos = camera.WorldToScreenPoint(Model.transform.position); 这里有个声明,这个模型代表的是转盘,而且要保证模型的中心点在转盘中心.然后我们就要计算鼠标以模型在屏幕坐标为中心点的旋转偏移量.我们开始以鼠

  • Unity实现大转盘的简单笔记

    本文实例为大家分享了Unity实现大转盘展示的具体代码,供大家参考,具体内容如下 1.unity中要实现旋转一个gameobject,我们需要改变它的transform下对应的Rotation,由于我们的大转盘是2D的视角,所以我们首先需要明确大转盘旋转的方向是旋转Rotation的Z. 2.如何实现大转盘由旋转快到慢,再到旋转指定为位置停下.查看了unity的脚本可以找到如下方法实现旋转大转盘如下: public void Rotate(Vector3 eulerAngles, Space r

  • Unity幸运转盘实战项目

    Unity幸运转盘实战项目

    幸运转盘主要是由两部分组成--转盘.指针,实现的方式也分两种,转盘动或者指针动,不过两者的原理都是一样的,这里就以指针动做了一个项目级的demo(由于后面的圆盘中间的那条竖线有点往左偏,所以导致那些圣诞老人的显示有些偏移).< Demo 下载> 在项目开发中,一般这个功能的实现过程是: 1.当点击开始的时候,转盘开始动, 同时向服务端发送协议: 2.服务端返回数据(前端计算好对应的角度),当转盘旋转一定时间后开始减速直至对应角度 当然也可以等服务端返回数据后再开始模拟旋转过程,但是由于受网络的

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

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

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

  • js实现大转盘抽奖游戏实例

    本文实例讲述了js实现大转盘抽奖游戏.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <hea

  • jquery——九宫格大转盘抽奖实例

    jquery——九宫格大转盘抽奖实例

     一.用到的图片 二.代码如下,重点是js部分 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery九宫格大转盘抽奖</title> <style> #lottery{width:570px;height:510

  • jquery实现九宫格大转盘抽奖

    jquery实现九宫格大转盘抽奖

    下面我们来分享一个九宫格抽奖特效 特效说明: 一款jQuery九宫格大转盘抽奖代码网页特效,点击抽奖按钮开始随机抽奖选择奖品,可设置起点位置.奖品数量.转动次数.中奖位置参数.(兼容测试:IE7及以上.Firefox.Chrome.Opera.Safari.360等主流浏览器) HTML: <!--效果html开始--> <div id="lottery"> <table border="0" cellpadding="0&q

  • 大转盘抽奖小程序版 转盘抽奖网页版

    大转盘抽奖小程序版 转盘抽奖网页版

    今天整理了下以前写的小demo,把大转盘抽奖的代码,整合下,列了网页版和小程序两个版本,这个转盘抽奖的核心是H5的canvas和Css3的translate属性,非常简单,写了网页版和小程序版供大家参考,主要核心代码就是利用canvas画图,完整代码见大转盘抽奖,下载可用 希望给大家带来帮助 //转盘内部绘制 lottery.prototype.getCanvasI=function(){ let itemsArc=360/this.itemsNum //获取大转盘每等分的角度 this.ite

  • python实现大转盘抽奖效果

    python实现大转盘抽奖效果

    本文实例为大家分享了python实现大转盘抽奖的具体代码,供大家参考,具体内容如下 选择转盘中的某一个方框,来进行抽奖 import tkinter #导入线程模块 import threading import time #导入代码的sleep 代码休眠 root = tkinter.Tk() root.title('大转盘') root.minsize(300,300) #摆放按钮 btn1 = tkinter.Button(root,text = '樱桃',bg = 'red') btn1

  • Vue.js实现大转盘抽奖总结及实现思路

    Vue.js实现大转盘抽奖总结及实现思路

    大家好!先上图看看本次案例的整体效果. 实现思路: Vue component实现大转盘组件,可以嵌套到任意要使用的页面. css3 transform控制大转盘抽奖过程的动画效果. 抽奖组件内使用钩子函数watch监听抽奖结果的返回情况播放大转盘动画并给用户弹出中奖提示. 中奖结果弹窗,为抽奖组件服务. 实现步骤如下: 构建api奖品配置信息和抽奖接口,vuex全局存放奖品配置和中奖结果数据信息. api: export default { getPrizeList () { let priz

  • VUE实现大转盘抽奖

    VUE实现大转盘抽奖

    UI 老规矩,先看下静态UI,以便于有个图像概念 初始参考各值参考图 方案分析-参数配置 核心思路: 将指针和中奖区域划分两部分,目前常规的效果,控制中奖区域旋转,然后停在指针处,当然控制指针也可以,一套思路,dom结构也比较简单,唯一算是复杂点的就是中奖区域,但是如果你足够懒,像我一样,你可以传递一张图也可以,完全依赖远端数据: 关于旋转位置 每个移动位置应均分,360/个数 === 每个奖品所占据的位置,以本文为例8个奖品位置,每个区域应为45deg,每个指针中心位置应为±22.5deg(±

  • vue实现大转盘抽奖功能

    vue实现大转盘抽奖功能

    本文实例为大家分享了vue实现大转盘抽奖的具体代码,供大家参考,具体内容如下 效果图如下 中奖提示 代码如下 <template>   <div class="dial" v-wechat-title="$route.meta.title">     <div class="times">抽奖次数{{LuckyClick}}</div>     <!-- 转盘包裹 -->     <

  • 使用jQuery Rotare实现微信大转盘抽奖功能

    使用jQuery Rotare实现微信大转盘抽奖功能

    很多公司到了年底都会做一些抽奖活动来刺激.吸引.粘住客户,比如抽奖转盘活动. 前几天用一个jqueryRotate插件实现了转盘的效果.比起那些很炫丽的flash是稍逊点,但也基本实现了需求 效果图: 实现这个其实蛮简单的,转动的效果用的jqueryRotate插件,所以只要判断每个奖荐对应的角度,然后设置指针的转动角度就可以了.比如关键的是jqueryRotate这个插件的用法. jqueryRotate的资料: 支持Internet Explorer 6.0+ .Firefox 2.0 .S

随机推荐