Unity(C#)初心者・入門者向けチュートリアル ひよこのたまご

AndroidやiOS向けアプリを簡単に作れるゲーム開発環境Unity(ユニティ)の使い方を、チュートリアル方式で一緒に学びましょう!

【Unity開発】uGUIのButtonの使い方(On Click等)【ひよこエッセンス】

いつもひよこのたまごをご利用下さいましてありがとうございます!
おかげ様でチュートリアル数も10ゲーム目となりました!
チュートリアル一覧は
こちら からどうぞ!


スポンサーリンク

Unity5.0.0f4 Personal(2015年5月)

 

f:id:hiyotama:20150504205926p:plain

 

ひよこエッセンスの時間です〜

Unity開発でよく出てくるパターンをエッセンスとしてまとめておきます〜

今回はuGUIのButtonについてです〜

uGUIのButtonまとめ

 

①ボタン素材を作成する

 

まずはボタンの素材を作成します〜ネット検索したら下のサイトがヒットしましたので、活用させて頂きましょう〜

 

box.aflat.com

 

ノーマル

f:id:hiyotama:20150511103626g:plain

マウス通過時

f:id:hiyotama:20150511103635g:plain

クリック時

f:id:hiyotama:20150511103642g:plain

 

上の3つのボタン素材を生成しました〜ちなみにサイズは縦40px、横200pxにしました!Spriteのサイズは4の倍数にしておかないと警告が出てしまうので、ご注意下さい〜

その他Sprite画像の設定については以下エッセンスをご参照下さい〜

 

hiyotama.hatenablog.com

 

②ボタンの作成

それでは次に、ボタンを作ってみましょう〜HierarchyからCreate>UI>Buttonを選択して下さい〜

 

f:id:hiyotama:20150506170137p:plain

 

すると、Canvas、Button、Text、EventSystemと4つのオブジェクトが作成されます〜今回はButtonの説明をしていきます〜

 

f:id:hiyotama:20150511143006p:plain

f:id:hiyotama:20150506170432p:plain

ゲーム画面

 

それではButtonのInspectorビューをご覧下さい〜

 

f:id:hiyotama:20150506170504p:plain

 

GUIの位置や大きさを設定するRect Transformについては下記エッセンスをご参照下さい〜

 

というわけで、今回はInspectorの中でもImage(Script)とButton(Script)について説明していきます〜まずはImage(Script)からです〜Imageについては、Source Imageについてのみ説明致します〜

 

③Source Image

Source Imageにて、ボタンの画像を指定することができます〜先ほど作成したボタンのうち、ノーマルボタンを指定してみましょう〜

 

f:id:hiyotama:20150511143515p:plain

button1を指定

 

f:id:hiyotama:20150511144043p:plain

ボタンのImageを変更

 

④Interactable

ボタンの有効にするか無効にするかを決めます〜

 

⑤Transition

ボタンの挙動を設定します〜今回はSprite画像を使うためSprite Swapを指定しますが、基本的な設定方法は全て似たようなものです〜

 

f:id:hiyotama:20150511144559p:plain

Transitionの設定で重要な項目

 

上画像の赤枠で囲った部分が、ボタンの挙動を設定する上で大切なところです〜

Highlighted Spriteはマウスがボタンの上に載っている時のSprite画像です〜マウス通過時ボタン画像を指定します〜

 

f:id:hiyotama:20150511144826p:plain

button2を指定

 

次にボタンをクリックした時のSprite画像を設定していきたいと思います〜Pressed Spriteにクリック時ボタン画像を指定します〜

 

f:id:hiyotama:20150511145048p:plain

button3を指定

 

これで普通の状態、マウスがボタンの上に乗った時、マウスをクリックした時のボタンの挙動が設定できました〜

 

f:id:hiyotama:20150511145246p:plain

普通の状態

 

f:id:hiyotama:20150511145301p:plain

マウスがボタンの上に乗った時

 

f:id:hiyotama:20150511145323p:plain

マウスをクリックした時

 

ちなみにDisable SpriteはButtonを使用不可にした時のSprite画像を指定します〜

 

⑥ボタンクリック時のイベント

ボタンをクリックした時に何かスクリプトを実行させないとボタンの意味がありませんので、実装します〜

 

まずは以下のbuttonScriptをボタンに取り付けて下さい〜

 

 

ButtonPushメソッドを呼び出した時に「Button Push !!」というメッセージを呼び出しているだけです〜ポイントは、メソッドをスクリプトの外から呼び出すため、publicメソッドになっている点です〜

 

次にOn Click の設定をしていきます〜まずはOn Clickと書かれているところのプラスボタンを押して、新しいイベントを作成して下さい〜

 

f:id:hiyotama:20150511150725p:plain

プラスボタンを押してイベント作成

 

続いて、Noneと書かれているところをクリックし、このオブジェクト自体(つまりButton)を指定して下さい〜

 

f:id:hiyotama:20150511150849p:plain

 

最後にNo Functionと書かれているところをクリックし、先ほど作成したbuttonScript>ButtonPushを選択して下さい〜指定できない場合は恐らくscriptをボタンオブジェクトにつけ忘れたかpublicメソッドにし忘れたかなので、ご確認下さい〜

 

f:id:hiyotama:20150511151126p:plain

ButtonPushメソッドを指定

 

これでボタンを押した時にConsoleビューに「Button Push !!」というメッセージが表示されるはずです〜

 

f:id:hiyotama:20150511151338p:plain

ボタンを押した時にButton Push !!の文字が表示される

 

以上、ひよこエッセンスでした〜

ありがとうございました〜