### Initialize State with start and update

Source: https://github.com/cocos/cocos-docs/blob/master/versions/3.8/en/scripting/life-cycle-callbacks.md

Shows how to use the start method for initial state setup and the update method for frame-by-frame logic execution.

```typescript
import { _decorator, Component, Node } from 'cc';
const { ccclass, property } = _decorator;

@ccclass("starttest")
export class starttest extends Component {

    private _timer: number = 0.0;

    start () {
        this._timer = 1.0;
    }

    update (deltaTime: number) {
        this._timer += deltaTime;
        if(this._timer >= 10.0){
            console.log('I am done!');
            this.enabled = false;
        }
     }
}
```

--------------------------------

### Setup Local HTTPS Server for Testing

Source: https://github.com/cocos/cocos-docs/blob/master/versions/3.8/en/editor/publish/publish-fb-instant-games.md

Commands to install the http-server package, generate SSL certificates using OpenSSL, and start a local server to test the Facebook Instant Games build.

```bash
cd fb-instant-games
npm install -g http-server
openssl genrsa 2048 > key.pem
openssl req -x509 -days 1000 -new -key key.pem -out cert.pem
http-server --ssl -c-1 -p 8080 -a 127.0.0.1
```

--------------------------------

### Emscripten Configuration Example

Source: https://github.com/cocos/cocos-docs/blob/master/versions/3.8/en/advanced-topics/wasm-asm-create.md

Example configuration snippet for Emscripten, showing the expected paths for LLVM_ROOT and BINARYEN_ROOT. These paths may need manual adjustment if they do not match the local installation.

```python
LLVM_ROOT = 'D:\\git\\emsdk\\upstream\\bin'
BINARYEN_ROOT = 'D:\\git\\emsdk\\upstream'
```

--------------------------------

### Build Command Example

Source: https://github.com/cocos/cocos-docs/blob/master/versions/3.8/en/editor/publish/publish-in-command-line.md

Examples of how to build a project from the command line for Mac and Windows, with debug mode enabled.

```APIDOC
## Build Command Example

### Description
This section provides examples for building a Cocos Creator project from the command line, demonstrating how to enable debug mode for different operating systems.

### Method
Command Line Execution

### Endpoint
N/A (Command Line Tool)

### Parameters

#### Command Line Arguments
- **`--project`** (string) - Required - Specify the path to the project directory.
- **`--build`** (string) - Required - Specify build parameters. Format: `"platform=web-desktop;debug=true"`.

### Request Example

**Mac Example:**
```bash
/Applications/CocosCreator/Creator/3.0.0/CocosCreator.app/Contents/MacOS/CocosCreator --project projectPath --build "platform=web-desktop;debug=true"
```

**Windows Example:**
```bash
...\CocosCreator.exe --project projectPath --build "platform=web-desktop;debug=true"
```

### Response

#### Success Response (Exit Code 36)
- **`36`** - Build success.

#### Error Responses
- **`32`** - Build failed - Invalid build parameters.
- **`34`** - Build failed - Unexpected errors occurred during the build process. Refer to the build log for details.
```

--------------------------------

### Example Custom application.ejs Template

Source: https://github.com/cocos/cocos-docs/blob/master/versions/3.8/zh/release-notes/build-template-settings-upgrade-guide-v3.6.md

A basic `application.ejs` template demonstrating initialization with event listeners and engine start configuration. It includes settings for `settingsJsonPath`, `showFPS`, and `debugMode`.

```javascript
let cc;
export class Application {
    constructor () {
        this.settingsPath = '<%= settingsJsonPath %>'; // settings.json 文件路径，通常由编辑器构建时传入，你也可以指定自己的路径
        this.showFPS = <%= showFPS %>; // 是否打开 profiler, 通常由编辑器构建时传入，你也可以指定你需要的值
    }
    
    init (engine) {
        cc = engine;
        cc.game.onPostBaseInitDelegate.add(this.onPostInitBase.bind(this)); // 监听引擎启动流程事件 onPostBaseInitDelegate
        cc.game.onPostSubsystemInitDelegate.add(this.onPostSystemInit.bind(this)); // 监听引擎启动流程事件 onPostSubsystemInitDelegate
    }

    onPostInitBase () {
        // cc.settings.overrideSettings('assets', 'server', '');
        // 实现一些自定义的逻辑
    }

    onPostSystemInit () {
        // 实现一些自定义的逻辑
    }

    start () {
        return cc.game.init({
            debugMode: <%= debugMode %> ? cc.DebugMode.INFO : cc.DebugMode.ERROR,
            settingsPath: this.settingsPath, // 传入 settings.json 路径
            overrideSettings: { // 对配置文件中的部分数据进行覆盖，第二部分会详细介绍这个字段
                // assets: {
                //      preloadBundles: [{ bundle: 'main', version: 'xxx' }],
                // }
                profiling: {
                    showFPS: this.showFPS,
                }
            }
        }).then(() => cc.game.run());
    }
}
```

