UIの作り方講座 自作メニュー編②メニュー画面のオブジェクトを作る

次に、メニュー画面を作っていきます。

作り方は前回の講座で説明したカーソル移動の作り方とほとんど同じです。 リンクの条件に[共通変数:menu = 1]を追加し、変数の値が一致するとき以外は動作しないように作ります。

アニメーションの登録

今回はこのような画像を使って説明します。

オブジェクトの設定

1[基本設定]をクリックし、「消滅後の復活条件」を「無し」に変更します。
2[移動とジャンプ]をクリックし、「重力の影響」を[0.00]に設定します。

アクションプログラムの作成

まずは、最初のカーソル移動から作ります。

1カーソル移動用のアクションを作成します。ここでは、[status][skill][item]の3つの空アクションを追加します。
2[status]→[skill]のリンクを追加します。
3「アクションを切り替える条件」に「すべての条件が満たされていたら切り替え」を選択します。
4条件に[↓を押された瞬間]、[スイッチ・変数が変化 共通変数:menu = 1]を設定します。

同じように、他のアクションもリンクでつなげていきます。

黒矢印 [↓を押された瞬間] and [スイッチ・変数が変化 共通変数:menu = 1]
白矢印 [↑を押された瞬間] and [スイッチ・変数が変化 共通変数:menu = 1]

続いて、キャンセルボタンを押されたら、メニュー画面を閉じるアクションを追加します。 具体的には、次の処理を実行させます。

  • OFFにしたレイヤーをONにする
  • 共通変数:menuの値を0にする
  • メニュー画面を非表示にする(非表示演出中のウェイトを入れる)
1アクションを追加します。ここでは、[close]とします。
※closeのモーションはstatusと同じもの、もしくは遷移前のモーションを引き継ぐにします。
2「その他の実行アクション」の[+]をクリックします。
3その他の実行アクションウィンドウがポップアップしますので[2]タブから「レイヤーの動作をON」にチェックを入れます。
4先ほど、メニュー画面を呼び出すオブジェクトで停止したレイヤーを選択します。ここでは、[4番目レイヤー]以外をONにします。
5[OK]ボタンをクリックします。

6「その他の実行アクション」の[+]をクリックします。
7その他の実行アクションウィンドウがポップアップしますので[2]タブから「スイッチ・変数を変更」にチェックを入れます。
8「変数を変更」にチェックを入れます。
9プルダウンをクリックし、[プロジェクト名 共通]をクリックします。
10┗プルダウンをクリックし、[menu]をクリックします。
11記号のプルダウンをクリックし、[=]をクリックします。
12定数に[0.00]を入力します。
13[OK]ボタンをクリックします。

14「その他の実行アクション」の[+]をクリックします。
15その他の実行アクションウィンドウがポップアップしますので[3]タブから「メニュー画面を非表示」にチェックを入れます。
16非表示の演出を設定します。
17[OK]ボタンをクリックします。
18必要に応じて、非表示の演出時間分のウェイトを追加します。

各メニュー項目と[close]アクションをリンクで繋ぎます。

[status]→[close]

この処理で、ボタンが押されたらメニュー画面が閉じるようになります。 今回は[CANCEL]ボタンが押されたら閉じるように作ります。

1[status]→[close]のリンクを追加します。
2「アクションを切り替える条件」に「すべての条件が満たされていたら切り替え」を選択します。
3条件に[CANCELを押された瞬間]、[スイッチ・変数が変化 共通変数:menu = 1]を設定します。

[skill][item]→[close]

同様に、リンクを追加します。

緑矢印 [CANCELを押された瞬間] and [スイッチ・変数が変化 共通変数:menu = 1]

※このような条件にすれば、CANCLEボタンかSTARTボタンが押されたらメニューが閉じるようになります。

[close]→[status]

このままだと、一度[close]になったらもう一度メニュー画面を開いても操作が出来ません。 共通変数menu = 1になったら[status]に遷移するようにリンクを繋げる必要があります。

1[close]→[status]のリンクを追加します。
2条件に[スイッチ・変数が変化 共通変数:menu = 1]を設定します。

これでメニューの土台が完成しました。

このオブジェクトを[menu scene]の[メニュー2]に貼り付けて実際に動作させてみましょう。変数が正常に動作しているか、[F1]キーでメニューを開きデバッグ機能の「共通変数とスイッチ情報」から確認できます。

※アクションが正常に実行されない場合
アクションを追加したのに実行されないケースがあります。不具合ではありますが、処理と処理の間に0.01秒のウェイトを挟むと正常に動作することがあります。動画のように、メニュー画面が表示されて、「画面が停止しない」、「メニューが動作しない」場合は、[メニュー画面を表示]のアクションの前にウェイトを入れてみましょう。

正常に動作すると、このようになります。

ここから先は、前回の講座内容を組み合わせて、メニュー画面を作っていきます。

作りたいゲームによって実現したい機能が異なるため、講座として全て紹介することは出来ません。 サンプルとして、ステータスの表示、ステータスアップの方法を紹介しますので、参考にしてみてください。