Special effect

Use special effect

Currently, WebGAL's effect system is implemented by PixiJS.

Initialize Pixi

Use pixiInit to initialize Pixi.

pixiInit; 

Note

If you want to use effects, you must run this command first to initialize Pixi.

If you want to eliminate the effects that have been applied, you can use this syntax to clear the effects.

Add effects

Use pixiPerform to add effects.

pixiPerform:rain; // Add a raining effect

Note: After the effect is applied, it will keep running if not initialized.

List of preset effects

Effect	Command
Rain	pixiPerform:rain;
Snow	pixiPerform:snow;
Cherry Blossoms	pixiPerform:cherryBlossoms;

Superimpose effects

If you want to superimpose two or more effects, you can superimpose different effects without using the pixiInit command.

pixiPerform:rain;
pixiPerform:snow;

Clear superimposed effects

Use pixiInit to initialize, this can eliminate all effects that have been applied.

Add custom effects

You can download the source code, then find /Core/gameScripts/pixiPerformScripts/, then create a PIXI.Container for the effect you need.

// Get the current Pixi effect Container
const effectsContainer = RUNTIME_GAMEPLAY.pixiStage!.effectsContainer!;
// Way to call Pixi App, may be useful for determining screen size, etc.
const app = RUNTIME_GAMEPLAY.pixiStage!.currentApp!;
// Create container for custom effects
const container = new PIXI.Container();
// Add effects
effectsContainer.addChild(container);

Texture files can be placed in the game/tex directory.

Then, at the beginning of the file, import the effect registration method to register your new effect.

At the end of the file, use it to register your effect. The first parameter is the effect name, and the second is the method to call the effect.

import {registerPerform} from '../pixiPerformManager';

// Assume this is your effect  
function myPerform() {
  // ...
}

// Register
registerPerform('myPerform', () => myPerform(parameters)); 

Finally, compile the WebGAL that supports your custom effects

yarn run build; 

Now you can call your effects in the script

pixiPerform:your new effect;