Cocos2d-x從入門到精通第11課《錨點概念的理解》

錨點的簡介

         

視頻教程地址:http://edu.csdn.net/course/detail/1342/20988?auto_start=1

         錨點是定位和變換操作的一個重點,也是我們學習cocos2d-x的一個難點。

         錨點我們可以看成將一張紙用一個圖釘定在牆上,而圖釘訂在紙上的位置就是這張紙的錨點。要注意的是,錨點默認的位置在Layer中(以後章節我們會進行講解)是左下角(0,0),而其他的節點對象都是中點(0.5,0.5)。

 

         設置錨點的方法爲:

 

         setAnchorPoint(Vec2(0.5,0,5));

 

         錨點就是所有旋轉,移動,縮放的參考點。錨點用節點本身的比例來表示,範圍是0-1,(0,0)點代表坐下點,(1,1)代表右上點。

 

 

 

 


通過代碼來描述錨點


       下面我們通過兩個例子來理解一下錨點的概念和使用。

 

        首先我們通過對sprite(火雲開發課堂的LOGO)進行旋轉,在不同的錨點設置下的效果顯示來認識一下錨點的不同帶來的不同效果。  

 

       在進行旋轉之前我們先來看一下,未旋轉之前sprite(火雲開發課堂的LOGO)的顯示效果,如下圖:

 

         然後我們把sprite的錨點設置爲(0.5,0.5),進行旋轉60度,代碼和顯示效果圖如下:

 

 


 

       我們可以看到,sprite(火雲開發課堂的LOGO)以中間爲錨點按順時針方向旋轉了60°,接下來,我們把錨點設置爲(0,0),進行60°的旋轉,代碼和效果圖如下:

 


 

 

        我們可以看到由於錨點的不同旋轉的效果很不一樣,當錨點爲(0,0)的時候,旋轉是以sprite(火雲開發課堂的LOGO)的左下角爲參考點進行的旋轉,而錨點爲(0.5,0.5)的爲錨點進行旋轉的時候,就以sprite(火雲開發課堂的LOGO)的中點爲參考點進行旋轉。

 

      下面我們再從sprite錨點對其position的影響來理解一下錨點。

 

       首先我們把錨點設置爲(0.5,0.5),代碼如效果圖如下:



 

 

 

       我們可以看出在錨點爲(0.5,0.5)的情況下我們把座標設置爲(500,400)之後的顯示位置大概在屏幕的中間。

 

      現在我們把sprite的錨點設置爲(0,0)我們來看一下顯示的效果,如圖:



 

           我們可以看到當把錨點設置爲(0,0)的時候,在sprite(火雲開發課堂的LOGO)的位置並沒有發生改變的情況下,該sprite(火雲開發課堂的LOGO)的顯示位置向上和向右移動了一些距離,該距離就是圖片寬高的一半,這是爲什麼呢,因爲錨點的從(0.5,0.5)變成了(0,0),也就是說我們位置的參考點從sprite(火雲開發課堂的LOGO)的中間,移動到了sprite(火雲開發課堂的LOGO)的左下角,所以就造成了sprite(火雲開發課堂的LOGO)的位置進行了上移和右移,現在我們可以把sprite當成一個定在黑板上的照片,我們要把該照片訂在黑板的正中間,如果是我們釘的位置是在照片的中間和訂的位置是照片的左下角,那麼在我們定好之後觀察就會發現,效果是不同的,和我們上面的例子的顯示也是大同小異的。

 

       通過上面的例子,同學們是否對錨點有了跟深刻的理解。由於錨點在cocos2d-x中佔有重要的位置,希望好好理解和認識錨點,認真完成我們本節課後作業可以讓你更好的理解錨點哦。


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