Cocos2dx座標系,錨點

相關知識請見:http://blog.csdn.net/qinning199/article/category/1616331

注:ccp是cocos2dx中的一個宏定義, #define ccp(__X__,__Y__)CCPointMake((float)__X__, (float)__Y__), 在此文章中表示座標信息

1、笛卡爾座標系

你可能在學校的幾何學上已經知道笛卡爾座標系。如果你忘記了,下面的圖片可以讓你回憶一下:


有3中類型的座標系在遊戲開發中你會用的到。

1)UI座標系:

一般用於iso、android、windows sdk中:

原點(x=0,y=0)在左上角。

x方向從左側向右側遞增。

y方向從屏幕頂部向底部遞增。


2)Direct3D座標系

DirectX用左手笛卡爾座標系

3)OpenGL和Cocos2D座標系

Cocos2dx和OpenGL一樣用右手座標系,在二維世界裏,我們僅僅使用x軸和y軸,那麼在cocos2d遊戲中:


原點在屏幕的左下角,意味着屏幕在右手座標系的第一象限中。

X軸從屏幕左側向右側延伸

Y軸從屏幕底部向頂部延伸

底下有張圖片可以幫你理解cocos2dx座標系:


2 父類和子類:

每一個繼承自CCNode的類都有一個錨點屬性。當決定如何繪製對象(Sprite,Layer,一起其他的)的時候,cocos2d-x將會考慮位置信息以及錨點信息。並且,當旋轉一個物體的時候,cocos2d-x也會繞着錨點旋轉。

我們創建一個灰色的Sprite的圖像作爲父對象,創建一個綠色的Sprite作爲子對象。設置父對象的位置爲ccp(100,100),錨點ccp(0,0),子對象的位置在ccp(0,0),錨點ccp(0.5,0.5)。

1    CCSprite* parent = CCSprite::create("parent.png");
 2    parent->setAnchorPoint(ccp(0, 0));// Anchor Point
 3    parent->setPosition(ccp(100, 100));
 4    parent->setAnchorPoint(ccp(0, 0));
 5    addChild(parent);
 6
 7    //create child 
 8    CCSprite* child = CCSprite::create("child.png");
 9    child->setAnchorPoint(ccp(0.5, 0.5));
10    child->setPosition(ccp(0, 0));
11    parent->addChild(child);//add child sprite into parent sprite.

我們設置了子對象的位置在ccp(0,0),父對象的位置在ccp(100,100),因此,子對象顯示在如圖所示位置:


6、錨點

錨點被用於位置和旋轉物體。錨點是相對座標(也就是一個百分比),經常被用來對應一個物體內的點。例如,錨點是ccp(0.5,0.5)(表示x方向在物體50%的位置,y方向50%的位置)對應物體的中心。當設置物體位置的時候,調用setPositon時,錨點信息也會在座標系中展示。相同的,當轉動物體,物體將會隨錨點轉動。

例如,如下精靈有一個錨點ccp(0,0)並且位置在ccp(0,0):

 

 

因此,精靈被放置在屏幕左下角。

1// create sprite
2CCSprite* sprite = CCSprite::create("bottomleft.png");
3sprite->setAnchorPoint(ccp(0, 0));// Anchor Point
4sprite->setPosition(ccp(0,0));
5addChild(sprite);

 

在如下的例子中,展示了錨點座標的相對性,錨點被賦值爲ccp(0.5,0.5),位於精靈的中心。


1// create sprite
2CCSprite* sprite = CCSprite::create("center.png");
3sprite->setAnchorPoint(ccp(0.5, 0.5));// Anchor Point
4sprite->setPosition(ccp(0,0));
5addChild(sprite);


正如你所看到的的,精靈的中心位置被放置在了座標原點(0,0)。這也就是說錨點不是一個像素值。錨點的X和Y值是相對於該節點的大小。

你也可以設置錨點爲ccp(0.3,0.3),物體左下角錨點是(0,0),右上角是(1,1),因此ccp(0.3,0.3)表示在X方向上30%位置,Y方向上30%位置。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章