CocosCreatorのEffectを使ってみる

Sprite に貼り付けた画像に白黒のエフェクトをかけてみる。
プロジェクト一式はgithubのココ。

Effectでできること

• Spriteで表示する画像にGLSLっぽい言語でエフェクトをかけられる
• バーテックスシェーダー（頂点シェーダー）を記述できる
• フラグメントシェーダー（ピクセルシェーダー）を記述できる

プロジェクト構成

1. assets/effects/MyEffect
   • GLSLを記述するファイル
2. assets/materials/MyMaterial
   • MaterialはSpriteとEffectをつなぐ
3. assets/resources/images/chart
   • Spriteに表示する画像ファイル
4. assets/scenes/Main
   • メインのScene
5. assets/scripts/MainController
   • TypeScriptを記述するファイル（Main用）

シーン構成

1. Canvas
   • プロジェクト作成時に最初から配置されているCanvas
2. Main Camera
   • プロジェクト作成時に最初から配置されているCamera
3. MySprite
   • Effectを適用するために配置したSprite

ノードを編集する

Spriteノード（名前はMySprite）を作ってSpriteFrameに画像を設定する

Material（名前はMyMaterial）を作ってSpriteに設定する

Effect（名前はMyEffect）を作ってMaterialに設定する（変更後、右上の「Apply」ボタンを押す）

コードを編集する

Effectのコードを編集する（グレースケールにするエフェクト）
編集するのはフラグメントシェーダーのmainだけ（以下抜粋）

  void main () {
    vec4 o = vec4(1, 1, 1, 1);

    #if USE_TEXTURE
      CCTexture(texture, v_uv0, o);
    #endif

    o *= v_color;

    vec4 mono = vec4(0.3, 0.59, 0.11, 1);
    float gray = dot(o.rgb, mono.rgb);
    
    gl_FragColor = vec4(gray, gray, gray, 1);
  }