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

快速上手

清理項(xiàng)目

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

也可以執(zhí)行egret run -a

程序入口

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

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

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

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

繪制單色背景

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

在src/main.ts中

protected createGameScene(): void {// 添加一個(gè)背景 1. 創(chuàng)建背景實(shí)例 2. 配置 3. 添加到場景}

實(shí)例

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); }

調(diào)整屏幕的適配模式

雖然顯示出來了，但我們會發(fā)現(xiàn)一個(gè)現(xiàn)象，就是顯示區(qū)域在瀏覽器中并沒有占滿。這是由于Egret項(xiàng)目建立后，默認(rèn)的屏幕適配模式是不進(jìn)行縮放的。

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

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

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. 創(chuàng)建文字實(shí)例 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 ); }

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

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

實(shí)例

protected createGameScene(): void {// 1. 創(chuàng)建文字實(shí)例 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; }

響應(yīng)用戶操作

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

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

注意，第一行設(shè)置touchEnabled為true，意即允許該顯示對象響應(yīng)Touch事件，這是Egret中特別需要注意的問題。因?yàn)樗械娘@示對象，默認(rèn)都是不響應(yīng)Touch事件的，這是基于性能考慮，因?yàn)榇蜷_對這種事件的響應(yīng)，是對性能有不可忽略的影響的。 其中第二行代碼新增一個(gè)方法的引用，這就是事件處理函數(shù)，我們需要事件處理函數(shù)中對用戶操作做出對應(yīng)的反應(yīng)。 在Main類中，加入如下代碼：

src/main.ts

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

實(shí)例-詳細(xì)版

src/main.ts

protected createGameScene(): void {// 1. 創(chuàng)建文字實(shí)例 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;// 讓文字點(diǎn)擊之后變色// 1. 打開實(shí)例的事件綁定開關(guān) 2. 進(jìn)行事件綁定tx.touchEnabled = true; // 可以提升性能// 1. 事件對象 2. 處理函數(shù) 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; }

效果

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。