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

To do a good job, he must sharpen his tools. In the next two articles, we will build efficient workflows based on TypeScript+ WebPack.

In this article, we’ll rework the previous Hello World instance in TypeScript.

Project complete source code please see :github.com/wildfirecod…

Online address: wildfirecode.com/egret-types…

What changes will be made

  • Because we just changemain.jsIs written from JavaScript to TypeScript, soindex.htmlThere will be no change.
  • We’ll introduce TypeScript workflows.

Create the TypeScript configuration

First we create the TypeScript configuration file tsconfig.json in the project root directory and add the following configuration:

{
    "compilerOptions": {
        "module": "es6"."target": "es5"}}Copy the code

The configuration tells the TypeScript build tool that we are using ES6 Modules to manage our code and that we are building for ES5, which allows our code to run on older browsers.

Modify the code

First let’s change main.js to main.ts. We then create the TypeScript declaration defs.d.ts for the global egret object and add the following:

declare var egret:any;
Copy the code

Compile the code

Let’s start by installing the TypeScript compiler, which is a global command.

npm install -g typescript
Copy the code

You then execute the TSC command to compile the TypeScript code.

tsc
Copy the code

Next, we see that the root directory generates the JavaScript file main.js. One thing to note is that we are using the latest version of the TypeScript language compiler. You can open main.js to see how the content changes relative to main.ts.

Running instance

Run index. HTML with Chrome and you’ll see hello World in red on the canvas as shown above.

The next step

Ok. The above steps are very simple, and seem very uncool. In the next article we’ll consider using WebPack to build efficient typescript-based development processes.