おれ、Unity2Dでゲーム作るんだ。

Unity2Dをメインに、覚書などを記事にしていきます。

Unity - uGUI ボタン画像よりも大きなタッチ反応領域をつくる

画像をボタンにしたときに、画像が小さいと押しにくくなるので、 適当に押しやすい大きさにしたいが、画像は大きくしたくないときに以下の様にしています。

uGUIで簡単な画像ボタン設置

まずは、準備。 [GameObject]メニューの[UI]->[Image]で、イメージを追加します。デフォルトは白い正方形が貼られると思います。

適当に、x:0 y:0 width: 30 height : 30 くらいに設定します。

ヒエラルキーは

f:id:xev:20150824170041p:plain

こんな感じ。

ゲーム画面は、

f:id:xev:20150824170044p:plain

こんな感じになるかと思います。  
 
そして、この画像に、UIのボタンスクリプトをアタッチします。

f:id:xev:20150824170137p:plain

こんな感じ。

そうすると、インスペクターはこんな感じ。

f:id:xev:20150824170047p:plain

再生して、ボタンを押すと画像が反応するのが判ると思います。

ボタン画像よりも大きいタッチ範囲をつくる

ボタンは簡単にできましたが、ちょっと、ボタンの範囲が小さいです。 おおざっぱに押しても、反応させてあげたい場合があると思います。

意外と簡単で、ボタンの子オブジェクトにImageを追加して(図ではTouchAreaという名前にしています)

f:id:xev:20150824171004p:plain

適当に、x:0 y:0 width: 100 height : 100 くらいに設定します。

f:id:xev:20150824170050p:plain

あとは、インスペクターのImageからcolorを選択して、[A]透明度を0にします。 これで、見えないImageができあがります。

f:id:xev:20150824170118p:plainf:id:xev:20150824170122p:plain

そして、再生すれば、子オブジェクトの範囲でもボタンが反応してくれます。