[Unity] uGUI Button を設定する

ゲームでスタート、リトライなどのユーザーからのインターフェースとしてボタンは欠かせません。UI の中にImageと同じようにButtonもありますので設定してみたいと思います

ボタンを押すとImageがCanvas上の四隅を移動する例です
 
スクリーンショット 2016-01-05 18.44.49

Unity 5.4.2f2

 

sponsored link

uGUI Button

 

Buttonを設定

 
「UI」から「Button」を選択します

スクリーンショット 2016-01-05 19.04.59

Button が生成されました

スクリーンショット 2016-01-05 19.06.45

Canvas, EventSystem, そしてButtonの下にはTextがあります
 

Button Click

 
ボタンのクリックアクションを確認します

Project の Create から
「C# Script」でスクリプトファイルを作ります

ButtonClick.cs

このスクリプトファイルをHierarchyのButtonに
ドラッグ&ドロップします

スクリーンショット 2016-01-05 19.15.53

Button の Inspector を見るとButton (Script)に

On Click()
List is Empty

というのがあるのでその下の「+」ボタンをクリック

button_ugui

List is Emptyのところに
None (Object)というのが表示されるので、
その右の◉をクリックし
出てきたダイアログから「Button」を選択します

スクリーンショット 2016-01-05 19.32.16

次に、その隣にある
「No Function」をクリック
作成したスクリプトの名前の
ButtonClick からスクリプト内のメソッド
OnClick() を選択します

スクリーンショット 2016-01-05 19.36.40

これで実行すると

スクリーンショット 2016-01-05 19.40.28

Button Click : 3
というログが出力されたのがわかります
 

Click Action

 
もう少しスクリプトに手を加えて、画面上でアクションを起こしてみたいと思います

Imageを生成、画像をSpriteに変換してImageに追加します
このImageのアンカー位置を四隅にボタンクリックで変更するスクリプトを書きます

ButtonClick.cs

Button の Inspector には
ButtonClick のcanvasとimageを設定するようになっていますので
Hierarchyからドラッグ&ドロップします

スクリーンショット 2016-01-05 20.25.30

これでボタンをクリックすると緑のバッグが四隅を移動するようになりました

ページのトップへ戻る
 
sponsored link
  • このエントリーをはてなブックマークに追加