UDN
Search public documentation:

ScaleformQuickStartJP
English Translation
中国翻译
한국어

Interested in the Unreal Engine?
Visit the Unreal Technology site.

Looking for jobs and company info?
Check out the Epic games site.

Questions about support via UDN?
Contact the UDN Staff

UE3 ホーム > ユーザーインターフェイスと HUD > 「Scaleform GFx」 > 「Scaleform GFx」のクイックスタート

「Scaleform GFx」のクイックスタート


概要


「Scaleform」で作成した初めてのメニューや HUD をセットアップして、「Unreal Engine 3」で起動させることは、大変な仕事のように思えます。しかし、そのプロセスはとても簡単でスムーズです。必要となるものは、「Adobe Flash Professional」 (またはそれと同等のもの) とその使用方法です (本ドキュメントでは、「Flash」 内の各要素をセットアップする方法について詳細には論じていません)。本ドキュメントの目的は、「Scaleform」または「Flash」そのものの使用方法について解説することではありません。「Scaleform」UI を準備して、「Unreal Engine 3」で起動させるのに必要となる重要ポイントの全てを解説することにあります。

本ドキュメントでは、下に示されているような単純なメニューの作成プロセスを解説します。このメニューは、プレイヤーが自身のプロファイル情報を入力することができるもので、その後ウェルカムメッセージを表示するために使われます。繰り返しになりますが、本ドキュメントのポイントは、「Scaleform」UI を「Unreal Engine 3」で起動させる方法について説明することです。

quickstart.jpg

シーンのセットアップ


シーンはすべて「Flash」内でセットアップします。かなり扱いやすいインターフェイスを使用して、要素の配置、修正、アニメートを行うことができます。本ドキュメントでは、シーンの各要素を段階的にセットアップしていく方法については説明しませんが、シーンを構成する方法について概観します。提供されている Flash ファイル (下記よりダウンロード可) を使用して理解を深めることもできますし、提供されている情報を利用して独自のサンプルを作成することも可能です。一般的な「Scaleform GFx」の使用法 (特に CLIK コンポーネント) に関する詳細は、公式の 「Scaleform」のドキュメンテーション サイト をご覧ください。

サンプルファイル
UI_QuickStart - Part 1
UI_QuickStart - Part 2
UI_QuickStart - Part 3
UI_QuickStart - Part 4

シーンを構成しているものは、バックグラウンド画像、メッセージ表示用ラベル、データの入力 / 表示用フィールド、情報の保存およびメニューのクローズのためのボタン 2 個です。

quickstart_scene.jpg

アニメーション

バックグラウンド画像以外の各要素は、アニメートされているため、メニューが開かれると、オフスクリーンから入ってきます。もちろん、これは必須ということではありません。アニメーションの処理について例示するために行ったことに過ぎません。

インスタンス名

UnrealScript 内部でアクセスできるようにすべきオブジェクトは、 InstanceName (インスタンス名) をユニークなものにセットする必要があります。このことは非常に重要であり、覚えておかなければなりません。これによって、シーン内の要素を識別することができるとともに、そのオブジェクトへの参照を取得することができます。例では、あらゆる要素に InstanceName をセットしています。ただし、要素のすべてに後ほどアクセスする必要があるというわけではありません (特に、テキスト入力コンポーネントとともに表示される 3 つのラベル)。今回の目的では、これらの静的なラベルへのアクセスは必要としていません。ただし、メニュー内のテキストをローカライズする場合は、これらの要素にアクセスできるようにしなければなりません。

instance_name.jpg

enableInitCallback

UnrealScript に CLIK ウィジェットのことを通知するには、Flash 内の CLIK ウィジェット上で enableInitCallback プロパティを有効にする必要があります。UnrealScript 内でアクセスする必要があるウィジェットは、このプロパティを有効にすることによって、 WidgetInitialzed のコールバックを受け取るようにしなければなりません。このプロパティはデフォルトで有効になっていますが、UnrealScript に通知する必要がないオブジェクトについては、無効にしておかなければなりません。

カーソル

