Top / 4K Procedural Gfx Monitor / 4KBプロシージャルGFX入門講座 5時限目

4KBプロシージャルGFX入門講座 5時限目

実行ファイルにしよう

ここまででつくってきたシェーダプログラムによるグラフィックスを実行ファイルにして配布する手順を解説する。
単に実行ファイルにするだけではなく、CrinklerというPackerとよばれる実行ファイルを小さくするツールの
解説も同時に行います。

自作4KBプロシージャルGFXを公開するまでの手順

1. 4K Procedural Monitorでのグラフィックスの作成
2. 4K Procedural MonitorでC/C++ソースファイルへのエクスポート
3. Visual Studio ソリューションをつかってビルド (解像度変更など調整)
4. Crinklerでの実行ファイルの作成
5. 世界に公開!!

4K Procedural Monitorでエクスポート

ここからはすでに4K Procedural Monitorでグラフィックスの作成が完了している状態だと仮定して話をすすめます。

シェーダのコンパイルエラーやリンクエラーが無い状態であること確認し、4kGfxMonのウインドウを右クリック
してメニューから "Export..."を選んでください。

正しくエクスポートされた場合は以下のようなメッセージが表示されます。


もし以下のようなメッセージが表示された場合、正しくエクスポートできていない可能性があります。


4kGfxMonはエクスポート時に "template.txt"というC/C++の雛形ファイルを利用します。
4kGfxMonと同じフォルダにこのファイルが無い場合、正しくエクスポートできません。
"template.txt" は4kGfxMonと一緒に配布されています。もし削除などしてしまった場合は、
もういちど4kGfxMonをダウンロードし、ファイルを4kGfxMonと同じフォルダに入れてください。

エクスポートが完了したら、4kGfxMonと同じフォルダに "template.cpp" というファイルが作られているか
どうか確認してください。

これでエクスポートは完了です。

4kGfxMonの役割はここまでです。通常4KBプロシージャルGFXを作成するときにC/C++のソースファイルを
手作業で作成するかわりにシェーダだけ書けば4kGfxMonが雛形から作成してくれます。
4kGfxMonを利用すれば、C/C++ソースファイルのコンパイル時間が不要なので効率よく
4KBプロシージャルGFXを作ることが可能になります。

Visual Studioソリューションをつかってビルドする。

Visual Studioの準備

4kGfxMonでC/C++ソースファイルをエクスポートしたら、今度はVisual Studioソリューションファイルをつかっての
ビルド作業になります。まだVisualStudioをインストールしていない場合はインストールをしてください。
VisualStudioをもっていなくてもVisual Studio 2008 Express Editionが無償で利用可能です。
ダウンロードしたらVisual C++2008 Express Editionをインストールしてください。
4kGfxMonに付属のVisual StudioソリューションファイルはVisual Studio 2005用のソリューションファイルです。
Visual Studio 2008で開くと、ソリューションファイルをアップデートするように言われますので、
ウイザードに従ってアップデートしてください。Visual Studio 2005を利用の方はそのまま開くことができます。
Visual Studio 2003以前のバージョンを利用されている方は、そのままではビルドできませんので、
最新版のVisual Studio 2008 Express Editionをダウンロードしてご利用ください。

また、OpenGLの拡張機能を使いますので、glext.hが必要になります。Visual Studioでインストールされていない場合
自分で追加してやる必要があります。こちらからglext.hをダウンロードしましょう。
ダウンロードしたら、glext.hというファイルをVisual Studioが見えるフォルダにいれてやる必要があります。

Visual Studio 2005の場合:
  C:\Program Files\Microsoft Visual Studio 8\VC\PlatformSDK\Include\gl\glext.h
Visual Studio 2008の場合:
  C:\Program Files\Microsoft SDKs\Windows\v6.0A\Include\gl\glext.h
(インストール先が違う場合、パスを読み替えてください。)

にファイルを保存してください。
これで準備完了です。

Visual Studioでビルド


4kGfxMonと同じフォルダに入っている "4kgfx.sln"を開いてください。


ソリューションを開くと4kGfxMonでエクスポートしたtemplate.cppが追加されていると思います。
実行ファイル作成に必要なファイルはこれだけですので、そのままビルドしてください。
正常にビルドできない場合は正しくエクスポートできていない可能性があります。
template.cppがつくられているか、template.cppの中身が正しく出力されているかを確認してください。

