画像はそのままでボタンを押しやすくしてみよう

エンジニアブログ３回目の担当となる櫻井です。
今回も引き続き開発での苦い経験から記事を書かせて頂きます。

■初回：スクロールビューと複数のボタンを併用する際の注意点
■２回目：CCMenuと不思議なAnchorPointとScale

今回の内容はcocos2d-x の CCMenuで作成するボタンについて、
「ボタンが小さくて押しにくいが、レイアウトの関係で画像はどうしても拡大できない状況で、何とかボタンを押しやすくできないか」という良く有る（？）シチュエーションにおける対処法です。

例えば下の画像（図１）をボタンとします。

図１

次の背景画像にボタンを設置しました。（図２）

図２

ボタンが小さくてとても押しにくいのですが、レイアウトの関係上画像を大きくすることもできません。
この様な状況において、画像はそのままでボタンを押し易くしてみます。

今回取り上げる方法は２パターン有ります。

パターン①：画像の領域を広げてやり、タッチ判定される領域を増やす
パターン②：ボタンの上に透明なレイヤーを載せてやり、レイヤータッチ時にボタンが押されたものと見なす

パターン①の方法は、CCMenu に載せる CCMenuItemImage に対して、画像の領域を広げてやります。

下の図３の様にボタンを設置します。

図３

このボタンの領域を setContentSize で広げてやります。（図４）

pButtonItem->setContentSize(CCSizeMake(pButtonItem->getContentSize().width + 373, pButtonItem->getContentSize().height + 213));

図４

これによって図４の「有効範囲」で示す水色の領域がボタンとして反応する領域になりました。
（元画像が107×107のサイズで、右側に373ドット、上側に213ドット増え、480×680の領域が有効範囲です）

１行コードを埋め込むだけでとっても簡単でイイですね＾＾

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

画像の基準点を変えたり（ setAnchorPoint ）、setAnchorPoint の有効無効の切替（ ignoreAnchorPointForPosition ）を駆使してみても駄目でした。

お手軽ですが、ちょっと使い所が難しいですね＞＜

パターン②の方法は CCNode や、CCLayer で透明な領域を作り、その領域をボタンの上に載せてやります。（図５）
※今回は分かり易くする為に CCLayerColor を使用しています

図５

// ダミーの領域を作成  
CCLayerColor* dummyLabel = CCLayerColor::create(ccc4(0, 224, 224, 128));
dummyLabel->setContentSize(CCSizeMake(pCloseItem->getContentSize().width * 1.5f, pCloseItem->getContentSize().height * 1.5f));
CCMenuItemLabel* dummyMenuItem = CCMenuItemLabel::create(dummyLabel, this, menu_selector(HelloWorld::menuCloseCallback));
CCMenu* dummyButton = CCMenu::create(dummyMenuItem,NULL);
dummyButton->setAnchorPoint(ccp(0,0));
this->addChild(dummyButton,200);
dummyButton->setPosition(ccp(pMenu->getPositionX() + pButtonItem->getContentSize().width * 0.5f , pMenu->getPositionY() + pButtonItem->getContentSize().height * 0.5f));

水色の領域が有効範囲となり、ボタン画像に対して上下左右に領域が広がっており、とても良い感じですね！

この方法で最初の方に取り上げた犬のおでこにボタン（図２）に対して、透明なボタンを設置してみます。（図６）

図６

水色の範囲が有効になっているので、とても押し易くなっています。
パターン①に比べると手間が増えますが、とても使い易いと思います。

これで、押しにくい小さなボタンでもちょいちょいっと押し易くできちゃいますね＾＾
より使い易いUIを目指して日々精進ですよ〜

画像はそのままでボタンを押しやすくしてみよう

採用情報