NGUI」タグアーカイブ

[Unity, NGUI]:スクロールビューにスクロールバーを追加する

[検証バージョン]
Unity 5.1.2p2
NGUI 3.9.1

スクロールビューの基本についてはこちらをどうぞ。

1.スクロールバーの背景となる部分とつまみの部分、計2つのスプライトを作成。
スクロールバーのスプライトを追加

ヒエラルキー上での配置はスクロールビューの配下以外であればどこでも大丈夫。

垂直方向のスクロールバーの場合は2つのスプライトの高さを合わせておく必要がある。
見た目的につまみ部分が前面に表示されるようにDepthの設定もお忘れなく。

2.スプライトにコライダーを設定
スクロールバーの背景部分をクリックして移動する機能が必要なければ、背景用のスプライトにはコライダーを設定しなくても大丈夫。
コライダーの設定は目的のスプライトを選択した状態で、メニューバーから「NGUI」-「Attach」-「Collider」とするのが簡単。

3.適当なオブジェクトにUIScrollBarコンポーネントを追加
UIScrollBar

UIScrollBarコンポーネント用にNGUI Widgetを作ってその配下に先ほど作成したスプライトを配置しておくのが綺麗だと思う。
目的のオブジェクトを選択した状態でメニューバーから「NGUI」-「Attach」-「Scroll Bar Script」。

UIWidgetではなく適当なオブジェクトでも大丈夫だが、UIScrollView自体にUIScrollBarコンポーネントを追加するとスクロールバーの挙動がおかしくなる。

4.UIScrollBarの設定
UIScrollBarの設定

Foreground, Backgroundにそれぞれつまみ用・背景用のスプライトを設定。
Directionも適切に。

5.スクロールビューにスクロールバーを設定
UIScrollViewにスクロールバーを設定

スクロールビューのインスペクタにScroll Barsの項目があるので、Horizontal/Vertical目的の方にスクロールバーを設定。

ここで一度実行すると、UIScrollBarのValueなどの値が反映されるので、そこでスクロールバーの初期位置などを設定できる。
UIScrollBarの設定

Sizeが、スクロールビュー配下の全体サイズに対する表示範囲。スクロールビューに対して2倍のサイズのものを配置していれば0.5となる。
Valueがつまみの初期位置、0〜1。

[Unity, NGUI]:スクロールビューの基本

[検証バージョン]
Unity 5.1.2p2
NGUI 3.9.1

・基本的な考え方
ヒエラルキー上でスクロールビューの配下に配置されているUIをスクロールビューの範囲に限定して表示する。

スプライトがスクロールビュー配下にない場合

スプライトがスクロールビュー配下にない場合

スプライトがスクロールビュー配下にある場合

スプライトがスクロールビュー配下にある場合

またその名の通り、スクロールビュー配下に配置されたUIは、実行時にドラッグなどにより見える範囲を動かすことができる。

よくグリッドビューと組み合わせて紹介されることが多いが、グリッドビューはあくまで多数の項目を整列するだけのもので、スクロールビュー自体とは特に関係ない。

・作り方
UI Rootが存在する状態で、メニューバーから「NGUI」-「Create」-「Scroll View」を選択する。
作成されたScroll Viewの配下にUIを配置する。

ドラッグでスクロールさせたい場合は、配下のUIにコライダーとUIDragScrollViewを追加する。
コライダーの追加は目的のUIを選択した状態でメニューバーから「NGUI」-「Attach」-「Collider」とするのが簡単。
UIDragScrollViewの追加は目的のUIのインスペクタで「Add Component」-「NGUI」-「Interaction」-「Drag Scroll View」を選択。

スクロールビューのインスペクタでドラッグで動かせる方向などを指定できる。
スクロールビューのインスペクタ

[Unity]:PlayMaker実践解説 (2)

今回はタイトル画面でスタートボタンが押された時の処理を解説していきます。

ArchuTitle ArchuTitleHierarchy2

○ StartButton
NGUIのUIButtonコンポーネントを持つボタンのGUI部品です。
NGUIのイベントをFSMに通知するためにPlayMakerの開発元から提供されているNGUIアドインをセットしてあります。

スタートボタンを押すと初回はプロローグ画面へ、その後はゲーム画面へ遷移するようになっています。

ArchuStartButtonFSM

ArchuStartButtonFSMEvent

ArchuStartButtonFSMVariable

1. Init
シーンが読込まれPlayMakerFSMが動き出した時に初めに到達する状態(ステート)です。
前回紹介したTitleControllerのInitとはほぼ同時(順不同)で動作します。
UnityのスクリプトにおけるAwake()の実行順と同じとイメージすれば良いでしょう。
ただしPlayMakerの場合は実行順を制御する機構がないようですので、FSM同士の関連には注意が必要です。
(※:未確認ですがUnityのスクリプトの実行順制御によりPlayMakerFSMの実行順も制御できるかもしれません。PlayMakerFSM自体も一種のコンポーネントですので。)

