はじめに
初めて作るゲームとして、今回はブロック崩しを作る工程を解説していきます。
なぜ初めにブロック崩しかというと
UnityでもGMS(Game Maker
Studio)でもCF(Clickteam
Fusion)でも、基本のゲームとしてブロック崩しが紹介されることが多いにも関わらず
GDではブロック崩しの日本語の解説動画や解説ページが見当たらないからです。
(英語のページや動画なら「GDevelop
Breakout」で検索すると豊富にヒットします)
というわけで、さっそく作り始めていきましょう！
1:プロジェクトを作成
ホーム画面にある「+プロジェクトを作成」から空の新規プロジェクトを作成します。
プロジェクト名を「Breakout」に設定し、プロジェクトを保存するフォルダを選択します。
次に「プロジェクトマネージャー→ゲーム設定→プロパティ」で、ゲームのプロパティを開きます。
ゲーム名、ゲームの説明、ゲームの横幅と高さなどを設定します。
今回は、ゲーム解像度の横幅を600、高さを800に設定します。
2:オブジェクトを追加
次にオブジェクトを追加します。
編集ウィンドウはドラッグ&ドロップで位置を自由に位置やサイズを変更できます。
お好みで自分流にカスタマイズしてください。
3:オブジェクトの種類を選択
今回はオブジェクトの種類にスプライトを選択します。
プレイヤーキャラ、敵キャラクター、アイテム、障害物などさまざまな用途で使用します。
4:アニメーションを追加
オブジェクトの名前を「Paddle」に変更して、スプライトにアニメーションを追加します。
今回のブロック崩しで使用した画像などをページの最後にご用意しましたので、ご自由にお使いください。
5:ポイントの編集
Paddle用の画像を読み込んだらオブジェクトのポイントを編集します。
今回はまだあまり深く考えず、オブジェクトの中心に設定しましょう。
6:シーンにインスタンスを配置
シーンにオブジェクトを配置します。
7:インスタンスのプロパティ
インスタンスをクリックしてプロパティを確認します。
カスタムサイズにチェックを入れて、Paddleの大きさを64×16に変更します。
(プロパティは本来なら左側に開きますが、画像では右に移動させています)
ここまでの行程で新規プロジェクトの作成、オブジェクトの追加、オブジェクトの種類選択、アニメーションの追加、インスタンスの配置をご紹介しました。
次に、Paddleとは別のオブジェクトを追加して配置します。
次に、Paddleとは別のオブジェクトを追加して配置します。
8:壁の追加
ボールを画面外に出さずにバウンスさせるため、スクリーンの領域外に壁を設置します。今回、壁のオブジェクトにはタイルスプライトを使用します。
画像はPiskelを使って作成します。
9:壁の配置
編集した壁のオブジェクトを配置します。
今回は横幅を32、高さを832に設定します。
10:イベントを追加する
今度はイベントエディタを開いて「+イベントを追加」を押します。
11:条件を追加する
条件を追加します。
Paddleを選択→カーソル/タッチはオブジェクト上にある
これで条件を設定しました。
これがどういった条件かというと
マウスカーソル（またはタッチ）がPadlleの上にある状態で、さらにマウスを左クリックしてる（またはタッチ）しているか？というものです。
12:アクションの追加
同じようにアクションも追加していきます。
Paddle→（Paddleの）X座標に→「MouseX()」（カーソルのX軸）を代入（置き換え）
このアクションは「PaddleのX座標がカーソルのX座標に置き換えられる」というものです。
先ほどの条件と合わせると、Paddleをクリックやタッチで掴んでいる間は横方向にPaddleを動かせるというイベントになります。
先ほどの条件と合わせると、Paddleをクリックやタッチで掴んでいる間は横方向にPaddleを動かせるというイベントになります。
ただこの場合、ほんの少しでもカーソルやタッチがPaddleから外れると動作が止まるので、操作難易度はかなり高いです。
Paddleを左右に動かすイベントは他にもいろいろな組み方があります。
例えば「カーソル/タッチはPaddle上にある」の条件を削除すれば、クリックかタッチをしていればカーソルやタッチがどこにあってもPaddleのX座標がカーソルのX座標に置き換わりますので、かなり操作難易度が下がります。
ですので、プレビューで確認してから削除しても構いません。
ですので、プレビューで確認してから削除しても構いません。
ほかにも、マウスやタッチを使わずキーボードを使って動かすこともできます。
Paddleの操作はお好みでカスタマイズしてみましょう。
このように条件+アクションのセットでイベントがひとつ完成します。
プレビューが開いたら、Paddleをマウスの左でクリックするかタッチして左右に動かしてみましょう。
ついでにファイルを保存しましょう。
13:プレビュー
ここまでの行程をプレビューで確認してみましょう。
ついでにファイルを保存しましょう。
14:ボールのイベント
次にボールとなるオブジェクトを追加してイベントを追加していきます。
ボールの種類はスプライトに設定してシーンに配置します。
配置したらイベントエディタに移ってボールに動きを加えます。
「新規イベントを追加」でボールの挙動に関するイベントを作成します。
イベントの条件には「シーンが始まった」を選択します。
次にアクションを設定します。
ボールオブジェクトを選択→「オブジェクトを移動する（角度）」を選択します。
角度の入力欄で、式アイコン→「数学的ツール」→「指定範囲内でランダムな整数」を選択します。
「指定範囲内でランダムな整数」の最小値は「-5」で最大値は「5」を入力します。
「RandomInRange(-5, 5)」の前に「-45+」を入力します。
「速度 (ピクセル単位での毎秒速度)」に300を入力します。
「指定範囲内でランダムな整数」の最小値は「-5」で最大値は「5」を入力します。
「速度 (ピクセル単位での毎秒速度)」に300を入力します。
そして「永続的」を選択します。
（画像では手前に「-45+5」となっていますが、正しくは手前に「-45+」です💧）
これはどういったイベントかというと
「シーンが始まったら即時、ボールが-40から-50のランダムな範囲の角度へ向かって、毎秒300pxの早さで永続的に移動する」といったものです。
この段階でプレビューすると、ボールが右上に飛んでいって画面外に消えます。
初期の角度は0°で、これは方向的に右になります。
そこから45°を引くと右上になり、45°を足すと右下になります。
つまり、0°(360°)-90°の場合は真上の270°、0°+90°の場合は真下の90°になります。
15:バウンス
ボールにバウンス(反射)の動作をつけます。
これによりボールがPaddleや壁に当たると反射するようになります。
ではボールにビヘイビアを追加していきましょう。
オブジェクトパネルにあるボールをダブルクリックします。
ビヘイビアのタブを開いて「+ビヘイビアを追加」を押します。
ビヘイビアとは直訳すると「動作」です。ビヘイビアを設定することでオブジェクトに動作を加えることができます。
今回はボールに「反射」の動作を追加しました。
16:バウンスのイベント
ビヘイビアの用意ができたのでイベントエディタを開いて衝突のイベントを追加していきましょう。
Ball > 衝突 > Wall
これで「BallがWallと衝突している（場合に）」という条件が追加されました
次にアクションは
Ball > Bounce off another object > Wall
これで「BallがWallとの衝突でバウンスする」というアクションが追加されました
これと同じ手順で、Padlleとボールの衝突イベントを追加します。
これと同じ手順で、Padlleとボールの衝突イベントを追加します。
イベントは複製できますので
先ほどのイベントをコピー&ペーストで複製してWallをPaddleに差し替えるだけです。
ここでまたファイルを保存してプレビューしてみましょう。
先ほどのイベントをコピー&ペーストで複製してWallをPaddleに差し替えるだけです。
ここでまたファイルを保存してプレビューしてみましょう。
17:シーンの背景色を変更する。
これまでの行程でボールがPaddleと壁に衝突すると反射するというイベントが完成しました。
次は「ブロックとボールが衝突すると反射し、尚且つ衝突したブロックを削除する」というイベントを追加していきます。
その前に、シーンの背景色を変えましょう。
シーンエディタ上で右クリックメニューを開いて「シーンのプロパティ」を開きます。
18:アニメーションパターンの追加
「新しいオブジェクトの追加」でブロックを追加していきます。
種類はスプライトに設定します。
これまでと同様に、スプライトにアニメーションを追加します。
Blockの色は単色でも構わないのですが、見た目にこだわるなら複数の色を用意してもいいでしょう。
配布したSampleに6色のBlockを収録していますので、お好きな色をご利用ください。
Blockの色のパターンを増やすには、アニメーションパターンを追加してそれぞれに異なる色のBlock画像を読み込んでいきます。
19:グリッドの設定
アニメーションの追加が完了したらブロックをシーンに配置しますが
ブロックを配置しやすいように、グリッドを設定しましょう。
今回はブロック配置用のグリッドなので、16×8に設定します。
設定が終わったらグリッドを表示しましょう。
20:ブロックの配置
これまで同様、オブジェクトパネルからBlockをドラッグで配置します。
最初のBlockを配置したらクリックして選択した状態にし、[Ctrl+Shift]を押しながら下にドラッグします。
するとY座標を固定しながら下に複製できます。
1列を選択した状態で先ほどと同様に[Ctrl+Shift]を押しながら横にドラッグします。
すると、X軸を固定しながら列を横に複製できます。
お気づきだと思いますが、今の状態ではBlockは単色です。
なので、Blockの色をランダムに変更するためのイベントを追加します。
21:1つの条件に複数のアクションを追加する
ボールの動作イベントで「シーンが始まった」という条件を追加しました。
その条件にアクションを追加します。
ボールを移動するアクションの下の「アクションを追加」を押します。
Ball > アニメーションを変更する > 変更記号 > 代入> 値 >
式アイコン >数学的ツール > 指定範囲内でランダムな整数
最小値は1で最大値は6に設定します。
それではプレビューで確認してみましょう。
これで赤一色ではなくなりました（むしろ赤が少ない💧）
22:オブジェクトの削除
今の状態ではBallがBlockをすり抜けますので、BlockがBallと衝突したら削除され、Ballを反射させるというイベントを追加します。
これまでの「BallはWallと衝突している」「BallはPaddleと衝突している」というイベントと同様に「BallはBlockと衝突している」イベントを追加します。
これも上記のイベントを複製して編集すると楽です。
「BallはBlockと衝突すると」「Ballをバウンスさせる」というイベントを追加したら
「Ballをバウンスさせる」アクションの下に「Blockを削除する」というアクションも加えましょう。
これで、「BallはBlockと衝突したら」という条件を満たしたときに「Ballをバウンスさせる」次に「Ballと衝突したBlockを削除する」という二つのアクションが追加されました。
条件やアクションには順番があります。
上にある条件やアクションが先に実行されますので覚えておきましょう。
ではプレビューで確認してみましょう。
ここでお気づきでしょう。
BallがPaddleの下に落ちた場合、そこで終わってしまうことに。
なのでリスタートを作りましょう。
23:オブジェクトを生成する
条件を満たしたらBallを生成しましょう。
Ballを生成する条件はいろんな選択肢があります。
例えば、下に落ちた瞬間。任意のタイミングでキーを押した時。用意したアイコンをクリックした時など。
今回は下に落ちた瞬間にBallを生成するイベントを追加していきます。
条件は「BallのY座標が800を超えたら」とします。
なぜ800なのかというと、ゲーム解像度の高さが800だからです。
つまりY座標800以上は画面外ということになります。
次にアクションですが、先に画面外に出たBallを削除しましょう。
Blockを削除した手順と同じようにBallを削除するアクションを追加します。
つぎに、Ballを生成します。
「どこに生成するか？」と生成する座標を求められます。
今回はPaddleのX座標とY座標を基準に生成しましょう。
式アイコンを押して
オブジェクト > 位置 > X座標 > Paddle > 適用
オブジェクト > 位置 > X座標 > Paddle > 適用
これでオブジェクトを生成するX座標にPaddleのX座標が適用されました。
Y座標も同様に入力してから「-20」を付け加えます。
「PaddleのY座標から-20の位置（すこし上）」に設定されました。
ここでプレビューしてみましょう。
生成されたBallが動きませんね。
Ballに動きを加えていないからです。
「シーンが始まった」にある
Ballを300ピクセル/秒の速度でずっと移動する(角度：-45+RandomInRange(-5,5)度)
これをコピーして、Ball生成アクションのすぐ下にペーストしましょう。
24:基本形の完成
これでブロック崩しの基本形は完成しました。
応用としてライフポイントの設定や、ゲームオーバー、ゲームクリア、スコア、効果音などよりゲーム性を高める要素を追加してもいいでしょう。
おわりに
ブロック崩しの製作はどうでしたか？
ブロック崩しはゲーム製作の入門として扱われることが多いですが
GDでは「GDevelopってなに？」でご紹介したようにプラットフォームビヘイビアが用意されているので、ブロック崩しよりプラットフォームアクションゲームを作るほうがはるかに簡単です。
他にもさまざまなビヘイビアが用意されているので、いろんなゲームを作ってみましょう🙆
今回使用した画像やプロジェクトファイルをzipにまとめましたので、ダウンロードしてご自由にご利用ください。
今回のチュートリアルで製作したブロック崩しにすこし手を加えたものをLiluoに投稿しましたので、もしよろしければご参考になさってくださいませ🙇
最後までお読みいただきありがとうございました🙋
cratier-gd.blogspot.com
cratier-gd.blogspot.com
投稿
0 件のコメント:
コメントを投稿