Effect Layer

phaser.io
Phaser - The fast, fun and free HTML5 Game Framework
https://phaser.io/phaser3/api/effectlayer
Desktop and Mobile HTML5 game framework. A fast, free and fun open source framework for Canvas and WebGL powered browser games.

一覧へ戻る

Overview

Effect Layerは、ゲームオブジェクトごとにWebGLの描画先をオフスクリーンのフレームバッファーに設定する方法を提供します。オフスクリーンのフレームバッファーのカラーバッファーにカスタムのポストプロセッシングシェーダーを適用することができ、その場合はEffect Layerをテクスチャーとして使うことができます。dstRenderTextureプロパティーを使ってEffect Layerからテクスチャーにアクセスすることもできます。

image

Effect Layerは簡単に使えて、シングルコールでGame Object Factoryを呼び出すことができます。ただし、完全に機能を引き出すにはシェーダーについての理解が必要となるでしょう。Effect Layer上のピクセルに対して操作するレンダリングパスについて、シンプルで応用が効くフラグメントシェーダーの使い方の例はこちらが参考になるでしょう。

Effect Layerは現在以下の機能が使えます。

  • renderOffScreen
  • renderOnScreen
  • add
  • remove
  • getUniformLocation
  • setFloat
  • setFloat2
  • setFloat3
  • setFloat4
  • setInt
  • setInt2
  • setInt3
  • setInt4
  • setMatrix2x2
  • setMatrix3x3
  • setMatrix4x4

Examples

Fragment Shaderを使って、Effect Layerに対して見栄えのするマスク効果を作成する例です:

var fragSource = [
    'precision mediump float;',
    'uniform float time;',
    'const float PI = 3.1415926535897932384626433832795;',
    'mat2 rotate2d(float angle){',
    '    return mat2(cos(angle+time),0.,',
    '                sin(angle+time),0.);',
    '}',
    'float stripes(vec2 st){',
    '    st = rotate2d( PI*-0.202 ) * st*5.;',
    '    return step(.5,1.0-smoothstep(.3,1.,abs(sin(st.x*PI))));',
    '}',
    'void main(){',
    '    vec2 resolution = vec2(300.0, 100.0);',
    '    vec2 st = gl_FragCoord.xy/resolution.xy * sin(time/2.)*sin(time/2.);',
    '    st.x *= resolution.x/resolution.y;',
    '    vec3 color = vec3(stripes(st));',
    '    gl_FragColor = vec4(color, 1.0);',
    '}'
].join('\n');

var effect;
var time = 0;

function create ()
{
    effect = this.add.effectLayer(0, 0, 800, 600, 'maskEFfect', fragSource);
}

function update ()
{
    effect.setFloat('time', time);
    time += 0.005;
}

 

一覧へ戻る

Print Friendly, PDF & Email