CocosCreator 搭建場景和座標系轉換(第二篇)

前言:
我們在玩隨便一個遊戲時,都會發現遊戲有很多個的界面,比如(登錄界面、主菜單界面,遊戲界面、商店界面等),其實這都是一個個的場景,我們通過代碼來控制不同場景之間的切換。一個場景裏面會有很多的節點組成,爲製作出多種多樣的節點,我們是通過在節點上掛載不同的組件來實現。在搭建場景時,需要用到一個重要概念----座標,這個座標包括相對座標和世界座標兩種。相對座標是指以父親節點爲參考系,世界座標是指以屏幕爲參考系,我們編輯上的座標是相對座標
下面詳細舉例介紹:


一、節點與組件的關係

我們前面提到了節點上掛載不同組件是以組合方式來實現功能的擴展的,一個空節點在創建後會自帶Node屬性,然後我們在下面掛載組件來擴展節點功能。
在層級管理器右擊創建節點時,可以看到有很多類型的節點(渲染節點、UI節點、3D節點等),這些都是已經了掛載相應組件,我們可以直接使用,我們也可以創建一個空節點然後自己手動掛載組件。

1. 創建節點演示

層級管理器—>右擊—>創建節點;
在這裏插入圖片描述

2. 添加組件和改變Node屬性

在創建好一個節點之後,在右側的屬性檢查中可以看到:如圖。
然後我們可以點擊添加組件就可以掛載組件了。
通過改變Node屬性的數值或選項可以對場景中的節點進行變換。
在這裏插入圖片描述


二、相對座標與屏幕座標

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

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

我們修改節點的 位置(Position) 屬性設定的節點位置是該節點相對於父節點的 本地座標系 而非世界座標系。最後在繪製整個場景時 Cocos Creator 會把這些節點的本地座標映射成世界座標系座標。

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

錨點以自己的左下角爲(0,0),右上角爲(1,1),所有中間爲(0.5,0.5)

1. cc.Ve2、cc.Size、cc.Rect介紹

 // cc.Vec2
 var pos1=new cc.Vec2(100,100);//類創建一個點
 var pos2=cc.v2(200,200);//實例創建
 var pos3=cc.p(100,200);//實例創建
// this.node.position=pos3; //設置節點位置
// this.node.setPosition(pos1);//設置節點位置

 // cc.Size
 var s1=new cc.Size(200,200); //寬高
 var s2=cc.size(200,200);

// cc.Rect
var rect1=new cc.Rect(0,0,100,100);// 左下角座標、寬高
var rect2=cc.rect(0,0,100,100);
rect1.contains(pos1); // 判斷點p1是否在矩形內
rect1.intersects(rect2);// 判斷兩個矩形是否相交

2. 相對座標與屏幕座標的相互轉換

//相對座標---->屏幕座標
var pos1=this.node.convertToWorldSpace(cc.v2(0,0));// 以自己的左下角爲原點
var pos2=this.node.convertToWorldSpaceAR(cc.v2(0,0)); // 以自己錨點爲原點,通常使用這個(帶AR)
console.log(pos1,pos2);
//屏幕座標---->相對座標
var pos3=this.node.convertToNodeSpace(cc.v2(0,0));
var pos4=this.node.convertToNodeSpaceAR(cc.v2(0,0));// (帶AR)
console.log(pos3,pos4);

// 獲取節點的包圍盒
var s1=this.node.getBoundingBox();// 父親節點座標系下的包圍盒
var s2=this.node.getBoundingBoxToWorld();//屏幕座標下的包圍盒
console.log(s1,s2);
// 注意:觸摸事件的座標是屏幕座標

輸出:
在這裏插入圖片描述


三、節點層級管理和顯示順序

說明: 節點層級管理器的層級盒文件夾管理一樣,我們拉動一個節點時,裏面的子節點也會跟着一起移動;上級節點的操作會影響子節點的顯示等。從下面的一張圖可以看出,子節點都在父親節點裏面,同級節點之間位置在下面的,其顯示會在上面。
在這裏插入圖片描述
當然也可以通過代碼來改變節點的層次,每個節點有一個層次屬性,可以賦值爲1,2,3…來改變。


四、使用場景編輯器搭建場景

  1. 可以通過層級管理器來創建節點(渲染節點、UI節點、3D節點)等;
  2. 直接從資源管理器中拖拽到層次管理器或場景編輯器中;
  3. 還可以通過代碼創建;

主要還是手動創建:
1. 首先把需要的資源放到相應的文件夾下;
2. 把資源拉拽到層級管理器,需要管理每個節點的歸屬和依賴關係;
3. 完成場景編輯後,ctrl+s保存當前場景到scenes文件夾下;

在這裏插入圖片描述


遊戲的邏輯處理和節點控制都是通過代碼來控制,下面幾篇將對代碼腳本開發進行細說。
如果筆者有什麼錯誤的地方或者有什麼建議都可以在評論中留言!

推薦閱讀:
走進Cocos Creator遊戲開發(第一篇)
Win32 連連看遊戲實戰篇(Win32最後篇)
---------------------------------------------------------- 戰勝

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