GameMaker:Studio Shader カラー Lerp（線形補間）

 shader   lerp   GLSL_ES 

配布されていたシェーダのサンプルを整理したもの。

色の合成効果。キャラクタを明滅させる、イベントに応じた色変化など。

-1 〜 1 までの範囲で値を求め、この値を透過率に当てはめる。フラグメントシェーダを使って色は白を指定。するとキャラクタの形状で切り抜かれたように指定された色で領域が塗りつぶされる。透過率の変化に応じてスプライトが点滅して見える。

イベントを一つのオブジェクトへまとめるようにし、

    1. Create
    2. Draw

上記の二つのイベントへ収まるように作った。そして無駄な変数定義を全て排除。

なるべくユーザ定義関数化し、コードの使い回しが簡単。

参考動作：http://prester.org/html5/gms_shader_lerp_color/

（ 参考：Demosタブ → YoYo Demos → Advanced → Simple_Shader_Examples ）

Simple Shader Samples

キーボードの Q と A キーで値を変更可能。

値は 0.0 〜 1.0 までの範囲で制限。（ オリジナルは -1 〜 1 までの間で値を求めている ）

要 WebGL、Google Chrome／FireFox 等で動作を確認。

HTML5（ WebGL ） と Windows PC で微妙に描画結果が異なる場合があります。

シェーダー名：SH_LerpColor

Vertex Shader

attribute vec3 in_Position;                  // (x,y,z)
attribute vec4 in_Colour;                    // (r,g,b,a)
attribute vec2 in_TextureCoord;              // (u,v)

varying vec2 v_vTexcoord;
varying vec4 v_vColour;

void main()
{
    gl_Position = gm_Matrices[MATRIX_WORLD_VIEW_PROJECTION] * vec4(in_Position, 1.0);
    v_vColour   = in_Colour;
    v_vTexcoord = in_TextureCoord;
}

Fragment Shader

/*
 lerp to colour fragment shader
*/
uniform vec4 f_Colour1;         // rgb=colour, a=0 to 1 lerp value

varying vec2 v_vTexcoord;
varying vec4 v_vColour;

void main()
{
    vec4 col     = texture2D(gm_BaseTexture, v_vTexcoord);
    col.rgb      = mix(col.rgb, f_Colour1.rgb, f_Colour1.a);
    gl_FragColor = v_vColour * col;
}

ユーザ定義関数 Init_Shader_LerpColor

///Init_Shader_LED();
    if (!shader_is_compiled(SH_LerpColor)) {
        show_message("Your hardware doesn't support shader - SH_LerpColor");
    }
    else{// get shader constant handle
        colour_to_find = shader_get_uniform(SH_LerpColor, "f_Colour1");
        lerp_value     = 0;
    };

ユーザ定義関数 DrawEv_LerpColor

///DrawEv_LED();
if Shader_Enabled {
    shader_set(SH_LerpColor);
    lerp_value += Lerp_Amount;
        if lerp_value > 180 lerp_value = 0;
    var a;
    // NOTE: SIN() will give 1 to -1. The -1 will make the image seem "darker"
    a = sin( degtorad(lerp_value) );
    
    shader_set_uniform_f(colour_to_find, 1,1,1, a );// lerp to WHITE (1,1,1)
    draw_sprite(sprite_index, image_index, x, y); 
    shader_reset();
}
else{
    draw_sprite(sprite_index, image_index, x, y);
};

ユーザ定義関数 Debug_Status

///Debug_Status();
if keyboard_check(ord("Q")) Lerp_Amount += 1;
if keyboard_check(ord("A")) Lerp_Amount -= 1;
if keyboard_check_pressed(vk_space) Shader_Enabled = !Shader_Enabled;

/* Show Informations */
draw_text(0,0,  "SH_LerpColor  :  Lerp to colour");
draw_text(0,40, "Real FPS : "   +string(fps_real));
draw_text(0,80, "lerp_value  = "+string(lerp_value));
draw_text(0,120,"Lerp_Amount = "+string(Lerp_Amount));

draw_text(0,room_height-80,"Press Q & A Keys : Value UP || Down");
draw_text(0,room_height-40,"Spacebar to toggle shader");

実際のイベント処理

シェーダと3つのユーザ定義関数を使って簡潔なイベントを作成。

Create Event

draw_set_font(font0);
draw_set_colour(c_white);

Init_Shader_LerpColor();

/* Instance Variables for Debug */
Shader_Enabled = false;
Lerp_Amount    = 20.0;

Draw Event

DrawEv_LerpColor();
Debug_Status();

object instance のスプライトを対象としてシェーダでエフェクトをかけます。Draw イベントで描画します。利用方法としては敵からショットを喰らった時のエフェクトとして色変化を行うなど。

ユーザ定義関数である DrawEv_LerpColor でシェーダ処理を行っている。




次へ

前へ