--------------------------------

### Install and Build Extension - Bash

Source: https://github.com/cocos/cocos-docs/blob/master/versions/3.8/en/editor/extension/first-panel.md

Commands to install dependencies and build the extension. Navigate to the extension directory and run these commands in your terminal.

```bash
npm install
npm run build
```

--------------------------------

### Install Build Tools and Dependencies

Source: https://github.com/cocos/cocos-docs/blob/master/versions/3.8/zh/advanced-topics/engine-customization.md

Install the global gulp build tool and project-specific npm modules. Ensure NodeJS v12.0 or higher is installed.

```bash
# Install gulp build tool
npm install -g gulp
# Install dependent modules
npm install
```

--------------------------------

### Global Installation Utility

Source: https://github.com/cocos/cocos-docs/blob/master/versions/3.8/en/advanced-topics/jsb-sebind.md

This function installs a target object into the global scope. It returns a boolean indicating the success of the operation.

```javascript
function installGlobal(target) {
  if (typeof globalThis !== 'undefined') {
    target.install(globalThis);
  }
  return true;
}
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/cocos/cocos-docs/blob/master/README.md

Installs the necessary Node.js modules required to run the documentation project scripts and build tools.

```shell
npm install
```

--------------------------------

### Rendering Process in `setup`

Source: https://github.com/cocos/cocos-docs/blob/master/versions/3.8/en/render-pipeline/write-render-pipeline.md

Details the rendering process within the `setup` method, which is called once per frame. It explains how to iterate through sorted cameras and apply the rendering pipeline using the `BasicPipeline` object.

```APIDOC
## Rendering Process in `setup`

### Description
This section describes the rendering process initiated in the `setup` method of the `BuiltinPipelineBuilder`. This method is executed once per frame to configure and execute the rendering for all active cameras.

### Method
`setup`

### Endpoint
N/A (Class method)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```typescript
class BuiltinPipelineBuilder implements rendering.PipelineBuilder {
    setup(
        cameras: renderer.scene.Camera[],
        ppl: rendering.BasicPipeline,
    ): void {
        for (const camera of cameras) {
            if (!camera.scene || !camera.window) {
                continue;
            }

            this._pipelineEvent.emit(PipelineEventType.RENDER_CAMERA_BEGIN, camera);

            this._buildSimplePipeline(camera, ppl);

            this._pipelineEvent.emit(PipelineEventType.RENDER_CAMERA_END, camera);
        }
    }
}
```

### Response
N/A

#### Success Response (200)
N/A

#### Response Example
N/A
```

--------------------------------

### Custom Component Scripting in Cocos Creator and Unity

Source: https://github.com/cocos/cocos-docs/blob/master/versions/3.8/en/guide/unity/index.md

Demonstrates how to create custom components in Cocos Creator using TypeScript and in Unity using C#. Both examples show how to get a component reference in the start method.

```csharp
public class Player : NetworkBehaviour
{
    Animation _animation;

    Start(){
      
        _animation = gameObject.GetComponent<Animation>();
    }
}
```

```typescript
@ccclass('MotionController')
export  class MotionController extends Component {  

    animation: SkeletalAnimation;

     start() {

        this.animation = this.getComponent(SkeletalAnimation);        
    }    
}
```

--------------------------------

### Preview Production Build

Source: https://github.com/cocos/cocos-docs/blob/master/README.md

Launches a local server to preview the production-ready build of the documentation.

```shell
npx vitepress preview versions/3.8
```

--------------------------------

### Initialize and Update with start and update

Source: https://github.com/cocos/cocos-docs/blob/master/versions/3.8/zh/scripting/life-cycle-callbacks.md

The start callback initializes intermediate data before the first update. The update callback is used for per-frame updates of object behavior, state, and position. This example initializes a timer in start and increments it in update.

```typescript
import { _decorator, Component, Node } from 'cc';
const { ccclass, property } = _decorator;

