夏休みということで久しぶりにゲームを作ってみようと思います。今回は、プロデルでもぐら叩きゲームを作ってみます。
この記事では、プロデルの基本的な使い方については紹介していません。はじめての方は、プロデルマニュアルをご一読ください。
ゲーム内容
3×3マスの穴から、ランダムにもぐらが表れ、もぐらを叩くと、スコアが増えるゲームです。もぐら叩きとして最低限必要な機能は、次の通りです。
- 穴を敷き詰める
- ランダムにもぐらを出す
- もぐらを叩いたら、もぐらの画像が変わる
- 叩くとスコアが増える
これらに加えて、ゲームとして面白くするために次の機能も付けて改良していきます。
- 効果音
- 時間制限
- GAME OVERやタイトル画面
素材の準備
画像や効果音などの素材を用意します。最低でも「穴」「もぐら」「叩かれたもぐら」の3つの画像を用意しておきます。
 |  |  |
| tile.png | mogura.png | mogura-hit.png |
また、叩いたときの効果音も用意しましょう。調べるとフリー素材などが見つかるかと思います。
基本的な機能を作る
まずゲーム画面を作って、もぐらを登場させる所まで作ってみます。
ゲーム画面は、「キャンバス」部品を使って作っていきます。キャンバスに画像や文字、直線などの色々なキャンバス図形を貼り付けることで、ゲームの画面を作ることができます。もぐら叩きではキャンバスに次の図形を貼り付けます。
- 画像部品(穴×9)
- キャンバス文字(タイトル, スコア, 残り時間, ゲームオーバー)
画像を描くには
例えば次のようなプログラムでは、キャンバスに「穴」という名前の画像図形に、もぐら画像を表示します。「もぐら画像」変数には、mogura.pngから読み込んだ画像を格納しておきます。
//もぐら1.rdr もぐら画像という画像(「images\mogura.png」)を作る 窓というウィンドウを作る そのタイトルを「もぐらを描く」に変える 窓へキャンバス1というキャンバスを作る そのドッキング方向を全体に変える 窓を表示する キャンバス1へ画像を描いて穴とする その位置と大きさは、｛20,20,100,100｝ その伸縮を○に変える その画像をもぐら画像に変える キャンバス1を更新する 待機する
クリックイベントとは
キャンバス図形「穴」をクリックした時に何かプログラムを実行したいときには、そのクリックイベントを受け取る手順を定義します。「イベント」とはマウスやキーボードなどプログラム実行中に何か変化が起きる出来事のことです。この時に実行する手順を「イベント手順」と呼びます。
クリックした時のイベント手順は、次のように書きます。「画像クリック」手順に、穴がクリックされた時に実行するプログラムを書きます。
穴のクリックされた時の手順は、画像クリック 画像クリックの手順 // 穴をクリックした時だけに実行するプログラムを書く 終わり
もぐら1.rdrを改良して、もぐらを叩いたときに、当たり画像に切り替えるプログラムを付け加えます。
//もぐら2.rdr もぐら画像という画像(「images\mogura.png」)を作る 当たり画像という画像(「images\mogura-hit.png」)を作る 窓というウィンドウを作る そのタイトルを「もぐらを描く」に変える 窓へキャンバス1というキャンバスを作る そのドッキング方向を全体に変える 窓を表示する キャンバス1へ画像を描いて穴とする その位置と大きさは、｛20,20,100,100｝ その伸縮を○に変える その画像をもぐら画像に変える 穴のクリックされた時の手順は、画像クリック キャンバス1を更新する 待機する 画像クリックの手順 もし発生元の画像がもぐら画像なら 発生元の画像は、当たり画像 もし終わり 終わり
「画像クリック」手順では、「発生元」変数にクリックした図形が格納されています。もし文を使ってクリックされた図形が「もぐら画像」の画像となっているかどうかを確認して、もぐらが穴から出ているときに限って、「あたり画像」に切り替えるようにプログラムします。
3×3で画像を並べる
次に、100×100ピクセルの穴を縦横3マスずつ並べて配置します。同じ画像を並べるには、「繰り返し」文を使います。穴の数だけ画像図形を作りますが、その時に「穴一覧」配列に作った画像図形を入れておきます。 「穴一覧」配列に入れておき、後でもぐらを出したり、もぐらが出てきた穴に戻せるようにします。
作った画像図形は、順番に並ぶように座標をずらして配置しないといけません。図形は100×100ピクセルで、穴と穴の間隔は10ピクセルにします。今回は座標を決めるために、割り算の余り(%演算子)を使ってます。例えば2%3と書くと答えは2となり、4%3と書くと1となります。これを利用して左上から右、下方向へ穴を配置します。
//メイン画面の「はじめの手順」
穴一覧={}
9回数にカウントして繰り返す
N=数-1
キャンバス1へ画像を描いて穴一覧(数)とする
その位置と大きさは、｛20+N%3*110,20+((N-N%3)/3)*110,100,100｝
その伸縮を○に変える
そのタグは、数
その画像を穴画像に変える
そのクリックされた時の手順は、画像クリック
繰り返し終わり
タイマーを使ってランダムにもぐらを出す
次にタイマーを使って一定間隔で穴からもぐらが出てくるようにします。
出てくる場所は、「乱数」手順を使って1から9までの番号で決めます。この番号は、先ほどの「穴一覧」配列に格納された画像図形の添字に対応しています。 つまり「穴一覧」配列の1番目から9番目までのいずれかの図形を選び、その図形の画像を「もぐら画像」に変えます。
また、ここではもぐらが出てくる間隔を、タイマーを2000ミリ秒(2秒)に設定します。間隔を短くすると、難易度が高くなるかと思います。
・・・ メイン画面とは ・・・ はじめの手順 ・・・ タイマー1というタイマーを作る タイマー1の時間になった時の手順は、時間になった タイマー1の間隔を2000に変える タイマー1を開始する 終わり ・・・ 時間になった手順 9回数にカウントして繰り返す 穴一覧(数)の画像を穴画像に変える 繰り返し終わり 番号は、1から9までの乱数 穴一覧(番号)の画像をもぐら画像に変える 終わり 終わり
プログラム中の「・・・」は、すでに紹介したプログラムを省略しているという意味です。プログラムを付け加えるときは、書く場所に注意しましょう。
プログラム全体
とりあえず、一通りの機能が作れましたので、ここまでのプログラムをまとめてみました。
メイン画面とは
ウィンドウを継承する
-穴一覧
はじめの手順
初期化する
ーー貼り付けた部品に対する操作をここに書きます
穴一覧={}
9回数にカウントして繰り返す
N=数-1
キャンバス1へ画像を描いて穴一覧(数)とする
その位置と大きさは、｛20+N%3*110,20+((N-N%3)/3)*110,100,100｝
その伸縮を○に変える
そのタグは、数
その画像を穴画像に変える
そのクリックされた時の手順は、画像クリック
繰り返し終わり
キャンバス1を更新する
タイマー1というタイマーを作る
タイマー1の時間になった時の手順は、時間になった
タイマー1の間隔を2000に変える
タイマー1を開始する
終わり
初期化する手順
ーー自動生成された手順です。ここにプログラムを書き加えても消える場合があります
この実質大きさを｛540,540｝に変える
この内容を「もぐらたたき」に変える
初期化開始する
キャンバス1というキャンバスを作る
その位置と大きさを｛0,0,540,540｝に変える
その実質大きさを｛540,540｝に変える
そのドッキング方向を「全体」に変える
初期化終了する
メイン画面の設計スケール比率を｛144,144｝に変える
終わり
画像クリックの手順
もし発生元の画像がもぐら画像なら
発生元の画像は、当たり画像
もし終わり
終わり
時間になった手順
9回数にカウントして繰り返す
穴一覧(数)の画像を穴画像に変える
繰り返し終わり
番号は、1から9までの乱数
穴一覧(番号)の画像をもぐら画像に変える
終わり
終わり
スコアを付ける
今度は、もぐらを叩いたときに、10ポイント増やすようにプログラムします。スコアを格納する「得点」種類変数を宣言しておき、叩く度にスコアを増やします。
メイン画面とは ・・・ -得点=0 穴クリックされた手順 もし発生元の画像がもぐら画像なら 発生元の画像は、当たり画像 得点を10だけ増やす 得点ラベルの内容は、「Score:[得点]」 当たり音を鳴らす もし終わり 終わり 終わり ・・・
効果音を付ける
効果音も付けてみましょう。効果音を再生するには、「効果音」種類や「メディア制御」種類を使います。.wav形式の場合には「効果音」種類を使います。.mp3や.mp4の効果音には、「メディア制御」種類を使います。
もぐらを叩いたときの効果音は、フリー素材を使用することにします。例えば、使用する素材が.mp3形式だった場合は、「メディア制御」種類を使います。そこで.mp3ファイルを再生できるように「鳴らす」手順を定義します。
【ファイル名】を鳴らす手順 エイリアス名は、「wave1」 メディア制御へ「open "［ファイル名］" alias ［エイリアス名］」を命令する メディア制御へ「play ［エイリアス名］」を命令する 繰り返す もし［メディア制御から「status ［エイリアス名］ mode」を取得したもの］が「playing」でないなら、繰り返しから抜ける 0.1秒待つ 繰り返し終わり メディア制御へ「stop ［エイリアス名］」を命令する メディア制御へ「close ［エイリアス名］」を命令する 終わり
そして、鳴らしたいタイミング(もぐらが叩かれたとき)に「鳴らす」手順を呼び出します。
当たり音は、「sounds\button51.mp3」 ・・・ メイン画面とは ・・・ 穴クリックされた手順 もし発生元の画像がもぐら画像なら ・・・ 当たり音を鳴らす もし終わり 終わり 終わり ・・・
難易度を変える
ここでもぐらたたきとしては一通り完成しました。さらに、ゲームが単調とならないように工夫していきます。スコアに応じて、スピードが変わるようにしてみましょう。タイマーの間隔を変えることで、もぐらの出没時間を変えられます。
メイン画面とは ・・・ 穴クリックされた手順 もし発生元の画像がもぐら画像なら ・・・ もし得点が100なら タイマー1の間隔を1000に変える タイマー1を開始する 他でもし得点が200なら タイマー1の間隔を500に変える タイマー1を開始する もし終わり もし終わり 終わり 終わり ・・・
時間制限を作る
もぐらを叩き続けると飽きてしまいますので、スコアによってゲームに時間制限を設けて、その時間内で得点を決めるように改良してみます。「残り時間」変数に記録しておきます。
残り時間が無くなった時には、「GAME OVER」と表示させて、タイマーも停止させます。
残り時間は、「日時期間形式」種類を使います。この種類は、時間を記録するための種類で、記録している時分秒から特定の時分秒だけ増減させるといったことができます。
例えば、次のプログラムでは、1分間(1:00)から1秒ずつ3回引いて、その時の時間を「00:00」の形式で報告します。
// 日時期間形式の例 日時期間形式(「0:01:00」)を作って残り時間とする 残り時間から1秒引く 残り時間から1秒引く 残り時間から1秒引く 残り時間を「mm:ss」に整えて報告する
「はじめの手順」では、あらかじめ「GAME OVER」用のキャンバス文字を作っておき、「表示」設定項目を×にしておきます。そして残り時間が0になった時に○に切り替えます。
メイン画面とは
-残り時間:日時期間形式
はじめの手順
初期化する
ーー貼り付けた部品に対する操作をここに書きます
穴一覧={}
残り時間=日時期間形式(「0:01:00」)を作ったもの
・・・
キャンバス1へ文字を描いて残り時間ラベルとする
その位置は、｛350,100｝
そのフォントを「メイリオ」に変える
その文字色を赤色に変える
その文字サイズを16に変える
キャンバス1へ「GAME OVER」という文字を描いてゲームオーバーラベルとする
その位置は、｛60,150｝
そのフォントを「メイリオ」に変える
その文字色を赤色に変える
その文字サイズを30に変える
その表示を×に変える
・・・
終わり
時間になった手順
9回数にカウントして繰り返す
穴一覧(数)の画像を穴画像に変える
繰り返し終わり
番号は、1から9までの乱数
穴一覧(番号)の画像をもぐら画像に変える
//残り時間
残り時間から1秒引く
残り時間ラベルの内容は、残り時間を「mm:ss」に整えたもの
もし残り時間の秒数が0なら
ゲームオーバーラベルの表示を○に変える
タイマー1を停止する
もし終わり
終わり
・・・
タイトル画面を作る
最後に、タイトル画面も作ってみましょう。
タイトル画面をクリックすると、タイマーが開始されてゲームがはじまるように改良します。
タイトル画面用の子キャンバスを作っておきます。この子キャンバスをゲーム画面の上に被せるようにして表示させておき、クリックした時に非表示にするプログラムを書きます。
・・・ //はじめの手順で、キャンバスにタイトル画面用の図形を作る キャンバス1に子キャンバスを作って表紙キャンバスとする その位置と大きさは、｛0,0,520,520｝ その背景色を白に変える そのクリックされた時の手順は、スタートする 表紙キャンバスへ「もぐらたたき」という文字を描く その位置は、｛60,100｝ その文字色を緑色に変える その文字サイズを32に変える 表紙キャンバスへ「クリックしてスタート」という文字を描く その位置は、｛40,200｝ その文字色を青色に変える その文字サイズを24に変える ・・・
また、タイトル画面をクリックした時の手順「スタートする」手順を作っておき、クリックするとゲームがはじまるように修正します。この時、今まで「はじめの手順」にあったタイマーを開始するためのプログラムを「スタートする」手順へ引っ越しします。
・・・ スタートする手順 表紙キャンバスの表示を×に変える タイマー1の間隔を2000に変える タイマー1を開始する 終わり ・・・
完成！
もぐら叩きゲームが出来上がりました！シンプルなゲームですが楽しめるかと思います。
速さを変化させたり、ランダムにレアなもぐらを出して叩くとスコアが倍となる、といったルールを加えるなど、さらに面白くする改良も出来るかと思います。
また前回の「ブロック崩し」には無かった、「タイトル画面」や「時間制限」といったゲームらしい機能を紹介しました。このあたりは、他のゲームを作る時にも使えるプログラムですので、参考にして貰えれば嬉しいです。
完成版プログラムは、こちらからダウンロードできます。
