Egret物件的顯示

2021-10-01 21:24:28 字數 2088 閱讀 8588

前面我們已經整理了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...