@ccclass("starttest")
export class starttest extends Component {

    private _timer: number = 0.0;

    start () {
        this._timer = 1.0;
    }

    update (deltaTime: number) {
        this._timer += deltaTime;
        if(this._timer >= 10.0){
            console.log('I am done!');
            this.enabled = false;
        }
     }
}
```

--------------------------------

### Implementing the Render Pipeline Setup

Source: https://github.com/cocos/cocos-docs/blob/master/versions/3.8/en/render-pipeline/write-render-pipeline.md

Shows how to implement the setup method to iterate through cameras and trigger rendering events. This method is called once per frame to build the render pipeline.

```typescript
class BuiltinPipelineBuilder implements rendering.PipelineBuilder {
    setup(
        cameras: renderer.scene.Camera[],
        ppl: rendering.BasicPipeline,
    ): void {
        for (const camera of cameras) {
            if (!camera.scene || !camera.window) {
                continue;
            }

            this._pipelineEvent.emit(PipelineEventType.RENDER_CAMERA_BEGIN, camera);

            this._buildSimplePipeline(camera, ppl);

            this._pipelineEvent.emit(PipelineEventType.RENDER_CAMERA_END, camera);
        }
    }
}
```

--------------------------------

### Tweening Node Properties

Source: https://github.com/cocos/cocos-docs/blob/master/versions/3.8/en/tween/tween-interface.md

Examples demonstrating how to create and start tweens for node properties like position.

```APIDOC
## POST /cocos/cocos-docs/tween

### Description
This section provides examples of using the `tween` function to animate node properties. It covers tweening a specific property (like position) and tweening the entire node object.

### Method
POST (Conceptual - This is not a real API endpoint, but a documentation example)

### Endpoint
/cocos/cocos-docs/tween

### Parameters
None

### Request Example
```typescript
let tweenDuration : number = 1.0;

// Example 1: Tweening node position directly
tween(this.node.position).to( tweenDuration, new Vec3(0, 10, 0), {
    onUpdate : (target:Vec3, ratio:number)=>{
        this.node.position = target;
    }
}).start();

// Example 2: Tweening node properties using an object
tween(this.node).to(
    tweenDuration,
    { position: new Vec3(0, 10, 0) }
).start();
```

### Response
#### Success Response (200)
No specific response body for this conceptual example, as it demonstrates client-side code execution.

#### Response Example
N/A
```

--------------------------------

### Make a GET Request in Cocos Creator

Source: https://github.com/cocos/cocos-docs/blob/master/versions/3.8/zh/advanced-topics/http.md

Example of using the fetch API in Cocos Creator to make a GET request to a local server and log the text response. Ensure the server is running before executing this script.

```typescript
import { _decorator, Component } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('HttpTest')
export class HttpTest extends Component {
    start() {

        fetch("http://127.0.0.1:8080").then((response: Response) => {
            return response.text()
        }).then((value) => {
            console.log(value);
        })
    }
}
```

--------------------------------

### Setup a Simple HTTP Test Server in Go

Source: https://github.com/cocos/cocos-docs/blob/master/versions/3.8/en/advanced-topics/http.md

This Go code initializes a basic HTTP server listening on port 8080. It provides a simple handler that responds with a text message to verify incoming network requests.

```go
package main

import (
"fmt"
"log"
"net/http"
)

func handler(w http.ResponseWriter, r *http.Request) {
    fmt.Fprintf(w, "http request received")
}