カーソルを「Scaleform」UI に表示するのは、非常に簡単です。カーソルのグラフィックを使用するシーンにムービークリップを追加し、さらに、ActionScript を追加します。この ActionScript は、更新毎にカーソルのムービークリップの位置をマウスの位置にセットするものです。

カーソルのムービークリップを作成するには、カーソルのグラフィックをステージにインポートし、それを MovieClip シンボルに変換します。さらに、これを Cursor (カーソル) という名のレイヤーに配置します。このレイヤーは、 Actions レイヤーのすぐ下にありますが、その他のレイヤーよりは上に位置しています。

次のように ActionScript を追加します。

  1. カーソルのムービークリップを選択し、 F9 ボタンを押して ActionScript エディタを開きます。
  2. 次のコードを追加します。

Cursor ActionScript

   onClipEvent(enterFrame)
   {
         _X = _root._xmouse;
         _y = _root._ymouse;
   }
   

画像

Flash 内部のシーンで使用する画像は、自動的にシーンとともにインポートされます。ただし、問題が生じないようにするために適切に設定する必要があります。

インポート用の画像を準備するには、次のようにします。

  1. [ Library ] (ライブラリ) パネルから画像を選択してから、右クリックし、[ Properties ] (プロパティ) を選択します。
    image_properties_menu.jpg
  2. [ Bitmap Properties ] (ビットマップ プロパティ) で、 Allow Smoothing (スムージングを有効にする) にチェックを入れ、 Compression (圧縮) を Lossless (PNG/GIF) (ロスなし) にセットします。
    image_properties.jpg
  3. advanced_button.jpg (高度) をクリックすることによって、高度なプロパティを表示します。
  4. [ Linkage ] (リンク) セクションで、 Export for ActionScript (ActionScript のためのエクスポート) を有効化するとともに、[ Identifier ] (識別子) フィールドで、画像名からファイルの拡張子 (ピリオドを含めて) を取り除きます。
    image_linkage.jpg
  5. ok_button.jpg ボタンをクリックすることによって、変更を保存します。
  6. 最後に、オリジナルのソース画像ファイルは、SWF ファイルと同じ名前のフォルダに置かれなければなりません (フォルダは、SWF ファイルと同じディレクトリとなります)。
    folder_images.jpg

シーンをインポートする


Flash 内でシーンをセットアップし終わったら、インゲームで使用できるようにするために、「Unreal」に送らなければなりません。まず、Flash 内部からシーンを .swf ファイルにパブリッシュします。これは、Scaleform Launcher を使用してシーンをプレビューすると自動的に行われますが、[ File ] メニューから手動でパブリッシュすることも可能です。それには、 File > Publish (パブリッシュ) を選択するか、 Shift + F12 を押します。

publish_menu.jpg

パブリッシュされた .swf ファイルは、 [GameName]\Flash ディレクトリの中に置かれなければなりません。このディレクトリは、「Unreal」においてこの .swf をインポートすべきパッケージの名前をもつフォルダ内に置かれなければなりません。このフォルダは、.swf がインポートされることになるパッケージに直接対応し、インポート時に変更することができません。オプションとして、このパッケージ フォルダ内にサブフォルダを置くことによって、パッケージ内のグループを表すことができます。

folder_package.jpg

パブリッシュされた .swf ファイルが確実に正しい場所に置かれるようにするには、実際の Flash ファイル (.fla) をまず望みの場所に保存することが最も簡単です。デフォルトでは、パブリッシュされたファイルがそれといっしょに保存されます。

