# Framework development

The small game framework adopts ECS-like architecture as a whole. Developers can develop custom component scripts to manipulate the game entity (Entity) to realize the game logic.

# Create Script Component script.

The node tree of the game is composed of entity entities, each entity can be mounted with different components to achieve different capabilities. For example, the built-in MeshRenderer Component is used for rendering. Developers can also implement their own script components, inheriting from engine.Script. By defining the callback function of the component's life cycle in the script, you can implement the game logic or modify the properties of other components.

Developers can use the code editor to create scripts, or they can create the default template by right-clicking on the project window of the small game tool to create a new >> script. The file name will default to the class name of your script component. Right-click this script file and you can choose to use the built-in editor or the system default software to open it.

# Script component structure

The newly created script is generally as follows, including a class. Every time it is added to an Entity, a new instance of this class is generated.

import engine from "engine";

@engine.decorators.serialize("Move")
export default class Move extends engine.Script {
  @engine.decorators.property({
    type:'string'
  })
  public name: string = "myname"
  
  public onAwake() {

  }
  public onUpdate(dt) {

  }
  public onDestroy() {

  }
}

This class consists of several parts. -Script component is a class inherited from engine.Script, engine.Script itself inherits from engine.Component. -There is a serialize decorator for this class to indicate that this type is a serializable class. The input parameter of the decorator should be guaranteed to be a unique value. -Properties can be marked with the property decorator, which can be used for serialization landing and UI visualization, which can be viewed in the serialization system chapter later. -OnAwake/onUpdate and other life cycles, these registered callbacks will be executed during the component life cycle to develop game logic. For example, onUpdate is called every frame of the game, and can be used to realize the ability to move positions. The specific life cycle can be viewed in the later life cycle chapter.

# Add to Entity

There are two ways to add your script to Entity.

1. Add in edit mode. In the Project window, drag a script component file to the corresponding entity in the Hierarchy window to bind it. Or open and edit a Scene or Prefab, select the corresponding Entity of Hierarchy, and then click to add components at the bottom of the inspector. In addition to the built-in components, there is also a Script category. Developers can find and add the name of the script they just created. The name is the name of the serialize decorator. Save the Scene or Prefab after adding it to the Entity. The serialization system will also save the current value of the attribute, so that you don't need to add it dynamically every time.

2. Add when the script is running. Developers can use entity.addComponent(Move) to dynamically add a component on demand.

# Get and modify attributes

The component can use this.entity in the callback function to get the current Entity, and it can be modified directly. You can also get other components through getComponent.

public onUpdate(dt) {
  // Change the position of the 3D node
  this.entity.transform.position.x++
  // Get other components
  const mr = this.entity.getComponent(engine.MeshRenderer)
}

# 2D/3D event communication

The small game framework divides Scene and Prefab into 2D and 3D, but in many cases the two need to call and communicate with each other, such as using a 2D joystick to move a 3D character. The event system engine.game.customEventEmitter is provided inside the mini game framework to realize communication.

// 3D components
onAwake() {
  engine.game.customEventEmitter.on('TOUCH_MOVE', (direction) => {
    ...
  });
}
// 2D component
onTouchMove() {
  engine.game.customEventEmitter.emit('TOUCH_MOVE', direction)
}

# The life cycle

Components and the framework itself have corresponding life cycles that can be used, such as onAwake, onUpdate, etc. You can view the [Life Cycle] (editor/tutorial/scripting/lifeCycle.md) chapter to view