UDN
Search public documentation:
CLIKIconScrollListJP
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
中国翻译
한국어
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
スクロールリストでアイコンを表示する方法
概要
CLIK スクロールリストおよびドロップダウンリストにテキストとアイコンを表示するにはどうしたらよいでしょうか。このチュートリアルでは、Menu クラスがすでに機能し、CLIK スクロールリストがその中にあることが想定されています。 まず、カスタムの ListItemRender を作成する必要があります。ListItemRender (gfx.controls.ListItemRenderer) は、CLIK Button クラスから派生します。これを拡張して、コンテナコンポーネントに有用なリスト関連のプロパティを含むようにします。換言すれば、ListItemRenderer とは、基本的にリストダウンおよびドロップダウンで各種オプションを表示するためにスクロールリストおよびドロップダウンによって使用されるボタンです。このコンポーネントを変更するということは、どのようなオプションをどのように表示するかを編集するということになります。
カスタムの ListItemRenderer ActionScript クラスを作成する
オリジナルの ListItemRenderer を編集するよりも、クラスを「拡張」する方が合理的です。そのためには、改変したコードをともなった新たなバージョンを作成します。以下は、新たな ListItemRenderer のための ActionScript による完全なコードです。
import gfx.controls.ListItemRenderer; import gfx.controls.UILoader; class gfx.controls.MyListItemRenderer extends ListItemRenderer { public var textField:TextField; public var imageLoader:UILoader; public function MyListItemRenderer() { super(); } public function setData(data:Object):Void { this.data = data; textField.text = data ? data.label : ""; imageLoader.source = data ? data.iconimage : ""; } private function updateAfterStateChange():Void { textField.text = data ? data.label : ""; imageLoader.source = data ? data.iconimage : ""; } }
カスタムの ListItemRenderer FLA ファイルを作成する
これで、新たな ListItemRenderer クラスのバックエンドが作成されたので、次に、フロントエンド (すなわち、ビジュアル上の表現) が必要となります。最も簡単なやり方は、既存の ListItemRenderer Flash ファイルを編集して新たなファイルとして保存することです。
- C:\UDK\UDK-2011-09\Development\Flash\CLIK\components\ListItemRenderer.FLA を開きます。
- 新たな名前でこのファイルを保存します (Save As)。 - MyListItemRenderer.FLA と名付けます。
- C:\UDK\UDK-2011-09\Development\Flash\CLIK\components\UILoader.FLA を開きます。
- [Library] パネルに進み、[UILoader] を右クリックします。
- [Copy] を選択します。
- MyListItemRenderer.FLA に戻ります。
- [Library] パネルに進み、余白スペースで右クリックします。
- [Paste] を選択して、UILoader をライブラリにペーストします。
- [Library] パネルで ListItemRenderer を右クリックして、[Properties] を選択します。
- Name を MyListItemRenderer に変更します。
- Identifier を MyListItemRenderer に変更します。
- Class を gfx.controls.MyListItemRenderer に変更します。
- [OK] をクリックします。
- (再度) MyListItemRenderer を右クリックして、Component Definition (コンポーネント定義) を選択します。
- Class を Component Definition に変更します。
- [OK] をクリックします。
- ステージ上で MyListItemRenderer コンポーネントをダブルクリックして、タイムラインを入力します。
- アイテムレイヤー上方に新たなレイヤーを追加して、icon と名付けます。
- この icon レイヤーを選択します。
- [Library] パネルの UILoader をステージにドラッグアンドドロップし、お好みに合わせて配置およびスケーリングします。
- UILoader コンポーネントに imageLoader というインスタンス名を付けます。
- このファイル (MyListItemRenderer) を保存およびパブリッシュします。
- 次に、スクロールリストとドロップダウンが含まれている Menu ファイルを開きます。
- MyListItemRenderer ライブラリから MyListItemRenderer を Menu ファイルのライブラリにコピーします。
- スクロールリストとドロップダウン CLIK コンポーネントを選択します (ステージ上で)。
- Component Parameters (コンポーネントパラメータ) を開き、itemRenderer フィールドを MyListItemRenderer にセットします。
- このファイルを保存してパブリッシュします。
- ファイルを UDK に再インポートします。
スクロールリストを満たすために使用されるデータを含むコンフィギュレーション ファイルを作成する
スクロールリストにオプションを満たす方法はいくつかあります。一つには、各オプションを定義するコンフィギュレーション ファイルを使用するというやり方があります。 コンフィギュレーション ファイルを作成して、DefaultScaleformMenu.ini と名付けます。(C:\UDK\UDK-2011-09\UDKGame\Config\ に保存します)。
[Configuration] BasedOn=..\Engine\Config\BaseUI.ini [SFTutorial.SFMenu] +ListOptions=(OptionName="Option 1",OptionLabel="Tame",OptionDesc="Easy",OptionImage="img://MyIconPackage.icon1") +ListOptions=(OptionName="Option 2",OptionLabel="Wild",OptionDesc="Medium",OptionImage="img://MyIconPackage.icon2") +ListOptions=(OptionName="Option 3",OptionLabel="Crazy",OptionDesc="Hard",OptionImage="img://MyIconPackage.icon3") +ListOptions=(OptionName="Option 4",OptionLabel="Insane",OptionDesc="Very hard",OptionImage="img://MyIconPackage.icon4")

UnrealScript でスクロールリストをセットアップする
最後に、スクロールリストがスクリーン上に置かれた時にそのリストを満たす UnrealScript を追加する必要があります。まず、上記で作成したコンフィギュレーション ファイルから Menu クラスが引き出せるようにします。
class SFMenu extends GFxMoviePlayer config(ScaleformMenu);
struct Option { var string OptionName; var string OptionLabel; var string OptionDesc; var string OptionImage; };
var config array<Option> ListOptions;
var GFxClikWidget ScrollingList;
event bool WidgetInitialized(name WidgetName, name WidgetPath, GFxObject Widget) { switch(WidgetName) { case ('sl'): // this assumes your Scrolling List has an instance name of 'sl' in Flash. ScrollingList = GFxClikWidget(Widget); SetUpDataProvider(ScrollingList); break; default: break; } return true; }
function SetUpDataProvider(GFxClikWidget Widget) { local byte i; local GFxObject DataProvider; local GFxObject TempObj; DataProvider = CreateArray(); switch(Widget) { case (ScrollingList): for (i = 0; i < ListOptions.Length; i++) { TempObj = CreateObject("Object"); TempObj.SetString("name", ListOptions[i].OptionName); TempObj.SetString("label", ListOptions[i].OptionLabel); // this will be displayed in the list TempObj.SetString("desc", ListOptions[i].OptionDesc); TempObj.SetString("iconimage", ListOptions[i].OptionImage); DataProvider.SetElementObject(i, TempObj); } Widget.SetFloat("rowCount", ListOptions.Length); // you must specify the row count of scrolling lists manually break; default: break; } Widget.SetObject("dataProvider", DataProvider); }
defaultproperties { WidgetBindings.Add((WidgetName="sl",WidgetClass=class'GFxClikWidget')) // this assumes your Scrolling List has an instance name of 'sl' in Flash. }