HTML5遊戲開發(四)：飛機大戰之顯示場景和元素

《HTML5遊戲開發》系列文章的目的有：1、以最小的成本去入門egret小項目開發，官方的教程一直都是面向中重型；2、egret能夠很是輕量；3、egret相比PIXI.js和spritejs文檔更成熟、友好；4、學習從0打造高效的開發工做流。

• HTML5遊戲開發(一)：3分鐘建立一個hello world
• HTML5遊戲開發(二)：使用TypeScript編寫代碼
• HTML5遊戲開發(三)：使用webpack構建TypeScript應用
• HTML5遊戲開發(四)：飛機大戰之顯示場景和元素
• HTML5遊戲開發(五)：飛機大戰之讓全部元素動起來

接下來的幾篇文章裏，咱們將會建立一個完整的飛機大戰的遊戲。 本文咱們將會：

• 使用工具函數loadImage來快速實現圖片載入。
• 顯示遊戲的背景、友機和敵機。

遊戲完整源碼：github.com/wildfirecod…

在線展現：wildfirecode.com/egret-plane…

配置遊戲區域

在index.html的<div>上增長屬性data-content-width和data-content-height來設置遊戲區域的大小尺寸。

<div style="margin: auto;width: 100%;height: 100%;" class="egret-player" data-entry-class="Main" data-scale-mode="fixedWidth" data-content-width="720" data-content-height="1200">
</div>
複製代碼

如今遊戲的寬高爲720x1200。

添加圖片資源

將背景(background.png)、友機（hero.png）、敵機（enemy.png）圖片添加到assets目錄。

載入遊戲的背景、友機和敵機

爲了下降引擎的複雜度以及初學者的成本，咱們把加載圖片的邏輯作了封裝，這就是loadImage函數。

//loadImage方法API
const loadImage: (url: string | string[]) => Promise<egret.Bitmap> | Promise<egret.Bitmap[]>
複製代碼

你能夠用它來加載單獨的一張圖片，此時函數會返回單個位圖。在egret中，位圖對應的類是egret.Bitmap，它是一個顯示對象，能夠直接填充到顯示容器 Main中。

const image = await loadImage('assets/background.png') as egret.Bitmap;
複製代碼

也能夠使用它來並行加載多張圖片，它將按順序返回每一個位圖。在本例中，咱們會用它來並行加載遊戲背景、友機和敵機三張圖片。隨後將它們按順序直接添加到遊戲場景當中

import { loadImage } from "./assetUtil";
const assets = ['assets/background.png', 'assets/hero.png',  'assets/enemy.png'];
const images = await loadImage(assets) as egret.Bitmap[];
const [bg, hero, enemy] = images;//按順序返回背景、友機、敵機的位圖
//將背景添加到遊戲場景的最底層
this.addChild(bg); 
//將飛機添加到遊戲背景之上
this.addChild(hero);
this.addChild(enemy);
複製代碼

下圖示意了圖片的並行加載。

將圖片的錨點居中

爲了方便定位圖片，咱們將飛機的錨點同時在垂直和水平方向居中。

createGame() {
    ...
    //設置飛機的錨點爲飛機中心點
    this.centerAnchor(hero);
    this.centerAnchor(enemy);
    ...
}

centerAnchor(displayObject: egret.DisplayObject) {
    displayObject.anchorOffsetX = displayObject.width / 2;
    displayObject.anchorOffsetY = displayObject.height / 2;
}
複製代碼

給圖片設定位置

咱們將敵機在水平方向上居中，垂直方向上將其放置在距離頂部200像素的地方。

createGame() {
    ...
    enemy.x = this.stage.stageWidth / 2;
    enemy.y = 200;
    ...
}
複製代碼

咱們將友機在水平方向上居中，垂直方向上將其放置在距離底部100像素的地方。

createGame() {
    ...
    hero.x = this.stage.stageWidth / 2;
    hero.y = this.stage.stageHeight - 100;
    ...
}
複製代碼

運行結果