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