引言
探索游戏开发中抽奖转盘的奥秘。
抽奖转盘是一种常见的互动元素,通常用于游戏、营销活动等场景。
本文将介绍一下抽奖转盘的原理和实现。
本文源工程可在文末阅读原文获取,小伙伴们自行前往。
1.抽奖转盘的组成
抽奖转盘的实现涉及多个组成部分,以下是一般抽奖转盘的主要组成:
- 转盘界面: 转盘通常是一个圆形或扇形的图形,分为多个奖项区域。
- 奖项定义: 定义转盘上的各个奖项,每个奖项包含奖品名称、图标等信息。
- 随机数生成器: 抽奖的核心是生成一个随机数,该随机数用于确定用户最终停留在转盘上的位置。
- 角度计算: 根据生成的随机数,计算用户最终停留的角度。这涉及将随机数映射到转盘上的角度范围。
- 旋转动画: 实现转盘旋转的动画效果,使其在一段时间内以一定的速度旋转。
下面一起来看看抽奖转盘的原理。
2.抽奖转盘的原理
首先我们来看一下抽奖的流程图:
其中核心一是后端的抽奖核心算法。
概率并不是我们直观看到的均等的1/8(相信大家都是知道的,但是明知山有虎,偏向虎山行)。
事实上会根据不同的奖品设定不同的权重,便宜的物品权重极高(接近90%),贵重的物品权重极低(少于1%,甚至为0)。
从下图可以看到,288金币的权重为3300,5000金币的权重为200,总权重为10000。所以288金币的概率为33% ,5000金币的概率为2% 。
核心二则是角度的计算。
旋转的角度=当前转盘的角度-当前转盘的角度%360 - 360 / 8 * i - 1080
其中
-当前转盘的角度%360
是为了让转盘复位,可以从当前旋转继续旋转。-360 / 8 * i
则是转盘应该旋转到的角度。-1080
则是为了转盘效果让转盘多转3圈。
下面一起来实现一个抽奖转盘。
3.抽奖转盘的实现
1.环境
引擎版本:Cocos Creator 3.8.1
编程语言:TypeScript
2.资源准备
首先根据抽奖转盘的组成,准备一些图片,其中包括:
- 一个8等分的转盘。
- 一个指针。
- 一些奖励的图片(金币和钻石)。
然后简单编辑一下UI界面。
其中要注意的是如果图片的中心不是转盘的中心,需要稍微调整一下锚点,否者转起来奇奇怪怪。
其次是奖励的子项,可以只拼一个,但是中心也要移动到转盘中心,然后通过克隆和旋转生成其他的。
3.编写代码
首先创建一个Turntable
组件。
import {
_decorator, Component, find, Input, input, instantiate, KeyCode, Label, Node, Sprite, SpriteFrame, tween } from 'cc';
const {
ccclass, property } = _decorator;
type ItemNode = {
icon: Sprite, count: Label