ArchuStartButtonInit

1-1. Stop Activity Indicator(カスタム)
処理中を示すインジケーター(くるくる回転するアイコン)を停止・非表示にします。

2. Idle
何も行いません。
ボタンが押下された時に「NGUI / ON CLICK」イベントが来るのを待ち受けます。

ArchuStartButtonIdle

3. OnClick
Idleの状態からボタンが押下された時に遷移する状態です。

ArchuStartButtonOnClick

3-1. Stop BGM(カスタム)
再生中のBGMを停止します。

3-2. Play Start Button SE(カスタム)
スタートボタン押下の効果音を再生します。

4. CheckPrologue
スタートボタン押下後に到達するステートです。
初回起動かどうかを判断して、プロローグかゲーム画面に遷移を振り分けます。
上記のOnClick中に書いても良い処理ですが、分かり易さのために分けてあります。

ArchuStartButtonCheckPrologue

4-1. PlayerPrefs Get Int(PlayerPrefs)
PlayerPrefに保存されている物語の進行度を表す数値を取り出し、変数storyにセットします。
Unity標準のPlayerPrefs.GetInt()と同様のアクションですが、複数の値を同時に扱えるのが少し便利です。

4-2. Int Compare(Logic)
さきほど取り出したstoryの値が1以上なら「START_GAME」イベントを発生しゲーム画面へ遷移する処理へ、1未満なら「FINISHED」イベントを発生しプロローグへ遷移する処理へ移ります。

5. StartPrologue
初めてスタートボタンを押した時に到達するステートです。

ArchuStartButtonStartPrologue

5-1. Activate Game Object(GameObject)
インスペクタ上で指定したフェードアウト用のNGUIスプライトを有効にします。
Unity標準のGameObject.SetActive()と同様のアクションです。

5-2. Wait(Time)
1.1秒間待機した後に指定のイベント(今回は指定してないのでFINISHEDイベント)を発生します。
このように待機した後に処理を行いたい場合は、別の状態を用意してイベントにより遷移させる必要があります。
このアクションが途中に挟まれていたとしても、以降のアクションも全て実行される点に注意が必要です。

6. LoadLevelPrologue
プロローグ画面へ遷移します。

ArchuStartButtonLoadLevelPrologue

6-1. Move Off Ad Banner(カスタム)
広告バナーを画面外に隠します。

6-2. Load Level(Level)
「Prologue」という名前のシーンをロードします。
UnityのApplication.LoadLevel()にあたるアクションですが、Additive/Asyncなどがオプションとして選択できるようになっています。

7. StartGame
すでにゲームをやったことがある場合にスタートボタンを押すと到達するステートです。
内容は前述の「5. StartPrologue」とほぼ同様なので説明は省略します。

ArchuStartButtonStartGame

8. LoadLevelGame
ゲーム画面へ遷移します。
さきほどのプロローグ画面への遷移と違いロード中画面を挟んだ遷移なので、アクションの内容が異なっています。

ArchuStartButtonLoadLevelGame

6-1. Play Game BGM(カスタム)
ゲーム画面用のBGMの再生を開始します。

6-2. Load Lovel Transition(カスタム)
ロード中画面を表示した上で「Stage01」という名前のシーンをロードします。

ーーーーー
今回の中では「2. Idle」の何もアクションの無い状態が特徴的だったと思います。
こういう状態を用意することで、外部からの操作でイベントを飛ばしてもらって処理を行うというような記述が可能になります。

また、プロローグの場合とゲーム画面の場合でフェードアウトの処理を変えていたり、BGMを止めたり、ロード中画面を挟んだりなど微妙な調整を色々としています。
これがどのような違いを生むかは、もうじきリリース予定の「あ〜ちゃ〜の大冒険」でぜひ確認してみて欲しいと思います。

[Unity]:NGUIで各種画面サイズに対応する方法(NGUI ver.3.0.7f1)

以前に似たようなエントリを書いたのですが、
[Unity]:NGUIで各種画面サイズに対応する方法
NGUI ver.3.0.7で大きな変更があったので、新しい方法をご紹介。

前回のUIAnchorとUIStretchを使う方法でも実現可能です。

スクリーンショット 2013-12-10 10.46.00

使用バージョン:
Unity 4.2.2f1
NGUI 3.0.7f1

今回、SpriteなどのWidgetを追加すると従来の「Widget」以外に「Anchors」という項目が付いてきます。

スクリーンショット 2013-12-10 10.53.24 スクリーンショット 2013-12-10 10.56.06