ビルドしてそのまま実行するとフルスクリーンになって4kGfxMonで作った内容が表示されます。
終了するときは"ESCキー"で終了します。

表示解像度の変更

template.txtを何も編集していなければ、ビルド実行ファイルのフルスクリーン時の表示解像度は
1024x768になっているはずです。この解像度ではアスペクト比が4:3になります。もし、4kGfxMonで
16:9 や16:10のアスペクト比で作品を作っていた場合、表示が縦に伸びて表示されることになります。
これは意図しない表示ですので修正する必要があります。
template.cppの17行目、18行目に解像度の定義があるのでここを任意の解像度に変更してください。

template.cpp 17-18行目
#define SCREEN_WIDTH    1024
#define SCREEN_HEIGHT   768

変更する解像度はフルスクリーンで表示可能である必要があるので、一般のディスプレイで表示可能で
ある必要があります。以下によく使われる解像度を列挙しておきます。アスペクト比にあわせて選んでください。
4:3 640 x 480
800 x 600
1024 x 768
1280 x 960
1600 x 1200
16:9 1280 x 720
1920 x 1080
16:10 1280 x 800
1920 x 1200

4kGfxMonでのエクスポートソースファイルのカスタマイズ

4kGfxMonでtemplate.cppをエクスポートした後に、template.cppを変更してもよいのですが、あらかじめ解像度が
1024x768でない場合などに毎回ビルドするたびに変更するのは面倒です。また、C/C++ソースを改造したいときなど
エクスポートのたびに変更するのは手間です。
そこで、4kGfxMonではエクスポート時に利用する "template.txt" をあらかじめ変更しておくことにより
エクスポートするソースファイルをカスタマイズすることができます。
template.txtの中身は以下のようになっています。

-- template.txt --
/*
    4k Procedual Gfx template code.
    based on "chocolux" codes by alud.
*/

#include <windows.h>
#include <GL/gl.h>
#include <GL/glext.h>

static const char *vsh =
"[[VS_CODE]]"
;
static const char *fsh =
"[[FS_CODE]]"
;

#define SCREEN_WIDTH    1024
#define SCREEN_HEIGHT   768

static const PIXELFORMATDESCRIPTOR pfd =
{
    0,1,PFD_SUPPORT_OPENGL|PFD_DOUBLEBUFFER, 32, 0, 0, 0,
    0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 32, 0, 0, 0, 0, 0, 0, 0
};
static DEVMODE dmScreenSettings =
{
    "",0,0,sizeof(dmScreenSettings),0,DM_PELSWIDTH|DM_PELSHEIGHT,
    0,0,0,0,0,0,0,0,0,0,0,0,0,"",0,0,SCREEN_WIDTH,SCREEN_HEIGHT,0,0,0,0,0,0,0,0,0,0
};

void entrypoint()
{
    ChangeDisplaySettings(&dmScreenSettings, CDS_FULLSCREEN); 
    HDC hDC = GetDC( CreateWindow("edit", 0,
                  WS_POPUP|WS_VISIBLE|WS_MAXIMIZE, 0, 0, 0, 0, 0, 0, 0, 0) );
    SetPixelFormat(hDC, ChoosePixelFormat(hDC, &pfd) , &pfd);
    wglMakeCurrent(hDC, wglCreateContext(hDC));
    ShowCursor(0);
    const GLuint p = ((PFNGLCREATEPROGRAMPROC)wglGetProcAddress("glCreateProgram"))();
    GLuint s = ((PFNGLCREATESHADERPROC)(wglGetProcAddress("glCreateShader")))(GL_VERTEX_SHADER);
    ((PFNGLSHADERSOURCEPROC)wglGetProcAddress("glShaderSource"))(s,1, &vsh,0);
    ((PFNGLCOMPILESHADERPROC)wglGetProcAddress("glCompileShader"))(s);
    ((PFNGLATTACHSHADERPROC)wglGetProcAddress("glAttachShader"))(p,s);
    s = ((PFNGLCREATESHADERPROC)wglGetProcAddress("glCreateShader"))(GL_FRAGMENT_SHADER);
    ((PFNGLSHADERSOURCEPROC)wglGetProcAddress("glShaderSource"))(s,1, &fsh,0);
    ((PFNGLCOMPILESHADERPROC)wglGetProcAddress("glCompileShader"))(s);
    ((PFNGLATTACHSHADERPROC)wglGetProcAddress("glAttachShader"))(p,s);
    ((PFNGLLINKPROGRAMPROC)wglGetProcAddress("glLinkProgram"))(p);
    ((PFNGLUSEPROGRAMPROC)wglGetProcAddress("glUseProgram"))(p);
loop:
    glRecti(1,1,-1,-1);
    SwapBuffers(hDC);
    if (GetAsyncKeyState(VK_ESCAPE))
        ExitProcess(0);
    goto loop;
}

