![見出し画像](https://assets.st-note.com/production/uploads/images/125972870/rectangle_large_type_2_4c47edc510a4573e8cf7e4caf25b1059.png?width=1200)
[#10]GB Studio ゲーム制作ログ|タイトル画面に隠しアクター置いてみた
はじめに
前回は特定のスプライトに衝突した時に画面を揺らすイベントを作成しました。
▼前回の記事はこちら。
#8~#9の2回でイベントに少し触れてわかったことは、フローを考えて作っていく中で、実装できる部分とできない部分の切り分けが大事だということ。
また、GB Studioの全体言語設定を日本語にしていましたが、イベントを作る時は検索しにくかったり、変な日本語になりかなり不便を感じました。
なので、一旦言語設定は英語に戻しました。
今回はタイトルスクリーンをいつも通り四苦八苦しながら作ったので、その記録です。
タイトル画面の背景を作る
Asepriteで、160px x 144px(最小サイズ)の背景画像を作ります。
ゲームを始める時に、「New Game」か「Load」かを選択してもらいたいので、背景画像に選択用の文字も入れてしまうことにしました。
▼できたのがこちら
![](https://assets.st-note.com/img/1703830506479-hOAYW23WYK.png?width=1200)
ロゴシーンの時と同じように、自分のアナログ作品をドット化して入れ込んでみました。
▼使用したアクリル画
![](https://assets.st-note.com/img/1703830959263-tIRiSdQ7xm.jpg?width=1200)
![](https://assets.st-note.com/img/1703831039514-BpowRr7tCF.png?width=1200)
(イベントなどでたまに販売してます)
今回はAsepriteでレイヤーを使って、背景、惑星、文字と分けてみました。
こうして分けておくと、後々編集する時やgif化するときに便利だと思います。
作った背景画像のユニークタイル数も確認しました。
![](https://assets.st-note.com/img/1703832017718-vw4Xcvh9jH.png?width=1200)
GBStudioに入れて設定する
①作成した背景画像をpngで保存し、サンプルゲームの/assets/backgroungsに格納します。
②「+」ボタンから「Scene」を選択し、タイトル画面用のシーンを作成します。
![](https://assets.st-note.com/img/1703832134830-HcwFmx2ikb.png)
③シーンの名前は適当に「Titlescreen_test」としました。背景(Background)を先ほど作った画像に変更。
![](https://assets.st-note.com/img/1703832209184-4so8camaqx.png?width=1200)
④ロゴシーンからタイトルシーンへ移行するようにします。
・ロゴシーンからサンプルタイトル画面に伸びている青い線を移動させます。
・もしくは、ロゴシーンのイベント「Change Scene to ***」からSceneを先ほど作成したタイトルシーンへ変更します。
![](https://assets.st-note.com/production/uploads/images/125954475/picture_pc_3f831c1b7165f156e8c9df087b8c6bdb.gif)
![](https://assets.st-note.com/img/1703832543468-XzYFmopPNh.png)
これで、ロゴシーン→タイトルシーンへの移行ができるようになりました。
イベントの設定をする
フローを決める
![](https://assets.st-note.com/img/1703836544330-M3fD7aL94S.png?width=1200)
タイトル選択画面の設定
サンプルゲームでは、ダイアログを表示させて選択肢を選ばせる方法を使っていました。⇩
![](https://assets.st-note.com/production/uploads/images/125963141/picture_pc_e72ccc52926acc99331e752950e50629.gif)
サンプルの真似をしてもよかったんですが、この会話っぽい感じではなく、もっとスタイリッシュにできないかなあと思って色々考えた結果、矢印だけ動かして、New GameかLoadかを選択する方式にしたいなと思いました。
▼イメージ。ダイアログを出さずに矢印だけ動かしたい。
![](https://assets.st-note.com/img/1703838106682-Bx0A5Jp1FZ.png)
これを実現しようとして、めちゃくちゃ調べた結果、完成したので記載していきます。
①ブロックでスプライトを動かせる範囲を制限する。
矢印で移動させたいのは「New Game」と「Load」の左側の一部分だけなので、その周りを赤いブロックで囲みます。
そして、青いマークをNew Gameの横にセットします。
![](https://assets.st-note.com/img/1703840885335-dgJCpM6NrG.png?width=1200)
範囲をこれ以上狭めたら、ビルドした時に赤い枠の外側に放り出される事件が起きたので、ここまで広げています。正規のやり方ではなさそうですが、一旦放置します。
②選択用の矢印スプライトを作って、Titlescreenのプレイヤースプライトに設定します。
このシーンでは、この矢印をプレイヤーとして扱うようにした。
![](https://assets.st-note.com/img/1703841068445-798296GpU9.png?width=1200)
イベントを作る
まずはNew Gameから。
①NewGameの横(少しずれていますが、きっちり横並びにすると当たり判定なのかLoadの方が読み込まれたりしたので、この配置になっています)に「アクター」を追加。
![](https://assets.st-note.com/img/1703841278336-d8H9K7Sz4J.png?width=1200)
スプライトは「透明色のみ」のスプライトを作成して、配置しました。要は、ゴーストみたいに見えないけど存在しているようにした。
![](https://assets.st-note.com/img/1703841338214-r9E1gWarvA.png?width=1200)
②New Gameの時は、決定ボタンで「Space battle」シーンへ移動して欲しいので、「On Interact」タブで「Change Scene To Space Battle」を設定し、適当な位置にワープさせるようにイベントを追加。
Loadのイベントを作る。
①同じように透明アクターを配置。
②イベントは同じく「On Interact」タブで「If Game Data Saved」を選択。
もしセーブデータがあった場合(True)、ゲームデータをロードする。
それ以外(Else)の場合は、「No saved data found…」と表示させる。
![](https://assets.st-note.com/img/1703841729697-ImMYwibZk6.png?width=1200)
ビルドしてみる
①NewGameパターン
![](https://assets.st-note.com/production/uploads/images/125970194/picture_pc_9565efb4b1b83b3818d165485c939b2c.gif)
②Loadパターン(データなし)
![](https://assets.st-note.com/production/uploads/images/125970263/picture_pc_d123d31c2dd541b0f240cfd4d542f3d2.gif?width=1200)
②-2 Loadパターン(データあり)
タイトル画面から前回作ったセーブポイントに移動するようにして、一度セーブデータを作ってもう一度ビルドしました。
![](https://assets.st-note.com/production/uploads/images/125971287/picture_pc_549db2eb6f043f2ba5393699132798eb.gif)
ちょっとサンプルと違うことをしただけで、かなり時間がかかってしまった気がするけど、なんとか想定通りの動きをしてくれました。
フロー振り返り
![](https://assets.st-note.com/img/1703843484420-0rRsdRW5jM.png?width=1200)
おわりに
アクターを透明にするという発想は、どこかの記事でちらっとみたことがあった気がしたのを思いついてやってみました。インプットするだけの情報が多いけど、やっぱり実際アウトプットして実行してみると楽しいです。
ここまで読んでくれた方、ありがとう〜
よかったらリアクションしていってね🦈
それではまた。
▼次の記事はこちら。
この記事が参加している募集
この記事が気に入ったらサポートをしてみませんか?