UDN
Search public documentation:

CLIKIconScrollListKR
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 > 스크롤 리스트에 아이콘 표시하는 법

스크롤 리스트에 아이콘 표시하는 법


문서 변경내역: James Tan 작성. 홍성진 번역.

개요


CLIK 스크롤 리스트와 드롭다운에 텍스트와 아이콘을 표시하려면? 이 튜토리얼은 이미 CLIK 스크롤 리스트가 들어있는 Menu 클래스가 있다고 간주하고 진행하겠습니다.

먼저 해 줘야 할 작업은 ListItemRenderer 를 만드는 것입니다. ListItemRenderer (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 플래시 파일을 수정하여 새로운 파일로 저장하는 것입니다.

  • 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 를 엽니다.
  • 라이브러리 패널로 가서 UILoader 에 우클릭합니다.
  • Copy 를 선택합니다.
  • MyListItemRenderer.FLA 로 돌아옵니다.
  • 라이브러리 패널로 가서 빈 공간에 우클릭합니다.
  • Paste 를 선택하여 UILoader 를 라이브러리에 붙여넣습니다.
  • 라이브러리 패널의 ListItemRenderer 에 우클릭하고 Properties 를 선택합니다.
  • Name 을 MyListItemRenderer 로 바꿉니다.
  • Identifier 를 MyListItemRenderer 로 바꿉니다.
  • Class 를 gfx.controls.MyListItemRenderer 로 바꿉니다.
  • OK 를 누릅니다.
  • MyListItemRenderer 에 (다시) 우클릭한 다음 Component Definition 을 선택합니다.
  • Class 를 gfx.controls.MyListItemRenderer 로 바꿉니다.
  • OK 를 누릅니다..
  • 타임라인 입력을 위해 스테이지의 MyListItemRenderer 컴포넌트를 더블클릭합니다.
  • 아이템 레이어 위에 새로운 레이어를 추가하고 이름을 'icon' 이라 합니다.
  • 아이콘 레이어를 선택합니다.
  • 라이브러리 패널의 UILoader 를 잡아다가 스테이지에 떨구고, 원하는 대로 위치와 스케일을 맞춥니다.
  • UILoader 컴포넌트에 인스턴스 이름을 'imageLoader' 라고 줍니다.
  • 이 파일(MyListItemRenderer)을 저장하고 퍼블리시합니다.
  • 이제 스크롤 리스트와 드롭다운이 들어있는 메뉴 파일을 엽니다.
  • MyListItemRenderer 라이브러리에서 MyListItemRenderer 를 복사하여 메뉴 파일의 라이브러리에 넣습니다.
  • (스테이지에 있는) 스크롤 리스트와 드롭다운 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 의 OptionImage 부분에 넣은 것과 일치해야 합니다.

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;
};

다음, Scrolling List Options 배열을 만듭니다. 배열 이름은 각각의 줄 항목(ListOptions)에 대해 환경설정 파일에 사용된 이름과 일치해야 합니다. config 키워드 추가로 인해 배열은 환경설정 파일로 채워질 것입니다:

SFMenu.uc
var config array<Option> ListOptions;

Scrolling List CLIK Widget 을 선언합니다:

SFMenu.uc
var GFxClikWidget ScrollingList;

WidgetInitialized() 함수에서 스크롤 리스트더러 스스로 채우라 이릅니다:

SFMenu.uc
event bool WidgetInitialized(name WidgetName, name WidgetPath, GFxObject Widget)
{
  switch(WidgetName)
  {
    case ('sl'): // 스크롤 리스트가 플래시에 'sl' 이라는 이름의 인스턴스를 갖고 있다 가정합니다.
      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); // 이것이 리스트에 표시됩니다.
      TempObj.SetString("desc", ListOptions[i].OptionDesc);
      TempObj.SetString("iconimage", ListOptions[i].OptionImage);
      DataProvider.SetElementObject(i, TempObj);
    }

    Widget.SetFloat("rowCount", ListOptions.Length);   // 스크롤 리스트의 줄 수를 수동으로 지정해 줘야 합니다.
    break;

  default:
    break;
  }

  Widget.SetObject("dataProvider", DataProvider);
}

마지막으로 위젯을 바인딩합니다:

SFMenu.uc
defaultproperties
{
  WidgetBindings.Add((WidgetName="sl",WidgetClass=class'GFxClikWidget'))  // 스크롤 리스트가 플래시에 'sl' 이라는 이름의 인스턴스를 갖고 있다 가정합니다.
}

메뉴를 저장/컴파일하고 테스트합니다.