使用cocos2d-x模仿QQ欢乐斗地主手机版的界面控件

前段时间在做一款斗地主游戏，需要实现类似QQ欢乐斗地主主里面的效果。见下面效果图。

实现细节就不细说了，参见源码。大体就是将一个使用椭圆算法（参考《计算机图形学(第三版)》3.10）生成一个椭圆，在椭圆上每隔90度放置一个精灵。然后滑动的时候再计算每个精灵的新位置，并且根据与中心上的精灵的距离更新每个精灵的颜色、大小、层级等属性。

说说使用，这个在使用上也是比较简单的，如下所示。

bool HelloWorld::init()
{
    //////////////////////////////
    // 1. super init first
    if ( !Layer::init() )
    {
        return false;
    }

    Size visibleSize = Director::getInstance()->getVisibleSize();
    Vec2 origin = Director::getInstance()->getVisibleOrigin();

    SpriteFrameCache::getInstance()->addSpriteFramesWithFile("image.plist");

    m_pCircleGallery = CircleGallery::create(this, 4, 180, 50);
    m_pCircleGallery->setPosition(Vec2(origin.x + visibleSize.width / 2, origin.y + visibleSize.height / 2));
    addChild(m_pCircleGallery);

    return true;
}

Sprite* HelloWorld::galleryItemAtIndex(CircleGallery *gallery, const GalleryItem &item)
{
	char buffer[64];
	sprintf(buffer, item.state == GalleryDelegate::State::selected ? "item_%02d+.png" : "item_%02d.png", item.index + 1);
	auto sprite = gallery->getSpriteByIndex(item.index);
	if (!sprite)
	{
		sprite = Sprite::create();
	}
	sprite->setSpriteFrame(buffer);
	return sprite;
}

在CircleGallery创建的时候传入子项数量、x轴的半径和y轴的半径等。然后再galleryItemAtIndex函数里面根据参数GalleryItem（里面包含了当前项的索引及状态）来更新精灵，其它的就不用理会了，会自动更新大小、层级、颜色等信息。用法上跟CCTableView有点类似。

源码下载：http://pan.baidu.com/s/1o6l2Jk2