GameMaker:Studio Shader グレースケール

 shader   greyscale   GLSL_ES 

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

画像をグレースケール化する効果。

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

    1. Create
    2. Draw
    3. DrawGUI

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

あとはなるべくユーザ定義関数化して、使い回しが良くなるように

参考動作:http://prester.org/html5/gms_shader_greyscale/

参考（YoYoGames MarketPlace）：xygthop3’s Shader Resources

キーボードの Q と A キーでグレースケール値を変更可能。

値は 0 〜 1 までの範囲で制限してあります。要 WebGL、FireFox で動作を確認。

画面左側がシェーダ効果がかかったもので、右はオリジナルのスプライト。

シェーダー名：SH_greyscale

Vertex Shader

attribute vec3 in_Position;
attribute vec2 in_TextureCoord;

varying vec2 v_texcoord;

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

Fragment Shader

varying vec2 v_texcoord;

uniform float fade;

void main()
{ 
    float gray = dot(texture2D(gm_BaseTexture,v_texcoord).rgb, vec3(0.21, 0.71, 0.07));

    gl_FragColor = vec4(mix(texture2D(gm_BaseTexture,v_texcoord).rgb,vec3(gray),fade), texture2D(gm_BaseTexture,v_texcoord).a);
}

ユーザ定義関数 Init_GreyscaleShader

///Init_GreyscaleShader();
    if (!shader_is_compiled(SH_greyscale)) {
       show_message("Your hardware doesn't support shader - SH_greyscale");
    }
    else{
       uni_greyscale_fade = shader_get_uniform(SH_greyscale,"fade");
       var_greyscale_fade = 0.8;
    };

ユーザ定義関数 DrawEv_SetSprites

///DrawEv_SetSprites();
var a = sprite_get_height(banners);
    for (var i=0;i<3;i++){
        draw_sprite(banners,i,-100,a*i);
    };

ユーザ定義関数 DrawDebug_Function

///DrawDebug_Function();
var w,z;
z = 0.01;
w = var_greyscale_fade;
if keyboard_check(ord('Q')) and w<1 var_greyscale_fade += z;
if keyboard_check(ord('A')) and w>0 var_greyscale_fade -= z;

var c,d,e;
c = c_red;
d = display_get_gui_width()>>1;
e = display_get_gui_height();
draw_line_colour(d,0,d,e,c,c);

var a,b
a = sprite_get_height(banners);
b = ((a<<1) + a);
draw_circle_colour(d,b,40,c,c,0);

ユーザ定義関数 DrawGUIEv_Greyscale

///DrawGUIEv_Greyscale(width_scale);
var a = argument0;
shader_set(SH_greyscale);
shader_set_uniform_f(uni_greyscale_fade, var_greyscale_fade);
draw_surface_ext(application_surface, 0,0, a,1, 0, -1,1);
shader_reset();

実際のイベント処理

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

Create Event

///Init
Init_GreyscaleShader();

draw_set_font(font0);
/* Variables For Debug */
Debug_Scale   = 0.5;

Draw Event

DrawEv_SetSprites();

Draw GUI Event

///Draw gui
DrawDebug_Function();

DrawGUIEv_Greyscale(Debug_Scale);

var a;
a = room_height-100;
draw_text(100,a,"Shader Effect::Greyscale");
draw_text((room_width>>1)+100,a,"var_greyscale_fade = "+string(var_greyscale_fade));

application_surface を対象としてシェーダでエフェクトをかけます。

Draw イベントで描画した画面を DrawGUI へ描画するという手順。

ユーザ定義関数である DrawGUIEv_Greyscale でシェーダ処理を行っているので、アクションの実行されるタイミングなどを色々変えて描画結果の違いを試すと良い。

シェーダで Application_surface 全体を対象にする場合は DrawGUI のタイミングで描画するのが無難。




次へ

前へ