West Hill 開発メモ

カテゴリ: NGUI

NGUIの3.x系ではZ位置を変えても描画順には影響がなくなり、
WidgetやPanelのDepthで制御するようになっています。

これの影響で同じUI Camera内でGUIより手前に配置したパーティクル等が、
GUIの裏側に描画されてしまいます。

NGUIではシェーダのRenderQueue3000+Depthの値が描画順になっているので、
マテリアルのRenderQueueをそれより大きな値にすれば任意のオブジェクトを手前に描画できます。
render_ngui_01
なので以下の様なスクリプトを手前に描画したいオブジェクトに付ければ、
NGUIよりも手前に描画されます。

参考:Material.renderQueue

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

NGUIのUIButtonで押しっぱなし状態を判定する方法。
ボタン押しっぱなしで攻撃し続けるシューティングゲーム等で使えると思います。

実装時のNGUIのバージョンは3.0.8f6です。

以下のスクリプトをUIButtonのオブジェクトに貼っつけます。
NGUIのボタンを押した時と離した時に呼ばれるOnPressイベントで押下状態を見つつ、定期チェックを行います。
参考:NGUI: Events

使い方
// 押しっぱなし判定するボタン
[SerializeField]
private HoldPressBtn holdPressBtn;

void Start ()
{
    holdPressBtn.SetActionHoldPress (OnHoldPress);
}

void OnHoldPress()
{
    // 押しっぱなし時の処理
}
ボタンから指を離すまで指定した時間おきにActionHoldPressに設定したメソッドが呼ばれます。

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

NGUIを使用してスクロールリストの実装をする際にはDraggablePanelを使うことが多いと思いますが、設定によっては一部のAndroid端末で表示がおかしくなることがあります。

ドラゴンツイートではタイムラインの表示にDraggablePanelを使用していたので、
一部端末で以下のような表示になってしまいました。
※現象を確認できた端末はXperia acro HD(IS12S)、Xperia NX(SO-02D)等。

環境はUnity4.2.0、NGUIのバージョンは2.6.4です。
ngui_list_01 
DraggablePanel以下のAtlasテクスチャが真っ黒になってしまっています。 

原因はPanelのClippingの設定が「Alpha Clip」になっていたからでした。
ngui_list_03
赤枠のところの設定を「Soft Clip」にすることで、解消します。
Soft Clipだとスクロールの端の方がぼやけるのですが、Softnessのパラメタを1にすれば気にならなくなります。 
ngui_list_02 
無事表示されました。 

ちなみに「Hard Clip」は古いGPUドライバの端末でサポートされていないので推奨されていません。
http://d.hatena.ne.jp/shinriyo/20130501/p2

開発中の動作確認に使用していたGalaxyNexusでは「Alpha Clip」でも問題なかったので
レビューで指摘されるまで気づかなかったのですが、やはり色々な端末で検証する事は大事ですね。

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

NGUIを使用したヘッダーやフッター(タブバー等)の実装です。

前回はアスペクト比を固定してレターボックスを表示していましたが、
黒帯は嫌だスクリーンをフルで使いたい!という場合に、アスペクト比が変わってもヘッダーは上部固定、フッターは下部固定にする設定です。 

NGUI ($95)
https://www.assetstore.unity3d.com/#/content/2413

実装時のバージョンはUnity3.5.7、NGUIのバージョンは2.2.6Cです。

※今回もUI Rootへウダサンコウボウさんの以下スクリプトをアタッチします。

[Unity]NGUIで画面サイズに合わせる(NGUI2.2.2対応版)
http://udasankoubou.blogspot.jp/2012/10/unitynguingui222.html


以下、実装手順

①画面の中心用、ヘッダー用、フッター用にUIAnchorを3つ用意する。
headfoot01
②ヘッダー用のUIAnchorのSideの値をTopに設定する。
headfoot02
③ヘッダー用のUIAnchor配下のパネルへSpriteを追加し、PivotをTopにする。
headfoot03
④同じように、フッターはBottomに設定する

これでアス比の違うiPhone5のような縦長画面でもヘッダーとフッターの位置を固定できました。
headfoot04

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

UnityでiOSやAndroid向けのアプリを作る際に、バラバラのアスペクト比を吸収するための実装メモです。
GUIの実装では定番のNGUIを使用しています。

NGUI ($95)
https://www.assetstore.unity3d.com/#/content/2413

実装時のバージョンはUnity3.5.6、NGUIのバージョンは2.2.6Cです。

NGUIで作った画面のアス比を固定する方法は、以下ウダサンコウボウさんのスクリプトを使わせてもらっています。

[Unity]NGUIで画面サイズに合わせる(NGUI2.2.2対応版)
http://udasankoubou.blogspot.jp/2012/10/unitynguingui222.html

ただし、これだけではウィジェットを領域外に移動させたり、別に3Dカメラがあったりすると描画領域外のスペースにオブジェクトが映り込んでしまいます。 

対応方法は色々あると思うのですが、今回は最前面にレターボックス専用のパネルを配置して塗りつぶします。
as001
こんな感じで黒枠パネルを最前面に。

これで横に伸びても縦に伸びてもアス比固定のままで領域外はレターボックスで塗りつぶせました。
 as005as004
動かないパネルなので、Staticにチェックを入れると負荷が下がります。
設定箇所は以下、Inspectorの四角部分です。
as006

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

このページのトップヘ