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

nirasan's tech blog

趣味や仕事の覚え書きです。Linux, Perl, PHP, Ruby, Javascript, Android, Cocos2d-x, Unity などに興味があります。

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 が大きいほど重なり順が手前になります。

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

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

  • ヒエラルキーから 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 に動くようにします。

動作確認

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