实现了个类似blood brothers中的转轴特效

最近比较忙，有一段时间没写东西了，今天算是忙里偷闲，分享点东西。
在美区有个游戏叫bloodbrothers，玩了玩，感觉还不错，其中有一个页面，可以选择人物的奴仆，页面布局是中间是主人，四周是奴仆，以一个椭圆形围着主人转圈，仆人的数目可以增减，觉得这个页面挺有意思，我就试着实现了一个。
blood brothers的效果：


玩家滑动屏幕，两个骷髅兵会围着中间的老大按照椭圆轨迹转圈。

我实现的效果：




中间的老大我没做，滑动屏幕，四周的机器人图片会以椭圆轨迹旋转，个人感觉效果尚可，如果美工跟得上
我觉得效果不会比人家的差-_-!

废话不多说了，上代码
cwMainLayer.h

#ifndef _cwMainLayer_h_
#define _cwMainLayer_h_

#include "cocos2d.h"
using namespace cocos2d;

#include <string>
#include <vector>
using namespace std;

class cwShowSprite : public CCSprite
{
public:
      cwShowSprite() : m_fAngle(0) {}
      ~cwShowSprite() {}
     
public:
      staticcwShowSprite* create(const char *pszFileName);

private:
      //当前角度
      CC_SYNTHESIZE(float, m_fAngle, Angle);

};

class cwMainLayer : public CCLayer
{
public:
      cwMainLayer() : m_pArrShow(NULL), m_fAngleStep(0),m_fScaleStart(1.0f), m_fScaleEnd(0.6f) {}
      ~cwMainLayer();

      //增加显示图片
      voidaddShow(const char* pcName);
      //排列图片
      voidarrange();

private:
      //计算图片角度
      voidarrangeAngle();
      //计算图片位置
      voidarrangePosition();
      //计算图片zorder
      voidarrangeZOrder();
      //计算图片缩放值
      voidarrangeScale();

      //根据y坐标排序（由小到大）
      vector<cwShowSprite*>orderByY();
      //计算那个图片被点击
      cwShowSprite* clickSprite(CCPoint& pt);

      //将图片移动指定角度
      voidmoveShow(float angle);

public:
      CREATE_FUNC(cwMainLayer);

      boolinit();

      virtual voidonEnter();
      virtual voidonExit();

      virtual boolccTouchBegan(CCTouch *pTouch, CCEvent *pEvent);
      virtual voidccTouchMoved(CCTouch *pTouch, CCEvent *pEvent);
      virtual voidccTouchEnded(CCTouch *pTouch, CCEvent *pEvent);

private:
      //存储图片数组
      CCArray*m_pArrShow;

      //圆环中点
      CC_SYNTHESIZE_PASS_BY_REF(CCPoint, m_nCenter, Center);
      //椭圆长短轴
      CC_SYNTHESIZE(float, m_fLongA, LongA);
      CC_SYNTHESIZE(float, m_fShortB, ShortB);

      //缩放范围
      CC_SYNTHESIZE(float, m_fScaleStart, ScaleStart);
      CC_SYNTHESIZE(float, m_fScaleEnd, ScaleEnd);

      //图片的起始zorder
      CC_SYNTHESIZE(int, m_iZStart, ZStart);

      //图片在圆环上排列的角度步长
      floatm_fAngleStep;
      //图片Y值区间，也就是椭圆短轴y坐标区域
      floatm_fYMin;
      floatm_fYMax;

      //fortouch
      CCPointm_nTouchBegin;
      CCPointm_nTouchMoving;

      //background
      CCSprite*m_pBackGround;

};

#endif

cwMainLayer.cpp

#include "cwMainLayer.h"

#include <list>
#include <vector>
#include <algorithm>
using namespace std;

cwShowSprite* cwShowSprite::create(const char *pszFileName)
{
      cwShowSprite* pSprite = new cwShowSprite();
      if(pSprite&&pSprite->initWithFile(pszFileName)) {
            pSprite->autorelease();
            returnpSprite;
      }

      CC_SAFE_DELETE(pSprite);
      returnNULL;
}

cwMainLayer::~cwMainLayer()
{
      CC_SAFE_RELEASE_NULL(m_pArrShow);
}

bool cwMainLayer::init()
{
      if(!CCLayer::init()) return false;

      CCSizewinSize =CCDirector::sharedDirector()->getWinSize();

      m_pBackGround = CCSprite::create("bk.png");
      m_pBackGround->setPosition(ccp(winSize.width*0.5,winSize.height*0.5));
      this->addChild(m_pBackGround, -1);

      m_pArrShow =CCArray::create();
      m_pArrShow->retain();

      this->setAnchorPoint(ccp(0, 0));
      setCenter(ccp(winSize.width*0.5, winSize.height*0.7));
      setLongA(winSize.width*0.3);
      setShortB(getLongA()*0.25);

      m_iZStart =1;
      m_fYMin =m_nCenter.y - m_fShortB;
      m_fYMax =m_nCenter.y + m_fShortB;

      returntrue;
}

void cwMainLayer::addShow(const char* pcName)
{
      cwShowSprite* pSprite = cwShowSprite::create(pcName);
      if(!pSprite)return;

      m_pArrShow->addObject(pSprite);

      m_fAngleStep= 360.0f / float(m_pArrShow->count());

      this->addChild(pSprite);
}

void cwMainLayer::arrange()
{
      arrangeAngle();
      arrangePosition();
      arrangeScale();
      arrangeZOrder();
}

void cwMainLayer::arrangeAngle()
{
      if(m_pArrShow->count() == 0) return;

      float fStart=((cwShowSprite*)(m_pArrShow->objectAtIndex(0)))->getAngle();
      int index =0;

      CCObject*pObj;
      CCARRAY_FOREACH(m_pArrShow, pObj) {
            cwShowSprite* pSprite = (cwShowSprite*)pObj;

            pSprite->setAngle(fStart -index*m_fAngleStep);

            index++;
      }
}

void cwMainLayer::arrangePosition()
{
      CCObject*pObj;
      CCARRAY_FOREACH(m_pArrShow, pObj) {
            cwShowSprite* pSprite = (cwShowSprite*)pObj;

            float fAngle= fmod(pSprite->getAngle(), 360.0f);
            float x =cosf(fAngle/180.0*3.14159)*m_fLongA + m_nCenter.x;
            float y =sinf(fAngle/180.0*3.14159)*m_fShortB*0.5f + m_nCenter.y;

            pSprite->setPosition(ccp(x, y));
      }
}

void cwMainLayer::arrangeZOrder()
{
      int iZMax =m_iZStart + m_pArrShow->count();

      vector<cwShowSprite*> v =orderByY();

      vector<cwShowSprite*>::iterator it =v.begin();
      for(;it!=v.end(); ++it) {
            (*it)->removeFromParentAndClean up(false);
            this->addChild((*it), iZMax--);
      }
}

void cwMainLayer::arrangeScale()
{
      CCObject*pObj;
      CCARRAY_FOREACH(m_pArrShow, pObj) {
            cwShowSprite* pSprite = (cwShowSprite*)pObj;

            float fy =pSprite->getPositionY() - m_fYMin;
            if(fy< 0) fy = 0;

            float fScale= fy / (m_fShortB*2);

            pSprite->setScale(1.0 -(m_fScaleStart-m_fScaleEnd)*fScale);
      }
}

void cwMainLayer::moveShow(float angle)
{
      CCObject*pObj;
      CCARRAY_FOREACH(m_pArrShow, pObj) {
            cwShowSprite* pSprite = (cwShowSprite*)pObj;

            pSprite->setAngle(pSprite->getAngle()+angle);
      }
}

void cwMainLayer::onEnter()
{
      CCLayer::onEnter();

      CCDirector::sharedDirector()->getTouchDispatcher()->addTargetedDelegate(this,-200, false);
}

void cwMainLayer::onExit()
{
      CCLayer::onExit();

      CCDirector::sharedDirector()->getTouchDispatcher()->removeDelegate(this);
}

bool comp(const cwShowSprite* p1, const cwShowSprite* p2)
{
      return((CCNode*)(p1))->getPositionY() <((CCNode*)(p2))->getPositionY();
}

