やっとゲーム本体に取り掛かりますよ！
まずは前回予告した通りスタート画面（タイトル画面と呼ぶことにします）とクリア画面を作っていきましょう。
一旦、最低限の必要経路を図にして書き出してみましょう。
クリア画面は色と文字を変えるだけで構造は同じでいいでしょう。一つ作ってから三つ複製するのが効率よさそうです。
ということはタイトル画面とクリア画面、合計二つ作ればOKですね。
この二種は画面（UI）と、その画面を出すためだけのステージ（レベル）を作ります。上の画像の（）に表記しているのが、レベルにつける名前ですね。
最初に決めておくと表記がバラバラになりにくいので後からラクです。
※今回から、スクショ元として「すでにゲームが完成しているデータ」を使っています。一緒に作っている方は説明にないものが出てきて困惑することもあると思いますが、必要なものはすべて文字にもしてあるのでご安心を。
さて前やった通りに（ファイル→新規レベル→Default→現在のレベルを保存）しまして、名前をつけましょう。まずは「Map_Title」。
そのレベルを開いたら、旗とゲームコントローラーが床の真ん中にありますね？これはゲーム開始時にこの場所にプレイヤーキャラクターが出てくるというものです。
これを
こうです。
何故こうするかを説明しますね。
このように、画面を出すためだけのステージと言っても、キャラクターはその画面の裏に存在しています。
元々設定されているキーによる移動もするので、操作によっては見えない裏でキャラクターが床から落ちてしまっているかもしれないんです！操作にはさほど影響はありませんが、なんだか嫌ですよね。
なのであのように物理的に囲んでしまい、落ちないようにしましょう。
そのレベルだけキーを無効にするとかもできるにはできそうですが……絶対こっちの方が簡単ですからね、今はこうしておきましょう。どうせ見えないんですし。
さてこれで画面（UI）を貼っても大丈夫になりました。
今度はUIを作っていきましょう。
「C_UI」というフォルダをpart0.5で作りましたね？その中に作成・保存します。
・コンテンツブラウザで「C_UI」を開く
・その中で右クリックし、「ユーザーインターフェイス」にカーソルを合わせる
・「ウィジェットブループリント」を押す
ファイル名を「UIWg_title」に変更しておきましょう。
※UIWg：ユーアイウィジェット。
これをダブルクリック。別ウィンドウでUI編集画面が開きます。
この編集画面は左上の「コンパイル」を押してから「保存」を押せば保存できるので、こまめにしておきましょう。
使うのは左上にある「パレット」というボックスを下にスクロールしたところにある「一般」という項目です。三角を押すと中身が表示されます。この中身を真ん中のグリッドの点線の中にドラッグアンドドロップすると配置できます。点線は大まかな画面サイズだと思ってください。
今回使うのは「Image」と「Text」です。今回は使いませんが「Button」もよく使いますね。
【Image】
一色塗りの四角や、取り込んだ画像を置くことができます。両方の方法を説明しましょう。
★一色塗り
・「アピアランス」の中の「Color and Opacity」の四角を押すと色を変えることができます
★画像
・一旦UI編集画面を開く前の通常画面に戻る
・入れたい画像のファイル名に日本語が含まれていないかを確認
・画像をコンテンツブラウザの「C_Mat」にドラッグアンドドロップ
・UI編集画面を開く
・「アピアランス」の中の「Image」の横の「なし」と書いた部分を押し、「ブラウザ」から先程入れた画像を選択
※この時、縦横比率は元画像から変わってしまうので、比率が正しくなるように「サイズX」と「サイズY」に数字を入力すること（16:9の画像ならX192:Y108のように）
【Text】
文字を置くことができます。
・「コンテンツ」の「テキストブロック」と書いた場所に文字を入力すると反映されます。Shift+Enterで改行できます。
・「アピアランス」の中の「Color and Opacity」の四角を押すと色を変えることができます
・「アピアランス」の中の「Font」の「Size」を変えることで文字のサイズを変えることができます
・「スロット」の中の「Size To Content」を押すと。バウンディングボックスが文字の大きさになります
※うまく文章の入力や編集ができない場合は、別でメモ帳やWordを開き、そこで入力したものをコピペで張り付けるといいですよ！
というわけで、紹介した機能を使ってできたタイトル画面がこちらです。
……はい、他(illustrator)で作った画像を一枚貼っただけです。
この方がラクです！整列とかもできますし。これで済ませるために今回クリックが必要なボタンを使わずにキー入力だけで操作させるゲームにするんですから！
そう、今回のゲームはステージ移動などもキー入力で行います。なのでどのキーで移動できるかを画像の中に書いておくだけで、ボタンを用意しなくても大丈夫なんです。（実際に押したらステージ移動できるようにするのはまた次の回に）
ちなみに点線ぴったりではなくこんなに大きく置いているのには訳があります。
ゲームをプレイするモニターによって縦横比率が違うので、それ次第で奥が見えちゃうんですよ……。
それともう一つモニターの大きさ関連で大事なことがあります。どこを基準にした位置かです。
「スロット」に「アンカー」という項目がありますが、これはそのモノが置いてある位置がどこを基準にしているかです。言葉で説明すると難しいのですが……
極端な図で表すとこういうことです。
今回のタイトル画像は「画面中央」にアンカーを設定しています。この花のような形の白いのがそうです。
では同じようにして、クリア画面も作ってしまいましょう。
ファイル名は「Map_red」で。
このようなデザインにしました。タイトル画面へ戻るキーと、ゲームステージに戻るキーがわかるようにしておきましょう。
こっちは画像一枚ではなくImageやTextも使っています。そう言った場合は左下にある「階層」に注意です。うっかり非表示にしていたり、順番が違ったりしないように。
下にあるほど手前側ですよ。
今回は少し長くなりますが、このUIWgを画面に表示させる方法も説明しましょう。
・そのUIWgを表示させたいレベル（マップ）を開く
・ビューポート上の帯の「ブループリント」を押し、「レベルブループリントを開く」を押す
これでBPの「イベントグラフ」が開きます。イベントグラフとは、これをこうしたらこれが起こるよというのを組み合わせていく画面です。
今回は「このレベルが開かれたら、指定されたUIWgを読み込んで、それを画面に表示する」というイベントを組みます。
それぞれ右クリックしたら出てくる検索窓に名前を入れれば出てきます。
「イベントBiginPlay（このレベルが開かれたら）」
もともとあるノード（この四角いののこと）です。
「ウィジェットを作成（指定されたUIWgを読み込んで）」
これの「class」を押して、表示したいUIWgを選びましょう。
「Add to Viewport（それを画面に表示する）」
ここまでできたら、画像の通りに繋ぎましょう。ドラッグすれば出てきます。
コンパイルして保存して、画面を閉じたらプレイです。
表示されましたね！
では今回はここまで！
次回はゲームのメイン、ゲームステージを作っていきましょう！各レベル同士をつなぎ合わせるのは、その後です。
コメント