Unity で NGUI を使ってポップアップウィンドウを作る

はじめに

• Unity の GUI 作成ツール NGUI を使って、下からぴょこんと出てくるポップアップウィンドウを作ります。
• Unity のバージョンは 4.3.4 で、NGUI は 3.5.6 を対象とします。
• 所要時間は10分程度です。

準備

• NGUI をアセットストアから購入します。
• プロジェクトを作成し、NGUI をインポートします。
• メニューの [NGUI] > [Create] > [2D UI] で、GUI用のルートオブジェクトを作成します。

ウィンドウの作成

• メニューの [NGUI] > [Create] > [Sprite] で、ウィンドウ用のオブジェクトを作ります。
• ヒエラルキーで作成した Sprite を右クリック > Rename で名前変更ができるので、"PopupWindow" に変更します。
• PopupWindow を選択して、インスペクターの "UISprite" の項目の "Widget" の中の "Dimensions" で、ウィンドウのサイズを指定します。

閉じるボタンの作成

• アセットで "simple button" で検索すると "Control - Simple Button" というプレハブを表示します。
• "Control - Simple Button" を PopupWindow にドラッグアンドドロップして子要素にします。
• "Control - Simple Button" を "CloseButton" に Rename します。
• PopupWindow の裏に隠れてしまう場合は、インスペクターの UISprite の Depth を変更します。Depth が大きいほど重なり順が手前になります。

ウィンドウの表示ボタンの作成

• "Control - Simple Button" を UI Root の直下にドラッグアンドドロップしてコピーを作成し、これを "OpenButton" に Rename します。

ウィンドウにポップアップの動きを追加

• ヒエラルキーから PopupWindow を選択し、[NGUI] > [Tween] > [Position] で表示位置を変更するコンポーネントを追加します。
  • Tween Position コンポーネントは UIPlay Tween コンポーネントから呼び出されたタイミングで実行され、From 座標から To 座標へ、あるいはその逆方向へ、アタッチされたオブジェクトの位置を変更します。
• インスペクターの From に画面外の座標、To に画面内の座標を指定します。
• PopupWindow の位置を From と同じ座標にします。

ウィンドウ表示ボタンでウィンドウが表示されるように

• OpenButton を選択し、[NGUI] > [Attach] > [Play Tween Script] を選択します。
• インスペクターの UIPlay Tween の Tween Tartget に PopupWindow をドラッグアンドドロップして対象にします。
• Trigger condition を On Click にして、クリック時に Tween が実行されるようにします。
• Play direction を Forward にして、From から To に動くようにします。

閉じるボタンでウィンドウが閉じるように

• OpenButton の要領で、UIPlay Tween を準備します。
• OpenButton との違いは、UIPlay Tween の Play direction を Reverse にして、To から From に動くようにします。

動作確認

• シーンを実行して動作確認をします。表示ボタンをクリックでウィンドウが現れ、閉じるボタンで隠れることを確認します。