強火で進め このページをアンテナに追加 RSSフィード

【選択肢はいつも諦めるか、なんとかするかの二つ】

最近はiPhoneとUnity
立体視WebGL辺りにお熱です。整理された情報は こちら へどうぞ。

2012年03月04日

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

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

f:id:nakamura001:20120304171914p:image

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

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

プロジェクトの作成

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

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

Panel作成

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

f:id:nakamura001:20120304172139p:image

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

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

f:id:nakamura001:20120304160430p:image

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

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

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

f:id:nakamura001:20120304160633p:image

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

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

f:id:nakamura001:20120304161051p:image

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

f:id:nakamura001:20120304161336p:image

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

f:id:nakamura001:20120304162310p:image

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

f:id:nakamura001:20120304170749p:image

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

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

f:id:nakamura001:20120304170918p:image

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

f:id:nakamura001:20120304170935p:image

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

f:id:nakamura001:20120304171029p:image

f:id:nakamura001:20120304171039p:image

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

タイトルバーの作成

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

f:id:nakamura001:20120304171114p:image

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

f:id:nakamura001:20120304171414p:image

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

f:id:nakamura001:20120304171434p:image

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

ボタンの作成

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

f:id:nakamura001:20120304171458p:image

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

f:id:nakamura001:20120304171518p:image

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

ボタンの色の変更

ボタンのBackgroundを選択し、

f:id:nakamura001:20120304171532p:image

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

f:id:nakamura001:20120304171556p:image

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

スライダーの作成

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

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

f:id:nakamura001:20120304171615p:image

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

f:id:nakamura001:20120304171628p:image

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

スライダーの色の変更

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

f:id:nakamura001:20120304171723p:image

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

f:id:nakamura001:20120304171742p:image

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

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

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

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

f:id:nakamura001:20120304171754p:image

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

f:id:nakamura001:20120304171810p:image

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

f:id:nakamura001:20120304171835p:image

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

f:id:nakamura001:20120304171847p:image

チェックボックスを作成

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

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

f:id:nakamura001:20120304171901p:image

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

f:id:nakamura001:20120304171914p:image

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

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

投稿したコメントは管理者が承認するまで公開されません。

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証