QunC

Unity|NGUIのアトラス作成と画像配置

time 2014/09/16

Unity|NGUIのアトラス作成と画像配置

諸事情あってEx2Dでいままでしこしこやってきたけど最近ついにNGUIに乗り換えまして
やりかた覚えたけど秒速で忘れそうなのでおぼえ書きしとくよ

作業に入る前にやっておくこと

ファイルが少ないあいだにプラットフォームを設定しておく

File>Build Settings

ngui_01_01

デフォルトはPC,Mac&LinuxStandaloneになっているので
iOSにしてSwitch Platform。Androidの場合はAndroid。
WEB用に公開したい場合はWeb Player
これを忘れていてプロジェクト最終段階付近で気づくとスイッチに半日かかったりして時間のロスが発生します

ワークスペースをカスタム

右上にワークスペースのテンプレートがあるので
Tallに設定
HierarchyProjectを左右入れ替える
デザイナーの場合この形式がPhotoshopに操作が近くなって比較的やりやすくなるとおもいます
Photoshopに例えると
Projectがブリッジ(素材集・ファイルを開くなど)
Hierarchyがレイヤー
Inspectorがレイヤースタイルウィンドウ
に近いと思います

再生中の設定の変更

Unityは再生中に行った変更は保存されません。
しかしなぜか再生ボタンを押してもGameのオブジェクトが動かせてしまうので
うっかり一生懸命編集したのにそういえば再生ボタン押してたわこれ…という悲しい事故が起こりやすいです
環境設定で再生中はウィンドウを任意の色に変えておくと事故が防げます。うちは青色にしてます。

カメラワーク・ギズモをカスタム

Gameウィンドウに2D・Gismoがあるので
・2Dゲームの場合は2Dボタンを押す
・GismoでCameraのチェックを外す(作業にめっちゃ邪魔になるため)

・NGUIは独自でカメラを持っているため重複するためデフォルトで存在しているMainCameraを消す
NGUIのCameraは消さない

NGUIのUI CameraをOnMobileに設定してw640xh960にしてFitにチェックを入れる
横持ちランドスケープならh640xw960になります
※画面サイズは作りたいアプリによって違うのでエンジニアさんに確認しましょう
UI RootをクリックしてDepth Onlyにチェックを入れる

仮に適当なGame Objectを置いてみて横600に指定して確認する
プレビュー画面にうつる大きさがおかしい場合はカメラの設定になんらかの間違いがある可能性が高いです

NGUIの基本操作

ヒエラルキにオブジェクトを追加する

NGUI>Create
ngui_01

画像を置きたい
NGUI>Create>Sprite   Alt+Shift+S
フォントを置きたい
NGUI>Create>Label Alt+Shift+L

Hierarchyにオブジェクトが追加される
UIRoot以下がNGUI

アトラスつくるよ

845_AtlasTest

↑こういうみっちりした画像の詰め合わせを作ります

Q.元の画像はどんなサイズで作ればよいの?

iPad対応が視野に入っている場合>デザインをiPad Retinaのサイズで作って書き出すときに横900pxに縮小して書き出し
iPad対応が視野に入っていない場合>iPhone6 plusのサイズで作成して書き出すとき同じサイズ

デザインは最大サイズで作ってiPadとiPhoneの中間のサイズで書き出すと良いです
iPadのサイズで書き出す→画像が大きすぎて低スペック端末が耐えられない
iPhoneのサイズで書きだす→画像が小さすぎてiPad Retinaの画質に耐えられない
このためいくつか大きさを検証して横900pxが最も適切だと判断しました
900pxなら拡大してもRetinaでぎりぎり耐えられる画質でAndroidの低スペック端末でも動きます。
ただ今後ディスプレイの大型化が予想されるのでこの画質でもいずれ耐えられなくなると思います。やめてェー!

最終的にアトラスは48-64-128-256-512-1024-2048の2の累乗(Power of 2)になるのでこの数値に収まるように意識するとうまくいきます
すこし大きめの画像を横600pxでつくるのではなく横512pxでつくると1024のアトラスに収められる量が2倍になるよね。うまいこと工夫するとアトラスを節約できます。

※Unityの場合は1つの画像が偶数である必要はないです

切り出したpng-24画像を[texture]フォルダを作ってUnityの[Project]にぶっこむ

ngui_03

画像のどれかひとつを触った状態でアトラスメーカーを開く
NGUI>Open>Open AtlasMaker>NEW
ほかのテクスチャも選択する

ngui_04
Criateを押す

アトラスできたー(∩´∀`)∩

pngとprefabとmeta3つのファイルでアトラス1セットです
どれか1つだけ消したり場所を動かしたりしてはいけません

また、gitにPushしたらアトラスがぶっ壊れた場合はだいたいprefabかmetaが上がっていないために起こります
Umetaとprefabが更新されるのはUnityのSceneを閉じた時なのでGitにPushするときはUnityを終了させて
Prefabとmetaが更新リストにあがるようにしよう!

画面にスプライト(画像)置くよ

ngui_05

InspectorカラムにあるUISprite>Atlas>先ほど作成したアトラスを選択
Sprite>任意の画像を選ぶ
ヒエラルキーのSpriteに戻る
選択して設置完了
ngui_06

ngui_07

ほいほい置いていく
ngui_08

※このカメラマークが邪魔な場合はギズモ>Cameraのチェックを外す

完成〜
ngui_09

————————-
画像お借りしました
http://www.designbolts.com/2014/02/22/100-free-vector-vintage-badges-stickers-stamps-in-ai-eps-format/
http://roundicons.com/

sponsored link

down

コメントする




CAPTCHA


Profile

845

845

多摩美卒/デザイナー/Sketch/湘南住/子育て中/ハンドメイド

ものづくりをする人を応援するサービスのスタッフをやっています☺️

Categoly

Archive

sponsored link