シーンのパブリッシュが完了すると、「Unreal」にインポートすることができます。そのためには、 Unreal Editor 内の コンテンツ ブラウザ を使用するか、あるいは、 GFXIMPORT コマンドレット を使用します。この例では、コンテンツ ブラウザ (Content Browser) を使用してうまくインポートできます。

  1. Unreal Editor を開き、Content Browser に進み、 import_button.jpg ボタンをクリックします。
  2. ファイル ブラウザ上にあるファイルタイプフィルタを、 SWF Movie (.swf) に変更し、パブリッシュされた .swf ファイルの場所に進みます。
  3. ファイルを選択して、 open_button.jpg ボタンをクリックします。
  4. [ Import ] (インポート) ダイアログにおいて、 Package (パッケージ)、 Group (グループ)、 Name (名前) がすべて満たされ、グレー表示されます。
    import_dialog.jpg
    ここでは、デフォルトの設定でかまいせん。 ok_button.jpg ボタンをクリックすることによって、シーンをインポートします。
  5. インポートのプロセスが完了すると、SWF ファイルとそれに含まれている画像がすべて、Content Browser で表示されるようになります。
    import_success.jpg

シーンを接続する


以下にある UnrealScript のクラスは、「Scaleform」UI のサンプルを制御するものです。 GFxMoviePlayer クラスは、あらゆる「Scaleform」UI のための基本クラスです。このクラスは、 Movie プロパティを通じて、SWF ファイルと関連づけられており、イベントを受け取ったり、コマンドを渡したりすることができるとともに、関連づけられている UI 内部の要素にアクセスすることもできます。

始められたばかりの方は、新たな UnrealScript プロジェクトを追加する方法について、 カスタムの UnrealScript プロジェクト のページを参照してください。

基本的なプロセスは次のようになります。

  • ムービープレイヤーがムービーを開始します。- Start()
  • ムービープレイヤーが初期化されます。- Advance()
    • enableInitCallback が有効になっているすべての要素のために WidgetInitialized が呼び出されます。 *必要とされるウィジェットに参照が保存されます。- アクセスする必要があるシーン内のあらゆるオブジェクトの参照が保存される必要があります。
    • ボタンのクリックイベントのためにデリゲートがアサインされます。- ウィジェットのバインディング が利用されることによって、ボタンのために WidgetInitialized に渡されるウィジェットが、イベントリスナーを追加することができる GFxCLICKWidget となります。
  • ボタンがクリックされると、デリゲートが呼び出されます。
    • SaveButton - プレイヤーが入力した情報を使用してメッセージが変化します。
    • ExitButton - UI を閉じます。

UIScene_Profile.uc
class UIScene_Profile extends GFxMoviePlayer;

/** Reference to the label used to display the message on the UI */
var GFxObject MessageLabel;

/** Reference to the text field used to enter the player's name */
var GFxObject PlayerText;

/** Reference to the text field used to enter the player's title */
var GFxObject TitleText;

/** Reference to the text field used to enter the player's clan */
var GFxObject ClanText;

/** Reference to the button used to save the profile info - must add a widget binding since we expect a GFxCLIKWidget */
var GFxCLIKWidget SaveButton;

/** Reference to the button used to close the UI - must add a widget binding since we expect a GFxCLIKWidget */
var GFxCLIKWidget ExitButton;

// Called when the UI is opened to start the movie
function bool Start(optional bool StartPaused = false)
{
	// Start playing the movie
    Super.Start();

	// Initialize all objects in the movie
    Advance(0);

    return true;
}

// Callback automatically called for each object in the movie with enableInitCallback enabled
event bool WidgetInitialized(name WidgetName, name WidgetPath, GFxObject Widget)
{
    // Determine which widget is being initialized and handle it accordingly
    switch(Widgetname)
    {
        case 'messageLabel':
        	// Save reference to the label that displays the message to the player
            MessageLabel = Widget;
            break;
        case 'playerText':
        	// Save reference to the text field for the player's name
            PlayerText = Widget;
            break;
        case 'titleText':
        	// Save reference to the text field for the player's title
            TitleText = Widget;
            break;
        case 'clanText':
        	// Save reference to the text field for the player's clan
            ClanText = Widget;
            break;
        case 'saveButton':
        	// Save reference to the button that saves the profile info
		// the Widget is cast to a GFxCLIKWidget to allow for event listeners - see WidgetBindings
            SaveButton = GFxCLIKWidget(Widget);
            // Add a delegate for when this button is clicked
            SaveButton.AddEventListener('CLIK_click', SavePlayerData);
            break;
        case 'exitButton':
        	// Save reference to the button that closes the UI
		// the Widget is cast to a GFxCLIKWidget to allow for event listeners - see WidgetBindings
            ExitButton = GFxCLIKWidget(Widget);
            // Add a delegate for when this button is clicked
            ExitButton.AddEventListener('CLIK_click', CloseMovie);
            break;
        default:
        	// Pass on if not a widget we are looking for
            return Super.WidgetInitialized(Widgetname, WidgetPath, Widget);
    }

    return false;
}

