HTML5游戲引擎（二）02-egret引擎之hello world——快速上手-清理項目 & 程序入口 & 繪制單色背景 & 調整屏幕的適配模式 & 添加文字 & 響應用戶操作-讓文字變色

快速上手

清理項目

打開Main.ts文件，將createGameScene中的內容全部刪除，并將createGameScene方法后邊的所有方法刪除。

也可以執行egret run -a

程序入口

像所有的開發語言一樣，總有一個入口，整個程序都從這里開始啟動。熟悉類C系語言的開發者，如C++和Java都了解這些語言會從一個靜態的main函數入口。

文檔類是可以配置的，每個Egret項目都有一個index.html文件,可以在Egret項目的根目錄找到這個文件，后邊我們稱之為index文件。

index.html可以打開直接編輯。打開該文件，找到div標簽可以看到一些配置屬性，**其中的data-entry-class，其值默認為Main，就是指Main.ts中所定義的類Main。**當然這只是個默認值，我們可以根據自己的喜好隨意修改，只要確保項目設定文件中的index.html屬性值所指定的類名在項目中有其類定義即可。

<!--大家注意： data-entry-class是js的入口類 而不是css里面的class-->

繪制單色背景

通常游戲的畫面都需要一個背景，讓我們就從這最基本的顯示開始著手！ 背景可以是一張圖片，這需要將圖片作為資源載入，后邊我們會學習這種方式。

在src/main.ts中

protected createGameScene(): void {// 添加一個背景 1. 創建背景實例 2. 配置 3. 添加到場景}

實例

protected createGameScene(): void {var bg:egret.Shape = new egret.Shape();bg.graphics.beginFill( 0x336699 );bg.graphics.drawRect( 0, 0, this.stage.stageWidth, this.stage.stageHeight ); bg.graphics.endFill();this.addChild(bg); }

調整屏幕的適配模式

雖然顯示出來了，但我們會發現一個現象，就是顯示區域在瀏覽器中并沒有占滿。這是由于Egret項目建立后，默認的屏幕適配模式是不進行縮放的。

而Egret目前應用最廣泛的是移動設備，通常需要的屏幕適配模式是整體顯示。

Egret提供了幾種常規的適配模式，剛才所說的不進行縮放是一種，在Egret中表示為showAll。占滿屏幕是另一種，為fixedWidth。fixedWidth模式下會保持原始寬高比縮放內容，縮放后應用程序內容在水平和垂直方向都填滿播放器窗口，但只保持應用程序內容的原始寬度不變，高度可能會改變。 我們可以在index.html中修改適配模式，打開項目根目錄下的index.html文件，找到data-scale-mode開始的代碼行，將等號右邊的內容修改為fixedWidth刷新頁面，會發現，藍色背景已經占滿瀏覽器屏幕。

index.html文件

<!--大家注意： data-entry-class是js的入口類 而不是css里面的class--> <div style="margin: auto;width: 100%;height: 100%;" class="egret-player"data-entry-class="Main"data-orientation="auto"data-scale-mode="showAll"data-frame-rate="30"data-content-width="640"data-content-height="1136"data-multi-fingered="2"data-show-fps="false" data-show-log="false"data-show-fps-style="x:0,y:0,size:12,textColor:0xffffff,bgAlpha:0.9"> </div>

添加文字

src/main.ts

protected createGameScene(): void {// 1. 創建文字實例 2. 配置 3. 添加到場景var tx:egret.TextField = new egret.TextField();tx.text = "I'm Jack, I will use Egret create a fantasy mobile game!"; tx.size = 32; this.addChild( tx ); }

格式有些亂，我們稍微調整一下。緊接著加入如下代碼：

tx.x = 20; tx.y = 20; tx.width = this.stage.stageWidth - 40;

實例

protected createGameScene(): void {// 1. 創建文字實例 2. 配置 3. 添加到場景var tx:egret.TextField = new egret.TextField();tx.text = "I'm Jack, I will use Egret create a fantasy mobile game!"; tx.size = 32; this.addChild( tx );tx.width = this.stage.stageWidth - 40;tx.x = 20;tx.y = 20; }

響應用戶操作

不管我們制作游戲還是某種應用，用戶的交互都是必備的。 在前一節的基礎上，我們就對這段文字添加一些響應操作。比如，改變文字顏色：

// 讓文字點擊之后變色 // 1. 打開實例的事件綁定開關 2. 進行事件綁定 tx.touchEnabled = true; // 可以提升性能 // 1. 事件對象 2. 處理函數 3.this tx.addEventListener( egret.TouchEvent.TOUCH_TAP, this.touchHandler, this );

注意，第一行設置touchEnabled為true，意即允許該顯示對象響應Touch事件，這是Egret中特別需要注意的問題。因為所有的顯示對象，默認都是不響應Touch事件的，這是基于性能考慮，因為打開對這種事件的響應，是對性能有不可忽略的影響的。 其中第二行代碼新增一個方法的引用，這就是事件處理函數，我們需要事件處理函數中對用戶操作做出對應的反應。 在Main類中，加入如下代碼：

src/main.ts

//定義方法-文字變綠色 private和protected 同層級 private touchHandler( evt:egret.TouchEvent ):void{var tx:egret.TextField = evt.currentTarget;tx.textColor = 0x00ff00; }

實例-詳細版

src/main.ts

protected createGameScene(): void {// 1. 創建文字實例 2. 配置 3. 添加到場景var tx:egret.TextField = new egret.TextField();tx.text = "I'm Jack, I will use Egret create a fantasy mobile game!"; tx.size = 32; this.addChild( tx );tx.width = this.stage.stageWidth - 40;tx.x = 20;tx.y = 20;// 讓文字點擊之后變色// 1. 打開實例的事件綁定開關 2. 進行事件綁定tx.touchEnabled = true; // 可以提升性能// 1. 事件對象 2. 處理函數 3.thistx.addEventListener( egret.TouchEvent.TOUCH_TAP, this.touchHandler, this ); }//定義方法-文字變綠色 private和protected 同層級 private touchHandler( evt:egret.TouchEvent ):void{var tx:egret.TextField = evt.currentTarget;tx.textColor = 0x00ff00; }

效果

總結

以上是生活随笔為你收集整理的HTML5游戏引擎（二）02-egret引擎之hello world——快速上手-清理项目 程序入口 绘制单色背景 调整屏幕的适配模式 添加文字 响应用户操作-让文字变色的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。