【嘮叨】
當我們移動時，我們會看到離我們越近的物體，會移動的越快，越遠的物體，比如遠處的山會移動的很慢，而最遠處的物體，比如太陽幾乎不動，這個現象叫視差。
而在遊戲中模仿視差，可以讓玩家感覺到遊戲中的角色的確是在移動。Cocos提供了 ParallaxNode 視差節點類，可以很容易的建立一個視差層，你可以控制每一層的視差率、位置和層級的高低。
【參考】
http://www.cocoachina.com/bbs/read.php?tid=213748 （無限視差節點+陰影仿真）
http://blog.csdn.net/volcan1987/article/details/7791018 （CCParallaxNode和Tile Map）
http://blog.csdn.net/xiadasong007/article/details/8157274 （CCParallaxNode源碼分析）
【Demo下載】
【ParallaxNode】
這個類的使用非常簡單，只要將想要產生視差效果的節點，都添加爲ParallaxNode的子節點，並設置視差率、位置和層級即可。
1、常用函數
ParallaxNode類中自定義的函數，只有如下幾個，是對父類Node的相關函數進行重寫。
注意：以下重寫的函數，不要調用父類Node中相對應的重載函數。即不要調用類似 addChild(child, zOrder, tag) 之類的函數。
核心函數有以下幾個：
> create()
> addChild()
> removeChild()
//
/**
* 模擬視差滾動的節點
* 子節點根據視差比率（parallaxRatio），做比父節點相對快/慢的移動。
**/
class CC_DLL ParallaxNode : public Node
{
public:
// 創建視差節點
static ParallaxNode* create();
// 添加子節點
// child : 子節點
// z : zOrder順序
// ratio : Vex2(ratioX,ratioY) 兩個方向上，相對ParallaxNode的移動比率
// offset : 相對ParallaxNode的偏移位置
void addChild(Node * child, int z, const Vec2& ratio, const Vec2& offset);
// 更新子節點位置信息
virtual void visit(Renderer *renderer, const Mat4 &parentTransform, uint32_t parentFlags) override;
// 移除子節點
// child 被刪除的子節點。
// cleanup true 在這個節點上所有的動作和回調都會被刪除, false 就不會刪除。
virtual void removeChild(Node* child, bool cleanup) override;
// 移除所有子節點
// cleanup true 在這個節點上所有的動作和回調都會被刪除, false 就不會刪除。
virtual void removeAllChildrenWithCleanup(bool cleanup) override;
};
//2、關於添加子節點：addChild()
在向 ParallaxNode 中添加子節點的時候，添加的方式與父類的Node::addChild()不同。
必須使用重寫的addChild()函數，而不要使用父類addChild(Node* child, int z, int tag) 等重載函數。
該函數的實現如下：
//
// 添加子節點
// child : 子節點
// z : zOrder順序
// ratio : Vex2(ratioX,ratioY) 兩個方向上，相對ParallaxNode的移動比率
// offset : 相對ParallaxNode的偏移位置
void ParallaxNode::addChild(Node* child, int z, const Vec2& ratio, const Vec2& offset)
{
CCASSERT( child != nullptr, "Argument must be non-nil");
PointObject *obj = PointObject::create(ratio, offset);
obj->setChild(child);
ccArrayAppendObjectWithResize(_parallaxArray, (Ref*)obj);
Vec2 pos = this->absolutePosition();
// 子節點位置，是根據偏移位置offset，和視差率ratio的計算
pos.x = -pos.x + pos.x * ratio.x + offset.x;
pos.y = -pos.y + pos.y * ratio.y + offset.y;
child->setPosition(pos);
Node::addChild(child, z, child->getName());
}
//可以發現：子節點的座標位置（Position）是由偏移位置（offset）和視差比率（ratio）決定的。
PS：這也是爲什麼添加到 ParallaxNode 的子節點，將無法使用setPosition()來手動設置位置的原因所在。這也許是使用 ParallaxNode 的一個弊端吧。
3、關於更新子節點位置：visit()
在 ParallaxNode 位置發生變化時，所有的子節點的位置也會相對父節點，根據ParallaxNode的位置、offset、以及 ratio 進行計算變化座標位置。
而位置變化後，調用的函數爲visit()，該函數的實現如下：
//
// 更新子節點位置信息
void ParallaxNode::visit(Renderer *renderer, const Mat4 &parentTransform, uint32_t parentFlags)
{
Vec2 pos = this->absolutePosition();
if( ! pos.equals(_lastPosition) )
{
// 計算所有孩子相對於ParallaxNode的位置
// 注意當我們移動ParallaxNode位置時，表現出來的其實是孩子位置的改變，這種變化是本類的核心設計。
for( int i=0; i < _parallaxArray->num; i++ )
{
PointObject *point = (PointObject*)_parallaxArray->arr[i];
// 例如ParallaxNode絕對位置爲100，表現出來的是孩子位置爲-100，ParallaxNode的移動我們不能感知，但孩子的位置卻發生了變化。
// 簡單點就是類似於一個攝像頭場景的移動，攝像頭未動，風景變了
// 如果ratio爲（=1） ，則 position == offset
// 如果ratio爲（0~1），則 position < offset，移動速度慢
// 如果ratio爲（>1） ，則 position > offset，移動速度快
float x = -pos.x + pos.x * point->getRatio().x + point->getOffset().x;
float y = -pos.y + pos.y * point->getRatio().y + point->getOffset().y;
// 孩子的位置是通過上面兩行計算出來的
// 因此手動設置其postion不會有任何作用
point->getChild()->setPosition(x,y);
}
_lastPosition = pos;
}
Node::visit(renderer, parentTransform, parentFlags);
}
//4、子節點的視差效果
將子節點添加到 ParallaxNode，並設置了 偏移位置offset 和 視差比率ratio 之後，ParallaxNode的所有子節點會隨着 ParallaxNode 的移動而移動。
子節點移動後的位置是根據：ParallaxNode的位置、offset、以及 ratio 進行計算出來的。
當子節點具有不同的視差比率ratio，在移動過程中，就會出現有些移動的快，有些移動的慢的視差效果。
【代碼實戰】
0、圖片素材
1、創建視差節點類，並添加子節點
創建三個子節點，添加到ParallaxNode中。
> bg ：錨點(0, 0)，視察比率ratio(0.5, 0.5)，偏移位置offset(0, 0)。
> ball ：錨點(0.5, 0.5)，視察比率ratio(1, 1)，偏移位置offset（屏幕中心點座標）。
> smile ：錨點(0, 0)，視察比率ratio(4, 4)，偏移位置offset(0, 0)。
PS：測試對精靈bg，手動設置位置座標setPosition( )。
//
//[1] 可視區域尺寸大小
Size vSize = Director::getInstance()->getVisibleSize();
//[2] 創建三個子節點
Sprite* bg = Sprite::create("HelloWorld.png");
bg->setAnchorPoint(Vec2(0, 0)); // 錨點(0, 0)
bg->setName("HelloWorld");
//Bug: 在ParallaxNode上的精靈，對其setPosition是無效的
// 具體看運行結果
bg->setPosition(Vec2(100, 100)); // 設置bg的座標位置
Sprite* ball = Sprite::create("Ball.png");
ball->setAnchorPoint(Vec2(0.5, 0.5)); // 錨點(0.5, 0.5)
ball->setName("Ball");
Sprite* smile = Sprite::create("Smile.png");
smile->setAnchorPoint(Vec2(0, 0)); // 錨點(0, 0)
smile->setName("Smile");
//[3] 創建ParallaxNode，並添加子節點
// 創建視差節點類
ParallaxNode* parallaxNode = ParallaxNode::create();
this->addChild(parallaxNode, 0, "parallaxNode");
// 添加子節點
// addChild(node, zOrder, ratio, offset);
parallaxNode->addChild(bg, 0, Vec2(0.5, 0.5), Vec2(0, 0));
parallaxNode->addChild(ball, 1, Vec2(1, 1), Vec2(vSize.width/2, vSize.height/2));
parallaxNode->addChild(smile, 1, Vec2(4, 4), Vec2(0, 0));
//[4] 添加觸摸事件
EventDispatcher* dispatcher = this->getEventDispatcher();
EventListenerTouchOneByOne* listener = EventListenerTouchOneByOne::create();
listener->onTouchBegan = CC_CALLBACK_2(HelloWorld::onTouchBegan, this);
listener->onTouchMoved = CC_CALLBACK_2(HelloWorld::onTouchMoved, this);
listener->onTouchEnded = CC_CALLBACK_2(HelloWorld::onTouchEnded, this);
dispatcher->addEventListenerWithSceneGraphPriority(listener, this);
//2、實現觸摸事件
> 觸摸開始：無操作。
> 觸摸移動：ParallaxNode 隨之移動。
> 觸摸結束：輸出每個節點的位置信息，看看差別。
//
bool HelloWorld::onTouchBegan(Touch* pTouch, Event* pEvent)
{
return true;
}
// 移動 ParallaxNode 節點
void HelloWorld::onTouchMoved(Touch* pTouch, Event* pEvent)
{
Vec2 delta = pTouch->getDelta();
// 移動 ParallaxNode 節點
// 所有子節點的位置，也會隨之改變
ParallaxNode* parallaxNode = (ParallaxNode*)this->getChildByName("parallaxNode");
parallaxNode->setPosition(parallaxNode->getPosition() + delta);
}
// 觸摸結束後，輸出每個節點的位置信息
void HelloWorld::onTouchEnded(Touch* pTouch, Event* pEvent)
{
ParallaxNode* parallaxNode = (ParallaxNode*)this->getChildByName("parallaxNode");
// 按名稱獲取子節點
Sprite* bg = (Sprite*)parallaxNode->getChildByName("HelloWorld");
Sprite* ball = (Sprite*)parallaxNode->getChildByName("Ball");
Sprite* smile = (Sprite*)parallaxNode->getChildByName("Smile");
// 輸出座標位置信息
CCLOG("parallax : %f %f", parallaxNode->getPositionX(), parallaxNode->getPositionY());
CCLOG("HelloWorld : %f %f", bg->getPositionX(), bg->getPositionY());
CCLOG("ball : %f %f", ball->getPositionX(), ball->getPositionY());
CCLOG("smile : %f %f", smile->getPositionX(), smile->getPositionY());
CCLOG("---------------------------------------");
}
//3、運行結果
移動過程中，輸出的數據結果爲：
// parallax : 0.000000 0.000000 HelloWorld : 0.000000 0.000000 ball : 240.000000 160.000000 smile : 0.000000 0.000000 --------------------------------------- parallax : 101.836441 20.723732 HelloWorld : -50.918221 -10.361866 ball : 240.000000 160.000000 smile : 305.509338 62.171196 --------------------------------------- parallax : 19.378311 64.557907 HelloWorld : -9.689156 -32.278954 ball : 240.000000 160.000000 smile : 58.134933 193.673721 --------------------------------------- parallax : -1.778305 -81.284264 HelloWorld : 0.889153 40.642132 ball : 240.000000 160.000000 smile : -5.334915 -243.852783 --------------------------------------- //
4、數據分析
（0）HelloWorld：在一開始設置了setPosition()，可是是無效的。因爲它的座標只受到 ratio、offset的影響。
（1）HelloWorld ：移動的過程中，爲什麼座標變成了負的了？這是因爲子節點的座標是相對ParallaxNode的偏移位置。因爲HelloWorld的視差比率爲0.5倍，所以當parallaxNode移動了100個像素點，那麼HelloWorld只移動了50個像素點。所以它相對於parallaxNode的偏移位置就是 -50 了。
（2）ball ：移動過程中，座標位置都沒有改變。因爲它的視差比率爲1.0倍，所以parallaxNode移動了多少，ball也移動了多少。所以ball相對parallaxNode的位置還是原來的 偏移位置。
（3）smile ：這個移動的很快，視差比率爲4.0倍。可是爲什麼它的座標位置一直是parallaxNode的3倍呢？？？呵呵，因爲parallaxNode移動了100個像素點，而它移動了400個像素點，那麼它相對於parallaxNode座標的位置不就是400-100 = 300 了嗎。