1. 程式人生 > >Cocos2d-x從入門到精通第11課《錨點概念的理解》

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

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

        首先我們通過對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中佔有重要的位置,希望好好理解和認識錨點,認真完成我們本節課後作業可以讓你更好的理解錨點哦。