4kGfxMonで利用されるシェーダファイルのソースは"[[VS_CODE]]""[[FS_CODE]]"の部分に挿入されます。
この部分は編集しないでください。また、これらのソースファイルを利用したプログラムの部分を不用意に変更すると
プログラムのビルドができなくなったり、きちんと動作しなくなる可能性があります。
ある程度熟練した人などは、template.txtにいろいろ手を加え、自分のオリジナルテンプレートを作るのも良いでしょう。

Crinklerを使って実行ファイルを圧縮する

一つ前の手順までの、Visual Studioによる実行ファイルの作成ですでに配布可能な実行ファイル形式を
作成することができています。しかし、そのままではファイルサイズは大きく(といっても結構小さいですが)
現在のサンプルで5KBとなっています。しかしこのままでは4KBプロシージャルGFXのサイズ制限の4KBを
満たしていません。次のステップではCrinklerという実行ファイルを小さくするツールを使って、4KB以下の
実行ファイルにしていきます。

Crinklerの準備

まずCrinklerをダウンロードしてきます。ダウンロードしたら圧縮ファイルを解凍します。
解凍するとcrinkler.exeが出てくるので、Visual Studioのソリューションファイルと同じフォルダにコピーしてください。


ソリューションのあるフォルダが以下のようになっているはずです。
kickCrinkler.batというファイルもあることを確認しておいてください。
このファイルはCriklerで圧縮するための設定が書かれたバッチファイルです。
Visual Studioから呼び出され利用されます。


Crinklerを使ってビルドする

Crinklerの準備が整ったらVisual Studioでのビルドです。
Visual Studioの構成マネージャの設定から "useCrinkler" を選んでください。

"useCrinkler" の構成を選んだらソリューションのビルドを行ってください。

Visual Studioの出力に以下ような感じで表示されていたら、Crinklerをつかっての
ビルドが行われています。もし、以下のような表示でない場合は、
Crinklerを正しく使えていない可能性があります。もう一度手順を確認してみてください。


きちんとビルド完了していれば、ソリューションファイルがあるフォルダに "compress.exe" が作成されているはずです。

サイズを確認してみてください。このサンプルでは1.33KBですね。

これでCrinklerをつかったビルドはおわりです。これで、4KB以下に収めることができました!!
まだ、2.67KBもあまってますね! まだまだいろいろできそうです。
4KB Procedural GFXのレギュレーションは 4096バイト以下です。
OSの表示によっては4097バイトなどでも4KBと表示されたりするので注意してください。
きっちり4096バイトじゃないとだめですよっ!

世界に公開!

自分の作品をつくったら是非世界に公開しましょう。
世界のdemosceneコミュニティサイトwww.pouet.net に登録すれば世界中のdemoscenerから
自分の作品に対するコメントをもらえます。
また、現在日本でも定期的に2chPartyが開催されており、そこに作品として出すのも良いでしょう。

4KB Procedural GFXは4KB = 4096バイト という非常に小さなサイズですが、いろいろなテクニックが
必要とされるジャンルだと思います。また、規模がそこまで大きくなく、一人でも十分に始められる
ジャンルでもあります。しかも、ほぼすべてをシェーダプログラムで書くというやり方はまだまだ
始まったばかりです。今までの4KBの知識は必要ありません。今から始める人にとってもこれはチャンスです。
メガデモをはじめたいけど、プログラマしかいないよ・・・みたいなときでも4KBプロシージャルGFXなら
今すぐにはじめることができます!!

さぁあなたも Let's メガデモ !!