【嘮叨】
當我們移動時,我們會看到離我們越近的物體,會移動的越快,越遠的物體,比如遠處的山會移動的很慢,而最遠處的物體,比如太陽幾乎不動,這個現象叫視差。
而在遊戲中模仿視差,可以讓玩家感覺到遊戲中的角色的確是在移動。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 了嗎。