Learn from the official Demo how to inject soul into a game

The game above is the official Demo provided by Laya IDE, a simple shooter that utilizes the physics engine.

Audio, animation, physics engines, presets, etc., are all covered in the game, but they are not the focus of this discussion. This time we’re going to talk about how you can make static interfaces have soul.

1.1 Demo source code analysis

Let’s start by looking at what’s in the sample code for the Demo.

The sample code contains one of four files whose inheritance is as follows:

Bullet. Ts inherits laya. Script, the Bullet Script class

B. DropBox. Ts inherits laya. Script, a box Script class

C. Gamecontrol. ts inherits laya. Script, the GameControl Script class

D. Gameui. ts inherits UI.test. TestSceneUI, the game scene Runtime

Let’s start with the conclusion, then go to our UI file with the conclusion, and briefly explain the function of the above classes:

  1. Laya.ScriptThat is, scripts, mounted on a component/page, will periodically trigger lifecycle callback functions that can be specified in theThe life cycleTo achieve business logic;
  2. ui.test.TestSceneUIIt is the UI scenario that we implement through the IDE, and inheriting from that scenario makes our scripts for that scenarioThe Runtime logic. Helps us manipulate elements in the page, and can be used in the specifiedScene life cycleTo achieve business logic;

1.2 Demo Scenario Analysis

With all this code, how does the Laya engine make the game work? Let’s go to the Demo scenario list to see why, and see if there’s anything strange?

When we open the scene list, we can see that in addition to the scene file *.scene and animation file *.ani, there is a set of prefab folders in the list, including Bullet. Prefab and DropBox. Prefab.

Prefab here can be directly understood as the UI components that we generate using the editor. For details, see Preset usage.

Bullet. Prefab node structure:

DropBox. Prefab node structure:

Both preFab have a Script node (red box) in them.

If we look at our main scene, test/ testScene. scene, we can see that it also has a Script node in its node list.

However, in the scene properties, we can see that the Runtime location specifies the script we saw in the script directory earlier.

After looking at the script mount location in the scene list, can you see how we should inject soul into the game? Yes, there are two ways to add logic classes:

  • Implement a class that inherits the generated UI scene and place the corresponding scene in the UI editorruntimeProperty set to the class you implement;
  • Implement an inheritanceLaya.ScriptAnd drag the class to the specified scene.

For both approaches, two sets of lifecycle logic are maintained in LAYa

Runtime lifecycle:

(The picture on the official website is too lazy to draw.)

Script mode lifecycle:

Add your own business logic to different lifecycle functions to implement your own game. Does this sound a bit like writing code in Vue?

The recommended scenarios for the two methods of adding logical classes are as follows:

  • This can be used if it is page-level logicruntimeThe way;
  • If it is a stand-alone module, it can be usedscriptThe way;

1.3 Script Activation flowchart

The following is the runtime and Script activation process:

Scene activation process.jpg

  • Scene.loadSceneLoad scenarios. Load static resources and script resources according to the data in the UI file.
  • After loading, it takes precedence over properties in the UI fileruntimeTo instantiate ourruntimeClass;
  • Elements are also initialized based on other UI configurations in the scene, for example,sprite,script,iamgeSuch elements;
  • Open the scene, add the scene to the root node, at the same time, do the same for the nodes under the scene;
  • Trigger the scenario after the addition is complete_onAddedMethods;
  • node._processActive()Activating parent scene
  • node._activeHierarchy()Activate corresponding to the current scenario RuntimeonEnableMethods;
  • node._activeScript()Activate for the current scenarioscriptThe correspondingonEnableMethods;

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!