ブロック崩し

シェアする

この記事の所要時間: 2350

イベントエディタを開いてイベントを組んでいく

上部のメニューにある、イベントエディタのアイコンをクリックします。

すると、イベントエディタが開くので、まず最初に左の「すべてのイベント」の行を

右クリックし「挿入」を選択後「新規条件」の「マウスポインタとキーボード」を選択してください。

その後、「キーボード」→「キーを押した時」の順に選択していきます。

「キーを押してください」というダイアログが表示されますが、今回は「Esc」キーを割り当てます。

次に  ストーリーボードコントロールを右クリックし「アプリケーションの終了」を選択します。

これで「Escキーを押したらアプリケーション(ゲーム)が終了する」というイベントができました。

これがなぜ必用かというと、このつぎに自機をマウスコントロールで操作する設定をしますが、そうするとマウスカーソルが自機から離れなくなってテストプレイのアプリケーションを終了できなくなるからです。(正確には終了できますが、最初は焦りました…)

後々、このイベントは設定を変更しタイトル画面へ戻るためのリセットボタン的な役割として使います。

アプリケーション終了のイベントが完成すると、このようになります。

それでは、このイベントの動作を確認するためにF8キーを押して、テストプレイをしてみましょう。

アプリケーションが別ウィンドウで開いたらEscキーを押してみてください。

アプリケーションは終了しましたか?

開いたアプリケーションウィンドウが閉じたなら、一つ目のイベント作成は成功です。

自機を動かす

つぎに、自機を操作するための設定を行います。

自機のプロパティを開き、 動作アイコンをクリックします。

動作の「種類」から「マウスコントロール」を選択します。

マウスが動く範囲を指定するのですが、上下に動かすことはないので縦は1ピクセル、横幅は自機がちょうど壁に触れると止まるくらいに調整します。

調整が終わったら、ポップアップしたダイアログの「OK」を押して閉じてください。

F8キーを押して、マウスで自機を動かしてみましょう。

動作テストが完了したら次の工程に進みます。

次はボールの動作を設定します。

先ほどと同じようにボールのプロパティを開き、動作を「バウンスボール」に設定します。

次にボールが跳ね返るように、左右と上にある壁にボールの衝突判定を設定します。

壁のプロパティを開き、 ランタイムオプションのタブを開きます。

そして、「障害物の種類」を「障害物」に設定します

このままでは、まだボールは壁をすり抜けるので、再び イベントエディタを開いてイベントを組んでいきます。

新しい条件をクリックし、新規作成ウィンドウが開いたらボールを右クリックし「衝突」のあと「背景」の順に選択します。

次に、ボールの動作を「バウンス」に設定します。

設定が終わったら、F8キーを押して動作確認をしてみましょう。

ボールが壁を反射することが確認できれば、次の工程に進みます。

自機でボールを打ち返す

今度はボールが自機に当たったときも反射するようにイベントを組みます。

新しい条件で先ほどと同じようにボールを選択し衝突を選んだら、今度は「別のオブジェクト」を選択します。

ポップアップしたウィンドウの中に自機がありますので、自機を選択します。

壁と衝突したとき設定したように、ボールの動作をバウンスに設定します。

どうでしょう?自機でボールを打ち返すことができたでしょうか。

ブロックにボールが当たると反射し、同時にブロックを破壊する

今度は、ブロックを破壊するようにイベントを組みます。

自機とボールの衝突判定と同じ要領で、ボールとブロックの衝突判定を設定します。

今度は、ボール動作「バウンス」のほかにブロックの動作「破壊」も同じイベント内に設定します。

まずはイエローのブロックから設定しましたが、同じようにすべてのブロックにこのイベントを組みます。

ただ、似たような動作のイベントの場合は、マウスの左ボタンドラッグでコピーしたあとに右クリックで編集すれば時間と手間を省けます。

ボール動作のバウンスや、ブロックの破壊も同じように チェックマークをマウスドラッグで任意のマスにコピーできます。

さくさくっとコピペでブロック破壊イベントすべてを作り終えたら、動作確認をして次の工程「ミスの動作」を作成します。

ミスをしたときの動作を設定する

現状ではボールが自機をすり抜けて画面外に消えても、ゲームを続行できずにEscを押すしかありません。

なので、ミスにより自機をひとつ消費してゲームを続行できるようなイベントを組んでいきます。

新規イベントを作成し、新規条件から「ボール」→「位置」→「”ボール”の位置を判定」の順に選択します。

すると、判定位置を選択するためのウィンドウがポップアップします。

動作領域外にある右向きの矢印にカーソルを合わせると「オブジェクトが動作領域外にある」という文字が浮かびます。

この矢印を選択し「OK」を押します。

