【GameMaker:Studio】GameMakerでUVスクロールする方法

投稿者: | 2014年2月7日

今回はGameMakerでUVスクロールを実装する方法を紹介したいと思います。

■UVスクロールとは

UVスクロールとは、簡単に言うと、1枚のテクスチャを上下左右につなげてスクロールする方法です。

1

例えばこのような画像を

2

このようにつなげてスムーズにスクロールすることができます。

実際に動きを見たほうが分かりやすいかもしれません。こちらは下から上にUVでスクロールするサンプルとなります。

(プロジェクトファイル付きです)

UVスクロールを実現するには、継ぎ目のないテクスチャを用意する必要があります。Photoshopなどを使うと作りやすいようですが、フリーソフトを使うという方法もあります。なお今回のサンプル画像は、「Texture-inf.」というツールを使って生成しました。

■実装手順

UVスクロールは以下の手順で実装します

  1. テクスチャを登録する
  2. テクスチャのリピートを有効にする
  3. プリミティブをスクロールして描画する

■実装例

▼テクスチャの登録

まずはテクスチャの登録です。背景リソースまたはスプライトとしてテクスチャを登録します。画像ファイルを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座標というのはテクスチャ内の座標を表すもので、

010

(0, 0)が左上、(1, 1)が右下です。デカルト座標で言えば、UがX座標、VがY座標に相当します。

今回は下から上にスクロールしたいので、Vにself.timerを足し込んでいます。

011

(上辺が「0~1」、底辺が「1~2」となるようにしています)

なお、self.timerは1フレームで+1しています。ですので、ちょうど1秒でループする、という動きとなります。

(6)で頂点を定義しています。ポリゴンは三角形しか描くことができないので、トライアングル・ストリップを使い、Z字の順番で頂点を指定することで、四角形を定義しています。

012

なお、プリミティブの種類には、

  • pr_pointlist:点
  • pr_linelist:線
  • pr_linestrip:接続した線分
  • pr_trianglelist:三角形
  • pr_trianglestrip:接続した三角形
  • pr_trianglefan:1つの頂点を共有する三角形 (HTML5では使用不可)

が指定可能となっています。

最後に(7)で描画完了命令を送って、描画をしています。

■使い道

このUVスクロールの使い道ですが、背景をスクロールさせるのが主な使い方になると思います。空や雲や水面などの動きを表現しやすいと思います。あと、メニュー画面で背景をスクロールさせる、という使い方ですね。

例えば、「す~ぱ~ぷよぷよ」のタイトル画面やメニュー画面でUVスクロール(この時代は違う技術ですけど)を使っています。

YouTube Preview Image

■補足

  • HTML5の場合、WebGLを有効にしないと動作しません
  • テクスチャは個別にTexture groupを作って、1つのグループにつき1つのテクスチャ、というようにしておいた方が良さそうです(そうしないと別のテクスチャとまとめられてしまう)
  • テクスチャは正方形にしないとUV座標が(0, 0) ~ (1, 1)の範囲とならないようです