vector<cwShowSprite*>cwMainLayer::orderByY()
{
      vector<cwShowSprite*> v;

      CCObject*pObj;
      CCARRAY_FOREACH(m_pArrShow, pObj) {
            cwShowSprite* pSprite = (cwShowSprite*)pObj;
            v.push_back(pSprite);
      }

      sort(v.begin(), v.end(), comp);

      returnv;
}

cwShowSprite* cwMainLayer::clickSprite(CCPoint&pt)
{
      vector<cwShowSprite*> v =orderByY();

      vector<cwShowSprite*>::iterator it =v.begin();
      for(;it!=v.end(); ++it) {
            if((*it)->boundingBox().containsPoint(pt)) return(*it);
      }

      returnNULL;
}

bool cwMainLayer::ccTouchBegan(CCTouch *pTouch, CCEvent*pEvent)
{
      m_nTouchBegin =this->convertTouchToNodeSpace(pTouch);
      m_nTouchMoving = m_nTouchBegin;

      returntrue;
}

void cwMainLayer::ccTouchMoved(CCTouch *pTouch, CCEvent*pEvent)
{
      CCPoint pt =this->convertTouchToNodeSpace(pTouch);

      float fStep= 1.0;
      if(pt.x< m_nTouchMoving.x)
            fStep =-fStep;

      moveShow(fStep);

      arrange();

      m_nTouchMoving = pt;
}

void cwMainLayer::ccTouchEnded(CCTouch *pTouch, CCEvent*pEvent)
{
      CCPoint pt =this->convertTouchToNodeSpace(pTouch);

      float fDist= cocos2d::ccpDistance(pt, m_nTouchBegin);
      if(fDist> 5.0) return;

      cwShowSprite* pSprite = clickSprite(pt);
      if(!pSprite)return;

      CCLog("click%d", pSprite->m_uID);
}
///

代码量不大，300行左右。
其中cwMainLayer::init()中的“bk.png”是我随手做的背景图片。

原理就是椭圆上每个对象保存与向量(1,0)的夹角，有了这个夹角，就可以根据椭圆公式计算其x，y坐标；
根据y坐标来计算其所在层的zorder，计算zorder的目的是使前面的图片可以盖住后面的图片；还可以根据其y值计算其缩放值，计算缩放值目的是达到近似近大远小的效果。

关键的就是那么几个函数：
void cwMainLayer::arrangeAngle()
这个函数计算每个对象在椭圆上与向量(1,0)。

void cwMainLayer::arrangePosition()
使用椭圆公式，根据对象的夹角计算其位置，关于椭圆方面的数学知识可以参考
http://hi.baidu.com/ejoqsqmrmvakuxr/item/389ed4d5d48b03d9241f402b
的文章。

void cwMainLayer::arrangeZOrder()
计算图片zorder，首先对所有图片根据其y坐标由小到大进行排序，然后重新设置其zorder，y值越小
的zorder值越大，熟悉3D的朋友应该对这算法比较熟悉吧，原理类似于z-buffer，不过细节上比z-buffer
简单。

void cwMainLayer::arrangeScale()
计算对象的缩放值，图片y值越大，scale值越小，这样就得到近大远小的效果。

使用起来也不麻烦
在HelloWorld::init()中添加如下代码：

              cwMainLayer* pMLayer = cwMainLayer::create();
            pMLayer->addShow("show3.png");
            pMLayer->addShow("show4.png");
            pMLayer->addShow("show3.png");
            pMLayer->addShow("show4.png");
            pMLayer->addShow("show3.png");
            pMLayer->addShow("show4.png");
            pMLayer->addShow("show3.png");
            pMLayer->addShow("show4.png");
            pMLayer->addShow("show3.png");
            pMLayer->addShow("show4.png");
            pMLayer->addShow("show3.png");
            pMLayer->addShow("show4.png");

            pMLayer->arrange();

            pMLayer->setPosition(ccp(0,0));
            this->addChild(pMLayer, 10);
“show3.png”与“show4.png”就是那两个机器人图片。

忙活了两个多小时，边听歌边写代码，感觉还不错。
不过现在该去睡觉了，最近偏头痛犯了，得早休息！