基本的なUIシーン作成

概要

重要：このページの内容はかなり古いです。現在のUDKではHUDやメニューシーンは scaleform で作成します。

原文
http://tutorial.toltecstudios.com/

テキスト

1、コンテンツブラウザーで新しいUISceneをどこかでつくることから始めてください。これから作成するUIシーンを保存するパッケージ(.upkファイル)を選んで右クリック→UISceneを選択してください。

2、適当な名前を付けてUIシーンを作成します。

3、緑枠内で右クリックしてウェジットを配置→ラベルでラベルを配置して、ラベルを好きな大きさ・形・位置に変えます。
(ラベルの位置はCtrlを押しながらクリックで変えられます。

4、ラベルを選択した状態で右メニューのプロパティを見てください。Data → DataSource → MarkupStringの部分を好きな文字と置き換えてみてください。
(ローカライズ向けな文章の作り方はローカライズを参照)

5、次にテキストの書式を変えて見ます。プロパティのComponents→StyleOverrideの所で変えたい項目にチェックすると色や大きさ等色々変えられます。

画像

1、緑枠内で右クリックして、今度はウェジットを配置→イメージを選んでください。あなたがイメージをテキストの上に置く時にイメージがテキストを覆ってしまう事に気づくと思います。テキストがイメージの上に表示される事を望むならばあなたはテキストにより高い優先度(プライオリティ)を与えなければなりません。

2、イメージを右クリックして ウェジットを並び替え - 下へ移動を選択してください。

3、次に画像を別のに取り替えてみます。イメージを選択して右メニューのプロパティを見てください。プロパティのConponents→ ImageComponent → StyleOverride → ImageRefに好きなテクスチャを入力してください。
(緑矢印を使うやり方をするとUDKエディタごと落ちるので、参照をクリップボードにコピーを使ってください)

ドッキング

次はドッキングについて学びます。
UIScene Editorの左上であなたはダウンメニュー見ることができます。これを若干の他の数に変えてください。そして、あなたのテキストとイメージに何が起こるかについて見てください。
特に640x480のような非常に低い解像度をためしてください。多分すべてのこれらの解像度上でそんなに素晴らしく見えるというわけでなく、あなたが作った物が非常に小さくない限りそれは低解像度でおそらく緑のフレームから出ます、それは悪い状態です。

あなたは、セットされた解像度とともにUISceneに正しいスケールに動かすようにエディターに指示する必要があります。

1、テキストかイメージを選んでください。そして、両側の中央で大きい4つのオレンジ点に気がついてください。これらは、若干の他の要素にその側を中継して、基本的にそれをロックすることができます。

2、オレンジ点のうちの1つを選んでください。そしてそれを引きずって、フレーム側の赤い点に接続してください。今回の例ではすべての上下左右すべての点を接続してください。

3、先ほどの手順で画像またはテキストを全てのスクリーンにカバーさせました。左上ドロップメニューで解像度を拡大・縮小して、テキストや画像が現在どのようにずっと正しくスケールリングをするか確かめてください。

4、次は画像が画面のすべてを覆うのではなく、一部に空白を持つ方法を学びます。先ほどの画像を右クリックしてドッキングエディタを開いてください。

5、この小さいエディタは、あなたに要素が一緒にロックされる方法のもう少し制御をします。

A。Left Sideは、青いフレームであるexampleUISceneにロックします。青いフレームにはあなたがGeneric BrowserでUISceneに伝えた名前があります。

B.私のLeft sideは、その青いフレームの左側にロックします。それで、この資産はそれが目標のどんな側につながらなければならないかについて確認します。通常あなたは同じ側をここで選びたいです。

C.これは測定としてピクセルを使っています。

D.ここでは、あなたはそれがそうでなければならないピクセルの数がその端からoffsettedしたことを入ることができます。128にここから入ると同時に、それは青いフレームから128ピクセルでイメージを相殺します。そして、間に空のスペースを作成します、..

しかしこれに注意してください。640x480の上での128Pixelsは、明らかに、いくらかの非常に高いでよりスクリーンで多くの全部の多くをカバーします。その理由のために、Pixelsを、ScreenのPercentageのような、される他の任意選択のうちの1つに変えることは、通常より良い考えです。

プロパティ

プロパティセクションに全てのUISceneの主要な特性を示させるために、空のスペースの上で右クリックしてください。そこでは、いくつかの面白いオプションは見つかります。

• Disable World Rendering　全てのスクリーンをカバーするUIScenesに便利。
• bDisplayCursor　マウスカーソルを表示する事。デフォルトではOnになっている。例えばカットシーンテキストの時はOffにした方がうよい。
• bPauseGameWhileActive　デフォルトでOnで、通常本当に望ましくありません。

UIScene編集の作業は以上で終わりです。UISceneエディタを閉じた後は.upkの保存を忘れずに行ってください←重要

Kismet

これが最後の項目になります。
UIシーンをゲームの中に表示させる為にシンプルなマップのKismetを組みます。

1、マップのKismetを開いてください。

2、新しいイベント - Level Startupと新しいアクション - UI - Open Scene と Close Sceneの両方を出してください。

3、 新しいアクション - Misc - Delayを出してください。

4、Open Scene と　 Close Scene のプロパティのSceneの部分に先ほど作成したUISceneを指定してください。(指定するやり方は、コンテンツブラウザでUIシーンを選択した状態で、プロパティの緑矢印を押してください)

5、Delay(待ち時間)を5秒に設定してください。

6、それぞれを画像の通りに接続してください。(画像は正常動作しない準備中の物です)

このKismetの流れを文章で表すと、マップの開始(Level Startup)によってUIシーンが開き(Open Scene)、UIシーンが開いてから待ち時間のカウントが始まり(Delay)、待ち時間が終わればUIシーンを閉じる(Close Scene)に指令が行きます。

トラブルシューティング

テストプレイ

すべてが完了したらマップを保存してからマップを走らせてみてください。自動的にUIシーンが立ち上がって自動的に閉じればすべて成功です。

コメント欄（誰でもコメントを残せます）

~~~~~