ゲーム開発奮闘記

現在の関心事:UnityでiOS Androidアプリを作る事。Unityに感謝してます!

Unity 4.6Beta uGUI 履修1:Buttonを配置してみた。

参考にしたサイト

■ uGUI 学習内容

  1. Spriteの配置
  2. SpriteのBorder設定
  3. Button作成
  4. ButtonにAnchorの設定
  5. Buttonアニメーション
  6. Buttonを押した時(OnClick)して、SendMessageを送る
  7. Buttonを押してエフェクトをInstanceする

まずは、完成品のUnity Sceneを。
画面左側に並ぶ、Eff_Hit_1〜7がボタンになっています。
押すと、エフェクトが再生されます。

1.Spreiteの配置

まずは、Textureのインポートから。
①ProjectにTextureのFrame.pngを読み込む。
サンプルは、こちらからFrame1.png
(画像が白いので、分かりにくいと思います。右クリック>リンク先を別名保存でダウンロードしてください。)
②Texture Type をSprite(2D and UI) に変更
③Apply
f:id:KTK_kumamoto:20140824195250j:plain

次に、Spriteの配置を行う為に。
①メニューのGameObject > UI > Image
②HierarchyにCanvasとImageのGameObjectが追加される。
f:id:KTK_kumamoto:20140824195927j:plain

次に、Spriteの画像を指定する。
①Imageを選択した状態で、InspectorのSouce Imageの右にある黒丸を選択
②Select Spriteウィンドウから、FrameのSpriteを選択
f:id:KTK_kumamoto:20140826075454j:plain

これでSpriteの配置が終了!
f:id:KTK_kumamoto:20140824201831j:plain

2.SpriteのBorder設定

今の状態で、Imageのサイズ(Width)を横に伸ばすと、
絵が横伸びになってしまいます。
試しにWidthを300にすると。
f:id:KTK_kumamoto:20140825073227j:plain

これを解決する為に、SpriteのBorderを設定します。
①ProjectのFrameを選択
②InspectorのSprite Editorを選択
f:id:KTK_kumamoto:20140825073710j:plain

Border設定
①Sprite Editor上のBorder L(Left) B(Botom) R(Right) T(Top) に30と入力
②Apply
f:id:KTK_kumamoto:20140825074316j:plain

これだけでは、伸びている見た目が変わりません。

次に、Imageの設定を変えていきます。
①HierarchyのImageを選択
②InspectorのImage Type をSimpleからSlicedに変更します。
f:id:KTK_kumamoto:20140825074948j:plain

すると、枠のふちが伸びていた部分が綺麗になりました。
Borderの設定で画像の伸びを修正出来ました。
f:id:KTK_kumamoto:20140825075102j:plain

3.Button作成

次に、Frameの中にテキストを配置してみます。
メニューのGameObject > UI > Text
f:id:KTK_kumamoto:20140825205621j:plain

次に、TextをImageの子に移動させ、各種設定を行います。
①GameObjectの"Text"をImageの子に移動
②InspectorでTextの中に"Eff_Hit_1"と入れる
③各種設定を行う
f:id:KTK_kumamoto:20140825210340j:plain

次に、Imageの名前を変更してButtonScriptを割り当てる。
①HierarchyのImageを選択して、Buttonに名前を変更する
②Buttonを選択した状態で、InspectorのAdd Component
③UI > Button を選択する
f:id:KTK_kumamoto:20140825210828j:plain

Gameを実行すると、Buttonを押した時に
画像が暗くなる見た目になっており、ボタンの完成です!


4.ButtonにAnchorの設定

次に、ButtonにAnchorというものを設定していきます。
Anchorとは、画面のどの位置を基点にするかを設定する機能です。

とりあえず、設定していきましょう!
①HierarchyのButtonを選択
②InspectorでRect Transformの左側にある、四角い十字の枠を選択
f:id:KTK_kumamoto:20140826074222j:plain

Anchor Presetsが出てきたと思うので、
①画面の左端を基点にするように設定
②PosXが、-310となった事を確認
f:id:KTK_kumamoto:20140826074717j:plain

