NGUIのチュートリアル「Part 1 ー Basics」

公式のチュートリアルの解説。このチュートリアルで作るのはこの様なウィンドウ。

元の動画はこちら。YouTubeにも上がってますがこちらはちょっと解像度が低くて見づらいです。

それでは早速、動画の内容を順番に説明して行きます。

プロジェクトの作成

まずは新しいプロジェクトを作成して、NGUIをインポートして下さい。

するとメニューに NGUI の項目が追加されます(追加されて無い場合もメニューを触ると追加されるはずです)。

Panel作成

メニューから「NGUI」→「Create a New UI」でUI作成用のビューを表示します。

デフォルトの選択状態のままで「Create Your UI」ボタンを押します。

するとこの様な階層構造で Panel が生成されます。

Wedget作成用のビューをドッキング

メニューから「NGUI」→「Create a Wedget」でWedget作成用のビューを表示します。

これはよく使うのでこの様に使い易い位置にドラッグしてドッキングしておきましょう。

ウィンドウの背景用スプライトの作成

Wedget作成用のビューの「Atlas」と「Font」の項目にはそれぞれ「SciFi Atlas」と「SciFi Font - Normal」を設定(ドラッグ)し、

「Template」と「Sprite」の項目は以下の様に設定して、「Add To」ボタンを押します。今回のチュートリアルではこれ以降、「Atlas」と「Font」の項目は変更しません。

これはウィンドウの背景用に使うパーツです。Unityの標準のScaleツールでこの様にリサイズします。

いい感じにリサイズ出来たらInspectorの「Make Pixel-Perfect」ボタンを押します。するとTransformの値から小数点以下の値が切り捨てられ、整数に整形されます。

ウィンドウの背景に模様を追加

Wedgetのビューで以下の様な設定を行い、「Add To」ボタンを押します。

背景用のスプライトと同じサイズにリサイズします。

Inspectorの「Color Tint」の項目で黒を選択し、背景が目立たない様にします。

「Make Pixel-Perfect」ボタンを押します。

タイトルバーの作成

Wedgetのビューで以下の様な設定を行い、「Add To」ボタンを押します。

以下の様にリサイズ＆移動でレイアウトします。

「Color Tint」の項目で色を緑に設定します。

「Make Pixel-Perfect」ボタンを押します。

ボタンの作成

Wedgetのビューで以下の様な設定を行い、「Add To」ボタンを押します。

以下の位置に配置します。

ここでゲームを再生してボタンがカーソルを重ねた時やクリックに反応する事を確認しましょう。

ボタンの色の変更

ボタンのBackgroundを選択し、

Inspectorの「Color Tint」の項目で色を青に設定します。

「Make Pixel-Perfect」ボタンを押します。

スライダーの作成

HierarchyビューでPanelを選択します。

Wedgetのビューで以下の様な設定を行い、「Add To」ボタンを押します。

以下の位置に配置します。

ここでゲームを再生してスライダーが動作する事を確認しましょう。

スライダーの色の変更

スライダーのForgroundを選択し、

Inspectorの「Color Tint」の項目で色をオレンジに設定します。

「Make Pixel-Perfect」ボタンを押します。

タイトルバーにタイトルを記述

HierarchyビューでPanelを選択します。

Wedgetのビューで以下の様な設定を行い、「Add To」ボタンを押します。

以下の位置に配置します。

Inspectorの以下の部分に「Window Text」と入力します。

ここでは途中で文字の色を変更する事も出来ます。「Window [FF0000]Text」と変更してみて下さい。Textの文字が赤になったはずです。

チェックボックスを作成

HierarchyビューでPanelを選択します。

Wedgetのビューで以下の様な設定を行い、「Add To」ボタンを押します。

以下の位置に配置します。

ここでゲームを再生してチェックボックスが動作する事を確認しましょう。

以上でチュートリアル「Part 1 ー Basics」は終了です。