【GameMaker:Studio】ボタンオブジェクトの作り方

投稿者: | 2015年2月17日

GameMakerでマウスやタッチに対応したゲームを作る際に、クリックしたら反応するボタンが欲しくなる時があります。そんなときに使える便利なボタンオブジェクトの作り方を紹介します。

■ボタンオブジェクトの動作仕様

ボタンオブジェクトは以下の動作を行うものとします。

  • クリックしたら、ユーザ定義イベント0(ev_user0)を発生する
  • クリックしてボタンを離したら、ユーザ定義イベント1(ev_user1)を発生する

ボタンを押した瞬間とボタンを離した瞬間の両方を判定できるようにしました。そして、このボタンは以下のパラメータを持ちます。

  • bEnabled: 有効無効フラグ
  • width: ボタンの幅
  • height: ボタンの高さ
  • color: ボタンの色
  • cFrame: ボタンの枠の色
  • label: ラベル
  • cLabel: ラベルの色
  • font: ラベルのフォント (nooneの場合は現在設定しているフォントを使用する)

■ボタンオブジェクトの作成

Createイベント

Createイベントは以下のように記述します。

/// 初期化
// 状態 (0:通常 1:マウスが上に乗っている 2:クリック中)
state = 0;

// 有効無効フラグ
bEnabled = true;

// 幅
width = 128;

// 高さ
height = 32;

// ラベル
label = "Text";

// ラベルの色
cLabel = c_black;

// ボタンの色
color = c_ltgray;

// ボタンの枠の色
cFrame = c_black;

// ラベルのフォント (nooneの場合は現在設定しているフォントを使用する)
font = noone;

Stepイベント

Stepイベントには以下のように記述します

/// ボタンの状態を更新
var px = mouse_x;
var py = mouse_y;
if(bEnabled and point_in_rectangle(px, py, x, y, x+width, y+height))
{
  // マウスがボタンの上に乗っている
  if(mouse_check_button(mb_left))
  {
    if(mouse_check_button_pressed(mb_left))
    {
      // クリックした
      event_perform(ev_other, ev_user0);
    }
    // クリック中
    state = 2;
  }
  else
  {
    if(state == 2)
    {
      // 決定した
      event_perform(ev_other, ev_user1);
    }
    state = 1;
  }
}
else
{
  // 通常
  state = 0;
}

ここでやっているのは、変数「state」に状態に対応する値を設定しています。

  • state = 0: ボタンにまったく影響がない通常の状態
  • state = 1: ボタンの上にマウスが乗っている状態
  • state = 2: ボタンをクリックしている状態

それとクリック判定をしています。

  • ボタンの上にマウスがあって、ボタンを押した瞬間 → ユーザ定義イベント0を呼び出す
  • ボタンの上にマウスがあって、ボタンを離した瞬間 → ユーザ定義イベント1を呼び出す

Drawイベント

/// 描画
// 元の色を保持
var cprevious = draw_get_colour();

// 背景描画
var c = color;
var ofsY = 0;
switch(state)
{
case 0: // 通常
  break;
case 1: // マウスが上に乗っている
  // 少し明るくする
  c = merge_colour(c, c_white, 0.2);
  break;
case 2: // クリック中
  ofsY += 2;
  break;
}
// 描画色設定
draw_set_colour(c);

if(bEnabled)
{
  // ボタンが押せる
  var up = (state != 2);
  draw_button(x, y, x+width, y+height, up);
}
else
{
  // ボタンを押せないので暗くする
  var c2 = merge_colour(c, c_black, 0.5);
  draw_set_colour(c2);
  draw_rectangle(x, y, x+width, y+height, false);
  draw_set_colour(c);
  draw_rectangle(x, y, x+width, y+height, true);
}

// ラベル描画 (中央揃え)
draw_set_colour(cLabel);
var cx = x + width/2;
var cy = y + height/2;
cx -= string_width(label)/2;
cy -= string_height(label)/2;
cy += ofsY; // クリック中は少し下げる

if(font != noone)
{
  // フォント設定
  draw_set_font(font);
}
draw_text(cx, cy, label);

// 元の色に戻す
draw_set_colour(cprevious);

ここではボタンの状態に対応して描画を行います。

GameMakerではボタンを描画する際に、「draw_button」という便利な関数が用意されているので、通常はそれを使用します。

ただ、ボタンが無効な場合は暗くしたいので、「draw_rectangle」で描画するようにしました。

■使い方

このボタンの使い方は以下の手順で行います。

オブジェクト定義ファイル

ここで解説したスクリプトを記述するのが面倒であれば、以下のリンクからオブジェクト定義ファイルをダウンロードできます。

GameMakerのボタンオブジェクト (616)

以下、インポート方法です

  1. ダウンロード・解凍します
  2. GameMaker上のリソースツリーの「Objects」フォルダを右クリックします
  3. ポップアップメニューから「Add Existing Object」を選択します
  4. 開くダイアログが表示されるので、解答したフォルダ内にある「obj_btn.object.gmx」を選びます
  5. プロジェクトに「obj_btn」が追加されます

次に、obj_btnを継承するオブジェクトを作成します

  1. リソースツリーの「Objects」フォルダを右クリックします
  2. ポップアップメニューからCreate Objectを選択します
  3. Object PropertiesからParentをクリックして、obj_btnを継承します

Createイベントには以下のように記述します

/// 初期化
// 必ずこれを呼び出すこと
event_inherited();

// ラベルを設定
label = "MyButton";

ポイントは、「event_inherited」で親のCreateイベントを呼び出した後、変更したいパラメータを設定する、ということです。

そして入力判定をするために、ユーザ定義イベント0(User Defined 0イベント)を作成し、クリックしたときの処理を記述します。

// クリックした時の処理
show_message("click");

ルームにobj_btnを継承したオブジェクトを配置して実行します。

すると「MyButton」というボタンが配置され、クリックした時に「click」というメッセージが表示されるようになります。