読者です 読者をやめる 読者になる 読者になる

(:3[kanのメモ帳]

個人ゲーム開発者kan.kikuchiのメモ的技術ブログ。月木更新でUnity関連がメイン。

CCMenuItemSpriteのタッチ可能範囲(当たり判定)だけ広げる【cocos2dx】

cocos2dx

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

CCMenuItemSprite

CCMenuItemSpriteでボタンを作ったは良いが、タッチ出来る場所だけ広げたい!ってときに使える方法です。

なお、CCMenuItemSpriteの名称の時点でお気づきかと思いますが、2.x系ですのであしからず。


setContentSize

setContentSizeを使えば画像の大きさは変えずに当たり判定を広げられるようです。ただこれだけだと問題があります。

但しこの方法、ちょっと難点が有ります。
追加する領域はボタン画像に対して 上側と右側にしか領域を増やせません。
画像の左下を原点として、画像の領域をプラスする為です。

上記の記事の通り、当たり判定が右上にしか広がらないのです

上記の記事ではダミー領域を作り、そのダミーをボタンの上に載せて代用しているのですが、ちょっと違う方法を思い付いたので試してみました。


normal画像やselected画像だけずらす

CCMenuItemSpriteに設定しているnormal画像やselected画像の位置を右上にずらせば、いい感じに全方向にタッチ範囲が拡大したので、そのコードを記載します。

一応コード説明をば、

minContentSize

ボタンがタッチ可能な範囲の最少です。何倍とかで指定しちゃうと横長の画像は横だけやたら当たり判定が広くなるとか起きちゃうので最少で設定しています。

float contentRateX = MAX(1.0f, minContentSize / normal->getContentSize().width);

また、元のサイズよりタッチ判定が小さくならないようにもしています。

imageName

ボタンの画像名です。今回はスプライトシートにまとめられている画像を使う前提なので、そうでない場合はcreateWithSpriteFrameNameを適宜変更してください。

target, selector

CCMenuItemSprite作る時と同じで、ボタンを押した時に実行するメソッドとそのターゲットです。

ずらす

normal->getPositionX() + normal->getContentSize().width  * (contentRateX - 1.0f) * 0.5f

拡大した半分だけ右上に移動する事で上下左右に当たり判定を広げたように見せています。


おわりに

当たり判定はそんなに大きくなくとも、元のボタンより大きいだけでかなり押し易くなります。逆にボタン自体が大きくとも当り判定がボタンと全く同じだと意外と使いにくかったりもします。まぁタッチ判定は点なのに対し、指で触ってる感覚(?)は面なので、どうしてもズレが生じてしまいますからね。