今回はGameMakerでUVスクロールを実装する方法を紹介したいと思います。
■UVスクロールとは
UVスクロールとは、簡単に言うと、1枚のテクスチャを上下左右につなげてスクロールする方法です。
例えばこのような画像を
このようにつなげてスムーズにスクロールすることができます。
実際に動きを見たほうが分かりやすいかもしれません。こちらは下から上にUVでスクロールするサンプルとなります。
（プロジェクトファイル付きです）
UVスクロールを実現するには、継ぎ目のないテクスチャを用意する必要があります。Photoshopなどを使うと作りやすいようですが、フリーソフトを使うという方法もあります。なお今回のサンプル画像は、「Texture-inf.」というツールを使って生成しました。
■実装手順
UVスクロールは以下の手順で実装します
- テクスチャを登録する
- テクスチャのリピートを有効にする
- プリミティブをスクロールして描画する
■実装例
▼テクスチャの登録
まずはテクスチャの登録です。背景リソースまたはスプライトとしてテクスチャを登録します。画像ファイルをbackgroundまたはspriteとします。（今回はbackgroundとしました）
▼スクリプトを実装
スクリプトはDrawイベントで以下のように記述します。
/// 描画 // (1) テクスチャリピートを有効にします texture_set_repeat(true); // (2) 頂点カラーを白にする draw_set_color(c_white); // (3) 背景リソースをテクスチャとして取得 var tex = background_get_texture(background1_sc01_ks01); // (4) プリミティブの描画設定開始 draw_primitive_begin_texture(pr_trianglestrip, tex); // (5) UV座標を定義 var u1 = 0; var u2 = 1; var v1 = (self.timer%room_speed)/room_speed; // 0～1 var v2 = v1+1; // 1～2 // (6) プリミティブの頂点を定義 draw_vertex_texture(0, 0, u1, v1); // 1 draw_vertex_texture(640, 0, u2, v1); // 2 draw_vertex_texture(0, 480, u1, v2); // 3 draw_vertex_texture(640, 480, u2, v2); // 4 // (7) プリミティブを描画 draw_primitive_end();
スクリプトの説明ですが、最初の部分(1)はtexture_set_repeat()関数を使用してテクスチャリピートを有効にしています。UVスクロールするにはこの設定が不可欠となります。もしスプライトを使用するのであれば関数をsprite_get_texture()に置き換えます。
続いて(2)頂点カラーを白にしています。もし色を変えたい場合には（例えば赤ならc_red）白以外を指定します。
(3)は背景リソースをテクスチャとして取得しています。UVスクロールするにはテクスチャとして画像を扱う必要が有るためです。
(4)ではbackground_get_texture()関数でプリミティブの描画設定をしています。ここで「pr_trianglestrip」とあるのは「トライアングル・ストリップ」で描画するための設定となります。トライアングル・ストリップについては頂点を定義しているところで説明をします。あと取得したテクスチャをここで登録しています。
(5)でUV座標の定義をしています。UV座標というのはテクスチャ内の座標を表すもので、
(0, 0)が左上、(1, 1)が右下です。デカルト座標で言えば、UがX座標、VがY座標に相当します。
今回は下から上にスクロールしたいので、Vにself.timerを足し込んでいます。
（上辺が「0～1」、底辺が「1～2」となるようにしています）
なお、self.timerは1フレームで+1しています。ですので、ちょうど1秒でループする、という動きとなります。
(6)で頂点を定義しています。ポリゴンは三角形しか描くことができないので、トライアングル・ストリップを使い、Z字の順番で頂点を指定することで、四角形を定義しています。
なお、プリミティブの種類には、
- pr_pointlist：点
- pr_linelist：線
- pr_linestrip：接続した線分
- pr_trianglelist：三角形
- pr_trianglestrip：接続した三角形
- pr_trianglefan：1つの頂点を共有する三角形 (HTML5では使用不可)
が指定可能となっています。
最後に(7)で描画完了命令を送って、描画をしています。
■使い道
このUVスクロールの使い道ですが、背景をスクロールさせるのが主な使い方になると思います。空や雲や水面などの動きを表現しやすいと思います。あと、メニュー画面で背景をスクロールさせる、という使い方ですね。
例えば、「す～ぱ～ぷよぷよ」のタイトル画面やメニュー画面でUVスクロール（この時代は違う技術ですけど）を使っています。
■補足
- HTML5の場合、WebGLを有効にしないと動作しません
- テクスチャは個別にTexture groupを作って、1つのグループにつき1つのテクスチャ、というようにしておいた方が良さそうです(そうしないと別のテクスチャとまとめられてしまう）
- テクスチャは正方形にしないとUV座標が(0, 0) ～ (1, 1)の範囲とならないようです