Extension lifecycle functions

1. Basic Concepts

In Wings Engine, each custom development file should be a JS class. Even if the code does not explicitly extend the Extension class, it will implicitly extend Extension at runtime.

The Extension class has four lifecycle functions: init, ready, update, and destroy.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

class Button {
  init() {
    // Place the initialization code here
  }
  ready() {
    // Add code that relies on the initialization of other components here
  }
  update() {
    // Include code that needs to be called every frame, such as position updates in animations
    // Note: Avoid heavy computations that can significantly affect performance
  }
  destroy() {
    // Clean up arrays, Maps, and other memory-intensive variables created during initialization
  }
}
export default Button;

1.1 Initialization Function

The initialization functions include init and ready. Typically, initialization code is written in init. However, if the initialization depends on other components being initialized first, it should be written in ready, because the ready function is called only after all component init functions have been executed.

1.2 Update Function

The update function is used to implement various animation effects. In Wings Engine custom development, this function is called once per frame render. Heavy computations should not be placed in this function to avoid severe performance issues. It is recommended to precompute resource-intensive calculations in the init function and simply call them in the update function.

1.3 Cleanup Function

If large arrays or other resources are created in the init or update functions, they must be cleared in the destroy function. For example, set the length of arrays to 0 or call the clear method on Maps, etc.

For a detailed introduction to the lifecycle functions, refer to the API documentation: https://shanhaibi.yuque.com/staff-uev5km/wings-engine/yshl32ezom1x6733