func main() {
    http.HandleFunc("/", handler)
    log.Fatal(http.ListenAndServe(":8080", nil))
}
```

--------------------------------

### Perform HTTP GET Request in Cocos Creator

Source: https://github.com/cocos/cocos-docs/blob/master/versions/3.8/en/advanced-topics/http.md

This TypeScript example demonstrates how to use the fetch API within a Cocos Creator component. It sends a GET request to a local server and logs the returned text data to the console.

```typescript
import { _decorator, Component } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('HttpTest')
export class HttpTest extends Component {
    start() {
        fetch("http://127.0.0.1:8080").then((response: Response) => {
            return response.text()
        }).then((value) => {
            console.log(value);
        })
    }
}
```

--------------------------------

### Migrating Custom Engine Startup Logic to Event Listeners (JavaScript)

Source: https://github.com/cocos/cocos-docs/blob/master/versions/3.8/en/release-notes/build-template-settings-upgrade-guide-v3.6.md

Demonstrates how to migrate custom logic previously inserted at specific stages of the engine startup. This is now achieved by adding event listeners to engine delegates like `onPreBaseInitDelegate`, `onPostBaseInitDelegate`, and `onPostProjectInitDelegate`.

```javascript
function start ({
        findCanvas,
    }) {
        let settings;
        let cc;
        return Promise.resolve()
            .then(() => topLevelImport('cc'))
            .then(() => customLogic1()) // Customized Logic 1
            .then((engine) => {
                cc = engine;
                return loadSettingsJson(cc);
            })
            .then(() => customLogic2()) // Customized Logic 2
            .then(() => {
                settings = window._CCSettings;
                return initializeGame(cc, settings, findCanvas)
                    .then(() => {
                        if (settings.scriptPackages) {
                            return loadModulePacks(settings.scriptPackages);
                        }
                    })
                    .then(() => loadJsList(settings.jsList))
                    .then(() => loadAssetBundle(settings.hasResourcesBundle, settings.hasStartSceneBundle))
                    .then(() => {
                        return cc.game.run(() => onGameStarted(cc, settings));
                    });
            }).then(() => customLogic3()); // Customized Logic 3
    }
```

```javascript
init (engine) {
        cc = engine;
        cc.game.onPreBaseInitDelegate.add(this.onPreBaseInit.bind(this)); // Listening for engine start process events onPreBaseInitDelegate
        cc.game.onPostBaseInitDelegate.add(this.onPostBaseInit.bind(this)); // Listening for engine start process events onPostBaseInitDelegate
        cc.game.onPostProjectInitDelegate.add(this.onPostProjectInit.bind(this)); // Listening for engine start process events onPostProjectInitDelegate
    }

    onPreBaseInit () {
        customLogic1(); // Customized Logic 1
    }

    onPostBaseInit () {
        customLogic2() // Customized Logic 2
    }

    onPostProjectInit () {
        customLogic3() // Customized Logic 3
    }
```

--------------------------------

### Get Vertex Position with General CCVertInput

Source: https://github.com/cocos/cocos-docs/blob/master/versions/3.8/zh/shader/legacy-shader/legacy-shader-func-struct.md

Example of using the general CCVertInput macro to obtain vertex position in a vertex shader.

```glsl
#include <legacy/input>
vec4 vert () {
  vec3 position;
  CCVertInput(position);
  // ... 对位置信息做自定义操作
}
```

--------------------------------

### Initialize ScriptingCore and ScriptEngine in AppDelegate

Source: https://github.com/cocos/cocos-docs/blob/master/versions/3.8/en/advanced-topics/JSB2.0-learning.md

Demonstrates how to register the ScriptingCore adapter and initialize the se::ScriptEngine instance within the application lifecycle.

```c++
bool AppDelegate::applicationDidFinishLaunching()
{
    director->setAnimationInterval(1.0 / 60);
    ScriptingCore* sc = ScriptingCore::getInstance();
    ScriptEngineManager::getInstance()->setScriptEngine(sc);
    se::ScriptEngine* se = se::ScriptEngine::getInstance();
}
```

--------------------------------

### Get Vertex Data with Standard CCVertInput

Source: https://github.com/cocos/cocos-docs/blob/master/versions/3.8/zh/shader/legacy-shader/legacy-shader-func-struct.md

Example of using the standard CCVertInput macro to obtain vertex position, normal, and tangent in a vertex shader.

```glsl
#include <legacy/input-standard>
vec4 vert () {
  StandardVertInput In;
  CCVertInput(In);
  // ... 此时 ‘In.position’ 初始化完毕，并且可以在顶点着色器中使用
}
```

--------------------------------

### Connect to Google Play Billing Service

Source: https://github.com/cocos/cocos-docs/blob/master/versions/3.8/en/editor/publish/google-play/google-play-billing-example.md

Starts the connection to the Google Play Billing service. Includes callbacks for handling connection failures and successful setup.

```typescript
this._client.startConnection({
    onBillingServiceDisconnected: (): void => {
        // TODO: Handle connection failure
    },
    onBillingSetupFinished: (billingResult: google.billing.BillingResult): void => {
        // TODO: Handle successful connection
    }
});
```

--------------------------------

### Example Compressed Texture Presets

Source: https://github.com/cocos/cocos-docs/blob/master/versions/3.8/zh/editor/project/index.md

JSON example demonstrating configurations for 'default' and 'transparent' compressed texture presets across various platforms. This can be imported or used as a reference for custom presets.

```json
{
    "default": {
        "name": "default",
        "options": {
            "miniGame": {
                "etc1_rgb": "fast",
                "pvrtc_4bits_rgb": "fast"
            },
            "android": {
                "astc_8x8": "-medium",
                "etc1_rgb": "fast"
            },
            "ios": {
                "astc_8x8": "-medium",
                "pvrtc_4bits_rgb": "fast"
            },
            "web": {
                "astc_8x8": "-medium",
                "etc1_rgb": "fast",
                "pvrtc_4bits_rgb": "fast"
            }
        }
    },
    "transparent": {
        "name": "transparent",
        "options": {
            "miniGame": {
                "etc1_rgb_a": "fast",
                "pvrtc_4bits_rgb_a": "fast"
            },
            "android": {
                "astc_8x8": "-medium",
                "etc1_rgb_a": "fast"
            },
            "ios": {
                "astc_8x8": "-medium",
                "pvrtc_4bits_rgb_a": "fast"
            },
            "web": {
                "astc_8x8": "-medium",
                "etc1_rgb_a": "fast",
                "pvrtc_4bits_rgb_a": "fast"
            }
        }
    }
}
```

--------------------------------

### Chain Tween Actions

Source: https://github.com/cocos/cocos-docs/blob/master/versions/3.8/en/tween/tween-example.md

Demonstrates how to chain multiple tween actions together using the fluent API. This example moves a node, delays, and moves it again before starting the sequence.

```typescript
tween()
    .target(this.node)
    .to(1.0, { position: new Vec3(0, 10, 0) })
    .by(1.0, { position: new Vec3(0, -10, 0) })
    .delay(1.0)
    .by(1.0, { position: new Vec3(0, -10, 0) })
    .start()
