#4：ゲーム制作初心者が「GB Studio」でゲームをつくる
シカダです。コーヒーはブラックで飲みます。
第4回は画像関連に焦点を当てつつ、実際のゲーム制作を進めます。
画像の種類
「GB Studio」ではざっくり分けると「スプライト」「背景」の2種類の画像が必要です。（UI周りも必要だったりしますが一旦割愛）
背景
字面通り、ゲーム画面の背景となる画像です。階層はassets/backgrounds。デフォルトだとプレースホルダーという名前の画像が入ってます。マス数は横20x縦18（※1マス＝16x16ピクセル）です。
あとはタイトル画面なども同じディレクトリで管理します。サンプルゲームだとロゴ表示画面もありますね。
前述のディレクトリに画像を突っ込んでおけば、背景画像リストに表示されます。あとは「ワールド」画面でシーンを選び、背景を選択するだけです。
右にあるボタンはパララックス（視差）を設定できるボタンで、単純なレイヤー分けやカメラ移動時にレイヤーごとに移動速度を変えたいときに使うようです。雲とか。
今回は「GATE」会場まで向かうゲームということで、スタート地点は地下鉄の駅にしてみました。まだ制作途中ですが、以下のような背景を設定しています。
とりあえずディテールは後々考えるとしましょう。実際の地下鉄の駅を歩いてみて、動線を考えたりしてみてもいいですね。
タイトル画面は未作成。ロゴは見出しにある通りです。
背景は「GB Studio」上でできることが少なく、左下の「Edit Image」で所定のアプリケーションが起動し、編集ができるくらいです。
スプライト
背景以外の画像類は大体ここに突っ込みます。階層はassets/sprites。
初期状態では矢印のアセットが入ってます。せがれいじりかな？
スプライトも背景と同じく、ディレクトリに画像を突っ込んでおけば「GB Studio」で使用することができます。
今回はプレイヤーキャラクターとして、「Fukuoka RTA Forum」のマスコットキャラクターを動かしてみます。まだお名前がありませんので、ここでは便宜的に「FRFちゃん」と呼びます。
-----ここからCM-----
「Fukuoka RTA Forum」ではマスコットキャラクターの名前を公募中！
君が名付け親になれるかも！？ 下記リンクから今すぐ応募！
https://docs.google.com/forms/d/e/1FAIpQLScxMD_l4lCFQFFEipTqNDPhaBrM9IBAvabpBVYO2gMrP0rsxg/viewform
-----ここまでCM-----
CMを挟んだので、もう一度スプライト画面を見ていきます。
下の緑背景は元画像。「GB Studio」では特定の色を透明として認識しますので、透明部分にしたい箇所は（デフォルトだと）この色にしておく必要があります。
下の方にちょっと見えているのがタイムラインです。プラスを押してコマを追加し、元画像の部分から適切なスプライトを選ぶことでアニメーションを作成できます。
ここはスプライトを入れたあとに気づいたのですが、上記フォーマットでスプライトを反映させると、なんと自動的にサイドバーのアニメーションが設定されていました。スゴイ。
待機状態と移動状態、それぞれのアニメーションが自動で作成されています。強い。ただいずれも「Left（左向きの状態）」が見当たりません。
ここで右のサイドバーを見てみます。
Canvas Size
そのまま。大きさが変わるオブジェクトはいじる必要がありそう。8px単位で大きくできるようです。小さくはできないみたい。
Collision Bounding Box
当たり判定。めちゃくちゃ重要。最初これの存在に気づかず、当たり判定ってどこで判断してるんだ？？ とめちゃくちゃ悩みました。
『アクションツクールMV』と同じように、当たり判定の位置と大きさを1px単位で調整できます。
ANIMATION SETTINGS
アニメーション設定。いろいろありますがトップダウン型だと
向き固定＋動かない（看板とか）
向き固定＋動く（ギミックとか）
四方向＋動かない（通せんぼしてる人とか）
四方向＋動く（うろうろ歩く人とか）
が設定できます。こちらもプレイヤーのスプライトっぽかったら自動で「四方向に向く＋四方向に動く」に設定してくれるみたいです。
その下のFlipウンチャラは、チェックを入れると「左向きのスプライトを右向きのスプライトを反転させて作成する」ということができます。だからLeftのアニメーションがなかったんですね。
こだわる場合は左向きのアニメーションを作っていいと思いますが、スリム化のためにも活用して良さそうです。
Auto Detect Animations
スプライトの形式を見て、自動的にアニメーション設定してくれます。試しにプレイヤーシートを「向き固定＋動かない」にしてから押してみると、プレイヤー向けの設定に自動で変えてくれました。優秀。
細かい部分までは見てませんが、これで画像周りの設定はだいたいOKだと思います。
シーンにスプライトを配置する
左上のリストで「ワールド」を選びます。プロジェクトを開いたときのデフォルトの状態で、ここでスプライトの配置やイベントの作成を行います。
何か追加する場合は、左上のプラスボタン。
アクターはNPCや看板など……要するに調べたり話しかけたりできるオブジェクト。「On Interact（決定ボタンを押したとき）」「On Init（そのシーンに入ってきたとき）」などの条件で振る舞いを変更できます。
3つ目の「On Update」はよくわかってないですが、公式ドキュメントを読む限り「画面に表示されている間に繰り返し呼び出され、スクリプトが終了すると繰り返す」とのことで、つまり自由に動き回るオブジェクトを作成できるみたいです。
トリガーは触れることで発生するイベント。スプライト不要です。マップの移動だったり、特定の場所に立つと発生するイベントに使えます。草むらに入るとオーキド博士に呼び止められるみたいな。
シーンは画面そのものです。トリガーを使うことでシーンとシーンの間を移動できます。サンプルゲームを開くとわかるのですが、「GB Studio」では作成したシーンがひとつの画面にまとめて表示されています。
シーン数が多いと大変そうですが、ミニマムなゲームならとてもやりやすいですね。
今回はひとまず「ロゴ画面」「最初のマップ」のシーンを作成しています。作成した背景も設定しました。
なんか▼のマークや赤いマスクレイヤー、たくさんのお姉さんが見えていますが、今回はここまで。
次回はアクターやトリガーの設定をしてみます。
それではまた。
小話
駅のマップのディテールはこんな感じで変わりました。
制作を進める中で微調整します。ドット絵の勉強も進めなければなりません。大変だ！
この記事が気に入ったらサポートをしてみませんか？