[Unity] Button をCanvasに設置する

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

Unity 2018.1

 




Button

 
画面に画像を設置する方法はこのようにできます。

タイトル画面に画像を表示したい場合は、3Dとは別のCanvasにImage を配置することで実現できます。  

同様にボタンも重要なUIの一つであり、クリックすることでアクションをおこさせたいときに有効です。
 

 

Buttonを設定

 
「UI」から「Button」を選択するとButton が生成されます。
 
button_02
 
Sceneの初期設定では見えにくいかもしれません、ハンドツールで調整して見やすくしてもいいかもしれません。
 
button_03
 
Canvas, EventSystem, そしてButtonの下にはTextがあります。
 
button_04

 

Button Click

 
ボタンのクリックアクションを確認します
 
Project の Create から
「C# Script」でスクリプトファイルを作ります。
BTonClick()をPublicで設定してクリックイベントでデバッグログを出してみましょう。
 
ButtonClick.cs

 
このスクリプトファイルをHierarchyのButtonにドラッグ&ドロップします。
 
button_05
 
Button の Inspector を見るとButton Click(Script)が追加されています。

button_08
 
On Click()List is Empty がその上のButton (Script)にあるのでその下の「+」ボタンをクリックします。
 
button_06
 
List is EmptyのところにNone (Object)というのが表示されるので、その右の◉をクリックして、出てきたダイアログの「Scene」タブから「Button」を選択します。
 
button_07
 
次に、その隣にある「No Function」をクリックして、作成したスクリプト(ButtonClick.cs) の名前のButtonClick からスクリプト内のメソッドBTonClick() を選択します。

 
button_09
 
これで実行すると
 
button_10
 
Button Click : 2
のようにクリックでのカウントアップがログに出力されるのがわかります。

 

Click Action

 
もう少しスクリプトに手を加えて、画面上でアクションを起こしてみたいと思います
 
Imageを生成、画像をSpriteに変換してImageに追加します。
画像の設定については

タイトル画面に画像を表示したい場合は、3Dとは別のCanvasにImage を配置することで実現できます。  

を参考にしてください。
 
このImageのアンカー位置を四隅にボタンクリックで変更するスクリプトを書きます
 
ButtonClick2.cs

 
Button の Inspector には、ButtonClick2 のcanvasとimageを設定するようになっています。
前のButton Clickはチェックを外して、Button Click 2 へHierarchyからドラッグして設定します。
 
button_11
 
これでボタンをクリックすると緑のバッグが四隅を移動するようになりました。
 

 
 
References:
UI.Button.onClick – Unity スクリプトリファレンス
Button – Unity マニュアル