1. 程式人生 > >cocos creator 使玩家移動到背景點選的特定位置

cocos creator 使玩家移動到背景點選的特定位置

//實現點選螢幕背景玩家移動到該位置
    moveToClicked : function(eventString){
        var self = this;
        self.bg.on(eventString,function(event){
            //獲取當前點選的全域性座標
            var temp = event.getLocation();
            cc.log("點選全域性座標:",temp.x,temp.y);
            //獲取當前點選的區域性座標
            var tempPlayer = self.node.parent.convertToNodeSpaceAR(temp);
            cc.log("點選區域性座標:",tempPlayer.x,tempPlayer.y);
            //獲取當前的玩家的區域性座標
            var po1 = self.node.getPosition();
            cc.log("玩家座標:",po1.x,po1.y);
            //對玩家的行走進行左右交換
            if(po1.x < tempPlayer.x){
                self.scaleX = -1;
            }else{
                self.scaleY = 1;
            }
            //計算玩家移動的時間
            var playerTime = 1;
            //讓玩家移動到點選位置
            var action = cc.moveTo(playerTime,
            self.node.stopAllActions();
            //進行移動
            self.node.runAction(action);
        })
    },

知識點:1:通過點選事件獲得點選的全域性座標位置

              event.getLocation(); 返回一個Vec2型別的資料

注意這裡的全域性座標系是在Canvas的左下角的

            2:將全域性座標轉換為節點座標系:

         convertToNodeSpaceAR(temp)
       

         3:cc.moveTo(time,Number,y);返回一個ActionInterval 動作物件

/**
* !#en
* Moves a Node object to the position x,y. x and y are absolute coordinates by modifying its position property. <br/>
* Several MoveTo actions can be concurrently called, and the resulting <br/>
* movement will be the sum of individual movements.
* !#zh 移動到目標位置。
* @method moveTo
* @param {Number} duration duration in seconds
* @param {Vec2|Number} position
* @param {Number}
[y]
* @return {ActionInterval}
* @example
* // example
* var actionBy = cc.moveTo(2, cc.p(80, 80));
*/
cc.moveTo = function (duration, position, y) {
return new cc.MoveTo(duration, position, y);
};
       4:Node.runAction(action);執行動作方法

笛卡爾座標系

Cocos Creator 的座標系和 cocos2d-x 引擎座標系完全一致,而 cocos2d-x 和 OpenGL 座標系相同,都是起源於笛卡爾座標系。笛卡爾座標系中定義右手系原點在左下角,x 向右,y 向上,z 向外,我們使用的座標系就是笛卡爾右手系。

right hand

螢幕座標系和 cocos2d-x 座標系

標準螢幕座標系使用和 OpenGL 不同的座標系,和 cocos2d-x 座標系有很大區別。

在 iOS, Android, Windows Phone 等平臺用原生 SDK 開發應用時使用的是標準螢幕座標系,原點為螢幕左上角,x 向右,y 向下。

Cocos2d-x 座標系和 OpenGL 座標系一樣,原點為螢幕左下角,x 向右,y 向上。

screen vs cocos

世界座標系(World Coordinate)和本地座標系(Local Coordinate)

世界座標系也叫做絕對座標系,在 Cocos Creator 遊戲開發中表示場景空間內的統一座標體系,「世界」就用來表示我們的遊戲場景。

本地座標系也叫相對座標系,是和節點相關聯的座標系。每個節點都有獨立的座標系,當節點移動或改變方向時,和該節點關聯的座標系將隨之移動或改變方向。

Cocos Creator 中的 節點(Node) 之間可以有父子關係的層級結構,我們修改節點的 位置(Position) 屬性設定的節點位置是該節點相對於父節點的 本地座標系 而非世界座標系。最後在繪製整個場景時 Cocos Creator 會把這些節點的本地座標對映成世界座標系座標。

錨點(Anchor)

錨點(Anchor) 是節點的另一個重要屬性,它決定了節點以自身約束框中的哪一個點作為整個節點的位置。我們選中節點後看到變換工具出現的位置就是節點的錨點位置。

錨點由 anchorX 和 anchorY 兩個值表示,他們是通過節點尺寸計算錨點位置的乘數因子,範圍都是 0 ~ 1 之間。(0.5, 0.5) 表示錨點位於節點長度乘 0.5 和寬度乘 0.5 的地方,即節點的中心。

anchor center

錨點屬性設為 (0, 0) 時,錨點位於節點本地座標系的初始原點位置,也就是節點約束框的左下角。

anchor left bottom

子節點的本地座標系

錨點位置確定後,所有子節點就會以 錨點所在位置 作為座標系原點,注意這個行為和 cocos2d-x 引擎中的預設行為不同,是 Cocos Creator 座標系的特色!

假設場景中節點的結構如下圖所示:

node tree

當我們的場景中包含不同層級的節點時,我們按照以下的流程確定每個節點在世界座標系下的位置:

  1. 從場景根級別開始處理每個節點,上圖中 NodeA 就是一個根級別節點。首先根據 NodeA 的 位置(Position) 屬性和 錨點(Anchor) 屬性,在世界座標系中確定 NodeA 的顯示位置和座標系原點位置(和錨點位置一致)。
  2. 接下來處理 NodeA 的所有直接子節點,也就是上圖中 NodeB 以及和 NodeB 平級的節點。根據 NodeB 的位置和錨點屬性,在 NodeA 的本地座標系中確定 NodeB 在場景空間中的位置和座標系原點位置。
  3. 之後不管有多少級節點,都繼續按照層級高低依次處理,每個節點都使用父節點的座標系和自身位置錨點屬性來確定在場景空間中的位置。

變換屬性

除了上面介紹過的 錨點(Anchor) 之外,節點還包括四個主要的變換屬性,下面我們依次介紹。

transform properties

位置(Position)

位置(Position) 由 x 和 y 兩個屬性組成,分別規定了節點在當前座標系 x 軸和 y 軸上的座標。

position

上圖中節點 NodeA 位於場景根級別,他的位置是 (507, 354)(可以參考 場景編輯器 背景的刻度顯示),其子節點 NodeC 的位置是 (345, 0),可以看到子節點的位置是以父節點錨點為基準來偏移的。

位置屬性的預設值是 (0, 0),也就是說,新新增節點時,節點總會出現在父節點的座標系原點位置。Cocos Creator 中節點的預設位置為 (0, 0),預設錨點設為 (0.5, 0.5)。這樣子節點會默認出現在父節點的中心位置,在製作 UI 或組合玩家角色時都能夠對所有內容一覽無餘。

在場景編輯器中,可以隨時使用 移動變換工具 來修改節點位置。

旋轉(Rotation)

旋轉(Rotation) 是另外一個會對節點本地座標系產生影響的重要屬性,旋轉屬性只有一個值,表示節點當前的旋轉角度。角度值為正時,節點順時針旋轉,角度值為負時,節點逆時針旋轉。

rotation

上圖所示的節點層級關係和前一張圖相同,只是節點 NodeA 的 旋轉(Rotation) 屬性設為了 30 度,可以看到除了 NodeA 本身順時針旋轉了 30 度之外,其子節點 NodeC 也以 NodeA 的錨點為中心,順時針旋轉了 30 度。

在場景編輯器中,可以隨時使用 旋轉變換工具 來修改節點旋轉。

縮放(Scale)

縮放(Scale) 屬性也是一組乘數因子,由 scaleX 和 scaleY 兩個值組成,分別表示節點在 x 軸和 y 軸的縮放倍率。

scale

上圖中節點 NodeA 的縮放屬性設為 (0.5, 1.0),也就是將該節點在 x 軸方向縮小到原來的 0.5 倍,y 軸保持不變。可以看到子節點 NodeC 影象也在 x 軸方向上進行了壓縮,所以縮放屬性會影響所有子節點。

子節點上設定的縮放屬性會和父節點疊加作用,子節點的子節點會將每一層級的縮放屬性全部相乘來獲得在世界座標系下顯示的縮放倍率,這一點和位置、旋轉其實是一致的,只不過位置和旋轉屬性是相加作用,只有縮放屬性是相乘,作用表現的更明顯。

縮放屬性是疊加在位置、尺寸等屬性上作用的,修改縮放屬性時,節點的位置和尺寸不會變化,但顯示節點影象時會先將位置和尺寸等屬性和縮放相乘,得出的數值才是節點顯示的真實位置和大小。

在場景編輯器中,可以隨時使用 縮放變換工具 來修改節點縮放。

尺寸(Size)

尺寸(Size) 屬性由 Width(寬度)和 Height (高度)兩個值組成,用來規定節點的約束框大小。對於 Sprite 節點來說,約束框的大小也就相當於顯示影象的大小。

因此尺寸屬性很容易和縮放屬性混淆,兩者都會影響 Sprite 影象的大小,但他們是通過不同的方式來影響影象實際顯示大小的。尺寸屬性和位置、錨點一起,規定了節點四個頂點所在位置,並由此決定由四個頂點約束的影象顯示的範圍。尺寸屬性在渲染 九宮格影象(Sliced Sprite) 時有至關重要的作用。

而縮放屬性是在尺寸數值的基礎上進行相乘,得到節點經過縮放後的寬度和高度。可以說在決定影象大小時,尺寸是基礎,縮放是變數。另外尺寸屬性不會直接影響子節點的尺寸(但可以通過 對齊掛件(Widget)間接影響),這一點和縮放屬性有很大區別。

在場景編輯器中,可以隨時使用 矩形變換工具 來修改節點尺寸。

再次說明:官方文件一定要理解清楚