これで、左基点になりました。Buttonの位置も調整していきます。
①HierarchyのButtonを選択している事を確認
②InspectorでPosX 60に変更
③Buttonが左に移動した事を確認
f:id:KTK_kumamoto:20140826075108j:plain
以上で、Anchorの設定は終わりです!
大分長くなってきたので、読むの疲れてきた人は、
ちょっとお茶休憩しましょう☆

5.Buttonアニメーション

さて、次にButtonのアニメーションを付けていきます。
①HirarchyのButtonを選択している事を確認
②Inspector Button(Script) Trantition を変更する
③Color Tint から Animationに変更する
f:id:KTK_kumamoto:20140827074603j:plain

次にButtonのアニメーションをする為のAnimatorを作ります。
①Button(Script)のAuto Generate Animation を選択
②適当な所に、Button.controllerを保存する。
今回は、Animatorフォルダを新規で追加して、そこにセーブしました。
f:id:KTK_kumamoto:20140827075112j:plain

これでアニメーションを付ける準備が出来ました。
アニメーションを付けていきます。
①HirarchyのButtonを選択している事を確認
②Animation WindowのclipをNormalから、Highlightedに変更
f:id:KTK_kumamoto:20140827075750j:plain

次に、アニメーション(Highlighted)の設定をする
①Animation Windowの赤いボタンを選択(録画ボタン?)
②InspectorでPosX 80に変更
③Color の設定を変える
④R:0 G:255 B:255 にする
f:id:KTK_kumamoto:20140827210858j:plain

次に、アニメーションをHighlightedからPressedに変える
f:id:KTK_kumamoto:20140827211243j:plain

最後にに、アニメーション(Pressed)の設定をする
①InspectorでPosX 85に変更
②Color の設定を変える
③R:0 G:255 B:0 にする
f:id:KTK_kumamoto:20140827211722j:plain

以上でボタンのアニメーション付けは終了です!
マウスオーバーすると、青になって、
クリックすると、緑になると思います。


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
f:id:KTK_kumamoto:20140827212805j:plain

次にこちらのスクリプトを作成します。
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を割り当てる。
f:id:KTK_kumamoto:20140828100143j:plain

次に、Instanceする為のエフェクトを設定します。
こちらのEff_Hit_1.unitypackageをご使用ください。
ダウンロードして、unitypackageをインポートしてきたら、
①HirarchyでEffect_Controlerを選択確認
Eff_Hit_1を割り当てる。
f:id:KTK_kumamoto:20140828101632j:plain

次に、Buttonの設定を変更する
①Hirarchy内のButtonを選択する。
②Inspector内のButton(Script)Commpornent内にある
On Click() の右下 "+"ボタンを押す
③枠が追加されるのでそのの中に、
Hierchy内のEffect_Controlerをドラッグ&ドロップで割り当てる
f:id:KTK_kumamoto:20140828102337j:plain

Buttonの設定の続きを。
①No Functionのボタンを押して
②GameObject > SendMessage(String) を選択
f:id:KTK_kumamoto:20140828102710j:plain

Buttonの設定最後!
最後の右の欄に、"Effect_Instance1"と入力する。
(これは、GameObjectのEffect_Controlerに割り当てられてるスクリプト
void Eff_Instance1()を実行しなさいと、SendMessageで命令している)
f:id:KTK_kumamoto:20140828103019j:plain

これで、ゲームを実行すると、
Eff_Hit_1ボタンを押すと、Eff_Hit_1のエフェクトが再生されると思います!
お疲れさまでした!

後は、Buttonを増やして、Instanceする用のエフェクトなどを増やし、
配置していくと、ページ最初の用なシーンが作れると思います。
色々試行錯誤してみてください!

最後までお付き合いして頂きありがとうございました。
何か不明な所がありましたら、コメントに質問を宜しくお願い致します!

Git:HubにこちらのサンプルProjectをアップしました。

GitHubリンク:Test_uGUI
ページ内右下の"Download ZIP" からダウンロード出来ます。
f:id:KTK_kumamoto:20140828113014j:plain


以下宣伝です。------------
よかったら、こちらのアプリも遊んでみてください!
f:id:KTK_kumamoto:20140610205346j:plain:w100
AppStoreリンク:HANABI-花火-
Google Play リンク:HANABI-花火-


人気ブログランキングへ
にほんブログ村 IT技術ブログ Unityへ