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

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

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

【更新】下記リンクであたらしくタッチ反応領域変更の情報を更新しています。Unityの進化などで、新しく2パターン、タッチ範囲を調整する方法を追記しました unity2d.hateblo.jp


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

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

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


おまけ - 描画負荷をかけないようにするUIの透明画像

このままだと、透明画像に対して描画が走るので、負荷がかかります。 なので、以下の記事も書きました。

unity2d.hateblo.jp