見出し画像

[#10]GB Studio ゲーム制作ログ|タイトル画面に隠しアクター置いてみた

はじめに

前回は特定のスプライトに衝突した時に画面を揺らすイベントを作成しました。
▼前回の記事はこちら。

#8~#9の2回でイベントに少し触れてわかったことは、フローを考えて作っていく中で、実装できる部分とできない部分の切り分けが大事だということ。
また、GB Studioの全体言語設定を日本語にしていましたが、イベントを作る時は検索しにくかったり、変な日本語になりかなり不便を感じました。
なので、一旦言語設定は英語に戻しました。

今回はタイトルスクリーンをいつも通り四苦八苦しながら作ったので、その記録です。

タイトル画面の背景を作る

Asepriteで、160px x 144px(最小サイズ)の背景画像を作ります。
ゲームを始める時に、「New Game」か「Load」かを選択してもらいたいので、背景画像に選択用の文字も入れてしまうことにしました。

▼できたのがこちら

レイヤーの使い方覚えてきた

ロゴシーンの時と同じように、自分のアナログ作品をドット化して入れ込んでみました。

▼使用したアクリル画

ブラックライトで発光する
ちなみにステッカー化もしてます
(イベントなどでたまに販売してます)

今回はAsepriteでレイヤーを使って、背景、惑星、文字と分けてみました。
こうして分けておくと、後々編集する時やgif化するときに便利だと思います。

作った背景画像のユニークタイル数も確認しました。

78個なので余裕でセーフでした!(シンプルなのでね)

GBStudioに入れて設定する

①作成した背景画像をpngで保存し、サンプルゲームの/assets/backgroungsに格納します。

②「+」ボタンから「Scene」を選択し、タイトル画面用のシーンを作成します。

今回から英語表記になりました。

③シーンの名前は適当に「Titlescreen_test」としました。背景(Background)を先ほど作った画像に変更。

かわいいかも

④ロゴシーンからタイトルシーンへ移行するようにします。
・ロゴシーンからサンプルタイトル画面に伸びている青い線を移動させます。
・もしくは、ロゴシーンのイベント「Change Scene to ***」からSceneを先ほど作成したタイトルシーンへ変更します。

青い丸を移動させる
サンプルロゴシーンのイベントの最後にあります

これで、ロゴシーン→タイトルシーンへの移行ができるようになりました。

イベントの設定をする

フローを決める

今回もシンプル。

タイトル選択画面の設定

サンプルゲームでは、ダイアログを表示させて選択肢を選ばせる方法を使っていました。⇩

会話ダイアログが出てきて選ぶ設定

サンプルの真似をしてもよかったんですが、この会話っぽい感じではなく、もっとスタイリッシュにできないかなあと思って色々考えた結果、矢印だけ動かして、New GameかLoadかを選択する方式にしたいなと思いました。

▼イメージ。ダイアログを出さずに矢印だけ動かしたい。

上下に矢印を動かして選択させたい。

これを実現しようとして、めちゃくちゃ調べた結果、完成したので記載していきます。

①ブロックでスプライトを動かせる範囲を制限する。
矢印で移動させたいのは「New Game」と「Load」の左側の一部分だけなので、その周りを赤いブロックで囲みます
そして、青いマークをNew Gameの横にセットします。

赤い範囲広いのは理由があって…

範囲をこれ以上狭めたら、ビルドした時に赤い枠の外側に放り出される事件が起きたので、ここまで広げています。正規のやり方ではなさそうですが、一旦放置します。

選択用の矢印スプライトを作って、Titlescreenのプレイヤースプライトに設定します。
このシーンでは、この矢印をプレイヤーとして扱うようにした。

なんとも稚拙な矢印ですね…笑

イベントを作る

まずはNew Gameから。

①NewGameの横(少しずれていますが、きっちり横並びにすると当たり判定なのかLoadの方が読み込まれたりしたので、この配置になっています)に「アクター」を追加。

上のピンク(アクター)の設定

スプライトは「透明色のみ」のスプライトを作成して、配置しました。要は、ゴーストみたいに見えないけど存在しているようにした。

透明色みの16px x 16px スプライト

②New Gameの時は、決定ボタンで「Space battle」シーンへ移動して欲しいので、「On Interact」タブ「Change Scene To Space Battle」を設定し、適当な位置にワープさせるようにイベントを追加。

Loadのイベントを作る。

①同じように透明アクターを配置。
②イベントは同じく「On Interact」タブ「If Game Data Saved」を選択。

  • もしセーブデータがあった場合(True)、ゲームデータをロードする。

  • それ以外(Else)の場合は、「No saved data found…」と表示させる。

ビルドしてみる

①NewGameパターン

一応ちゃんと移動しました。

②Loadパターン(データなし)

データがないよとちゃんと怒られました。

②-2 Loadパターン(データあり)

タイトル画面から前回作ったセーブポイントに移動するようにして、一度セーブデータを作ってもう一度ビルドしました。

セーブできてる(はず)

ちょっとサンプルと違うことをしただけで、かなり時間がかかってしまった気がするけど、なんとか想定通りの動きをしてくれました。

フロー振り返り

今回は❌なしでできました。

おわりに

アクターを透明にするという発想は、どこかの記事でちらっとみたことがあった気がしたのを思いついてやってみました。インプットするだけの情報が多いけど、やっぱり実際アウトプットして実行してみると楽しいです。

ここまで読んでくれた方、ありがとう〜
よかったらリアクションしていってね🦈

それではまた。

▼次の記事はこちら。

この記事が参加している募集

やってみた

この記事が気に入ったらサポートをしてみませんか?