展会信息港展会大全

cocos2dx之抽奖界面与获奖概率的设计(一),cocos2dx抽奖
来源:互联网   发布日期:2015-09-28 13:35:43   浏览:928次  

导读: cocos2dx之抽奖界面与获奖概率的设计(一),cocos2dx抽奖 ************************************************************...

cocos2dx之抽奖界面与获奖概率的设计(一),cocos2dx抽奖

****************************************************************************

时间:2015-02-01

作者:Sharing_Li

转载出处:http://blog.csdn.net/sharing_li/article/details/43268877

****************************************************************************

在不同游戏中,经常有各种各样抽奖的环节,比如每次登入游戏的免费抽奖,卡牌游戏中的抽不同颜色的卡牌英雄,不同品质的武器抽奖,十连抽等等。今天给大家讲解一下,比较传统的抽奖方式,就是转转盘的抽奖,包含抽奖界面动画的设计和抽奖概率的设计。由于内容稍微有点多,所以分两篇进行讲解,本篇先介绍转盘抽奖方式的界面设计。废话不多说,先上效果图:

(。。。亮瞎了我的钛合金眼!)

来看看大致的功能需求有哪些:

1、一个转盘,一个指针,可以是转盘转,也可以是指针转,本篇是转盘转。

2、转盘在转的时候,速度是先快后慢,然后停止。

3、转盘在转的时候,各种粒子效果的动画,其中包括圆环状的闪光星星,还有以椭圆轨迹运动的小彗星。

4、抽中奖品后,弹出抽中奖品的动画。

看完功能需求,再来看看代码怎么写:

先看简单的初始化代码:

bool LotteryTurnTest::init()

{

if (!Layer::init())

{

return false;

}

auto bgSize = Director::getInstance()->getWinSize();

m_pBg = Sprite::create("LotteryTurn/bg_big.png");

m_pBg->setPosition(Vec2(bgSize.width / 2,bgSize.height / 2));

this->addChild(m_pBg);

//添加标题

auto plabel = Label::createWithTTF("LotteryTurnTest","fonts/Marker Felt.ttf",30);

plabel->setPosition(Vec2(bgSize.width / 2,bgSize.height * 0.9));

m_pBg->addChild(plabel);

//添加转盘

m_turnBg = Sprite::create("LotteryTurn/turn_bg.png");

m_turnBg->setPosition(Vec2(bgSize.width / 2,bgSize.height / 2));

m_pBg->addChild(m_turnBg);

//添加指针

auto arrNor = Sprite::create("LotteryTurn/turn_arrow.png");

auto arrSel = Sprite::create("LotteryTurn/turn_arrow.png");

arrSel->setColor(Color3B(190,190,190));

m_turnArr = MenuItemSprite::create(arrNor,arrSel,CC_CALLBACK_1(LotteryTurnTest::onBtnCallback,this));

m_turnArr->setPosition(Vec2(bgSize.width / 2,bgSize.height * 0.557));

m_turnArr->setScale(0.7);

auto pMenu = Menu::createWithItem(m_turnArr);

pMenu->setPosition(Vec2::ZERO);

m_pBg->addChild(pMenu);

//添加中奖之后的简单界面

auto awardLayer = LayerColor::create(Color4B(0,0,0,100));

awardLayer->setPosition(Point::ZERO);

awardLayer->setTag(100);

m_pBg->addChild(awardLayer,10);

awardLayer->setVisible(false);

return true;

}

点击按钮,获取一个随机的旋转角度,转盘开始转,注意的是,转盘在转的时候,按钮要被设置成无效状态,以免多次点击。

//防止多次点击

m_turnArr->setEnabled(false);

srand(unsigned(time(NULL)));

float angleZ = rand() % 720 + 720;

auto pAction = EaseExponentialOut::create(RotateBy::create(4,Vec3(0,0,angleZ)));

m_turnBg->runAction(Sequence::create(pAction,CallFunc::create(CC_CALLBACK_0(LotteryTurnTest::onTurnEnd,this)),NULL));

