読者です 読者をやめる 読者になる 読者になる

(:3[kanのメモ帳]

個人ゲーム開発者kan.kikuchiのメモ的技術ブログ。月木更新でUnity関連がメイン。

9スライスを用いて綺麗に画像を拡大【Unity】【NGUI】


このエントリーをはてなブックマークに追加

はじめに

例えばNGUIで以下の様な正方形の画像を


f:id:kan_kikuchi:20150429183229p:plain


単純に横長にしてしまうと、以下の様にボケてしまいます。


f:id:kan_kikuchi:20150429183316p:plain


こんな時に使えるのが9スライスで、これを使って横長にすると、


f:id:kan_kikuchi:20150429183415p:plain


このように綺麗に出来ます!


9スライスとは

9スライスとは、以下のように画像を9分割し、分割した領域毎に拡大するといったものです。


f:id:kan_kikuchi:20150429183125p:plain


例えば左上の領域は拡大をせず、真ん中上の領域は左右にのみ拡大をする

といった感じです。cocosやuGUI等にもある機能です。


9スライス設定方法

Inspector上でUISpriteのTypeをSlicedにすると

9スライス形式で拡大する事が出来ます。


f:id:kan_kikuchi:20150429184410p:plain


その後、SpriteのEditボタンを押してUIAtlasの情報を開き、


f:id:kan_kikuchi:20150429190409j:plain


Border内の数値を調整し、

下に写ってる点線を任意の位置に調整する事で分割領域を設定出来ます。


f:id:kan_kikuchi:20150429184533j:plain