The goals of the HTML5 Game Development series are: 1) To get an introduction to Egret small project development at minimal cost, as the official EGREt tutorials have always been for medium and heavy projects; Egret can be very lightweight; 3. Egret documents are more mature and friendly than Pixi. js and Spritejs; Learn to build an efficient development workflow from zero.

  • Create a Hello World in 3 minutes
  • HTML5 Game Development part II: Writing code in TypeScript
  • HTML5 Game Development (3) : Build TypeScript apps with Webpack
  • HTML5 Game Development part 4: Aircraft Wars display scenes and elements
  • HTML5 Game Development # 5: Airplane Wars Get everything moving

In the next few articles, we will create a full plane war game. In this paper, we will:

  • Use the utility function loadImage to quickly load images.
  • Display game background, friendly and enemy aircraft.

Game complete source: github.com/wildfirecod…

Online presentation: wildfirecode.com/egret-plane…

Configuring the game area

Add data-content-width and data-content-height to

in index. HTML to set the size of the game area. 
 <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>
Copy the code

The game is now 720×1200 in width and height.

Adding image Resources

PNG, hero. PNG, and enemy.png to assets.

Load the game’s background, friendly and enemy planes

To reduce engine complexity and beginner’s cost, we have encapsulated the logic for loading images, which is called loadImage.

/ / API loadImage method
const loadImage: (url: string | string[]) = > Promise<egret.Bitmap> | Promise<egret.Bitmap[]>
Copy the code

You can use it to load a single image, in which case the function returns a single bitmap. In EGREt, the corresponding Bitmap class is EGREt.Bitmap, which is a display object that can be filled directly into the display container Main.

const image = await loadImage('assets/background.png') as egret.Bitmap;
Copy the code

You can also use it to load multiple images in parallel, and it will return each bitmap in sequence. In this case, we’ll use it to load three images of the game background, friendly and enemy planes in parallel. They are then added directly to the game scene in sequence

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;// Return the bitmap of background, friendly and enemy planes in sequence
// Add the background to the bottom of the game scene
this.addChild(bg); 
// Add planes to the background of the game
this.addChild(hero);
this.addChild(enemy);
Copy the code

The following diagram illustrates parallel loading of images.

Center the anchor point of the picture

To facilitate the positioning of the image, we center the anchor point of the aircraft in both vertical and horizontal directions.

createGame() {
    ...
    // Set the anchor point of the plane as the center point of the plane
    this.centerAnchor(hero);
    this.centerAnchor(enemy); . } centerAnchor(displayObject: egret.DisplayObject) { displayObject.anchorOffsetX = displayObject.width /2;
    displayObject.anchorOffsetY = displayObject.height / 2;
}
Copy the code

Position the picture

We center the enemy plane horizontally and place it vertically 200 pixels from the top.

createGame() {
    ...
    enemy.x = this.stage.stageWidth / 2;
    enemy.y = 200; . }Copy the code

We center it horizontally and place it vertically 100 pixels from the bottom.

createGame() {
    ...
    hero.x = this.stage.stageWidth / 2;
    hero.y = this.stage.stageHeight - 100; . }Copy the code

The results