```

--------------------------------

### Loading Custom Mac Platform

Source: https://github.com/cocos/cocos-docs/blob/master/versions/3.8/en/engine/template/native-upgrade-to-v3.5.md

The entry point for a customized Mac platform, demonstrating initialization and execution.

```cpp
#include "CustomMacPlatform.h"

int main(int argc, const char * argv[]) {
    CustomMacPlatform platform; 
    if (platform.init()) {
        return -1;
    }
    return platform.run(argc, (const char**)argv); 
}
```

--------------------------------

### Create C Code Example

Source: https://github.com/cocos/cocos-docs/blob/master/versions/3.8/en/advanced-topics/wasm-asm-create.md

A simple C program that prints 'Hello World' to the console. This serves as a basic example for conversion to Wasm/Asm.

```c
#include <stdio.h>

int main() {
    printf("Hello World\n");
}
```

--------------------------------

### C++ Header Files for Inheritance Example

Source: https://github.com/cocos/cocos-docs/blob/master/versions/3.8/en/advanced-topics/jsb/swig/tutorial/index.md

Defines MyRef and MyObject classes in C++. MyObject inherits from MyRef. This setup is used to demonstrate Swig binding configurations.

```c++
// MyRef.h
#pragma once
namespace my_ns {
class MyRef  {
public:
    MyRef() = default;
    virtual ~MyRef() = default;
    void addRef() { _ref++; }
    void release() { --_ref; }
private:
    unsigned int _ref{0};
};
} // namespace my_ns { 

```

```c++
// MyObject.h
#pragma once
#include "cocos/cocos.h"
#include "MyRef.h"
namespace my_ns {
// MyObject inherits from MyRef
class MyObject : public MyRef {
public:
    MyObject() = default;
    MyObject(int a, bool b) {}
    virtual ~MyObject() = default;
    void print() {
        CC_LOG_DEBUG("==> a: %d, b: %d\n", _a, (int)_b);
    }

    float publicFloatProperty{1.23F};
private:
    int _a{100};
    bool _b{true};
};
} // namespace my_ns { 

