参考にしたサイト
- テラシュールブログ様Unityの新GUI、uGUIはどうなる？こうなる！
- YouTubeUnity 4.6 - New UI System overviewこちらもテラシュールブログ様のページにあったリンクです。
■ uGUI 学習内容
- Spriteの配置
- SpriteのBorder設定
- Button作成
- ButtonにAnchorの設定
- Buttonアニメーション
- Buttonを押した時(OnClick)して、SendMessageを送る
- Buttonを押してエフェクトをInstanceする
まずは、完成品のUnity Sceneを。
画面左側に並ぶ、Eff_Hit_1〜7がボタンになっています。
押すと、エフェクトが再生されます。
1.Spreiteの配置
まずは、Textureのインポートから。
①ProjectにTextureのFrame.pngを読み込む。
サンプルは、こちらからFrame1.png
（画像が白いので、分かりにくいと思います。右クリック>リンク先を別名保存でダウンロードしてください。）
②Texture Type をSprite(2D and UI) に変更
③Apply
次に、Spriteの配置を行う為に。
①メニューのGameObject > UI > Image
②HierarchyにCanvasとImageのGameObjectが追加される。
次に、Spriteの画像を指定する。
①Imageを選択した状態で、InspectorのSouce Imageの右にある黒丸を選択
②Select Spriteウィンドウから、FrameのSpriteを選択
これでSpriteの配置が終了！
2.SpriteのBorder設定
今の状態で、Imageのサイズ(Width)を横に伸ばすと、
絵が横伸びになってしまいます。
試しにWidthを300にすると。
これを解決する為に、SpriteのBorderを設定します。
①ProjectのFrameを選択
②InspectorのSprite Editorを選択
Border設定
①Sprite Editor上のBorder L(Left) B(Botom) R(Right) T(Top) に30と入力
②Apply
これだけでは、伸びている見た目が変わりません。
次に、Imageの設定を変えていきます。
①HierarchyのImageを選択
②InspectorのImage Type をSimpleからSlicedに変更します。
すると、枠のふちが伸びていた部分が綺麗になりました。
Borderの設定で画像の伸びを修正出来ました。
3.Button作成
次に、Frameの中にテキストを配置してみます。
メニューのGameObject > UI > Text
次に、TextをImageの子に移動させ、各種設定を行います。
①GameObjectの"Text"をImageの子に移動
②InspectorでTextの中に"Eff_Hit_1"と入れる
③各種設定を行う
次に、Imageの名前を変更してButtonScriptを割り当てる。
①HierarchyのImageを選択して、Buttonに名前を変更する
②Buttonを選択した状態で、InspectorのAdd Component
③UI > Button を選択する
Gameを実行すると、Buttonを押した時に
画像が暗くなる見た目になっており、ボタンの完成です！
4.ButtonにAnchorの設定
次に、ButtonにAnchorというものを設定していきます。
Anchorとは、画面のどの位置を基点にするかを設定する機能です。
とりあえず、設定していきましょう！
①HierarchyのButtonを選択
②InspectorでRect Transformの左側にある、四角い十字の枠を選択
Anchor Presetsが出てきたと思うので、
①画面の左端を基点にするように設定
②PosXが、-310となった事を確認
これで、左基点になりました。Buttonの位置も調整していきます。
①HierarchyのButtonを選択している事を確認
②InspectorでPosX 60に変更
③Buttonが左に移動した事を確認
以上で、Anchorの設定は終わりです！
大分長くなってきたので、読むの疲れてきた人は、
ちょっとお茶休憩しましょう☆
5.Buttonアニメーション
さて、次にButtonのアニメーションを付けていきます。
①HirarchyのButtonを選択している事を確認
②Inspector Button(Script) Trantition を変更する
③Color Tint から Animationに変更する
次にButtonのアニメーションをする為のAnimatorを作ります。
①Button(Script)のAuto Generate Animation を選択
②適当な所に、Button.controllerを保存する。
今回は、Animatorフォルダを新規で追加して、そこにセーブしました。
これでアニメーションを付ける準備が出来ました。
アニメーションを付けていきます。
①HirarchyのButtonを選択している事を確認
②Animation WindowのclipをNormalから、Highlightedに変更
次に、アニメーション(Highlighted)の設定をする
①Animation Windowの赤いボタンを選択（録画ボタン？）
②InspectorでPosX 80に変更
③Color の設定を変える
④R:0 G:255 B:255 にする
次に、アニメーションをHighlightedからPressedに変える
最後にに、アニメーション(Pressed)の設定をする
①InspectorでPosX 85に変更
②Color の設定を変える
③R:0 G:255 B:0 にする
以上でボタンのアニメーション付けは終了です！
マウスオーバーすると、青になって、
クリックすると、緑になると思います。
6.Buttonを押した時(OnClick)して、SendMessageを送る
7.Buttonを押してエフェクトをInstanceする
まず、SendMessageを送る対象のGameObjectを作成します。
①メニューのGameObject > Create Empty
②名前をEffectGeneratorに変えます。（名前は、何でもいいです！）
③Transformが、初期値になっている事を確認。
Position X:0 Y:0 Z:0 Rotation X:0 Y:0 Z:0 Scale X:1 Y:1 Z:1
次にこちらのスクリプトを作成します。
Effect_Controler.cs (C#)
using UnityEngine;
using System.Collections;
public class Effect_Controler : MonoBehaviour {
public GameObject Effect1;
public GameObject Effect2;
public GameObject Effect3;
public GameObject Effect4;
public GameObject Effect5;
public GameObject Effect6;
public GameObject Effect7;
void Effect_Instance1() {
GameObject cloneobj = (GameObject)Instantiate(Effect1, new Vector3(0,0,0), transform.rotation);
cloneobj.transform.parent = transform;
}
void Effect_Instance2() {
GameObject cloneobj = (GameObject)Instantiate(Effect2, new Vector3(0,0,0), transform.rotation);
cloneobj.transform.parent = transform;
}
void Effect_Instance3() {
GameObject cloneobj = (GameObject)Instantiate(Effect3, new Vector3(0,0,0), transform.rotation);
cloneobj.transform.parent = transform;
}
void Effect_Instance4() {
GameObject cloneobj = (GameObject)Instantiate(Effect4, new Vector3(0,0,0), transform.rotation);
cloneobj.transform.parent = transform;
}
void Effect_Instance5() {
GameObject cloneobj = (GameObject)Instantiate(Effect5, new Vector3(0,0,0), transform.rotation);
cloneobj.transform.parent = transform;
}
void Effect_Instance6() {
GameObject cloneobj = (GameObject)Instantiate(Effect6, new Vector3(0,0,0), transform.rotation);
cloneobj.transform.parent = transform;
}
void Effect_Instance7() {
GameObject cloneobj = (GameObject)Instantiate(Effect7, new Vector3(0,0,0), transform.rotation);
cloneobj.transform.parent = transform;
}
}多分、構造体？enm?を使えば、もっと汎用的に短いソースコードで
書けるのでしょうけど、分からないのでベタ書きです。。
内容は、Effect1~7をそれぞれ、任意のタイミングでInstanceする内容です。
ソースコード作成とGameObjectに割り当てる。
①Effect_Controler.csを作成
②HirarchyでEffect_Controlerに、スクリプトEffect_Controler.csを割り当てる。
次に、Instanceする為のエフェクトを設定します。
こちらのEff_Hit_1.unitypackageをご使用ください。
ダウンロードして、unitypackageをインポートしてきたら、
①HirarchyでEffect_Controlerを選択確認
②Eff_Hit_1を割り当てる。
次に、Buttonの設定を変更する
①Hirarchy内のButtonを選択する。
②Inspector内のButton(Script)Commpornent内にある
On Click() の右下 "+"ボタンを押す
③枠が追加されるのでそのの中に、
Hierchy内のEffect_Controlerをドラッグ&ドロップで割り当てる
Buttonの設定の続きを。
①No Functionのボタンを押して
②GameObject > SendMessage(String) を選択
Buttonの設定最後！
最後の右の欄に、"Effect_Instance1"と入力する。
(これは、GameObjectのEffect_Controlerに割り当てられてるスクリプトの
void Eff_Instance1()を実行しなさいと、SendMessageで命令している）
これで、ゲームを実行すると、
Eff_Hit_1ボタンを押すと、Eff_Hit_1のエフェクトが再生されると思います！
お疲れさまでした！
後は、Buttonを増やして、Instanceする用のエフェクトなどを増やし、
配置していくと、ページ最初の用なシーンが作れると思います。
色々試行錯誤してみてください！
最後までお付き合いして頂きありがとうございました。
何か不明な所がありましたら、コメントに質問を宜しくお願い致します！
Git:HubにこちらのサンプルProjectをアップしました。
GitHubリンク:Test_uGUI
ページ内右下の"Download ZIP" からダウンロード出来ます。
以下宣伝です。------------
よかったら、こちらのアプリも遊んでみてください！
AppStoreリンク:HANABI-花火-
Google Play リンク:HANABI-花火-