弾が場外に出たときの条件を設定したので、次に動作の設定をします。

まずは、ライフをひとつ減らします。

プレイヤーのアイコン(コントローラーのようなアイコン) と先ほどの条件が交差しているマスをクリックして「ライフの数」→「ライフの数を減少」の順に選択します。

次に、ライフをどれくらい減らすのかを設定するためのウィンドウが開きますので、「1」を入力して「OK」を押します。

これで、ボールが画面外に消える度にライフが1つ減るイベントを組めました。

さらに、ボールが画面外に消えたときにリトライできるように動作を設定します。

ボールの「位置を選択」をクリックします。

すると、位置を選択する画面に移ります。

これでボールが画面外に達すると、ボールの位置を瞬時に移動させるように設定するのですが、今回は取り敢えずブロックの上(X80,Y20)くらいに設定しましょう。

このイベントによって、ミスのたびにライフが減少し、ブロックの上にボールが出現しリトライできるようになります。

ただ、いまは残機がゼロになったあとのイベントは組んでいないので、残機がなくなったあとでもEscを押さない限り永遠にゲームを続けることができます。

この後にゲームオーバーなども作成するのですが、その前にテンションを上げるために音を付けたいとおもいます。

音が付くだけで、テストプレイもグッとゲームらしくなるので先に音を付けましょう。

効果音を設定する

効果音をゼロから作るには相応の知識や技術が必用なのですが、今回はその工程を割愛して素材配布サイトさまからお借りいたします。

こちらの記事で作成しているブロック崩しには、効果音辞典さまのすばらしい効果音を使用させていただいております。

今回お借りした効果音は効果音辞典さまのサイトの「インターフェイス Vol.1」のページにあります。

「カーソル移動4」「カーソル移動5」「カーソル移動6」「クイズで不正解」をお借りしました。

  • moving-cursor-4.mp3:自機にボールが当たった時に鳴らす音
  • moving-cursor-5.mp3:ブロックにボールが当たった時に鳴らす音
  • moving-cursor-6.mp3:壁にボールが当たった時に鳴らす音
  • wrong-answer-in-quiz-1.mp3:ミスをした時に鳴らす音

本記事のブロック崩しには上記ように効果音を設定しています。

イベントエディタを開き、「ボールが背景に衝突」の条件に サウンドを追加します。

「サウンド」→「サウンドを再生」→「ファイルから」→「参照」→「moving-cursor-6.mp3」→「開く」の順で、mp3ファイルを開きます。

これでボールが壁に当たるたびに「キンッ」というサウンドが再生されます。

おなじ要領で、ブロックや自機にボールが当たったときにもサウンドを設定してください。

ブロックとボールの衝突は各色同じ音を使用するので、ドラッグでそのまま下にコピペすると楽です。

タイトル画面を作る

タイトル画面は別になくてもいいんですが、このあとにゲームオーバーのフレームを作るので先に作っておきます。

初期のフレーム名は「フレーム1」となっています。

ゲーム部分のフレーム名を「ゲーム」に変更してください。

次に「ゲーム」のフレームをコピーします。

それを、現在のフレームの上に貼り付けます。

貼り付けたフレーム名を「タイトル画面」に変更してください。

「タイトル画面」のイベントエディタを開き、イベントをすべて削除します。

つぎにタイトル画面のフレームエディタを開き、自機、ボール、ブロックを削除します。

このように「タイトル画面」のフレームエディタはスッキリした画面になりますが、ここにタイトル文字を入れます。

まず、背景オブジェクトを設置します。

背景オブジェクトの編集画面を開き、画像をインポートします。

用意しておいたグラフィックの「ブロック崩し」のロゴ部分を範囲選択して読み込みます。

読み込んだタイトルロゴは2倍の大きさに拡大します。

適当な高さに置いたあと「右クリック」→「フレーム内で整列」→「水平方向で整列」の順に選択し、ロゴを中心に設置します。

つぎに文字列オブジェクトを配置して、文字を「SキーでSTART」と入力します。

タイトル画面のイベントエディタを開き「”S”キーを押した時」という条件に ストーリーボードコントロールの「指定のフレームに移動」という動作を挿入します。

フレーム選択のウィンドウがポップアップするので「ゲーム」のフレームを選択して「OK」を押します。

これで、タイトル画面でSキーを押すとフレーム移動してゲームを開始することができます。

ついでに、ゲームのイベントエディタで最初に設定した「Escを押すとアプリケーションが終了する」というイベントを「Escを押すとタイトル画面に移動する」と編集して、リセットボタンの役割に変更しましょう。

ゲームクリア画面とゲームオーバー画面を作る

先ほど作った「タイトル画面」のフレームをコピーして貼り付けます。

そして、フレーム名を「ゲームクリア」に変更します。

