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

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

（。。。亮瞎了我的钛合金眼！）

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

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);
	})));