GDevelopで育成ゲームを作りたい＃3 UIの作成
【前回のあらすじ】
キャラクターを動かせるようになったぞ！やったあ！
.........…自分が作りたいゲームってなんだっけ？
架空の生物をペットとして育て飼い主という視点で交流はするものの、ペット自体を操作するものではなかったよな。
つまり、キャラクターがプレイヤーの意志とは関係なく、自発的に行動してないと生き物を育てている感が全くない！
というわけで前回は謎にキャラを操作することにこだわっていましたがちょっと考えます。
その他いろいろいじってる内に各ボタンUIがデケーな…と思ったので修正しました。
ゴチャゴチャするので水槽や左窓などは消してあります。
どうでしょう、結構スタイリッシュになったと思います。
パーツが小さくなった分、水槽を大きくできそうです。
でも、小さくするならトコトンやってしまいたいですよね。
操作性の高いUIを実現することが理想ではありますが、メインのゲーム画面だって見やすい方がいいはずです。
そこで、このメニューバーにひと手間加えようと考えました。
例えば、メニューバーの見出しだけが表示されていてそれを押すとメニューバー全体がシュッと飛び出すようなもの。（伝われ...…!!）
自分が考えるこのイメージを実現させようと思います。
まず初期位置は「メニュー」だけが飛び出ている状態。
上の画像は実は細い四角の線が実際のゲーム画面となっています。
なので、「メニュー」だけ画面内に入るように配置するとこのように
実際のゲーム画面ではメニューバーの主要な部分は隠れ、見出しの所だけが見えている状態であることがわかります。
では早速、このメニューバーが開いたり閉じたりするようにしてみましょう。
GDevelopでは、オブジェクトに動きを与えるなどする場合、イベントというところで設定します。
やりたいことは、メニューバーの座標を上や下にずらしたいだけなので、まずは現在のメニューバーY座標が知りたいですね。
そこで以下のようなイベントを追加しました。
”NewTextのテキストを変更する”
テキストの値は常にメニューバーの値を表示するようにします。
さっきの画面で、677という数字が出ていたのは現在地のメニューバーのY
座標の値だったというわけですね。
ではメニューバーが開くときこのY座標がどこまで動けばいいのか？
メニューバーを動かせばTextにその値が表示されるのですからメニューバーを開いたときの位置までもっていきます。
メニューバー全体が見える位置。
それはY座標が576に達した時というのが分かりますね。
つまり、メニューバーが677から576へ行ったり来たりすればメニューバーが開閉しているように見えるということです。
ではメニューバーが動くイベントを追加していきます。
メニューをクリックしたら開いて欲しいので条件1に「マウスの左クリックを離した直後」を指定しました。（２行目はひとまず無視してください…）
次に「メニューバーのY座標が576より大きい」という条件も付けました。
開くときも閉じるときも左クリックなので、それ以外の条件で閉じるのか、開くのかを判断させる必要があります。
やり方はいろいろあると思いますが、私はメニューバーの現在位置から閉じているか開いているかを判断し、閉じているなら開く、開いているなら閉じるようにしました。
メニューバーが閉じている状態ならY座標の値は677。
メニューバーが開いている状態ならY座標の値は576。
なら、Y座標が576より大きい場合、メニューバーは閉じていて677の位置にあるので開く必要がありますよね。
なのでその条件でメニューバーのY座標を576まで移動するというアクションを起こします。
イベントは画面左側に条件を書き、右側に動作を書きます。
移動の方法はフォースやTweenなどあるのですが、今回はTweenを使いました。
Tweenには多種多様な緩急パターンがあるので使い勝手がいいと思います。
数が多くて覚えきれないですが・・・（笑）
同様に閉じるイベントも追加しました。
開いているときのメニューバーY座標は576なので「メニューバーY座標が650より小さいとき」とはすなわちメニューバーが開いているときと言い換えられますね。
重大な問題
いやーできたできた。
メニューバーもいい感じに開閉するし満足だわー。
あとは各ボタンを押して別ページに飛べたらOKだな～。
ボタンに対応するそれぞれのシーンも作らないとな～。
（なんとなく「おしごと」ボタンポチ～）
メニューバー「ｻｯ…（隠れる）」
私「なん…だと…！？」
メニューバー「ボタンを”押す”とはすなわち、メニューバーである私自身も"押している"のだッ！！」
私「なッ、ナニぃ～～～～！！」
はい、というわけで問題発生です。
仮に「おしごと」ボタンを押すことで「おしごと」ボタンを押したときに発生するイベントと「メニューバー」を押したときのイベントが並行して実行されてしまうのです！
例えば、「おしごと」ボタンを押すことで「草引き」「清掃」「球拾い」という細分化されたコマンドが出るとします。
それと同時に「メニューバー」が持つイベント「開いているときにクリックすれば閉じる」が発動するので、上記のコマンドが出ているのにも関わらずメニューバーを閉じてしまって操作できない。
というようなことは容易に想像できます。
さあ、どうやって回避しましょう・・・？
私が考えた苦肉の策はこれです。
「メニュー」の当たり判定となる所に別のインスタンス（物体）を配置する
はい、ゲームプレイヤーからは「メニュー」を押しているように見えても実際はその裏に隠れたフラッグを押しているということになっています。
こうすれば、「メニュー」部分以外のメニューバーに触れてもそこはフラッグのない部分なので閉じてしまうといったようなことは起きません。
イベントにメニューバーフラグに対して支持を行っているのはこういう理由だったのです。
こんな「ごまかし」を繰り返すとゲームが重くなったり、変なバグが起きたりしそうなのであまりやりたくないですね。
真面目にやるのなら。メニューバーを開くボタンと、メニューバー本体はオブジェクトを分けるべきなのかなーとも思いました。
実際に、今回作ったメニューバーUIを掲載して今回は終わりとします。
前回、こんな初心者のnoteに初めてのコメントを頂き嬉しかったです。
ありがとうございました。
GDevelop、とても面白いツールで今回の挙動もイベントという形での入力でプログラム文は入力していません。
プログラムができなくてもなんとか形にはなるのでもっとたくさんの人に扱ってもらいたいツールだなあと思っています。
出来ないけど作ってみたい人、やってみたい人っていっぱいいると思うんです。ゲーム制作に関わらず、どんなことでも。
実際にやってみて挫折してしまったのなら仕方ないと思うのですが（実際に私もそう）こういう隠れたツールがある中でそれを知らずに諦めてしまうのはとても勿体ないことだと思うのでもっともっと広がってほしいというのが私の願いでもあります。
それでもっとノウハウとかみんなで培ってこういうの作るにはこうすればいけるぜ！的な情報が溢れてほしい。
と思うUvaでした。また次回お会いしましょう～！
この記事が気に入ったらサポートをしてみませんか？