![](https://cdn-ak2.f.st-hatena.com/images/fotolife/b/baba_s/20170816/20170816125939.png)
Asset Store
公式ドキュメント(英語)
http://www.magicnreal.com/psd2ngui
メニューについて
ACTION
![f:id:baba_s:20150603171653p:plain](https://cdn-ak.f.st-hatena.com/images/fotolife/b/baba_s/20150603/20150603171653.png)
項目 |
説明 |
Load |
設定の読み込み |
Save |
設定の保存 |
Delete |
設定の削除 |
New |
設定の作成 |
Run |
NGUIへ変換 |
SETTING
![f:id:baba_s:20150603171700p:plain](https://cdn-ak.f.st-hatena.com/images/fotolife/b/baba_s/20150603/20150603171700.png)
項目 |
説明 |
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](https://cdn-ak.f.st-hatena.com/images/fotolife/b/baba_s/20150603/20150603171714.png)
項目 |
説明 |
Remove |
要素を削除する |
Layer Script Count |
スクリプトを追加したいレイヤーの数 |
Count |
追加するスクリプトの数 |
Item |
追加するスクリプトを設定 |
コマンドについて
コマンドの指定方法
- コマンドの指定方法は3パターン
- PSDファイルのレイヤーに指定する
- テキストレイヤーに指定する
- グループ(フォルダ)に指定する
- コマンドによっては追加コマンドがあり、細かい指定までできる
コマンド |
説明 |
layerName@command |
レイヤーに指定 |
textLayer@command |
テキストレイヤーに指定 |
groupName@command |
グループに指定 |
コマンドの種類
スプライト
- コマンドを指定しなかった場合はUISpriteとして作成される
スライス
- 正方形の端をスライスする
- 基本コマンド
- @slice=(LeftTop)x(RightTop)x(LeftBottom)x(RightBottom)
- 例) layerName@slice=2x2x2x2
パネル
- PSDファイルのグループ(フォルダ)に設定する必要がある
- 基本コマンド
ラベル
- 基本コマンド
- 追加コマンド
- @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.normal : 通常の時のイメージ
- @button.hover : マウスが重なった時のイメージ
- @button.pressed : クリックしたときのイメージ
- @button.label : ラベル
- 例)layerName@button.normal
![f:id:baba_s:20150603171732p:plain](https://cdn-ak.f.st-hatena.com/images/fotolife/b/baba_s/20150603/20150603171732.png)
ラベルボタン
- テキストラベルをボタンとして作成する
- ただし、ボタンの状態によってラベルを変えることはできない
- 基本コマンド
トグル(チェックボックス)
- 基本コマンド
- @toogle
- @checkbox
- どちらの書き方でも可能
- 追加コマンド
- @toggle(checkbox).normal: 通常の時のイメージ
- @toggle(checkbox).checked : チェックされた時のイメージ
- @toggle(checkbox).label : ラベル
- 例)layerName@toggle(checkbox).normal
インプット(エディットボックス)
- 基本コマンド
- @input
- @editbox
- どちらの書き方でも可能
パスワード
- インプット(エディットボックス)にパスワードのオプションが設定されている状態で作成される
- 基本コマンド
コンボボックス
- 基本コマンド
- 追加コマンド
- combobox.bar : アイテムを選択した時のイメージ
- combobox.listbg : リストの背景
- combobox.bg : 背景
- combobox.label : ラベル
スライダー
- 基本コマンド
- @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](https://cdn-ak.f.st-hatena.com/images/fotolife/b/baba_s/20150603/20150603171745.png)
バーチャルビュー
- 基本コマンド
- @virtualview
- スクロールビューとの違いはUIとデータが分離されていること
- 例) layerName@virtualview
- 追加コマンド
- virtualview.bg : 背景
- virtualview.item : コンテンツ
- 例) layerName@virtualview.item
![f:id:baba_s:20150603171756p:plain](https://cdn-ak.f.st-hatena.com/images/fotolife/b/baba_s/20150603/20150603171756.png)
スプライトフォント
![f:id:baba_s:20150603171803p:plain](https://cdn-ak.f.st-hatena.com/images/fotolife/b/baba_s/20150603/20150603171803.png)
アニメーション
- 基本コマンド
- @animation@fps=30, @ani@fps=15
- シンプルなアニメーションを作成する
- 例) groupName@animation@fps=30
![f:id:baba_s:20150603171812p:plain](https://cdn-ak.f.st-hatena.com/images/fotolife/b/baba_s/20150603/20150603171812.png)
コライダー
- 基本コマンド
- @collider=box
- ボックスコライダーを作成する
- ラベル、スプライトのみにつけることが可能
- 例) layerName@collider=box
スクリプト
- 基本コマンド
- @script
- PSD2NGUIで用意されている「PsdLayerUserScript」を追加
- PSDファイル内のテキストレイヤーの文字を取得できる
- 例) layerName@script
イグノア
- 基本コマンド
- @ignore
- このコマンドが設定されているレイヤーは無視される
- 例) layerName@ignore
関連記事