• Unity3D: NGUI Tutorial: Step 2

  • 유니티3D: NGUI 따라하기: 2단계

  • Now that our UI has been set up in the previous step, let’s add few widgets: NGUI menu -> Create a Widget.
  • 이전 단계에서 UI 를 셋업했습니다. 이제 몇개 위젯을 추가해보도록 합시다.
    NGUI 메뉴에서 Create a Widget 을 클릭합니다.
Image of 1299 article
  • This wizard lets you create some of the basic widgets. You will need to select the atlas you will want to use, as well as the font. Since you are in a brand-new project, clicking the buttons won’t have much of an effect as they only show you recently used elements. What you will want to do is Drag & Drop the atlas and font you wish to use into the fields beside the buttons. Let’s choose the SciFi Atlas for the atlas, and SciFi Font – Normal for the font.
  • 이 위자드는 몇가지 기본 위젯들을 생성하게 해줍니다. 아틀라스는 물론 폰트 선택도 필요합니다. 새로운 프로젝트이므로 버튼을 클릭해도 몇개 보여주는게 없습니다. 아트라스와 폰트를 필드에 드래그&드롭하면 사용이 가능합니다. Project 패널의 Atlases 에서 SciFi Atlas 와 SciFi Font - Normal 을 선택해보도록 합시다.
  • Next comes the Template field. Here you can select what type of widget you wish to create by choosing from a list of available templates. Note that I said “templates”, by the way — this wizard is merely here for your convenience that should help you get started. Once you get a hang of using NGUI, you will likely spend much more time copy/pasting entire widgets than using this wizard. But — I am getting ahead of myself. For now, let’s create your first widget!
  • 다음은 템플릿(Template) 필드입니다. 사용 가능한 템플릿 리스트에서 원하는 위젯을 하나 선택합니다. 참고로 저는 템플릿"들"이라고 말했습니다. - 위자드는 처음 시작하는 여러분을 도와주는 목적으로 사용됩니다. NGUI 오래 사용하다보면 이 위자드를 사용하기 보다는 위젯들을 통째로 복사/붙여넣는 방식으로 더 많이 사용하게 됩니다. 저부터가 그렇습니다 - 자, 이제 여러분의 첫번째 위젯을 만들었습니다!
  • - Assuming you’ve chosen the SciFi Atlas as noted above, select the “Dark” sprite.
  • - SciFi Atlas 를 선택했다고 가정해서 진해하도록 하겠습니다. Template 에서 Spite 를 고른 다음 , Sprite 에서 Dark 를 선택합니다.
  • - Click the Add To button (if the button is greyed out for you, it means you forgot to add the atlas — just find the SciFi Atlas and drag it onto the field).
  • - Add To 버튼을 클릭합니다. (만약 버튼 컬러가 회색이라면 Atlas 설정을 지나치신 겁니다. 필드부분에 SciFi Atlas 를 찾아 드래그하시기 바랍니다. )
  • - Your sprite has now been created and it is currently selected. It’s also very, very small! Let’s change that. When working with NGUI, you will always be moving widgets around, scaling them, and rotating them exactly the same as any other game object — by modifying their Transform.
  • - 스프라이트가 생성되고 선택되었을 겁니다. 아마 매우~ 매우~ 작을겁니다. 그것을 바꿔봅시다. NGUI 작업을 하다보면 다른 게임 오브젝트들에 맞추기 위해 위젯들을 움직이고, 크기를 바꾸고 회전 시키는 트랜스폼 수정 작업들이 매우 많습니다.
  • One important thing to note is that the Z part of the Transform is not used when working with widgets from the same atlas. Instead, you can bring them forward or push them back by adjusting the Depth parameter. If later on you end up working with multiple atlases (or multiple UI Panels), you will need to adjust the Z. The reason for this is simple — this lets you create completely flat windows that you can turn to the side without their widgets messing up the order in which they are drawn.
  • 중요한 점 하나는 트랜스폼의 Z 부분입니다. 트랜스폼 Z 는 같은 아틀라스를 사용하는 위젯에서는 사용되지 않습니다. 대신 깊이 파라미터 역할로 위젯들을 앞으로 끌어당기거나 뒤로 밀수 있습니다. 나중에 아틀라스를 여러개를(혹은 여러개의 UI 패널들을) 사용하게 된다면 Z 값에 대한 보정이 필요합니다. 위젯들을 그리는 순서가 꼬이지 않도록 평평한 윈도우들을 만들 수 있도록 해줍니다.
  • Add a couple more widgets before moving on to the next part of the tutorial. Try adding a Sliced Sprite (a sprite using 9-slicing, ideal for creating borders), and Tiled Sprite (a sprite that fills the entire area defined by the transform’s Scale), and a Filled Sprite  (a sprite that has an extra parameter that controls how much of it is visible — ideal for progress bars and sliders). If you can’t figure out one of them, don’t worry — they will be covered in the next tutorial.
  • 튜토리얼의 다음 부분으로 넘어가기 전에 좀더 위젯을 추가해보도록 합시다. Sliced Sprite(경계 처리를 위해 9개로 쪼개진 스프라이트)와 Tiled Sprite(트랜스폼의 스케일에 정의된데로 전체 영역을 채우는 스프라이트), Filled Sprite(프로그레스 바와 슬라이더에 사용할 수 있도록 보이는 영역을 제어하는 파라미터가 를 추가된 스프라이트)해보도록 합시다. 위 스프라이트들이 무엇인지 잘 모르겠어도 상관없습니다. 어차피 다음 튜토리얼에서 등장하는 녀석들이기 때문입니다.
0 Comments