フレームエディタでタイトルロゴの背景オブジェクトを削除し「SキーでSTART」の文字列を「GAME CLEAR!」に変更します。

同じ要領でゲームオーバーのフレームも作成します。

ゲームのフレームに移り、イベントエディタを開いて分岐を作ります。

新しい条件を新規作成します。

イエローのブロックを選択し「選択またはカウント」→「範囲内に”イエロー”が存在しない」の順に選択します。

範囲設定のウィンドウが表示されるので、動作領域の選択範囲でブロックを囲みます。

これで「イエローのブロックがすべて消えたら」という条件を作成しました。

(ちなみに「すべての”イエロー”が破壊されている」という条件ではなぜか上手く動作しなかったんですけど、原因がおわかりの方がいらっしゃいましたらコメントをいただけると幸いです!)

「範囲内に”イエロー”が存在しない」の条件に「挿入」で、同じようにほかの色のブロックも追加していきます。(別の行に条件を新規作成するのではなく、先ほどの条件の中に挿入して「and(アンド)」にする必用があります。)

すべての色のブロックを1つの条件内で「範囲内に”○○”が存在しない」と設定したあと、ストーリーボードエディタの「指定のフレームに移動」から「ゲームクリア」のフレームを選択します。これで「ブロックをすべて消したらゲームクリアになる」という分岐ができました。

つぎに残機がゼロになったときの分岐も作成します。

新しい行に新規条件を作成し「プレイヤー1」→「ライフが0になる」の順に選択したら、動作は「指定のフレームに移動」を選択して「ゲームオーバー」のフレームに設定します。

そして、ゲームクリアのイベントもゲームオーバーも「Escキーを押すとタイトルに移動する」というイベントを作成します。

スコアを集計する

ただブロックを消すだけでは味気ないので、スコアを加算します。

「ボールと自機が衝突」の条件で最初のほうで設置したカウンタオブジェクトの「スコアカウンター」の動作を「カウンターを増加」→「2を入力」→「Ok」の順に選択して設定します。

同様に「ボールとブロックが衝突」した場合も「カウンターを増加」→「1を入力」→「Ok」の順に選択して設定します。

つぎにハイスコアの設定もしたいのですが、実はこれが苦戦中で上手くいっていません。

不具合がありつつも、いちおう実装しているので書きます。

まず、アプリケーションのプロパティを開きます。

グローバル変数にハイスコアを設定します。

変数というのは、あらゆるイベントで呼び出せる数字です。

通常の変数はフレーム内でのみ呼び出せて、グローバル変数ならフレームをまたいでも呼び出せます。

今回は「ゲーム」のフレーム内でスコアを集計して「ゲームオーバー」や「ゲームクリア」や「タイトル」のフレームでも数値を引き継いで表示させたいので、グローバル変数を使用します。

「ハイスコア」に割り当てたグローバル変数の初期値は「0」です。

「ゲーム」のフレームでイベントエディターを開き、新規条件にストーリーボードコントロールの「フレームが開始」という条件を作成します。

その条件上の「ハイスコアカウンター」と名付けたカウンタオブジェクトの動作を「カウンターをセット」に設定します。

つぎに「2値を比較して最大値を取得」のボタンをクリックします。

この状態ではエラーが出ますので「>数を入力<」の部分の一つ目に歯車アイコンの「特別」から「グローバル変数を呼び出し」を選択し「ハイスコア」を代入します。

二つ目の「>数を入力<」の部分には「スコアカウンター」と名付けたカウンターオブジェクトから「現在の値」を代入します。

これは、グローバル変数の「ハイスコア」の数値と、「スコアカウンター」の数値うち、数が大きいほうを「ハイスコア」のカウンターオブジェクトに代入しています。

ゲームプレイで増加された「スコアカウンター」の数値がハイスコアを上回れば、画面に表示されている「ハイスコア」のカウンターオブジェクトの数値も更新されます。

が、しかし。これはリアルタイムに変動しないのでさらに新規条件を作成する必用があります。

歯車の「特別」アイコンから「常に実行」を条件に選択し、動作は「特別」から「グローバル変数を変更」を選択します。

すると、先ほどと同じように計算式編集画面が表示されるので「2値を比較して最大値を取得」を押して、最初の数値にグローバル変数の「ハイスコア」を代入し、次の数値に「スコアカウンター」の現在の値を代入します。

むむむ…。頭が混乱しますね…。

もうこれは慣れていくしかないのかも知れません。

まぁ別にハイスコアは絶対に必用というわけでもないので、今回は見た目上の要素ということにしておきましょう…。

さて、つぎのページにてブラウザ上でプレイ可能な完成品のお披露目、mfaファイルダウンロード、次回予告があります!