【GameMaker:Studio】ベジェ曲線のエクステンション

投稿者: | 2014年3月7日

GameMaker:Studioでベジェ曲線を作成するエクステンションを作成したので、紹介をしたいと思います。

■サンプルプロジェクトとエクステンション

こちらから実装例のプロジェクトファイルとエクステンションをダウンロードできます。マウスクリックで開始点・終点・制御点の移動ができます。

■ベジェ曲線とは?

ベジェ曲線とは開始点と終点を指定して、制御点により中間の点を補間するアルゴリズムです。

ゲームでの応用としては、ぐにゃりと曲がった軌道の実装が楽にできるようになります。例としては「ぷよぷよ」で消したぷよから出現する光の玉が画面上部に向かっていく軌道ですね。

YouTube Preview Image

正確にはベジェ曲線でないかもしれませんが、このように曲線を描く軌道をベジェ曲線だと作りやすいです。他にもホーミングレーザーの軌道などにも使えます。

なお、計算式の詳細については、こちらのページに記載しています

■API

APIは以下のようになります。

ベジェ曲線を補間するX座標の配列を取得

  • bezier_x(startX, endX, ctrlX1, ctrlX2, divide);
    • startX : 開始点(X)
    • endX : 終点(X)
    • ctrlX1 : 制御点1(X)
    • ctrlX2 : 制御点2(X)
    • divide : 分割数

ベジェ曲線を補間するY座標の配列を取得

  • bezier_y(startY, endY, ctrlY1, ctrlY2, divide);
    • startY : 開始点(Y)
    • endY : 終点(Y)
    • ctrlY1 : 制御点1(Y)
    • ctrlY2 : 制御点2(Y)
    • divide : 分割数

■実装例

画面左上から右下に向かって曲線を描く軌道のサンプルです。

例えばCreateイベントで軌道の配列を作成します

// 左上
var startX = 0;
var startY = 0;
// 右下
var endX = 640;
var endY = 480;
// 制御点1
var ctrlX1 = 640; // 右上にひっぱる
var ctrlY1 = 0;
// 制御点2
var ctrlX2 = 0;
var ctrlY2 = 480; // 左下にひっぱる

// ベジェ曲線を作成(分割数は30)
self.xList = bezier_x(startX, endX, ctrlX1, ctrlX2, 30);
self.yList = bezier_y(startY, endY, ctrlY1, ctrlY2, 30);

そしてStepイベントでタイマーを更新します

// 現在の座標を取得
x = self.xList[self.timer];
y = self.yList[self.timer];

// タイマーを更新
self.timer++;
if(self.timer >= 30)
{
  // 分割数を超えたらおしまい
  instance_destroy();
}

Drawイベントで描画します

// 円を描画
draw_circle(x, y, 16, false);