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

The purpose of this article is simply to enable developers themselves to create and run an EGREt instance as quickly as possible and to increase interest in EGREt development without the hassle of project configuration. The official mess is too heavy for beginners.

For the complete source code, see: github.com/wildfirecod…

Online access: wildfirecode.com/egret-hello…

Create the entry index.html

Create the index.html file in the root directory, which is the local project access point. Create an EGREt-Player div tag inside the body tag, which is the container for the canvas. Add a data-entry-class attribute to the tag and set its value to Main to specify the entry to the program. Details are as follows:

<div style="margin: auto; width: 100%; height: 100%;" 
    class="egret-player" 
    data-entry-class="Main">
</div>
Copy the code

Then, Egret library files egret.min.js and egret.web.min.js are introduced in index. HTML using CDN.

<script src="https://yun.duiba.com.cn/db_games/egret_5.2.9/egret.min.js"></script>
<script src="https://yun.duiba.com.cn/db_games/egret_5.2.9/egret.web.min.js"></script>
Copy the code

After that, we’ll introduce the user code file main.js.

<script src="main.js"></script>
Copy the code

Write the code

Create the main.js user code file in the root directory and create a class named main in it. Then expose this class to the Window global object. In the onAddToStage method, we create a red text box with the text hello World.

class Main extends egret.DisplayObjectContainer {
    constructor() {
        super(a);this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);
    }

    onAddToStage(event) {
        let textfield = new egret.TextField();
        this.addChild(textfield);
        textfield.textColor = 0xff0000;
        textfield.text = 'hello world'; }}window['Main']=Main;
Copy the code

Here are a few points:

  • egretIs the global namespace of the engine.
  • MainClasses must inheritegret.DisplayObjectContainerThis base class. The engine convention entry class must be oneDisplayable container objectThe container object can be filled with other objectsDisplayable object.
  • egret.TextFieldIs an instance of a class in the engine used to display textDisplayable objectAnd we useegret.DisplayObjectContainerOf the classaddChildMethod to add the created textbox toAccording to the container.

Finally, we put the following code at the end of main.js to start the engine.

egret.runEgret();
Copy the code

Run the code

Run index. HTML in Chrome and you can see hello World in red on the canvas. The running result is shown below.