前面我們已經整理了egret**結構,接下來我們就一起學習一下在egret中如何把物件展示在場景中。
要在場景中展示物件元素,離不開座標資訊。所以第一部分我們首先需要掌握座標系的概念。一般來說,在遊戲中分為世界座標系和相對座標系。所謂世界座標系,就是我們在新增乙個元素到場景中時,這個元素相對stage的座標,而相對座標系則是當我們把這個元素新增到另外乙個節點時的座標。
通過上面的演示,我們可以看出來,世界座標系是x軸向右為正向,y軸為向下為正向。但是我們在設計實現乙個遊戲時,往往我們設計的邏輯中,對玩家來說,x軸向右為正向,y軸向上為正向,這樣才符合玩家操作時的習慣,因此我們在將邏輯中的物件展示在螢幕中時,需要將邏輯座標系轉換為世界座標系才合適。這一點需要大家在以後的遊戲開發中注意。如下圖說明,紅色的是螢幕座標系,當我們把乙個元素在螢幕上顯示時,一定是遵循這個座標系的,藍色的是邏輯座標系,我們在玩的遊戲中,一般會認為遵循這個座標系,比如boss會出現在邏輯座標系中的遠端,而我們控制的角色則在邏輯座標系的近端等等。(是不是被forward出神入化的繪圖功底震撼了?)
接下來我們要了解的的乙個關鍵概念是錨點,什麼是錨點呢?我們在遊戲場景中設定乙個元素的座標是以(x,y)形式給定的,但是我們顯示的元素並不是乙個畫素點,而是乙個具有寬和高的矩形、或者有半徑的圓形、甚至是一些不規則的多邊形……總之,元素會有一定的面積,那我們在設定該元素的位置資訊時,到底是設定的這個元素區域內哪一點呢?
說到這裡,有些讀者可能已經明白了。對,我們需要在元素上選擇一點,作為設定該元素位置的標準點,這就是我們這裡要說到的錨點。但是錨點的位置是分別以橫軸方向和縱軸方向上[0-1]之內的乙個點來表示的數來表示在該方向上錨點的百分比位置。這樣描述可能有些拗口。舉個栗子!如下圖所示,乙個寬100,高50的矩形元素,我們要設定它在場景中的座標為(80,80),當我們選擇以錨點為(0,0)來設定座標時,就會將矩形的左上角這一點對齊放置在場景中的(80,80)位置處,當我們以錨點(50,25)來設定座標時,就會將矩形的幾何中心(寬50,高25)這一點對齊放置在場景中的(80,80)位置處……(這裡需要大家注意的是,egret的錨點與cocos2dx中的錨點有區別,cocos2dx中的錨點是0-1的乙個小數,代表座標點在這個方向上的乙個比例值)
我們在有了以上這些基礎概念之後,就可以展望下自己動手實現元素在場景中的展示了。不同的顯示內容,egret為我們準備了不同的型別。
displayobject:顯示物件的基類,所有顯示物件都繼承自這個型別。
bitmap:位圖,用來顯示。
shape:向量圖,用來顯示向量圖形,其中提供方法供使用者繪製向量圖形。
textfiled:文字類,用來顯示文字資訊。
bitmaptext:位**本類,用來顯示字。
displayobjectcontainer:顯示物件容器介面,所有顯示容器物件均實現此介面。
sprite:帶有向量繪製功能的顯示容器。
stage:舞台類。
顯示物件的具有以下公共屬性:
alpha:透明度。
width:寬度。
height:高度。
rotation:旋轉角度。
scalex:橫向縮放。
scaley:縱向縮放。
skewx:橫向斜切。
skewy:縱向斜切。
visible:是否可見。
x:橫座標。
y:縱座標。
anchoroffsetx:物件絕對錨點x。
anchoroffsety:物件絕對錨點y。
有了以上知識的儲備,接下來我們用egret在場景中新增乙個元素。為了方便理解,我在**中進行了詳細的注釋。
執行效果如下,為了能夠與沒做縮放、旋轉等操作的物件進行對比,我們在左側放置了乙個原始的物件元素。
egret物件池使用
物件池 class displayobjectpool 作為物件池的詞典dict private objpooldict any singleton private static instance displayobjectpool public static getinstance display...
egret筆記一些顯示刪除訪問物件語句
容器物件.removechild 顯示物件 不過最好是先判斷 if spr.parent 通過深度來刪除物件 容器物件.removechildat 2 一次性將乙個容器內的所有子物件全部刪除 var numchild number sprcon.numchildren for var t numbe...
Egret的eui的使用
一 如何使用exml 1.直接使用 var button new eui.button button.skinname resource skins buttonskin.exml this.addchild button 2.動態載入 private init void private onloa...