```

--------------------------------

### Create Native Plugin Directory Structure

Source: https://github.com/cocos/cocos-docs/blob/master/versions/3.8/en/advanced-topics/native-plugins/tutorial.md

Commands to initialize the directory structure for native plugins on different platforms.

```bash
mkdir native/native-plugin/android
mkdir -p native/native-plugin/ios/lib
mkdir -p native/native-plugin/mac/lib
```

--------------------------------

### TypeScript JSB Bridge Usage

Source: https://github.com/cocos/cocos-docs/blob/master/versions/3.8/zh/advanced-topics/jsb-auto-binding.md

Example of how to use the automatically generated JSB bindings in TypeScript. This demonstrates calling a static method to get an instance and then calling an instance method.

```typescript
import { _decorator, Component, Node } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('Test')
export class Test extends Component {
    start () {
        // @ts-ignore
        abc.JSBBridge.getInstance().abcLog("JSB 绑定测试成功")
    }
}

```

--------------------------------

### Set Path Starting Point with moveTo() in TypeScript

Source: https://github.com/cocos/cocos-docs/blob/master/versions/3.8/en/ui-system/components/editor/graphics/moveTo.md

Demonstrates how to use the moveTo() method to set the starting point of a path in Cocos Graphics. This method is essential for defining where a shape or line begins. It takes x and y coordinates as input. The example also shows subsequent lineTo() and stroke() calls to complete and render the path.

```typescript
const ctx = node.getComponent(Graphics);
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();
```

--------------------------------

### Build Documentation

Source: https://github.com/cocos/cocos-docs/blob/master/README.md

Runs the production build script for a specific version or all versions of the documentation.

```shell
node ./scripts/publish.js --version=versions/3.8
node ./scripts/publish.js --version=versions/all
```

--------------------------------

### Close a Path in Cocos Graphics

Source: https://github.com/cocos/cocos-docs/blob/master/versions/3.8/en/ui-system/components/editor/graphics/close.md

This example demonstrates how to use the close() method to complete a shape. It moves the pen to a starting point, draws two lines, and then closes the path before applying a stroke.

```typescript
const ctx = node.getComponent(Graphics);
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(70,100);
ctx.close();
ctx.stroke();
```

--------------------------------

### Enable and Use WebSocket Server

Source: https://github.com/cocos/cocos-docs/blob/master/versions/3.8/zh/advanced-topics/websocket-server.md

This code demonstrates how to initialize and use the WebSocket server. Ensure the WebSocket Server is enabled in Project Settings -> Feature Crop. This example may not work on native Release mode or Web/Mini-game platforms if WebSocketServer is undefined.

```typescript
if (typeof WebSocketServer === "undefined") {
    console.error("WebSocketServer is not enabled!");
    return;
}

let s = new WebSocketServer();
s.onconnection = function (conn) {
    conn.onmessage = function (data) {
        conn.send(data, (err) => {});
    }
    conn.onclose = function () {
        console.log("connection gone!");
    };
};

s.onclose = function () {
  console.log("server is closed!")
}
s.listen(8080, (err) => {
   if (!err);
   console.log("server booted!");
});
```

--------------------------------

### GameManager Component Setup in TypeScript

Source: https://github.com/cocos/cocos-docs/blob/master/versions/3.8/en/getting-started/first-game/index.md

Sets up the `GameManager` component in TypeScript for Cocos Creator. It includes properties for the runway prefab, road length, and initializes the road generation process in the `start` method.

```typescript
import { _decorator, Component, Prefab } from 'cc';
const { ccclass, property } = _decorator;

// Track grid type, pit (BT_NONE) or solid road (BT_STONE)
enum BlockType {
    BT_NONE,
    BT_STONE,
};

@ccclass("GameManager")
export class GameManager extends Component {

    // The runway prefab
    @property({type: Prefab})
    public cubePrfb: Prefab | null = null;
    // Total road length
    @property
    public roadLength = 50;
    private _road: BlockType[] = [];

    start () {
        this.generateRoad();
    }

