新手向:用Creator教你作大转盘

Creator只能做游戏?Naive!!

话说遇见神马

话说遇见神马清明,端午,双十一,国庆,圣诞什么的,营销推广活动页面肯定是少不了的。
然而当你遇到大转盘的时候 ,怎么办呢?

不要说做不到!!

去用creator!!

人生没有那么多时间给你找插件!!

设计出了就搞,产品拍桌子了就干!

CSS3又有什么用?!

移动端各种浏览器兼容还是很坑爹!

jquery的效果手机端太卡顿!

用creator!,

不懂就查API,不会就问逛论坛

你连在canvas里实现各种效果都不会?

你还说你这个前端,会H5?!

本菜鸡现在就分享一下 ,

如何用creator来做网络推广页面“大转盘”.

10赞

首先准备好 图片素材
然后建好项目 目录
如图

层级管理器如图

场景管理器如图

现在 就开始撸代码
代码在 script/pointerRun 这个 Js 文件夹下

首先是 设置 properties
properties 设置 如图

pointer 这个是对应的 转盘指针

pointerButton 这个对应的 是点击按钮

awardWords 这个 是中奖提示信息

amount 这个 是 奖品提示信息

OK, 另外PS: 这个是非常粗浅的东东,非常适合新手,话说,我本人也是菜鸡。。。。所以,代码里 有更好的方法,写法,也请多留言多给建议

把脚本挂在到Canvas下
然后把对应的组件 挂载好

接着 在 onLoad 里面写 触摸事件注册

this.pointerButtonClick();

然后 在 pointerButtonClick里 注册 事件


pointerButtonClick:function(){
this.pointerButton.on(cc.Node.EventType.TOUCH_START,this.pointerButtonStartControl,this);
this.pointerButton.on(cc.Node.EventType.TOUCH_UP,this.pointerButtonUpControl,this);

},

好了,事件写好了,意思是
点击pointerButton 会触发pointerButtonStartControl 事件
点击抬起的时候 也会有个pointerButtonUpControl事件,PS:有需要的可以自行添加

接下来
主要的功能都写在这个函数里
pointerButtonStartControl();

设置好参数

       var _this = this;
   var clickTimes = 6; //设置转盘指针多时间
   var rounds = 10;	//设置转盘指针多少圈

不过这个正菜是要准备好佐料的,什么佐料呢?
在resources/文件夹下 新建一个 json文件
Json的文件 格式 可以是这样
{“result”:1}

在pointerButtonStartControl() 里,把抽奖相关的信息写里面

这个设定好了以后,就用一个类似于jquery 的ajax 方法和后台交互
通过后台返回给你的参数,显示结果

什么?为什么要后台交互?

好吧。。。。

说白了,就是用户抽什么奖全部是由后台控制的

我表示

和 后台交互用这个方法

然后 在 这个方法里 设置
var adValue = awardMapping[res.result].angleVlue;

结合var awardMapping

这个时候json 数据 {“result”:1} 是1 的话
对应的 adValue 就是这个值

adValue 是用来控制 转盘角度的
于是我们可以根据后台返回的结果得到对应的角度值和中奖信息,

接下来通过角度值的判断设置转盘的表现

还记得 pointerButtonStartControl();
里面 设置的参数吧?
var clickTimes = 6; //设置转盘指针多时间
var rounds = 10; //设置转盘指针多少圈

这里我们要设置一个 转盘指针的角度 awardAngle01
角度旋转的设置 参数 如下

这 8个角度 正好 对应 转盘抽奖的 八个中奖区域

.easing(cc.easeCubicActionOut(clickTimes));
clickTimes是上面设置的参数
这个是缓动减速的方法,不懂就去查API

点击“抽奖”以后 你就会发现 转盘可以动起来了
不过
点击抽奖”依然可以点击
我们需要做的是,做一个相同的按钮,当点击事件发生的时候,真按钮随即删除,代替一个假的按钮,使用户不能再次点击

最后,用户提示信息 方法 写在inforDelayShow(); 里面
这个方法 必须在clickTime的时间后

不然,奖品还没抽完,指针还在转,抽奖结果就出来了
那不是
穿帮了?!

所以,必须在指针转完之后,才能显示 抽奖结果,
于是我就加了0.5秒

最后 项目生成以后 找到resources/json/query.json 这个地址
然后 把它交给 后台小哥

OK,大功告成

PS:json文件,改成{“result”:8},你会发现有趣的事情
我把项目发在这里,互相学习吧
turntable5.1.0.zip (334.8 KB)

3赞

。。。作为单身狗,抽了个南塔斯可以退货么

mark

之前有人做过一期做转盘的视频,很详细。这也是我cocos的启蒙教程。

http://v.youku.com/v_show/id_XMTUxOTU2MDk2NA==.html?from=s1.8-1-1.2

1赞

说的好我选择南塔斯跳钢管舞

负分,最大奖还不啪啪啪。

这个尺度掠大 啊!~
不过。。。
我特么 怎么没想到?!