Scaleform のコンテンツガイド

概要

「Unreal Engine 3」におけ「Scaleform GFx」インテグレーション (統合) によって、Adobe Flash Professional で作成されたインターフェイスとメニューを HUD (ヘッドアップ ディスプレイ) として使用できるようになります。このドキュメントは、「Scaleform GFx」システムを使用するアーティストとレベルデザイナー向けの、コンテンツとデザインを中心としたガイドです。「Scaleform」と「Flash」を使用して UI を作成する方法についてだけではなく、「Unreal Engine 3」のレベル内で UI を使用する方法についても解説しています。

CLIK コンポーネントを使用する

「Scaleform」のリビルドされたコンポーネント群を活用するには、自身のシーンにそれらを追加する方法を知らなければなりません。これは難しいことではありませんが、注意すべきことがいくつかあります。

新たな CLIK オブジェクトをライブラリに追加する

新しい CLIK オブジェクトをライブラリに追加するには、2 つの方法があります。1 つは、プレビルドされたファイルからオブジェクトをコピーするというやり方です。もう 1 つは、GFx クラスをムービークリップに割り当てるものです。

メソッドのコピーアンドペースト

• 「Adobe Flash Professional CS4」内で、CLIK_Components.fla を開きます。これは、\UnrealEngine3\Development\Flash\CLIK\components の中にあります。
• ライブラリの中にあるオブジェクトから 1 つ選んで、ファイルの中にペーストします。
• [Component Inspector] (コンポーネント インスペクター) (Shift + F7) を開いて、ステージに導入した CLIK オブジェクトに関係するプロパティと値をビューします。

CLIK クラスを既存のムービークリップに割り当てる

あらゆる CLIK クラスをムービークリップに割り当てることができます。これが役立つのは、カスタムの機能を追加する場合やステート変化なしにシンプルなボタンを必要とする場合です。

• Library 内のムービークリップを右クリックし、[Properties] (プロパティ) を選択します。
• チェックボックスによって、Export for ActionScript (ActionScript のエクスポート) を有効にします。
• [class] 入力欄に、使用するクラスを入力します。( 例 : gfx.controls.Button)
• [OK] をクリックします。
• オブジェクトをもう一度右クリックしますが、今度は [Component Definition...] (コンポーネント定義…) を開きます。
• [class] 入力欄に、[Properties] (プロパティ) で割り当てたクラスと同じものを入力します。この例では、gfx.controls.Button です。
• [OK] をクリックします。

これで、ムービークリップが CLIK クラスを使用しているはずです。他の CLIK クラスと同じ機能をもちます。

フレームラベルを設定しなければ、up、over、down などのステートを受け取りません。これらを機能させるには、正しく設定する必要があります。この場合は、オブジェクトを CLIK_Components ファイルからコピーするほうがよいでしょう。カスタムのクラスをムービークリップに指定することができます。ただし、これは同じルールやガイドラインに従う必要がない場合です。(例 : 不可視なボタンの作成)。

CLIK オブジェクトの複製 (チェックリスト)

ライブラリ内にある複製されたコンポーネントは、クラスおよびコンポーネントクラスの情報を保持できません。また、リンケージ識別子に関して、自動命名の問題が生じます。

以下のクイックチェックリストは、複製後または最初の設定後に CLIK オブジェクトを確実に正しく設定するためのものです。

• CLIK クラスをプロパティで定義する必要があります。Export for Action Script (Action Script のエクスポート) にチェックを入れる必要があります。「Adobe Flash」内で複製を行った場合、これらのプロパティは、複製元のライブラリ オブジェクトからコピーされません。
• コンポーネントの定義も設定する必要があります。複製中は、この情報が複製元からコピーされません。
• 識別子が、必ずオブジェクト名と同じ名前になるようにしてください。

コンテンツのベストプラクティス

