PSD Layers to NGUI(PSD2NGUI)

링크 : http://www.magicnreal.com/psd2ngui/

유니티에셋 링크 : https://www.assetstore.unity3d.com/kr/#!/content/11220

요약

PSD2NGUI 를 이용해주셔서 감사합니다.

PSD2NGUI 는 NGUI 를 위한 자동화 툴입니다. PSD2NGUI 는 PSD Layer 들을 NGUI Widget 들로 바꾸어 줍니다. 예를 들어 label, editbox, button, checkbox, scrollview, 등을 PSD Layer 에 간단한 명령어를 삽입하는 것만으로 만들 수 있습니다. 그리고 작업자가 PSD 파일을 수정했을 때, Unity3D 에서도 수정한 결과가 그대로 반영됩니다. PSD2NGUI 를 사용한다면, 더이상 Atlas Maker, Widget, Font 툴을 이용하지 않고 편리하게 GUI 를 만들 수 있습니다. 또한 이미지를 자르기 위해 Sprite 를 세팅할 필요도 없습니다. PSD Layer 에 Slice 명령어만 붙여주면 됩니다. PSD2NGUI 를 이용하면 GUI 를 개발하는데 걸리는 시간을 굉장히 절약하실 수 있게 될겁니다.

중요: PSD2NGUI 는 NGUI(2.2.7 ~ 3.0.2) 가 있어야 작동합니다.
노트: PSD2NGUI 는 PhotoShop 없이도 사용 가능합니다.
노트: PSD2NGUI 는 PhotoShop 의 ’스마트 오브젝트 레이어’, ’라스터 이미지 레이어’, ’텍스트 레이어’ 만 지원합니다.

사용법

1. 열기

a. PSD 파일위에서 마우스 오른쪽 버튼을 클릭하면 PSD2NGUI 를 열 수 있습니다.

b. NGUI 메뉴에서 마우스 오른쪽 버튼을 클릭하면 PSD2NGUI 를 열 수 있습니다.

2. PSD 파일 추가

a. PSD Layer 에 명령어를 추가 합니다.

3. 작업 실행

a. RUN 버튼 실행.

4. 메뉴 설명

• Load
  PSD2NGUI 설정을 로드합니다.
• Delete
  PSD2NGUI 설정을 삭제합니다.
• Run
  PSD Layer 를 NGUI 로 변환합니다.
• NGUI Root
  NGUI 의 UIRoot 를 링크합니다. Run 으로 변환을 시작하면 자동으로 링크됩니다.
• Camera
  NGUI 의 카메라 종류를 설정 합니다.
• Target Screen Size
  배포될 디바이스의 화면 사이즈를 설정 합니다.
• Add Font
  비트맵 폰트를 추가합니다.
• Font Data
  비트맵 폰트 이미지의 단어별 위치 정보가 있는 텍스트파일을 넣는 곳입니다.
• Font Texture
  비트맵 폰트의 이미지를 넣는 곳입니다.
• Font Prefab
  생성된 NGUI 폰트의 프리팹이 들어가는 곳입니다.
  만약 [Font Data], [Font Texture] 둘중 하나라도 설정 되어있지 않으면 생성되지 않으며, 이미 존재하는 프리팹을 넣을 수도 있습니다.
  반대로, 모두 설정 되어있으면 프리팹이 생성되며, 이미 존재하는 프리팹은 새로운 데이터로 교채 됩니다.
• Assign Font To All Labels
  NGUI Root 의 모든 자식 UILabel 에 [Font Prefab] 에서 설정한 프리팹을 넣어줍니다.
  이미 폰트가 설정되어있는 UILabel 은 무시합니다.
• Remove Font To All Labels
  NGUI Root 의 모든 자식 UILabel 에서 폰트 설정을 삭제합니다.
• Use One Atlas
  하나의 아트라스에 모든 이미지를 넣습니다.
  체크를 해제하면 PSD 파일별로 아트라스를 생성하게 됩니다.
• Keep Old Sprites
  체크를 해제하면 기존의 아틀라스에 있던 이미지들은 삭제됩니다.
• Create Controls
  체크를 해제하면 아트라스와 폰트만 만들게 됩니다.
• Remove All
  모든 PSD 파일을 목록에서 제거합니다. 실제 파일은 지워지지 않습니다.
• Add Font All
  아트라스를 PSD 파일마다 개별로 만들 때 각 아틀라스에 폰트 추가옵션을 한꺼번에 킨다.
• Remove Font All
  아트라스를 PSD 파일마다 개별로 만들 때 각 아틀라스에 폰트 추가옵션을 한꺼번에 끈다.

비디오

a. 기본 사용법.

명령어

* Sub commands : 컨트롤 들을 추가 적으로 꾸미기 위한 용도로 사용하며, Label, Button, ComboBox 는 추가 하지 않아도 상관 없다.

• Sprite

   

  ex) layerName

  만약 커맨드명이 없다면 PSD2NGUI 는 Sprite 로 가정합니다.

• Slice

   

  ex) layerName@slice=(LeftTop)x(RightTop)x(LeftBottom)x(RightBottom)

  Layer 이름을 layerName@slice=2x2x2x2 와 같이 설정하면, PSD2NGUI 는 Layer 의 가장자리를 2픽셀의 정사각형으로 잘라낼 것입니다. 결과적으로 이미지 크기는 4x4 가 됩니다.
  Layer 이름을 layerName@slice=50%x50%x10%x10% 와 같이 설정하면. PSD2NGUI 는 백분율을 픽셀로 치환하고, 잘라낼 것입니다.
  만약 잘라낼 크기가 모두 같다면 layerName@slice=2 와 같이 한곳만 설정해줘도 됩니다.
  
  
  

