cocos2d-x 模拟IOS时间选择器效果

原创文章,欢迎转载!转载请注明:转载自Cocos2D开发网--Cocos2Dev.com

原文链接地址:cocos2d-x 模拟IOS时间选择器效果

IOS 的时间选择期UIDatePicker效果挺不错,像之类的效果都可以用它实现,我业余写的游戏中要用到一个这样的选择期,网上找了下也没找到什么。就自己模拟的写了个。

这是效果图:(呵呵,我不会画图,素材是扒的国外的一个游戏,游戏还没有写完。只能截部分图)

实现原理:

能滚动的两个控件就是两个CCSprite。里面能够滚动的图片是一个很长的图,也就是从上到下有1,2,3,4,5,6,7,8,9,10,1 ,共11个数字。

首尾一样为了循环的时候无缝连接。也就是两个1叠到一起。想象成一片字条,两个1重叠后就是一个1-10的圈。

这样我只需要不停的绘制这个圈的一部分就是实现转动了。

实现代码:

1、创建一张很长的图的Texture,

1 CCTexture2D*m_diceNumsTexture = CCTextureCache::sharedTextureCache()->addImage("dicenums.png");

2、创建一个Sprite,显示第一步的一部分图

1 floatscollDiceNumValue = 0.0f;
2
3 CCSprite* diceNum = CCSprite::spriteWithSpriteFrame(CCSpriteFrame::frameWithTexture(m_diceNumsTexture, cocos2d::CCRectMake(0, scollDiceNumValue, 58, 82)));
4
5 diceNum->setTag(tag_choose_dice_num);
6
7 //设置坐标,添加到场景

3、手指滑动的时候,不停的绘制上面的Sprite,

在move事件中得到手指当前一帧和上一帧的位置的差值scollValue。然后在schedule中调用下面的代码:

scollDiceNumValue += scollValue;

if (scollDiceNumValue<0) {

scollDiceNumValue=492;//如果滑到1还想往后滑,就开始显示10

}

if(scollDiceNumValue>492){

scollDiceNumValue=0;//如果滑到10还想往前滑,就开始显示1

}

CCSprite* temDiceNum = (CCSprite*)choooseLayer->getChildByTag(tag_choose_dice_num);

temDiceNum->setTextureRect(CCSpriteFrame::frameWithTexture(m_diceNumsTexture,

CCRectMake(0, scollDiceNumValue, 58, 82))->getRect());

4、当手指离开屏幕时,记得校准显示的数字,因为玩家可能滑到显示一半图就TouchEnd了,所以还得校准下。

校准的办法就是求余,余数不为零就是没对准,需要校准

余数大于一个格子的高的一半是,继续下滑。

余数小于一个格子的高的一半是,继续上滑。

目的是往最接近完整的地方靠近。

OK,实在没空将它封装起来,这里只是给大家一个思路。当然也有更好的办法。

你可能感兴趣的:(cocos2d-x 模拟IOS时间选择器效果)