「Unreal Engine 3」における「Scaleform GFx」の統合を利用して Flash のコンテンツを開発する際に最善のパフォーマンスを得るためには、守るべき事項および実装しなければならない最適化が多数あります。この文書では、それらのベストプラクティスを多数解説しています。

「Scaleform」UI でコンテンツを使用する際に必要となる詳細な解説については、 Scaleform GFx のベストプラクティス のページを参照してください。

シーンのアーキテクチャ

「Gears of War」のシーンがレイアウトされる場合、通常、ブラーシステムの制約を直接受けます。バックグラウンドがなぜそのように設定されるのかという理由を手短に説明するならば、半透明のものにはブラーシステムが正しく機能しないからということになります。そのため、バックグラウンドは、シーンのコンテンツが (バックグラウンドではなく) ブラーされるように設定されるのです。シーンのバックグラウンドは通常半透明です。そのため、可能な場合は、バックグラウンドをブラーすることが避けられます。半透明なバックグラウンドがブラーされた場合、ブラーエフェクトが消えると、ひどいポッピングが生じます。これは、ブレンドモードが単一のフレーム上で、完全に透明な状態から部分的な状態に変化するためです。つまり、醜いものになります。そこで、この問題を回避するために、「Gears of War」のシーンがブラーされる場合 (例 : その上に他のシーンが表示される場合) は、チェーンに沿ってボディからブラーされます (バックグラウンドではなく)。このことをより分かりやすく説明したのが、下の画像です。「Gears of War」のシーンの階層がどのように設定されているかが示されています。これは最善の方法に思えます。

また、Bag Clip (上記で赤く描かれています) は非常に単純ではあるが、必要不可欠であることに留意してください。あるものをプログラムによってブラーさせる場合、「タイムラインが壊れる」ため、アニメーションがポップするか、予期しない状態に陥るということが問題となります。そこで、付加的なレイヤーを追加する (わたしたちはこのことを 「バッグ化」(bagging) と呼んでいます) ことによって、タイムライン上で決して直接アニメートされていないクリップのみがブラーされるようにします。このレベルの上下にあるクリップは、アニメートされますが、ブラーされている実際のレベルクリップ自体は決してアニメートされません。

ただし、このことは、重要な「落とし穴」的教訓です。タイムライン上でアニメートされているクリップにおいて、ブラーやアルファ、位置の変数を、少しでもコードを通じて変更するならば、予期したとおりには動作しなくなるのです! これは、わたしたちが開発において学んだ非常に厳しい教訓です。このような苦労は絶対にしないようにしてください! 疑わしい場合は、 バッグ化 してください!

「Scaleform」とともに Kismet を使用する

Kismet を使用して「Scaleform」 UI を開きインタラクトすると、デザイナーは、新たな段階の洗練性とインタラクティビティをレベルに加えることができるようになります。

Kismet でムービーを開く

Kismet からムービーを開くには、単に、新たな Open GFx Movie アクションを追加して ( [New Action ] > [GFx UI] > [Open GFx Movie] )、SWF を Movie プロパティにアサインするとともに、ムービーを所有していなければならないムービー プレイヤー クラスを Movie Player Class プロパティにアサインします。次のようになります。

ムービーを開くためのプレイヤーは、 Player Owner 変数リンクにリンクされなければなりません。

プロパティ

CaptureInput

これにチェックが入ると_CaptureKeys_ 配列にリストされているキーのための入力を、ムービーがデフォルトでキャプチャーします。

CaptureKeys

CaptureInput がチェックされている場合は、この配列にリストされているキーが「GFx」ムービーに送られます。

DisplayWithHUDOff

HUD が表示されていない場合であっても、このムービーが表示されます。(たいていの非 HUDuser インターフェイス ムービーに役立ちます。)

Movie

再生したいムービー (アセットとしてエンジンにインポートされた SWF ファイル) への参照です。

MoviePlayerClass

( 高度 ) このムービーのための機能をカプセル化した UnrealScript クラスで使用したいものがある場合は、このリストから選択します。それ以外は、 GFxMoviePlayer がデフォルトのオプションとなります。