这里,我们用的EaseExponentialOut来控制转盘旋转的速度。

当然,转盘在转的时候,各种粒子效果开始行动啦,这里放到文章后面讲解,先看看中奖之后的动画:

//弹出抽中奖品

((LayerColor *)m_pBg->getChildByTag(100))->setVisible(true);

auto award = Sprite::create("LotteryTurn/award.png");

award->setAnchorPoint(Vec2(0.5,0));

award->setPosition(Vec2(m_pBg->getPositionX(),m_pBg->getPositionY() * 2));

this->addChild(award);

auto bounce = EaseBounceOut::create(MoveBy::create(2,Vec2(0,-m_pBg->getPositionX() * 2)));

award->runAction(Sequence::createWithTwoActions(bounce,CallFuncN::create([=](Node * node){

award->removeFromParentAndCleanup(true);

((LayerColor *)m_pBg->getChildByTag(100))->setVisible(false);

m_turnArr->setEnabled(true);

})));

再来看看咱们转盘中的粒子效果,有两种,第一种圆环的星星闪烁效果比较简单,设置下离中心的距离就好了,这里主要讲解以椭圆轨迹旋转的小彗星粒子效果。

既然以椭圆为轨迹,其实也就是实时更新下粒子的位置,但是椭圆的坐标怎么计算呢?想必部分人都忘记了吧(我也忘记了。。。),直接去问度娘吧:

咱们椭圆的中心即是转盘的中心,所以是一个标准的椭圆方程:

,对应的参数方程就是:

那么答案就出来啦,只要我们实时改变参数φ的值,那么椭圆上的坐标就会实时更新。知道原理了,我们再来看看怎么设计这样一个椭圆类。既然沿椭圆轨迹运动,那么为什么不把这一种动作设计成跟cocos2dx引擎中的动作Action一样呢?在使用的时候,我们只需要调用runAction就可以了。我们可以参考cocos2dx引擎动作类的设计。

来看头文件:

#ifndef _ELLIPSEBY_H_

#define _ELLIPSEBY_H_

#include "cocos2d.h"

USING_NS_CC;

#define PI 3.14159

//椭圆的参数信息

struct EllipseConfig

{

//椭圆a的长度

float ellipseA;

//椭圆b的长度

float ellipseB;

//椭圆的中心坐标

Vec2 cenPos;

//是否逆时针旋转

bool isAntiClockwise;

//目标开始旋转的位置,默认位置是在椭圆长轴右方,即值为0

float startAngle;

//目标自身的角度

float selfAngle;

};

class EllipseBy : public ActionInterval

{

public:

EllipseBy();

~EllipseBy();

//初始化函数,参数t为持续时间,config为椭圆参数

static EllipseBy * create(float t,const EllipseConfig & config);

bool initWithDuration(float t,const EllipseConfig & config);

//每帧更新当前椭圆坐标

virtual void update(float time) override;

//在动作开始前调用

virtual void startWithTarget(Node *target) override;

//动作的拷贝

virtual EllipseBy * clone() const override;

//动作的逆序

virtual EllipseBy * reverse() const override;

protected:

//获得椭圆上当前点坐标

inline Vec2 & getPosWithEllipse(float t)

{

float angle = 2 * PI * ((m_config.isAntiClockwise ? t : (1 - t)) + m_config.startAngle / 360);

return Vec2(m_config.ellipseA * cos(angle),m_config.ellipseB * sin(angle));

}

private:

EllipseConfig m_config;

};

#endif

我们定义了一个椭圆参数的结构体EllipseConfig,前面4个比较好理解,后面2个:startAngle是开始旋转粒子出现的位置,值为角度值。比如下面例图所示:

selfAngle是指把整个椭圆当成一个整体,这个整体的角度,类似于精灵的rotation属性。比如下面例图所示:

接着再来看看从父类继承来的三个函数:startWithTarget、clone、reverse

