Skip to content

update effects docs #68

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.

Sign up for GitHub

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

Merged
nini22P merged 1 commit into from
Jul 3, 2025
Merged

update effects docs #68

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 7 additions & 4 deletions src/en/webgal-script/special-effect.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,14 +26,15 @@ Add effects using `pixiPerform`.
pixiPerform:rain; // Add a rain effect
```

Note: After the effect takes effect, if it is not initialized, the effect will continue to run.
Note: After the effect takes effect, if it is not re initialized, the effect will continue to run.

### List of Built-in Effects

| Effect | Command |
| :--- | :--- |
| Rain | pixiPerform:rain; |
| Snow | pixiPerform:snow; |
| Heavy Snow | pixiPerform:heavySnow; |
| Cherry Blossoms | pixiPerform:cherryBlossoms; |

### Superimpose Effects
Expand All @@ -53,9 +54,11 @@ Initialize using `pixiInit` to clear all effects that have been applied.

You can download the source code, then find `/Core/gameScripts/pixiPerformScripts/` and create a new `PIXI.Container` to create the effects you need.

The effects container is divided into a foreground container and a background container, and the foreground container is used here as an example.

``` ts
// Get the current Pixi effect Container
const effectsContainer = RUNTIME_GAMEPLAY.pixiStage!.effectsContainer!;
const effectsContainer = WebGAL.gameplay.pixiStage!.foregroundEffectsContainer!;
// Call the Pixi App method, which may be useful for determining screen size, etc.
const app = RUNTIME_GAMEPLAY.pixiStage!.currentApp!;
// Create a container for custom effects
Expand All @@ -79,7 +82,7 @@ function myPerform() {
}

// Register
registerPerform('myPerform', () => myPerform(parameters));
registerPerform('myPerform', { fg: () => myPerform(parameters) });
```

Finally, compile WebGAL with support for your custom effects
Expand All @@ -91,5 +94,5 @@ yarn run build;
This way, you can call your effects in the script

``` ws
pixiPerform:your new effect;
pixiPerform:myPerform;
```
11 changes: 7 additions & 4 deletions src/ja/webgal-script/special-effect.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,14 +26,15 @@ pixiInit;
pixiPerform:rain; // 雨のエフェクトを追加する
```

注意：エフェクトを適用した後、初期化しないと、エフェクトは常に実行されます。
注意：エフェクトを適用した後、再度初期化しないと、エフェクトは常に実行されます。

### プリセットエフェクト一覧

| エフェクト | コマンド |
| :--- | :-------------------------- |
| 雨 | pixiPerform:rain; |
| 雪 | pixiPerform:snow; |
| 大雪 | pixiPerform:heavySnow; |
| 桜 | pixiPerform:cherryBlossoms; |

### エフェクトを重ねる
Expand All @@ -53,9 +54,11 @@ pixiPerform:snow;

ソースコードをダウンロードして `/Core/gameScripts/pixiPerformScripts/` に移動し、必要なエフェクトを作成するために `PIXI.Container` を新規作成します。

エフェクトコンテナは前景コンテナと背景コンテナに分割され、ここでは前景コンテナを例としています。

``` ts
// 現在の Pixi エフェクト Container を取得する
const effectsContainer = RUNTIME_GAMEPLAY.pixiStage!.effectsContainer!;
const effectsContainer = WebGAL.gameplay.pixiStage!.foregroundEffectsContainer!;
// Pixi App の呼び出し方法で、画面のサイズなどを決定するのに役立ちます
const app = RUNTIME_GAMEPLAY.pixiStage!.currentApp!;
// カスタムエフェクトのコンテナを作成する
Expand All @@ -79,7 +82,7 @@ function myPerform() {
}

// 登録する
registerPerform('myPerform', () => myPerform(パラメータ));
registerPerform('myPerform', { fg: () => myPerform(パラメータ) });
```

最後に、カスタムエフェクトをサポートする WebGAL をコンパイルします。
Expand All @@ -91,5 +94,5 @@ yarn run build;
これで、スクリプトでエフェクトを呼び出すことができます。

``` ws
pixiPerform:新しいエフェクト;
pixiPerform:myPerform;
```
17 changes: 10 additions & 7 deletions src/webgal-script/special-effect.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,14 +26,15 @@ pixiInit;
pixiPerform:rain; // 添加一个下雨的特效
```

注意：特效作用后，如果没有初始化，特效会一直运行。
注意：特效作用后，如果没有重新初始化，特效会一直运行。

### 预制特效列表

| 效果 | 指令 |
| :--- | :-------------------------- |
| 下雨 | pixiPerform:rain; |
| 下雪 | pixiPerform:snow; |
| 雨 | pixiPerform:rain; |
| 雪 | pixiPerform:snow; |
| 大雪 | pixiPerform:heavySnow; |
| 樱花 | pixiPerform:cherryBlossoms; |

### 叠加特效
Expand All @@ -53,11 +54,13 @@ pixiPerform:snow;

你可以下载源代码，然后找到 `/Core/gameScripts/pixiPerformScripts/` 然后新建一个 `PIXI.Container` 用于制作你所需要的特效。

特效层分为前景层和背景层，这里以前景层为例。

``` ts
// 获取当前的 Pixi 效果 Container
const effectsContainer = RUNTIME_GAMEPLAY.pixiStage!.effectsContainer!;
const effectsContainer = WebGAL.gameplay.pixiStage!.foregroundEffectsContainer!;
// 调用 Pixi App 的方式，对确定屏幕尺寸等可能有用
const app = RUNTIME_GAMEPLAY.pixiStage!.currentApp!;
const app = WebGAL.gameplay.pixiStage!.currentApp!;
// 创建自定义特效的container
const container = new PIXI.Container();
// 添加特效
Expand All @@ -79,7 +82,7 @@ function myPerform() {
}

// 注册
registerPerform('myPerform', () => myPerform(参数));
registerPerform('myPerform', { fg: () => myPerform(参数) });
```

最后，编译出支持你自定义特效的 WebGAL
Expand All @@ -91,5 +94,5 @@ yarn run build;
这样，你就可以在脚本中调用你的特效了

``` ws
pixiPerform:你的新特效;
pixiPerform:myPerform;
```