RenderTexture

( 高度 ) このムービーをフルスクリーンにレンダリングせず、テクスチャ リソースにレンダリングすることによって、ワールドで使用できるようにするには、ここで指定します。何も指定されない場合は、ムービーはスクリーンにレンダリングされます。

StartPaused

これをチェックすると、ムービーはデフォルトで再生されなくなり、スクリプトによって手動で再生されます。

TakeFocus

これをチェックすると、「GFx」ムービーが開かれたときに、スクリーンのコントロール フォーカスを取ります。

Kismet でムービーを閉じる

Kismet を通じてムービーを閉じるには、 Close GFx Movie アクションを使用することができます。ただし、まず、閉じるべきムービーへの参照を Object 変数に保存しておく必要があります。この参照は、新たなムービーを開く際に、 Open GFx Movie アクションの Movie Player 変数リンクから取得されます。

プロパティ

Unload

これにチェックが入ると、ムービーが閉じられるとメモリからアンロードされます。

Kismet で ActionScript の関数を呼び出す

function myActionScriptMethod(MyString:String, MyBool:Boolean)
{
     // Do something interesting!
}

この ActionScript メソッドを Kismet から呼び出すには、 GFx Invoke ActionScript Kismet Action (Kismet ワークスペースで右クリック -> [Action] (アクション) -> [GFx UI] -> [GFx Invoke ActionScript] (GFx ActionScript の呼び出し) と進みます。[properties] (プロパティ) ウインドウ内の MethodName 変数の欄に、呼び出したい ActionScript のメソッド名を入力します。 これは 大文字・小文字を区別する ことに注意してください。したがって、キャピタライゼーション (大文字化) が ActionScript のものと異なる場合は、メソッドが機能しません。

メソッドにパラメータを渡すには、呼び出したい ActionScript 関数の引数ごとに、エントリを引数の配列に追加します。各エントリには、4 つの編集可能なフィールドがあります。

Type

スロットに、渡したいパラメータの型を指定します。これに関係する型は、AS_String (S)、 AS_Boolean (B)、AS_Number (N) です。

S

渡したい文字列データです。

B

渡したい bool 値データです。

N

渡したい数値データです。

上記の例では、 myActionScriptMethod に渡したいパラメータが 2 つあります。文字列と bool 値です。したがって、配列には 2 つのエントリが加わります。1 つは、型が AS_String にセットされたものです。もう 1 つは、型が AS_Boolean にセットされたものです。それぞれについて、対応するデータフィールドが満たされます。

Kismet で「GFx」からの ActionScript コールを受け取る

ActionScript は、FSCommand を使って Kismet でイベントをトリガーすることができます。これは、Kismet の他のイベントと同じように動作します。例 :

fscommand("myFSCommand");

このイベントを Kismet で使用するには、新しい FsCommand を作成します。それには、Kismet のワークスペースで右クリック -> [Event] (イベント) -> [GFx UI] -> [FsCommand] と進みます。次に、FsCommand を入力して、「GFx」ムービーを use (使用する) に設定します。

値の取得と設定

Kismet を通じて開かれた「Scaleform」ムービー内のオブジェクトに所属する変数の値は、 GFx GetVariable および GFx SetVariable アクションを使用して、アクセスおよびセットすることが可能です。

プロパティ

Variable

値を取得あるいはセットする変数の名前です。

「Scaleform」のフォント

「Scaleform」を使用する場合、フォントはやっかいな場合があります。これにはいくつか理由があります。1 つには、Flash が完全な文字セットにアクセスできるからです。すなわち、「GFx」プレイヤーではうまく機能するものの、「Unreal Engine 3」では機能しないことになります。「Unreal Engine 3」には使用されている文字が欠けているのです。

「Unreal Engine 3」で必要となる文字を常に確保しておくには、必要となるすべてのグリフが備わったマスターのテキストファイルを作成して、インポートする際にこれをワイルドカードとして使用します。こうすることによって、文字が欠けていることがわかった場合は、テキストファイルを更新し、コンテンツ ブラウザ内で右クリックして簡単にフォントを再インポートすることができます。

以下は、デフォルトのフォント (INT) として Epic が使用しているインポート テキストファイルの内容です。

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~
?????‘’“”??????!￠￡¨ca≪-R°23´1o≫?AAAAAAACEEEEIIIINOOOOOOUUUUsaaaaaaaceeeeiiiinoooooouuuuyY\§?…
A;a;C'c'C(c(D(d(E;e;E(e(L'l'??N'n'N(n(O"o"R(r(S's'??T(t(U*u*U"u"Z'z'Z.z.??
??????????????????????????????????????????????????????????????????
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~ ?????‘’“”??????!￠￡¨ca≪-R°23´1o≫?AAAAAAACEEEEIIIINOOOOOOUUUUsaaaaaaaceeeeiiiinoooooouuuuyY\§?…A;a;C'c'C(c(D(d(E;e;E(e(L'l'??N'n'N(n(O"o"R(r(S's'??T(t(U*u*U"u"Z'z'Z.z.?????????????????????????????????????????????????????????????????????A-a-A(a(??E-e-E(e(E.e.G(g(G,g,I-i-I;i;I.?K,k,L,l,L(l(N,n,O-o-O(o(??R'r'R,r,S's'S,s,T,t,U-u-U*u*U;u; S,s,T,t,
°
a

「Scaleform」を使用してフォントを扱う場合、通常、3 つのワークフローが可能です。

• UFonts: 「Unreal」のビットマップ フォントです。- 常に高速でレンダリングされます! 距離フィールドをサポートしています。(モノクロのみ。スケールアップには非常に適しますが、シャープコーナーを保存することができません)。RGBA ビットマップ (スケーリングがそれほどよくありません。フルカラーです)。
• 組み込みベクター フォント (fonts_en.swf、fonts_*.swf) - 高速にレンダリングされる場合があります。動的なフォント キャッシュによって、パフォーマンス上の問題が生じる可能性があります。効率的にアップデートされません。RGBA のサポートがありません。
• システム フォント - 組み込みのフォントと同じですが、OS からルックアップされます。完全なローカリゼーションに対応する必要がある PC ゲームに最適です。

最初の方式は、「Unreal Engine 3」のフォントを使用するためのフォント パスです。他 2 つは、「Scaleform」に固有な方式です。詳細については、「Scaleform」のドキュメンテーションを参照してください。

ゲームの Localization/GFxUI.int ファイルによって、フォントのシンボル名が、使用される実際のフォントにマッピングされます。その際、使用すると定められたフォント パスに応じて、次のルールのうち 1 つが適用されます。

• UFonts - UFont リソースへのパスです。例 : GearFonts.MyFont
• ベクターフォント - fonts_en.swf からエクスポートされたベクター フォントの名前です。例 : Arial、Bold
• システムフォント - TODO

たとえば、UDKGame のデフォルトは次のようになります。

[Fonts]
NormalFont=Bitstream Vera Sans
BoldFont=Bitstream Vera Sans,Bold
SmallFont=Bitstream Vera Sans
TitleFont=Bitstream Vera Sans,Bold

一般的なフォントのエラー

> Missing font "$NormalFont" in "_level0.PauseMenuSP.PartyPanelLoaderPanel.PartyPanel.PPListItem1.PlayerIcon.textField". Search log:
>    Searching for font: "$NormalFont"
>       Movie resource: "$NormalFont"  not found.
>       Imports       : "$NormalFont"  not found.
>                     : "../UI_Common/gfxfontlib.swf", "..\UI_Common\UI_Common_Assets.swf".
>       Exported      : "$NormalFont"  not found.
>       Searching GFxFontProvider: "$NormalFont"  not found.
>    Font not found.
> Error: Resource for font id = 12 is not found in text field id = 52, def text = 'OPTION'
> Error: Resource for font id = 12 is not found in text field id = 52, def text = 'OPTION'
> Error: Resource for font id = 12 is not found in text field id = 59, def text = 'textField'

まず何よりも、FLA を SWF にエクスポートする場合は、必ず、フォントをシステムにインストールしなければなりません! その後、依存関係をコンパイルしたことを確認します。Flash のファイルは、他の Flash ファイルに依存することができ、それらを用いてライブラリを作成することができます。したがって、他の Flash ファイルのシンボルを使用するシーンをテストする場合は、まず、それを発行する必要があります。「Gears of War」はそのようにしてフォントを共有しています。そのため、フォントのコピーは 1 つしか保存する必要がなく、メモリの節約になります。同様のシステムを用いる場合は、特定の順番で Flash ファイルをコンパイルする必要があります。

以下にその例をあげます。

• UI_Common/fonts_en.fla - 言語のためのフォントとグリフです。
• UI_Common/gfxfontlib.fla - フォント シンボル ($NormalFont, $LargeFont など) を定義するライブラリ SWF です。
• UI_Common/UI_Common_Assets.fla - 基本ウィジェットの、共有化された共通アセット ライブラリです。
• UI_FrontEnd/UI_CommonFrontEndAssets.fla - 共有化されたフォントエンドアセットです。

これを実行すると、これらファイルのすべてについて SWF ファイルができます。これらには、 $NormalFont シンボルや欠けている (missing) とエラー表示される他のシンボルなどが含まれています。

シーンのテストとデバッグ

「Scaleform」UI をデバッグするのはたいていの場合、容易な仕事ではありませんが、その過程で役に立つコマンドと設定がいくつかあります。

デバッグのために「GFx」のレンダリングを有効または無効にする

古い UI システムから新しい「GFx」UI システムへの移行期間では、古い UI を使用する人たちがいるなか、新しい UI が作成されているのであれば、「GFx」UI のレンダリングを無効にした方がよいでしょう。このために、デバッグ用の簡単なブーリアンを追加しました。これによって、「GFx」UI のレンダリングと入力の受付が無効になります。変更するには、ゲームの Engine.ini ファイルで、次のブール値を修整します。

[Engine.GameViewportClient]
bDebugNoGFxUI=false

TRUE の場合は、「GFx」UI はレンダリングされず、入力も受け付けません。

テスト用エンジン実行関数

デバッグ用関数がいくつか追加されたので、SWF ムービーをエンジンで見るとき、アーティストが楽になります。異なる指定をされない限り、これらの関数は、現在「GFx」によってレンダリングされている最上位のムービーに作用します。

• GFxGotoAndPlay Path FrameLabel - 指定されたムービークリップから指定されたフレームラベルまで飛んで、再生します。
• GFxGotoAndStop Path FrameLabel - 指定されたムービークリップから指定されたフレームラベルまで飛んで、停止します。
• GFxInvoke Path FunctionName - 指定されたパス上で FunctionName (関数名) を使って ActionScript 関数を呼び出します。
• GFxRestartMovie - レンダリングされている最上位のムービーの再生を再開します。

「Scaleform」のインポート パイプライン

SWF ファイルとそれに使用されるアセットを「Unreal」にインポートすることは、明らかに重要なことであり、「Scaleform」を使って UI を作成するプロセスにおいて必要なステップです。このプロセスによって、イメージは自動的にテクスチャとしてインポートされます。ただし、発行する前に Flash 内で適切にイメージが設定されている必要があります。また、SWF ファイルが他のムービーと依存関係があるか、リソースを共有している場合は、他にも注意しなければならないことがらがあります。

ムービーを設定して「Unreal Engine 3」にインポートする際に必要となる詳細については、 Scaleform GFx のインポート パイプライン のページを参照してください。