Laya environment construction

For this engine primer, all of our examples are based on the latest stable version of Laya’s engine (Laya2.1.1), and the programming language is TypeScript.

We won’t go into the reasons why TypeScript is the programming language of choice. You can explore the “advantages of TypeScript” for yourself.

Now we’re building a Laya game development environment. In a nutshell, we only need two things: LayaIDE and TypeScript.

LayaIDE itself has been modified based on vscode, and has added a drag and drop interface “design mode”. The IDE itself also comes with the latest version of the engine file, just download the IDE from the official website to start Laya game development.

Our TypeScript is much easier to install, directly through NPM.

npm i -g typescript
Copy the code

After the installation is complete, run the tsc-v command to display the current TypeScript version to indicate that the installation is successful.

Many students, when they first start using TypeScript, think of it simply as JavaScript with type restrictions. There’s nothing wrong with it at first because TypeScript itself is a superset of JavaScript. Everything you want to do in JavaScript is fine here, but to get the most out of TypeScript, take a look at understanding TypeScript.

catalogue

Once the environment is set up, we can start our first project. New project -> select “2D Sample Project” -> select “2.1.1” version of the engine -> Click Create.

After the project is built, let’s first introduce its catalogue:

  • Laya:

    • The configuration file of the project is stored, and the compile and publish script (compile. Js script is compiled by Browserify before Laya2.2, and compile by rollup after Laya2.2) is stored.

    • It is recommended that novices do not modify the scripts in this directory to avoid the normal operation of the whole script. After getting familiar with compiling scripts, if you have special compilation requirements (such as increasing the code confusion intensity), you can modify the compile.js and publish.

    • In addition, there will be temporary chrome files in the directory, it is recommended to add the gitignore file;

  • Bin:

    • This directory mainly stores compiled code files (business logic codes in the JS directory), exported resource files (images, fonts, audio, scenes, etc.) in “Design Mode”, engine codes (in the libs directory), and entry files (index.html and index.js).

    • Index.js is the entry file of JS, you can introduce JS library according to modify, and the final compilation tool will package them into a file;

    • If various resource files need to be referenced in the service code, their paths are all referenced according to the structure of the bin directory after export, for example

      // destroy. Wav is in the bin/sound directory
Laya.SoundManager.playSound("sound/destroy.wav");
Copy the code

    • It is recommended to add all directories except bin/libs to gitignore;

  • laya

    • This directory is used to store assets files (assets directory), UI configuration files (.laya), and scene files (Pages directory) before compilation.

  • libs

    • This directory houses ts type definition files for laya engine and small game engine.

  • src

    • The directory stores business logic codes. There is no official directory structure division for reference. The specific structure division can be decided by ourselves (the directory division of our current project is divided according to functional modules).
    • GameConfig.tsandui/layaMaxUI.tsThese two files are automatically generated by the IDE and need to be added to the gitignore file, andsrc/uiDirectory must not put your own code, will be cleared by the IDE;

  • Release (currently not available, will be generated after successful release)

    • This directory mainly stores files after publication, depending on the type of publication you chooseweb,Wechat games,Oppo fast gamePut it in a different directory;

Hello World

After introducing the directory structure of the entire project, we went straight to hand-writing our first Laya mini-game, “Hello World.” In the new project, replace the contents of SRC/main.ts with the following code:

class Main {
    constructor() {
        // 1. Initialize the stage. Default background color is black
        Laya.init(800.600, Laya['WebGL']);
        // create a text object
        let txt = new Laya.Text();
        // 3. Set the text object
        txt.text = 'Hello World';
        // 4. Set other attributes of the text
        txt.color = '#fff';      // Text color
        txt.fontSize = 48;       / / size
        txt.stroke = 3;          // Stroke width
        txt.strokeColor = 'red'; // Stroke color
        txt.bold = true;         / / bold
        txt.italic = true;       / / italics
        txt.pos(280.250);       / / position
        // 5, add to stageLaya.stage.addChild(txt); }}// Activate the boot class
new Main();
Copy the code

After compiling the code in the order shown in the image, view the effect in the local browser:

The code looks like this:

Ok, our first Laya program “Hello World” is done! If you want to see what Laya.Text has to offer, you can find a link to see for yourself.

Laya2.x game engine introduction series

The author has been deeply involved in an OPPO fast game project (similar to micro games on wechat) since May, 19. From scratch, I have finally entered the door of H5 game development. There aren’t many tutorials on how to make fast games with Laya, so I decided to write down all the holes I’ve stepped on, solved, and learned over the past few months so that other students can avoid them in advance.

The LayA2.x Game Engine Primer series is expected to write the following articles documenting how to develop and ship a fast game from scratch:

  • Laya2.x Game Engine Introduction Series 1: Hello World
  • Laya2.x Game Engine Introduction Series (ii) : UI interface development
  • Laya2.x Game Engine Introduction series (iii) : Common animation development
  • Laya2.x Game engine introduction series (4) : Pixel level restore text
  • Laya2.x Game Engine Introduction Series (5) : The Soul of the game – Script
  • Laya2.x Game Engine Introduction Series (6) : Pictures cure all Diseases
  • Laya2.x Game Engine Introduction Series (7) : Data Communication
  • Laya2.x Game Engine Introduction Series (8) : 2D physics World
  • Laya2.x Game Engine Introduction Series (9) : Game debugging
  • Laya2.x Game Engine Introduction Series (10) : Project Engineering
  • Laya2.x Game Engine Introduction Series (11) : Game performance Optimization
  • Laya2.x Game Engine Introduction Series (12) : FAQ

At the same time, Laya2 currently engine code through TypeScript refactoring, if you have any questions in writing code can directly find the answer in GitHub source code, the author will also write some articles about Laya2 source code parsing, interested friends can pay attention to.

This is the first time to try to write a complete teaching article, if there is any mistake or not rigorous place, please be sure to give correction, thank you very much!

About me

I am a modefeelings code porter, will update 1 to 2 front-end related articles every week, interested in the old iron can scan the following TWO-DIMENSIONAL code attention or direct wechat search front-end cram school attention.

Mastering the front end is difficult, let’s make up the lesson together!