startWithTarget是用来设置是谁要执行动作,在动作开始前调用;后面两个,一个是动作的拷贝,一个是动作的逆序,因为在父类中是纯虚函数,所以要继承实现。

再来看看函数getPosWithEllipse,这个是利用椭圆的参数方程,获得当前目标所处椭圆上的位置。因为要不停的调用,所以声明为内联函数。

最后看看cpp文件的部分实现代码:

EllipseBy * EllipseBy::clone() const

{

auto pAction = new EllipseBy();

pAction->initWithDuration(_duration, m_config);

pAction->autorelease();

return pAction;

}

EllipseBy * EllipseBy::reverse() const

{

EllipseConfig resConfig = m_config;

resConfig.isAntiClockwise = !m_config.isAntiClockwise;

return EllipseBy::create(_duration, m_config);

}

void EllipseBy::startWithTarget(Node *target)

{

ActionInterval::startWithTarget(target);

}

void EllipseBy::update(float time)

{

if (_target)

{

Vec2 curPos = this->getPosWithEllipse(time);

float tmpAngle = m_config.selfAngle / 180 * PI;

float newX = curPos.x * cos(tmpAngle) + curPos.y * sin(tmpAngle);

float newY = curPos.y * cos(tmpAngle) - curPos.x * sin(tmpAngle);

_target->setPosition(m_config.cenPos + Vec2(newX,newY));

}

}

其中最重要的部分就是update函数啦,getPosWithEllipse获得的坐标curPos是selfAngle为0时的坐标,如果我们设置了椭圆自身的角度,就要调整下curPos的坐标。有以下公式:

如果椭圆自身旋转了β,即selfAngle = β 那么之后的坐标是:newX = xcosβ + ysinβ,newY = ycosβ - xsinβ

这里给大家简单的分析一下公式,先看图:

这里黑色的椭圆是没有设置selfAngle时的样子,当设置selfAngle为β后,就变成蓝色的椭圆。由于两个椭圆的中心都是圆心,所以椭圆上同一位置上的点到圆心的距离以一样,也就是上图中红线和绿线的长度相等,那么利用勾股定理,就是下面:

a^2 + b^2 = x^2 + y^2 = x^2 * 1 + y^2 * 1

因为cos& * cos& + sin& * sin& = 1,所以:

上面公式 = x^2 * (cos(β)^2 + sin(β)^2) + y^2 * (cos(β)^2 + sin(β)^2)

然后分解合并,就可以得到下面的公式啦:

a^2 + b^2 = (xcosβ + ysinβ)^2 + (ycosβ - xsinβ)^2

所以:a = xcosβ + ysinβ,b = ycosβ - xsinβ

最后,我们只需要如下调用,就可以像使用引擎的动作一样:

//椭圆旋转

EllipseConfig config;

config.ellipseA = 100;

config.ellipseB = 50;

config.cenPos = m_turnBg->getPosition();

config.isAntiClockwise = true;

config.startAngle = 0;

config.selfAngle = 45;

m_pElliRtt_1->runAction(RepeatForever::create( EllipseBy::create(2.5,config)));

到这里,本篇上部分内容已经讲解完了,下一篇将讲解抽奖概率的设计。

资源下载处:http://download.csdn.net/detail/sharing_li/8414387

本篇第二篇地址:http://blog.csdn.net/sharing_li/article/details/43405569

http://www.bkjia.com/Androidjc/951949.htmlwww.bkjia.comtruehttp://www.bkjia.com/Androidjc/951949.htmlTechArticlecocos2dx之抽奖界面与获奖概率的设计(一),cocos2dx抽奖 **************************************************************************** 时间: 2015-02-01 作者: Sh...

赞助本站

人工智能实验室

相关热词: android开发 android教程

相关内容
AiLab云推荐
展开

热门栏目HotCates

Copyright © 2010-2024 AiLab Team. 人工智能实验室 版权所有    关于我们 | 联系我们 | 广告服务 | 公司动态 | 免责声明 | 隐私条款 | 工作机会 | 展会港