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

UE3 ホーム > ユーザーインターフェイスと HUD > 「Scaleform GFx」 > スクロールリストでアイコンを表示する方法

スクロールリストでアイコンを表示する方法

概要

CLIK スクロールリストおよびドロップダウンリストにテキストとアイコンを表示するにはどうしたらよいでしょうか。このチュートリアルでは、Menu クラスがすでに機能し、CLIK スクロールリストがその中にあることが想定されています。

まず、カスタムの ListItemRender を作成する必要があります。ListItemRender (gfx.controls.ListItemRenderer) は、CLIK Button クラスから派生します。これを拡張して、コンテナコンポーネントに有用なリスト関連のプロパティを含むようにします。換言すれば、ListItemRenderer とは、基本的にリストダウンおよびドロップダウンで各種オプションを表示するためにスクロールリストおよびドロップダウンによって使用されるボタンです。このコンポーネントを変更するということは、どのようなオプションをどのように表示するかを編集するということになります。

カスタムの ListItemRenderer ActionScript クラスを作成する

オリジナルの ListItemRenderer を編集するよりも、クラスを「拡張」する方が合理的です。そのためには、改変したコードをともなった新たなバージョンを作成します。以下は、新たな ListItemRenderer のための ActionScript による完全なコードです。

MyListItemRenderer.as 
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 : "";
  }
}

このクラスを C:\UDK\UDK-2011-09\Development\Flash\CLIK\gfx\controls\MyListItemRenderer.as として保存します。

カスタムの 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")

ここで、アイコンの画像が UDK パッケージに必ず存在していなければなりません。これらの画像へのパスは、上記に掲載されている各 ListOption のうちの OIptionImage 部に配置したものと一致している必要があります。

ALERT! 注意 : これらの画像は、PNG ファイルでなければなりません。

UnrealScript でスクロールリストをセットアップする

最後に、スクロールリストがスクリーン上に置かれた時にそのリストを満たす UnrealScript を追加する必要があります。まず、上記で作成したコンフィギュレーション ファイルから Menu クラスが引き出せるようにします。

SFMenu.uc 
class SFMenu extends GFxMoviePlayer
  config(ScaleformMenu);

次に、スクロールリストによって使用される Option データの構造体を作成します。各変数名が、コンフィギュレーション ファイルに含まれているオプションのプロパティと一致していることに注目してください。(OptionName、OptionLabel など)。

SFMenu.uc 
struct Option
{
    var string OptionName;
    var string OptionLabel;
    var string OptionDesc;
    var string OptionImage;
};

次に、スクロールリストのオプションの配列を作成します。配列の名前は、各行のアイテムのためにコンフィギュレーション ファイル内で使用されている名前と一致しなければなりません (ListOptions)。config キーワードを追加することによって、配列はコンフィギュレーションファイルによって満たされます。

SFMenu.uc 
var config array<Option> ListOptions;

スクロールリストの CLIK ウィジェットを宣言します。

SFMenu.uc 
var GFxClikWidget ScrollingList;

WidgetInitialized() 関数内でスクロールリストが自身を満たすように命じます。

SFMenu.uc 
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;
}

次は、リストを実際に満たす関数です。

SFMenu.uc 
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);
}

最後に、ウィジェットをバインドします。

SFMenu.uc 
defaultproperties
{
  WidgetBindings.Add((WidgetName="sl",WidgetClass=class'GFxClikWidget'))  // this assumes your Scrolling List has an instance name of 'sl' in Flash.
}

Menu を保存 / コンパイルし、テストします。