ゲームプログラミングレシピ集

【プチコン4講座】ボタンを押してゲージを溜める処理の作り方

プチコン4

ゲージ 溜める

こんにちは。なおキーヌです。

ブログ毎日更新は277日目になります。

最近コードをかけてなかったので、久々にコードありのゲーム制作テクニックを公開します。

タイトルにもあるように、ボタンを押してゲージが溜まる処理を作ってみましょう。

ちょっと考えるだけでもバトルに使ったり、ミニゲームに使ったり様々な活用法がありますね。

カッコいいゲージを作るには画像が必要になってしまうので、
今回はシンプルにグラフィックで作った枠にゲージを溜めていきましょう。

  1. ゲージの仕組みを考えてみよう
  2. ゲージの枠とゲージを描写してみよう
  3. 数値によって変化するゲージにしてみよう
  4. ループを使ってゲージを自動で増やしてみよう
  5. ボタンを押している時だけゲージを増やしてみよう

ゲージの仕組みを考えてみよう

ゲージとはプログラム内部的な数値を視覚化したものによく用いられます。

仕組みは結構単純で、ネタバレするとその数値が100%中の何％なのかを調べるだけで
実装できてしまいます。

よくあるところでいえば、HPゲージやMPゲージ。

ダメージを受けて溜まっていく必殺技ゲージ。

ボタンを押している間溜まっていき、ボタンを話すと技が発動しゲージがリセット等々。

どのジャンルのゲームでも比較的利用されやすい仕組みです。

直接数値を表示するのもいいですが、文字だらけだと人間混乱しやすくなるので
視覚的にシンプルなゲージを利用するとゲームの画面がスッキリするというメリットもあります。

作り方を覚えておけば色んなシーンで活用できるので今回しっかり覚えておきましょう！

ゲージの枠とゲージを描写してみよう

スプライトを使うと専用の画像を用意しなければいけないので、
今回はグラフィックを使います。

シンプルな矩形や線を描けるので、ゲージとかにはかなり相性がいいです。

それではまずゲージの枠となる部分、塗りつぶし無しの四角形を作ってみます。

使用する命令は「GBOX」になります。

背景が黒なので白にしましょう。

' 画面クリア
ACLS

' 四角形を描写
GBOX 90,100,300,130,RGB(255,255,255)

プチコン４ ゲージの作り方１

今にもゲージが溜まりそうな見た目をしていますね。

ロード画面とかに使えそうです。

数値によって変化するゲージにしてみよう

外枠は出来たので、今度は中身を作ってみましょう。

分かりやすいように赤色にしてみましょう。

' 画面クリア
ACLS

' 塗りつぶし四角形を描写
GFILL 90,100,300,130,RGB(255,0,0)

' 四角形を描写
GBOX 90,100,300,130,RGB(255,255,255)

同じ位置に塗りつぶしの赤を塗ってその上から白線を置けば、
いちいち少し位置をずらして描写～という面倒なことをしなくて済みます。

それではこの赤いゲージを変数で管理してみましょう。

左から右に伸びていってほしいので、変数の値は左端の数値と同じにしておきます。

' 画面クリア
ACLS

' ゲージ用変数
VAR GAUGE = 0
' ゲージ最大値
VAR MAX_GAUGE = 300

' 塗りつぶし四角形を描写
GFILL 90,100,90+GAUGE,130,RGB(255,0,0)

' 四角形を描写
GBOX 90,100,300,130,RGB(255,255,255)

あとはGAUGE変数を増やしていくだけですね。

ループを使ってゲージを自動で増やしてみよう

変数を準備出来たのでゲージを自動で増やすようにしてみましょう。

先ほど作ったMAX_GAUGE変数も活用しましょう。

' 画面クリア
ACLS

' ゲージ用変数
VAR GAUGE = 0
' ゲージ最大値
VAR MAX_GAUGE = 210

LOOP

  ' 塗りつぶし四角形を描写
  GFILL 90,100,90+GAUGE,130,RGB(255,0,0)

  ' 四角形を描写
  GBOX 90,100,300,130,RGB(255,255,255)

  ' ゲージを増やす
  INC GAUGE

  ' MAXまで来たら音を鳴らしてループを抜ける
  IF MAX_GAUGE == GAUGE THEN
    BEEP 7
    BREAK
  ENDIF

  ' 垂直同期
  VSYNC

ENDLOOP

少しずつ増えていってMAXまで来たら音がなってループが終わります。

これだけでなんかゲームぽく見えるから不思議ですよね。

ボタンを押している時だけゲージを増やしてみよう

最後にボタンを押している間ゲージを溜まるようにしてみましょう。

折角なので少しゲームを作ってみましょうか。

どれだけMAXより近くで止められるかゲーム！

今のままだとMAXで止まってしまうので、枠からオーバーするように作り替えます。

そして止めたところの数値を表示してMAXとの差を表示してみましょう。

差がより少ない人が勝利！というゲームです。

' 画面クリア
ACLS

' ゲージ用変数
VAR GAUGE = 0
' ゲージ最大値
VAR MAX_GAUGE = 210

' ゲームストップフラグ
VAR GAME_STOP = #FALSE

LOOP

  ' 塗りつぶし四角形を描写
  GFILL 90,100,90+GAUGE,130,RGB(255,0,0)

  ' 四角形を描写
  GBOX 90,100,300,130,RGB(255,255,255)

  ' 0番目のコントローラー(つまり1コン)の押されているボタンを取得
  VAR B = BUTTON(0)

  ' 上ボタン処理
  if (B AND 1 << #B_RRIGHT) != 0 then
    ' ボタンを押している間ゲージを増やす
    INC GAUGE
    ' ボタンを離したときにゲームを終わるようにするフラグ
    GAME_STOP = #TRUE
  ELSEIF GAME_STOP == #TRUE then
    ' ボタンが離されたらループを抜ける
    BEEP 7
    PRINT "MAXとの さ は" + STR$(MAX_GAUGE - GAUGE) + "です。"
    BRAEK
  ENDIF
  ' 垂直同期
  VSYNC
ENDLOOP

意外とシビアなゲームになりました。

しかし私は3回目でいけました（謎ドヤ

このようにゲームの仕組みを学んだら、実際にその仕組みを使ってミニゲームを作ってみると
記憶にも残るし、今後何かゲームを作るときにパッと実装できるようになります。

特にゲージの仕組みは簡単なうえに使いまわしやすいのでオススメです！

それでは。

関連記事