• Panel

   

  ex) groupName@panel

  PSD2NGUI 는 UIPanel 을 만들 것입니다. 명령어를 Group(Folder)에 해야합니다.

• Label

   

  ex) layerName@label(혹은 명령어 없이 Text Layer)

  PSD2NGUI 는 UILabel 을 만들 것입니다.
  Sub commands.

   sameLayerName@label@color=black, layerName@label@color=ff00ff : 컬러설정

   sameLayerName@label@bold=true : 폰트를 굵게

   sameLayerName@label@shadow=true : 폰트에 그림자 추가

   sameLayerName@label@text=Hello PSD2NGUI : 보여질 문장

   sameLayerName@label@align=[topleft, top, topright, left, center, right, bottomleft, bottom, bottomright] : 텍스트 align(pivot)

   sameLayerName@label@fontsize=14 : 픽셀단위 폰트 크기

• Button

   

  ex) layerName@button

  PSD2NGUI 는 UIButton 을 만들 것입니다.
  만일 button.hover 혹은 button.pressed 와 같은 sub-commands 가 있다면 PSD2NGUI 는 UIImageButton 을 만들 것입니다.
  Sub commands.

   sameLayerName@button.hover : 마우스오버 상태일때의 이미지

   sameLayerName@button.pressed : 마우스가 눌려졌을때의 이미지

   sameLayerName@button.label : 버튼의 제목

• LabelButton

   

  ex) textLayer@button

  PSD2NGUI 는 글자만 있는 UIButton 을 만들 것입니다.

• Toggle(Checkbox)

   

  ex) layerName@toggle, layerName@checkbox

  PSD2NGUI 는 UIToggle(UICheckBox) 를 만들 것입니다.
  Sub commands.

   sameLayerName@toggle(checkbox).checked : 체크되었을 때의 이미지

• Input(EditBox)

   

  ex) layerName@input, layerName@editbox

  PSD2NGUI 는 UIEditBox 를 만들 것입니다.

• Password

   

  ex) layerName@password

  PSD2NGUI 는 UIEditBox 를 만들고 Password 옵션을 켜둘 것입니다.

• ComboBox

   

  ex) layerName@combobox

  PSD2NGUI 는 UIComboBox 를 만들 것입니다.
  Sub commands.

   sameLayerName@combobox.bar : 콤보박스 아이템 선택 이미지

   sameLayerName@combobox.listbg : 콤보박스 배경 이미지

• Slider

   

  ex) layerName@hslider or layerName@vslider

  PSD2NGUI 는 UISlider 를 만들 것입니다.(Slider).
  Sub commands.

   sameLayerName@h(or v)slider.fg : Slider 의 Bar 이미지 입니다.

• ProgressBar

   

  ex) layerName@hprogressbar or layerName@vprogressbar

  PSD2NGUI will make UISlider(Progress Bar).
  Sub commands.

   sameLayerName@h(or v)progressbar.fg : ProgressBar 의 foreground(bar) 이미지 입니다.

• ScrollBar

   

  ex) layerName@hscrollbar or layerName@vscrollbar

  PSD2NGUI will make UIScrollBar.
  Sub commands.

   sameLayerName@h(or v)scrollbar.fg : ScrollBar 의 foreground(bar) 이미지 입니다.

• ScrollView

   

  ex) layerName@scrollview

  PSD2NGUI 는 UIDraggablePanel 과 UIDragPanelContents 를 만들 것입니다.
  Sub commands.

   sameLayerName@scrollview.item : ScrollView 아이템. 안에는 다른 Widget 들이 들어갈 수 있습니다.

   sameLayerName@h(or v)scrollbar.bg : ScrollBar 의 background(bar) 이미지 입니다.

   sameLayerName@h(or v)scrollbar.fg : ScrollBar 의 foreground(bar) 이미지 입니다.
  
  
  

• VirtualView

   

  ex) layerName@virtualview

  PSD2NGUI 는 PsdLayerVirtualView 를 만들 것입니다. ScrollView 와 다른 점은 UI 와 Data 가 분리 되었기 때문에, 방대한 데이터도 사용 가능합니다.
  Sub commands.

   sameLayerName@virtualview.item : ScrollView 아이템. 안에는 다른 Widget 들이 들어갈 수 있습니다.

   sameLayerName@h(or v)scrollbar.bg : ScrollBar 의 background(bar) 이미지 입니다.

   sameLayerName@h(or v)scrollbar.fg : ScrollBar 의 foreground(bar) 이미지 입니다.
  
  
  

• SpriteFont

   

  ex) groupName@spritefont

  PSD2NGUI 는 PsdLayerSpriteFont 를 만들 것입니다. Sprite 가 간단한 폰트처럼 사용될 것입니다.
  
  
  

• Animation

   

  ex) gropuName@animation@fps=30 or groupName@ani@fps=15

  PSD2NGUI 는 PsdLayerSpriteAnimation 를 만들 것입니다. 매우 단순한 애니메이션 클래스 입니다.

• Collider

   

  ex) layerName@collider=box

  PSD2NGUI 는 BoxCollider 를 만들 것입니다. Sprite 혹은 Label 에만 적용됩니다.

• Script

   

  ex) textLayer@script

  PSD2NGUI 는 PsdLayerUserScript 를 만들 것입니다. 멤버 변수로 data 가 있고, data 의 값은 PSD Text Layer 에서 입력했던 문자열이 들어가게 됩니다.

• Ignore

   

  ex) layerName@ignore

  만약 Layer 에 Ignore 명령어가 붙게되면 레이어를 로드하지 않을 것입니다.

지원

Forum: PSD2NGUI

E-mail: contact@magicnreal.com