Egret 學習之 入口函數 及開始編寫程序(三)


1,Egret的程序入口:

C和java是以一個main函數作為入口,但egret類似於ActionScript 是以一個文檔類作為入口,確切的說是以這個文檔類的構造函數作為入口;

2,文檔類的構造函數即egret程序的入口函數,可以看到入口函數內有這樣一行代碼:

this.addEventListener(egret.Event.ADDED_TO_STAGE,this.onAddToStage,this)

目前只需要知道這行代碼保證了onAddToStage方法執行時,文檔類實例已被添加到舞台中,並且在onAddToStage方法內,this.stage 屬性已經有效,其指向舞台對象。

3,在Main.ts 中找到創建游戲場景的createGameScene()方法,清空里面的所有內容,及其后面的所有方法,重新ctrl+s自動構建,然后點擊調試,會發現在自動打開的Chrome瀏覽器中,不像之前顯示的游戲頁面,而是什么都沒有了,現在開始輸入代碼,編程;

現在先重新寫一個背景:

輸入var bg:egret.Shape = new egret.Shape();  //創建一個egret.Shape的對象bg,egret.Shape對象有繪圖功能,繪制背景的工作就利用這個對象來完成;

Egret 中官方提供的類都在包egret中,后面為了簡化,會省略包名,直接寫成Shape來表示egret.Sahpe,其他類也一樣;

graphics是Shape對象的一個屬性,用來繪制圖形,繪制以beginFill()開始,以endFill()結束;用beginFill來填充顏色,所以要給其傳個表示顏色值(和其他語言一樣,十六進制組合表示,但要將 # 改成 0X)的參數;

兩個方法間還用到drawRect(0,0,this.stage.stageWidth,this.stage.stageHeight)方法,若是畫圓就是drawCircle(),此處drawRect()方法的參數是兩對坐標,起始坐標和終止坐標,因為畫的要覆蓋屏幕,所以此處起始坐標為原點,終止坐標就是舞台的寬和高;

繪制完后,還要將其添加到顯示結構中,才可以在運行時顯示出來,super.addChild(bg) ; addChild 是egret引擎常用的顯示結構的的方法,就是將某個顯示對象添加到顯示容器中;(注意文檔類實例添加到舞台是引擎默認完成的,不需要我們用代碼實現),super的使用是因為addChild方法是該類的父類定義的,也可根據個人習慣寫成this.addChild(bg);至此,背景的添加就完成了;

但是可以看到,瀏覽器中並不是完全被占滿整個屏幕;因為egret應用最廣泛的是移動應用,通常使用的屏幕適配模式是整體顯示,egret提供幾種常規的適配模式,剛才那種就是整體顯示的模式(不進行縮放),表示為showAll

占滿屏幕的是另一種,為fixedWidth,fixedWidth模式會保持原始寬高比縮放,縮放后應用程序內容會在水平和垂直方向都填滿窗口,但只保持應用程序的寬度不變,高度可能發生改變,我們可以在index.html文件中進行修改適配模式,data-scale-mode = "showAll"  將showAll修改成 fixedWidth 即可;

或者是在項目代碼里面也可以進行修改:this.stage.scalemode=egret.StageScaleMode.FIXED_WIDTH;效果和在index.html文件里面修改的效果是一樣的;

修改了背景,接下來添加一些文字:

和修改背景類似;聲明對象,設置對象屬性,添加對象;

var tx:egret.TextField = new egret.TextField();

tx.text = " I'm Lee,hello everybody, I'll study with you in the future";

tx.size = 30;

super.addChild(tx);

可以發現,文字的顯示格式有些亂,下面調整一下格式;

加上這幾句:

tx.x = 20;
tx.y = 20;
tx.width = this.stage.stageWidth-40; 顯示格式如下:

注意前兩行分別設置了文本對象的x和y值,是基於錨點設置,錨點默認位於顯示對象的左上角;也可以根據需要設置錨點的位置;

響應用戶操作:

對文字加上響應操作:

tx.touchEvent = true;  //允許該顯示對象響應touch事件,egret中所有的顯示對象默認不響應touch事件,這是處於對性能的考慮;

tx.addEventListener(egret.touchEvent.TOUCH_TAP , this.touchHandler , this); //事件處理函數

然后在Main.ts文件中,還要聲明touchHandler函數:

private  touchHandler(evt : egret.TouchEvent):void{

  var tx:egret.TextField = evt . currentTarget();

  tx.textColor = 0x00ff00;

}

編譯運行后,點擊文字會變成綠色;

此處的事件處理函數是用一個類方法實現的,還可以使用匿名函數實現:

tx.addEventListener(egret.TouchEvent.TOUCH_TAP,function(evt : egret.TouchEvent):void{

    tx.textColor= 0x00ff00;

},this);

資源加載:

egret中所有資源都是動態加載的;

資源加載清單:

Egret資源加載是以資源加載清單為基礎的,資源好比是要購買的物品,資源加載配置就是購物清單;先把物品列在清單上,然后再去買物品;

Egret中使用json格式作為RES資源加載配置文件的格式。這種格式使用方便,甚至可以在記事本上邊寫,javascript也支持json,便於解析;

Egret中資源加載配置文件位於項目目錄中的resource文件夾中,取名default.res.json。Egret項目在創建時已經包含該文件;

注意:Egret版本2.5之前的版本中,該文件的名字為resource.json。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM