Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add mini game doc #2503

Merged
merged 10 commits into from
Jan 23, 2025
6 changes: 6 additions & 0 deletions docs/en/_meta.json
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,12 @@
"collapse": true
}
},
"platform": {
"title": "Platform",
"theme": {
"collapse": true
}
},
"device": {
"title": "Device",
"theme": {
Expand Down
91 changes: 0 additions & 91 deletions docs/en/assets/build.md

This file was deleted.

2 changes: 1 addition & 1 deletion docs/en/assets/overall.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,6 @@ This chapter will mainly cover:

- How to [customize asset loaders](/en/docs/assets/custom)
- [CRUD operations on assets](/en/docs/assets/interface) in edit mode
- How to [export and deploy assets](/en/docs/assets/build) after building the project
- How to [export and deploy assets](/en/docs/platform/platform) after building the project
- How to [load assets](/en/docs/assets/load) at runtime
- How to [perform garbage collection](/en/docs/assets/gc) at runtime
2 changes: 1 addition & 1 deletion docs/en/core/canvas.md
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ flowchart TD
C[HtmlCanvas.clientHeight] -->|pixelRatio| D[WebCanvas.height]
```

If developing by exporting an **NPM package** through the editor, you only need to control the **device pixel ratio** in the [project export](/en/docs/assets/build) rendering export configuration.
If developing by exporting an **NPM package** through the editor, you only need to control the **device pixel ratio** in the [project export](/en/docs/platform/platform) rendering export configuration.

<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*afw5QrbrxkQAAAAAAAAAAAAADhuCAQ/original" alt="image.png" style="zoom:50%;" />

Expand Down
2 changes: 1 addition & 1 deletion docs/en/core/engine.md
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ classDiagram
}
```

Projects exported by the editor usually automatically set the relevant options configured by the editor. For example, developers can set the rendering configuration of the context in the [export interface](/en/docs/assets/build):
Projects exported by the editor usually automatically set the relevant options configured by the editor. For example, developers can set the rendering configuration of the context in the [export interface](/en/docs/platform/platform):

<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*WZHzRYIpUzQAAAAAAAAAAAAADhuCAQ/original" style="zoom:50%;" />

Expand Down
3 changes: 2 additions & 1 deletion docs/en/graphics/2D/spine/editor.md
Original file line number Diff line number Diff line change
Expand Up @@ -130,7 +130,8 @@ Using the SpineAnimationRenderer component, you can configure the Spine animatio

## 4. Project Export

Finally, after completing scene editing, you can refer to the [Project Export](/docs/assets/build/) process to export the editor project.
Finally, after completing scene editing, you can refer to the [Project Export](/en/docs/platform/platform/) process to export the editor project.

Next section: [Using Galacean Spine Runtime in Your Code](/en/docs/graphics/2D/spine/runtime)
</br></br></br></br>
Next Chapter: [Using in Code](/en/docs/graphics/2D/spine/runtime)
3 changes: 2 additions & 1 deletion docs/en/graphics/2D/spine/runtime.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,8 @@ After installing and importing `@galacean/engine-spine`, the editor's `ResourceM

## Load Assets and Add to Scene

### Load assets uploaded via the editor
### Load Assets Uploaded via the Galacean Editor
[After exporting the editor project](/docs/platform/platform/), `Spine animations already added to the scene will automatically load when the scene file is loaded`:

```typescript
// When loading scene files, Spine animations already added to the scene will be loaded automatically.
Expand Down
2 changes: 1 addition & 1 deletion docs/en/graphics/texture/2d.md
Original file line number Diff line number Diff line change
Expand Up @@ -111,4 +111,4 @@ To solve the problem of black edges appearing at the abrupt changes in Alpha val

<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*_aepTLE47-gAAAAAAAAAAAAADhuCAQ/original" alt="image.png" style="zoom:50%;" />

The [Project Release](/en/docs/assets/build) document explains the **global configuration** for texture export in detail. If the Overwrite option is selected here, this asset will follow the **custom configuration** instead of the **global configuration** during export.
The [Project Release](/en/docs/platform/platform) document explains the **global configuration** for texture export in detail. If the Overwrite option is selected here, this asset will follow the **custom configuration** instead of the **global configuration** during export.
2 changes: 1 addition & 1 deletion docs/en/graphics/texture/compression.md
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ KTX2 can be generated using:

### Editor

When packaging the project, the editor can configure options to generate KTX2. Refer to the '[Project Release](/en/docs/assets/build/)' document. The project export is a global configuration, and different compression formats can be configured independently for different texture resources. Check overwrite in the texture panel of the editor to override the global configuration:
When packaging the project, the editor can configure options to generate KTX2. Refer to the '[Project Release](/en/docs/platform/platform/)' document. The project export is a global configuration, and different compression formats can be configured independently for different texture resources. Check overwrite in the texture panel of the editor to override the global configuration:

<img src="https://mdn.alipayobjects.com/rms/afts/img/A*fmURSZ4HwKUAAAAAAAAAAAAAARQnAQ/original/image-20240705112419249.png" alt="image-20240705112419249" style="zoom:50%;" />

Expand Down
64 changes: 64 additions & 0 deletions docs/en/platform/h5.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
---
order: 1
title: Export To H5
type: Platform
label: Platform
---

## Platform Configuration Instructions

When exporting to the H5 platform, there is no additional platform-related export configuration except for the general export configuration, so no configuration is required

## Export

After selecting the H5 platform, click the download button at the bottom of the export panel to export the required project:

<image src="https://mdn.alipayobjects.com/huamei_w6ifet/afts/img/A*jINgTIhAuDgAAAAAAAAAAAAADjCHAQ/fmt.webp" />

After exporting to the local computer, the directory structure is as follows:

```shell
├── public # 📁 Public resource directory
│ ├── scene.json # Scene File
│ └── ... # Other
├── src # 📁 Source code directory
│ └── ... # Other
├── index.html # ⚙️ Example project entry file
├── main.js # ⚙️ Component code entry
├── package.json # ⚙️ Project Configuration File
├── project.json # ⚙️ Editor export project configuration
├── tsconfig.json # ⚙️ TypeScript configuration files
├── vite.config.ts # ⚙️ vite configuration files
└── ... # Other
```

**Remark:** Because React/Vue/Vanilla JS all belong to the H5 platform and are similar, the document is explained in React.

## Debug

1、Enter the root directory of the exported project and execute the installation command as follows:
```bash
npm i 或者 pnpm i
```

2、Execute the dev command to run the project locally, as follows:
```bash
npm run dev
```
After executing the above command, if successful, the following will appear:

<image src="https://mdn.alipayobjects.com/huamei_w6ifet/afts/img/A*FJI5Q7qhFu4AAAAAAAAAAAAADjCHAQ/fmt.webp" />

3、In the browser, enter the above Local or Network URL to preview the actual running effect, as follows:

<image src="https://mdn.alipayobjects.com/huamei_w6ifet/afts/img/A*Q9qwQqivKp8AAAAAAAAAAAAADjCHAQ/fmt.webp" />

## Build

After completing development and debugging locally, execute the build command to build, as follows:
```bash
npm run build
```
If the command is executed successfully, a **dist** folder will be generated in the root directory, which contains the build products. The products can be uploaded to CDN as dynamically loaded content, or published to NPM if the project is treated as a React component.

> Export to various React/Vue/Vanilla JS projects on the H5 platform and deploy them according to the instructions of their respective frameworks
52 changes: 52 additions & 0 deletions docs/en/platform/platform.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
---
order: 0
title: Platform Export Overview
type: Platform
label: Platform
---

In order to meet the demands of developers for launching on various platforms and truly achieve development in one place and running everywhere, 1.4 version began to support multi-platform export. Projects created by developers through the editor can be quickly exported to the projects required by different platforms.

## Prepare in Advance
After the project is developed in the editor, you can export the project for each platform and publish it. Before exporting, let's first understand the export panel and export settings.

### Export Panel
When we complete the project development and need to export it to a certain platform (taking exporting to the WechatMiniGame platform as an example), we can follow the steps below:

1、Click the Export button on the left side of the editor:

<img src="https://mdn.alipayobjects.com/huamei_w6ifet/afts/img/A*U2RuQLwwNXIAAAAAAAAAAAAADjCHAQ/fmt.webp" />

2、On the left side of the export panel that appears, select the export platform:

<img src="https://mdn.alipayobjects.com/huamei_w6ifet/afts/img/A*50WSQoBlxpcAAAAAAAAAAAAADjCHAQ/fmt.webp" />

3、On the right side of the export panel are some project-related export configurations, which are mainly divided into two parts: **General configuration** (in the red box) and **Platform-related configuration** (in the yellow box):

<img src="https://mdn.alipayobjects.com/huamei_w6ifet/afts/img/A*aCiZTLygoQwAAAAAAAAAAAAADjCHAQ/fmt.webp"/>

### Export Configuration Instructions

The platform-related export configuration will be described separately in the platform export document. Here we focus on the **general configuration** that is independent of the platform.

| Configuration | Describe |
| ------------- | --------------------------------------------------------------------------------------------------------------------------------- |
| Project Name | Project name. The root directory name exported to the local computer is the project name. |
| Main Scene | Project main scene |
| Engine version | The engine version number used by the project |
| Upload to CDN | Whether to upload assets to CDN |
| Texture Type | Texture type, supports KTX2 and Original:<br> **Original**:No processing is done on the texture <br> **KTX2**:Enable texture compression <image src="https://mdn.alipayobjects.com/huamei_w6ifet/afts/img/A*yHPrSrhyo0sAAAAAAAAAAAAADjCHAQ/fmt.webp" /> Selecting KTX2 allows you to choose different compression formats:<br> **ETC1S:** Small size, very small memory, but low quality, suitable for albedo, specular and other textures <br> **UASTC:** Large size, high quality, suitable for normal textures <br> <image src="https://mdn.alipayobjects.com/huamei_w6ifet/afts/img/A*_Ga2SKIDvv0AAAAAAAAAAAAADjCHAQ/fmt.webp" /> If the ETC1S compression format is selected, you can set the compression quality through Quality (the larger the value, the better the rendering quality):<image src="https://mdn.alipayobjects.com/huamei_w6ifet/afts/img/A*ZhviTYuo7A4AAAAAAAAAAAAADjCHAQ/fmt.webp" />|
| Tree shaking | Whether to crop the exported assets: <br> **None:** Export all assets without cropping <br> **Current Scene:** Export only the assets used in the current scene <br> **All Scene:** Treeshaking all scenes, exporting all the assets used by the scenes <image src="https://mdn.alipayobjects.com/huamei_w6ifet/afts/img/A*BJbwQrdlghwAAAAAAAAAAAAADjCHAQ/fmt.webp" />|
| WebGL Mode | Select the version to use with WebGL:<br> **Auto:** WebGL2.0 is preferred. If the operating environment does not support it, it will automatically switch to WebGL1.0 <br> **WebGL1.0:** Using WebGL1.0 <br> **WebGL2.0:** Using WebGL2.0 <image src="https://mdn.alipayobjects.com/huamei_w6ifet/afts/img/A*HszfTJChrdEAAAAAAAAAAAAADjCHAQ/fmt.webp" />|
| Anti-Alias | Whether to enable anti-aliasing |
| Alpha | Whether the canvas supports transparent background. If you want the content below the canvas to be visible, you can turn it on. |
| Preserve Drawing Buffer | Controls whether the drawing buffer retains its contents after calling the gl.clear() method. |
| DPR Mode | [The pixel ratio of the device](/en/docs/core/canvas),Control the size of the canvas by calling engine.canvas.resizeByClientSize: <br> **Auto:** Automatic adaptation, that is, the parameter is window.devicePixelRatio <br> **Fixed:** Developers set their own parameters <image src="https://mdn.alipayobjects.com/huamei_w6ifet/afts/img/A*EQOxSI8I8awAAAAAAAAAAAAADjCHAQ/fmt.webp" /> After selecting Fixed, developers can enter the parameters they need to set. <image src="https://mdn.alipayobjects.com/huamei_w6ifet/afts/img/A*-7YfTLegt_AAAAAAAAAAAAAADjCHAQ/fmt.webp" />|

## Supported export platforms
Currently, Galacean supports exporting to the following platforms:

[Export to H5 platform](/en/docs/platform/h5/)

[Export to WeChat Mini Game Platform](/en/docs/platform/wechatMiniGame/)

Loading
Loading