// Delegate added to change the message using the data entered
//In a real game situation, the data would be saved somewhere
function SavePlayerData(EventData data)
{
    // Only on left mouse button
    if(data.mouseIndex == 0)
    {
    	// Set the text property of the message label using the profile info entered
        MessageLabel.SetString("text", "Welcome,"@PlayerText.GetString("text")@"("$TitleText.GetString("text")@"in"@ClanText.GetString("text")$")");
    }
}

// Delegate added to close the movie
function CloseMovie(EventData data)
{
    // Only on left mouse button
    if(data.mouseIndex == 0)
    {
    	// Close the UI
        Close();
    }
}

defaultproperties
{
    // The imported SWF to use
	MovieInfo=SwfMovie'UDNHud.UI_QuickStart'

    // Set widget bindings so the Widget passed to
    // WidgetInitialized for the buttons is a GFxCLICKWidget
    WidgetBindings.Add((WidgetName="saveButton",WidgetClass=class'GFxCLIKWidget'))
    WidgetBindings.Add((WidgetName="exitButton",WidgetClass=class'GFxCLIKWidget'))

    // Set properties for the movie
    // TimingMode=TM_Real makes the menu run while the game is paused
    bDisplayWithHudOff=TRUE
    TimingMode=TM_Real
	bPauseGameWhileActive=TRUE
	bCaptureInput=true
}

シーンをテストする


そろそろゲーム内でシーンをテストして、期待どおりに機能するかどうか確かめてみましょう。テストはとても簡単です。必要となるものは、実行するマップと、マップがロードしたときにムービーを開く小規模な Kismet だけです。もちろん、いつどのように UI をロードするかは、その UI のタイプに完全に依存します。HUD であれば、UnrealScript を通じて操作され、常にロードされています。メインメニューは、この前に説明したように、マップがロードしたとき Kismet を通じて簡単にロードすることができます。インゲームのメニューは、どちらの方式でもロードすることができます。ただし、テストのためには、Kismet による方式がおそらく一番簡単でしょう。

Kismet で「Scaleform」のムービーを開くには次のようにします。

  1. Level Loaded (レベルのロード) イベント ( New Event > Level Loaded ) と、 Open GFx Movie (「GFx」ムービーを開く) アクション ( New Action > GFx UI > Open GFx Movie ) を追加します。
  2. Level Loaded イベントの Beginning of Level (レベルの開始) 出力を、Open GFx Movie アクションの In 入力に接続します。
  3. Content Browser 内で、インポートされた SWF を選択するとともに、Open GFx Movie アクションのプロパティ内で、 Movie プロパティのための use_selected_button.jpg ボタンをクリックすることによって、SWF をアサインします。
  4. Movie Player Class を、前のセクションのクラスにセットします。(この例では、 UIScene_Profile です)。これは、前のステップでアサインされたムービーを制御するクラスです。
  5. Take Focus (フォーカスをとる) プロパティと Capture Input (入力を取り込む) プロパティを有効にすることによって (HUD ではなくメニューであることが想定されています)、メニューがフォーカスされ入力が受け入れられるようにします。

完成された配置は次のようになります。

kismet_setup.jpg

これで、 pie_button.jpg ボタンを使用してマップを起動させると、「Scaleform」UI が表示されるはずです。

quickstart_load.jpg

カーソルはマウスの動きに合わせて動き、2 つのボタンは正しい動作を引き起こすはずです (すなわち、メッセージを変更し、UI を閉じます)。

quickstart.jpg