从0开始用CocosCreator开发一个转盘抽奖功能（一）

六月七
306 阅读2分钟

你们有没有试过用游戏引擎来开发一个小小的抽奖游戏呢，今天我们用CocosCreator 开发一个转盘的抽奖工具。我用的版本3.6.2

1.打开cocosCreator,新建一个2D项目 image.png

2.设置项目的宽和高 image.png

（1）新建一个SpriteSplash(单色)精灵 image.png

  （2）并且命名为bg

image.png

(3)大小设置为720*1280

image.png  

(1)在assets下新建一个文件夹，并且命名为img

image.png  

(2)将素材放入该文件夹下 image.png

5.在assetsf下再新建一个文件夹，并且命名为script

image.png

6.将img文件夹下的素材拖到Canvas下 image.png  

7. (1)在"文件"-->保存场景

image.png

(2)将场景命名为lottery

image.png  

8.调整按钮的位置position

image.png

（1）在script文件夹下新建一个脚本

image.png

（2）并将脚本命名为lottery

image.png

10.lottery脚本绑定到canvas下

image.png

  11

（1）选择 an 精灵,添加组件

image.png

（2）选择Button组件

image.png

12.按钮的Transition设置为SCALE，该模式下，点击按钮有放大的效果

image.png

13.打开lottery.ts脚本，添加函数onlineLottery

image.png

14.选择an精灵,Click Events设置为1，并且绑定到onlineLottery函数，当点击该按钮就会调用到该函数

image.png

（1）在script 文件夹再新建一个脚本

image.png

（2）并且将该脚本命名为luckyWheel

image.png

16.将脚本luckyWheel绑定到节点turntable上

image.png  

17. 打开lottery.ts脚本,添加装饰器

image.png

  18.将节点turntable绑定到Wheel上

image.png

19.选择节点turntable,切换到旋转工具

image.png

20打开luckyWheel.ts脚本，添加prizeAngles

image.png

 

21 将指针指向一等奖，记录Rotation 的值,

image.png  

22.将上一步记录的Rotation 的值填入到数组中

image.png

23.获取每一个奖项的Rotation值，并分别填入到prizeAngles数组中。 image.png

今天就到这里了，主要说了抽奖项目在界面上的一些设置，下一次在说下如何通过代码来控制抽奖装盘的转动。可能写的过程中还有很多不好的地方，希望大家能指出来，在此，谢谢大家

avatar
文章
阅读
粉丝