ここでPaddedやRelativeといった項目を設定することで、以前のUIAnchor+UIStretchのような配置とサイズを設定出来ます。

各設定の仕方はざっとこんな感じ。

  • Padded – pixel単位での指定
  • Relative – 相対サイズでの指定
  • Unified – pixelと相対サイズの組合せでの指定
  • Advanced – Unifiedと同様だが、親コンテナを個別に指定できる

pixcel単位の指定では本末転倒なので、今回はRelativeで。
先ずTargetに親コンテナとなるオブジェクトを指定。
そして前回と同様に各Spriteの配置とサイズを親コンテナに対する比率で指定していきます。

スクリーンショット 2013-12-10 11.08.15 スクリーンショット 2013-12-10 11.09.58 スクリーンショット 2013-12-10 11.10.15 スクリーンショット 2013-12-10 11.10.28 スクリーンショット 2013-12-10 11.10.36

すると…

スクリーンショット 2013-12-10 11.17.49 スクリーンショット 2013-12-10 11.17.41 スクリーンショット 2013-12-10 11.17.30

こんな感じで画面サイズに合わせて各Spriteの配置・サイズが調整されて表示されます。
前回のUIAnchor+UIStretchを各Spriteにいちいちアタッチする方法よりはスッキリしますね!

[Unity]:NGUIで各種画面サイズに対応する方法

Unity 4.2
NGUI 2.6.4
(NGUI 3.0.7の場合はこちらを参照→「[Unity]:NGUIで各種画面サイズに対応する方法(NGUI ver.3.0.7f1)」)

画面下部に5枚のSpriteを並べて表示する場合を考えます。
スクリーンショット 2013-08-09 8.31.43スクリーンショット 2013-08-09 8.33.21

綺麗に並べてありますが、画面のサイズが変わると…

スクリーンショット 2013-08-09 8.35.12スクリーンショット 2013-08-09 8.35.34

Spriteがはみ出してしまったり、余計なスペースが空いたりしてしまいます。
そこで、Spriteにアンカーを付与して位置を調整します。

Hierarchyビューで目的のSpriteを選択して…
スクリーンショット 2013-08-09 8.39.50

メニューから Component – NGUI – UI – Anchorを選択すると、
各Spriteに対してUIAnchorコンポーネントが付加されます。
スクリーンショット 2013-08-09 8.41.24スクリーンショット 2013-08-09 8.50.43

左下に配置したいSpriteを選択しInspectorビューで
UISpriteのPivotを左と下に設定して、UIAnchorのSideをBottomLeftとします。

スクリーンショット 2013-08-09 8.53.08 スクリーンショット 2013-08-09 8.47.59

左から2番目に配置したいSpriteの場合は、
例えばPivotを中央と下、SideをBottomとした上で、
UIAnchorのRelative OffsetのXを-0.2と設定します。
この辺りは色々な設定値の組合せで自由に出来ますので、目的の位置にSpriteが配置されるように他のSpriteに関しても設定してみて下さい。

すると…
スクリーンショット 2013-08-09 9.01.25スクリーンショット 2013-08-09 9.01.41

配置に関しては問題無さそうですが、依然として余計なスペースが空きますし、
今度は画面の横幅を縮めた時にSprite同士が重なるようになってしまいました。

そこで今度はストレッチの設定をして、
Spriteが画面サイズに合わせて拡大・縮小するようにします。

アンカーの時と同じように対象のSpriteを選択して、
今度は Component – NGUI – UI – Stretchを選択すると、
各Spriteに対してUIStretchコンポーネントが付加されます。

スクリーンショット 2013-08-09 9.06.36スクリーンショット 2013-08-09 9.11.00

UIStretchの設定は全てのSpriteに関して同じですので、
全てのSpriteを選択したままInspectorビューでUIStretchの項目を
StyleはHorizontalに、Relative SizeのXは0.2と設定します。

スクリーンショット 2013-08-09 9.18.10

すると今度は…

スクリーンショット 2013-08-09 9.21.55 スクリーンショット 2013-08-09 9.21.48

画面サイズが変わってもSpriteが自動的に拡大・縮小されて画面下部に並ぶようになりました。

Sprite自体のアスペクト比が変わってしまうのが都合悪い場合は、
UIStretchのStyleやRelative Sizeの設定で色々と変更することができます。

また今回は水平方向に並べる設定を紹介しましたが、
垂直方向でも同様の設定で対応が可能です。
試しに画面いっぱいに5×5=25枚のSpriteを敷き詰めてみました。

左がiPhoneの4インチで、右がiPadです。
スクリーンショット 2013-08-09 7.39.33 スクリーンショット 2013-08-09 7.38.16

応用すれば、色々と柔軟なデザインが出来そうですね!