[Unity] uGUI Button を設定する

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

Unity 2017.1

 




uGUI Button

 
テキストを画像を設定する方法は、アプリのタイトル画面のにテキストと画像を配置するにて確認しましたが、ボタンも重要なUIの一つです。クリックすることで何かアクションをおこさせたいときに有効なUIとなります。
 

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」を選択します
 

 
次に、その隣にある
「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
 
これでボタンをクリックすると緑のバッグが四隅を移動するようになりました。
 

ページのトップへ戻る





シェアする

  • このエントリーをはてなブックマークに追加

フォローする