    generateRoad() {
  
    }
}
```

--------------------------------

### Execute Bundle Build via Command Line

Source: https://github.com/cocos/cocos-docs/blob/master/versions/3.8/zh/editor/publish/publish-in-command-line.md

Execute a bundle build using the command line by specifying the stage as 'bundle' and providing the path to the exported configuration file via `configPath`.

```bash
/Applications/CocosCreator/Creator/3.0.0/CocosCreator.app/Contents/MacOS/CocosCreator --project projectPath --build "stage=bundle;configPath=./bundle-build-config.json;"
```

```bash
...\CocosCreator.exe --project projectPath --build "stage=bundle;configPath=./bundle-build-config.json;"
```

--------------------------------

### Modifying 2D Node Color in Cocos Creator

Source: https://github.com/cocos/cocos-docs/blob/master/versions/3.8/en/release-notes/upgrade-guide-v3.0.md

To change the color of a 2D node, you need to get its renderable component (e.g., Sprite) and then use the color interface. This example shows how to set the color to white.

```typescript
const uiColor = node.getComponent(Sprite)! ;
uiColor.color = color(255,255,255);
```

--------------------------------

### Install Emscripten SDK

Source: https://github.com/cocos/cocos-docs/blob/master/versions/3.8/en/advanced-topics/wasm-asm-create.md

Installs the Emscripten SDK, including runtime libraries. It's recommended to use version 3.1.41 for compatibility. This command downloads and sets up the necessary Emscripten toolchain.

```bash
git clone https://github.com/emscripten-core/emsdk.git
cd emsdk
./emsdk install 3.1.41
./emsdk activate --system
```

--------------------------------

### Listen to Audio Playback Events

Source: https://github.com/cocos/cocos-docs/blob/master/versions/3.8/zh/audio-system/audiosource.md

This example demonstrates how to register and unregister event listeners for the AudioSource component's STARTED and ENDED events. These callbacks can be used to trigger actions when audio playback begins or finishes.

```typescript
import { _decorator, Component, Node, AudioSource } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('AudioDemo')
export class AudioDemo extends Component {

    @property(AudioSource)
    audioSource: AudioSource = null!;

    onEnable () {
        // Register the started event callback
        this.audioSource.node.on(AudioSource.EventType.STARTED, this.onAudioStarted, this);
        // Register the ended event callback
        this.audioSource.node.on(AudioSource.EventType.ENDED, this.onAudioEnded, this);
    }

    onDisable () {
        this.audioSource.node.off(AudioSource.EventType.STARTED, this.onAudioStarted, this);
        this.audioSource.node.off(AudioSource.EventType.ENDED, this.onAudioEnded, this);
    }

    onAudioStarted () {
        // TODO...
    }

    onAudioEnded () {
        // TODO...
    }
}
```

--------------------------------

### Wechat Mini Game Build Parameters Example

Source: https://github.com/cocos/cocos-docs/blob/master/versions/3.8/zh/editor/publish/publish-in-command-line.md

This example shows how to configure specific parameters for the WeChat Mini Game platform within the `packages` field for command-line builds. The `appid` is a placeholder.

```json
{
    taskName: 'wechatgame',
    packages: {
        wechatgame: {
            appid: '*****',
        }
    }
}
```

--------------------------------

### Enable UIStaticBatch via Script

Source: https://github.com/cocos/cocos-docs/blob/master/versions/3.8/en/ui-system/components/editor/ui-static.md

This TypeScript code snippet demonstrates how to get the UIStaticBatch component attached to a node and initiate static batching by calling the `markAsDirty()` method. This is typically done in the `start()` method of a component.

```typescript
import { _decorator, Component } from 'cc';
const { ccclass, property } = _decorator;

@ccclass("example")
export class example extends Component {
    start(){
        const uiStatic = this.node.getComponent(UIStaticBatch);
        // Choose the time you want to start static batching, call this interface to start static batching
        uiStatic.markAsDirty();
    }
}
```

--------------------------------

### Run Development Server

Source: https://github.com/cocos/cocos-docs/blob/master/README.md

Starts the VitePress development server for the specified documentation version to enable hot-reloading.

```shell
npx vitepress dev versions/3.8
```

--------------------------------

### Implement Custom Render Pipeline Methods (TypeScript)

Source: https://github.com/cocos/cocos-docs/blob/master/versions/3.8/en/render-pipeline/write-render-pipeline.md

Provides an example of creating a custom render pipeline builder by inheriting from `rendering.PipelineBuilder`. It includes the essential `windowResize` and `setup` methods required for pipeline initialization and frame rendering.

```typescript
import { renderer, rendering } from 'cc';

class BuiltinPipelineBuilder implements rendering.PipelineBuilder {
    windowResize(
        ppl: rendering.BasicPipeline,
        window: renderer.RenderWindow,
        camera: renderer.scene.Camera,
        nativeWidth: number,
        nativeHeight: number,
    ): void {
        // setup render resources.
    }
    setup(
        cameras: renderer.scene.Camera[],
        ppl: rendering.BasicPipeline,
    ): void {
        // setup camera rendering.
    }
}
```