コガネブログ

平日更新を目標に Unity や C#、Visual Studio、ReSharper などのゲーム開発アレコレを書いていきます

【Unity】【アセット】「PSD Layers to NGUI」を使用してみる

Unity Unity - Asset Store Unity - エディタ拡張 Unity - 有料アセット

Asset Store

公式ドキュメント(英語)

http://www.magicnreal.com/psd2ngui

メニューについて

  • Unityエディタ上で設定できる項目

ACTION

f:id:baba_s:20150603171653p:plain

項目 説明
Load 設定の読み込み
Save 設定の保存
Delete 設定の削除
New 設定の作成
Run NGUIへ変換

SETTING

f:id:baba_s:20150603171700p:plain

項目 説明
Root Rootの設定(UIRootがついているオブジェクトのみ選択可能)
Camera NGUIのカメラタイプの設定
Font Type フォントタイプの設定
Use One Atlas 1つのアトラスを使用する
Keep Old Sprites 変更前のスプライトを残す
Create Controls NGUIを作成(チェックを外した場合はアトラスとフォントのみ作成)
Update when files modified 不明
Remove All PSD FILESの全要素を削除する
Add Font All PSD FILESの全要素のAdd Fontにチェックを入れる
Add Font None PSD FILESの全要素のAdd Fontのチェックを外す
  • Add Font AllとAdd Font NoneはUse One Atlasのチェックを外し、
    True Type Fontを設定すると表示されます

PSD FILES

f:id:baba_s:20150603171714p:plain

項目 説明
Remove 要素を削除する
Layer Script Count スクリプトを追加したいレイヤーの数
Count 追加するスクリプトの数
Item 追加するスクリプトを設定

コマンドについて

コマンドの指定方法

  • コマンドの指定方法は3パターン
    1. PSDファイルのレイヤーに指定する
    2. テキストレイヤーに指定する
    3. グループ(フォルダ)に指定する
  • コマンドによっては追加コマンドがあり、細かい指定までできる
コマンド 説明
layerName@command レイヤーに指定
textLayer@command テキストレイヤーに指定
groupName@command グループに指定

コマンドの種類

スプライト

  • コマンドを指定しなかった場合はUISpriteとして作成される
    • 例) layerName

スライス

  • 正方形の端をスライスする
  • 基本コマンド
    • @slice=(LeftTop)x(RightTop)x(LeftBottom)x(RightBottom)
      • 例) layerName@slice=2x2x2x2

パネル

  • PSDファイルのグループ(フォルダ)に設定する必要がある
  • 基本コマンド
    • @panel
      • 例) groupName@panel

ラベル

  • 基本コマンド
    • @label
      • 例) groupName@label
  • 追加コマンド
    • @color=black, @color=ff00ff : 色の設定
    • @bold=true : 太字
    • @shadow=true : フォントの影
    • @text=Hello : 表示するテキスト
    • @align=[topleft, top, topright, left, center, right, bottomleft, bottom, bottomright] : テキストの整列
    • @fontsize=14 : フォントサイズ
      • 例) sameLayerName@label@subCommand

ボタン

  • 基本コマンド
    • @button
      • 例) layerName@button
  • 追加コマンド
    • @button.normal : 通常の時のイメージ
    • @button.hover : マウスが重なった時のイメージ
    • @button.pressed : クリックしたときのイメージ
    • @button.label : ラベル
      • 例)layerName@button.normal

f:id:baba_s:20150603171732p:plain

ラベルボタン

  • テキストラベルをボタンとして作成する
  • ただし、ボタンの状態によってラベルを変えることはできない
  • 基本コマンド
    • @button
      • 例) textLayer@button

トグル(チェックボックス)

  • 基本コマンド
    • @toogle
      • 例) layerName@toggle
    • @checkbox
      • 例) layerName@checkbox
    • どちらの書き方でも可能
  • 追加コマンド
    • @toggle(checkbox).normal: 通常の時のイメージ
    • @toggle(checkbox).checked : チェックされた時のイメージ
    • @toggle(checkbox).label : ラベル
      • 例)layerName@toggle(checkbox).normal

インプット(エディットボックス)

  • 基本コマンド
    • @input
      • 例) layerName@input
    • @editbox
      • 例) layerName@editbox
    • どちらの書き方でも可能

パスワード

  • インプット(エディットボックス)にパスワードのオプションが設定されている状態で作成される
  • 基本コマンド
    • @password
      • 例) layerName@password

コンボボックス

  • 基本コマンド
    • @combobox
      • 例) layerName@combobox
  • 追加コマンド
    • combobox.bar : アイテムを選択した時のイメージ
    • combobox.listbg : リストの背景
    • combobox.bg : 背景
    • combobox.label : ラベル
      • 例)layerName@combobox.bg

スライダー

  • 基本コマンド
    • @hslider
      • 水平なスライダーとして作成
      • 例) layerName@hslider
    • @vslider
      • 垂直なスライダーとして作成
      • 例) layerName@vslider
  • 追加コマンド
    • h(v)slider.fg : 前景
    • h(v)slider.bg : 背景
      • 例)layerName@h(v)slider.fg

プログレスバー

  • 基本コマンド
    • @hprogressbar
      • 水平なプログレスバーとして作成
      • 例) layerName@hprogressbar
    • @vprogressbar
      • 垂直なプログレスバーとして作成
      • 例) layerName@vprogressbar
  • 追加コマンド
    • h(v)progressbar.fg : 前景
    • h(v)progressbar.bg : 背景
      • 例)layerName@h(v)progressbar.fg

スクロールバー

  • 基本コマンド
    • @hscrollbar
      • 水平なスクロールバーとして作成
      • 例) layerName@hscrollbar
    • @vscrollbar
      • 垂直なスクロールバーとして作成
      • 例) layerName@vscrollbar
  • 追加コマンド
    • h(v)scrollbar.fg : 前景
    • h(v)scrollbar.bg : 背景
      • 例)layerName@h(v)scrollbar.fg

スクロールビュー

  • 基本コマンド
    • @scrollview
      • ドラッグ可能なパネルとコンテンツを作成する
      • 例) layerName@scrollview
  • 追加コマンド
    • scrollview.bg : 背景
    • scrollview.item : コンテンツ
      • 例) layerName@scrollview.item

f:id:baba_s:20150603171745p:plain

バーチャルビュー

  • 基本コマンド
    • @virtualview
      • スクロールビューとの違いはUIとデータが分離されていること
      • 例) layerName@virtualview
  • 追加コマンド
    • virtualview.bg : 背景
    • virtualview.item : コンテンツ
      • 例) layerName@virtualview.item

f:id:baba_s:20150603171756p:plain

スプライトフォント

  • 基本コマンド
    • @spritefont
      • 例) groupName@spritefont

f:id:baba_s:20150603171803p:plain

アニメーション

  • 基本コマンド
    • @animation@fps=30, @ani@fps=15
      • シンプルなアニメーションを作成する
      • 例) groupName@animation@fps=30

f:id:baba_s:20150603171812p:plain

コライダー

  • 基本コマンド
    • @collider=box
      • ボックスコライダーを作成する
      • ラベル、スプライトのみにつけることが可能
      • 例) layerName@collider=box

スクリプト

  • 基本コマンド
    • @script
      • PSD2NGUIで用意されている「PsdLayerUserScript」を追加
      • PSDファイル内のテキストレイヤーの文字を取得できる
      • 例) layerName@script

イグノア

  • 基本コマンド
    • @ignore
      • このコマンドが設定されているレイヤーは無視される
      • 例) layerName@ignore

関連記事