UIの作り方講座 自作メニュー編①メニュー画面を呼び出すオブジェクト
今回は、自作メニューの作り方を紹介します。
多機能なメニュー画面を作ろうとすると、複雑に感じるかもしれません。一つ一つの動きは非常に単純ですので、最初に設計図を作ってから取り組むと分かりやすいです。
今回は、このようなメニュー画面を作っていきます。
メニュー画面は次の3種類のオブジェクトから構成されます。
- 1メニュー画面を呼び出すオブジェクト
- 2メニュー画面のオブジェクト
- 3変数やスイッチに合わせて画像を変更するオブジェクト
①は画面を停止して、メニュー画面を表示させるオブジェクトです。主に、次の実行アクションを使います。
- レイヤーを停止するアクション
- スイッチ・変数を指定するアクション
- メニュー画面を呼び出すアクション
- メニュー画面を呼び出す時間のウエィト
②は実際に表示するメニュー画面のオブジェクトです。前回の講座で紹介した、カーソルを移動させるアクションプログラムとほぼ同じものです。主に、次の実行アクションを使います。
- 変数・スイッチを変更するアクション
- メニュー画面を呼び出すアクション
- メニュー画面を終了するアクション
- レイヤーの停止を解除するアクション
③はカーソルの位置によってアイコンや文字、アニメーションなどが変わるオブジェクトです。主に、次の実行アクションを使います。
- テキストの表示
①のような機能は、メニューシーンにオブジェクトを配置するとプレイヤーの状況に関係なく処理ができて便利です。
メニューシーンについて
メニューシーン(menu scene)は[シーン]に最初からある特殊なシーンです。通常のシーン同様、オブジェクトを配置することができます。常にゲーム画面の一番前に表示され、画面がスクロールしても位置が変わりません。
[メニュー1]の横に[+]ボタンがあり、ここをクリックするとメニューシーンを追加できます。初期配置できるメニューシーンは1つのみですが、オブジェクトのアクションで複数のメニューを表示させることができます。
- 1初期表示メニューを設定したいシーンを右クリックし、[シーンの設定]をクリックします。
- 2「初期表示メニュー画面」のプルダウンをクリックすると、メニューシーンを選択できます。
ゲージやステージ名、コマンドなど、画面上にアイコンを表示したい場合や、ポーズ、時間制限、武器セレクトなどゲームシステムに関わるオブジェクトを貼り付ける時に使います。他にも、カットインやステージクリア演出などにも使えます。
①メニュー画面を呼び出すオブジェクト
スタートボタンなど、特定のボタンが押されたらメニュー画面を表示するオブジェクトを作ります。
メニュー画面を表示している間、他のオブジェクトが動かないように、他のシーンを停止させます。
事前準備として、メニューシーンにメニュー画面用のタブを追加します。
[メニュー1]の横に[+]ボタンがあり、ここをクリックするとメニューシーンを追加できます。初期配置できるメニューシーンは1つのみですが、オブジェクトのアクションで複数のメニューを表示させることができます。
- 1[シーン]をクリックします。
- 2中段の[シーン]をクリックします。
- 3[menu scene]をクリックします。
- 4[メニュー1]タブの右側にある[+]ボタンをクリックします。すると、[メニュー2]が追加されます。
メニュー1には、「①メニュー画面を呼び出すオブジェクト」を、メニュー2には、「②メニュー画面のオブジェクト」を配置することになります。
それでは、作り方を紹介します。
オブジェクトの設定
- 1[基本設定]をクリックし、「消滅後の復活条件」を「無し」に変更します。
- 2[移動とジャンプ]をクリックし、「重力の影響」を[0.00]に設定します。
アクションの作成
- 12つのアクションを追加します。ここでは、[wait][pose]とします。
- 2「モーション」を設定します。ここでは「設定しない」を選択します。
まずは、[pose]アクションにレイヤーを停止する実行アクションを追加します。
※シーンのレイヤー単位で動作をOFFにしますので、あらかじめプレイヤーや敵が存在しないレイヤーを準備しておきましょう。
- 3その他の条件の[+]をクリックすると、その他の条件設定ウィンドウがポップアップします。
- 4[2]タブをクリックし、「レイヤーの動作をOFF」にチェックを入れます。
- 5停止したいレイヤーを選択します。ここでは、[4番目レイヤー]を選択し、「選択レイヤー以外をOFF」にチェックを入れます。
- 6[OK]ボタンをクリックします。
続いて、[pose]アクションにメニュー画面用の変数を設定していきます。 この変数は、メニュー画面表示時に、他のメニュー画面に張り付けてあるオブジェクトを操作させない役割と、メニュー画面がアクティブでない状態での誤動作を防ぐ役割があります。 例えば、次のような感じで使います。
タイマー機能 | 「変数 menu ≠ 0」ならカウントを停止、「変数 menu = 0」ならカウントを再開する処理を追加する。 |
---|---|
L,Rボタンでキャラチェンジする機能 | リンクの条件にAND「変数 menu = 0」を追加し、メニュー画面が開いているときは遷移しないようにする。 |
- 1[素材]-[変数]から共通変数:menu = 0.00を追加する。
- 2[pose]アクションをクリックします。
- 3その他の実行アクションの[+]をクリックすると、その他の実行アクションウィンドウがポップアップします。
- 4[2]タブをクリックし、「スイッチ・変数を変更」にチェックを入れます。
- 5変数を変更をクリックします。
- 6プルダウンをクリックし、[プロジェクト名 共通]をクリックします。
- 7その下のプルダウンをクリックし、[menu]変数をクリックします。
- 8記号のプルダウンは[=]を選択します。
- 9定数をクリックし、[1.00]に設定します。
- 10[OK]ボタンをクリックします。
次に、メニュー画面を表示させます。
- 1[pose]アクションをクリックします。
- 2その他の実行アクションの[+]をクリックすると、その他の実行アクションウィンドウがポップアップします。
- 3[3]タブをクリックし、「メニュー画面を表示」にチェックを入れます。
- 4「表示するメニュー画面を選択」から先ほど事前に追加したメニュー画面用のシーンを選択します。ここでは[メニュー2]を選択します。
- 5演出やフェードインを設定し、[OK]ボタンをクリックします。
- 6必要に応じて演出時間分のウェイトを追加します。
※表示演出中に「メニューを非表示」のアクションが実行されると、初期メニューが消えてしまいます。誤作動防止のために、ウェイトが必要になります。
次に、リンクを作っていきます。
[wait]→[pose]こちらは、特定のボタンが押されたら、メニュー画面を表示するような条件を設定します。
- 1リンク元を右クリックし、[リンクを追加]をクリックします。
- 2矢印が伸びますので、リンク先をクリックします。
- 3「以下の入力操作がされた」にチェックを入れ、[+]ボタンをクリックします。
- 4「入力に使う操作キー」で、ポーズやメニュー用のボタンを選択します。
- ※デフォルトではSTARTボタンはございません。登録方法についてはこの後説明します。
- 5「入力方法」で、[押された瞬間]を選択します。
- 6[OK]ボタンをクリックします。
※ステージクリア演出など、特定の場面でメニューを表示させたくない場合は、[共通スイッチ:ポーズ禁止]のような変数を追加し、[wait]→[pose]の条件に[ポーズがOFF]を追加しましょう。後は、特定の場面で[共通変数:メニュー禁止をON]という実行アクションを追加すれば、簡単にセーブ禁止が作れます。
STARTボタンを入力操作の条件にしたい
操作キーは[設定(S)]-[操作キー管理(O)]から追加できます。
操作キーの一番下の[+]ボタンをクリックすると、[操作キー001]という名前の操作キーが追加されます。 後は、各ボックスをダブルクリックすれば、名称の変更やコントローラ入力・キー入力の設定ができます。
[pose]→[wait]
こちらは、メニュー画面が閉じたら遷移するようにします。メニュー画面が閉じているかの判断は共通変数:menu = 0で判断します。
- 1リンク元を右クリックし、[リンクを追加]をクリックします。
- 2矢印が伸びますので、リンク先をクリックします。
- 3その他の条件の[+]をクリックすると、その他の条件設定ウィンドウがポップアップします。
- 4[2]タブをクリックし、「スイッチ・変数が変化」にチェックを入れます。
- 5変数を条件に設定をクリックします。
- 6プルダウンをクリックし、[プロジェクト名 共通]をクリックします。
- 7その下のプルダウンをクリックし、[menu]変数をクリックします。
- 8記号のプルダウンをクリックし、[=]を選択します。
- 9定数をクリックし、[0.00]に設定します。
- 10[OK]ボタンをクリックします。
これで、メニュー画面を呼び出すオブジェクトの完成です。 こちらは、menu sceneの[メニュー1]に貼り付けます。