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

WonderPlanet DEVELOPER BLOG

ワンダープラネットの開発者ブログです。モバイルゲーム開発情報を発信。

CCMenuと不思議なAnchorPointとScale

エンジニアブログ2回目の担当となる櫻井です。
今回も前回に引き続き開発で悩んだり躓いたり嵌った苦い思い出から、記事を書かせて頂きます。
前回:スクロールビューと複数のボタンを併用する際の注意点

今回の内容はcocos2d-x の CCMenu と setAnchorPoint 、setScale についてです。
画面のレイアウトにおいてボタンである CCMenu の setAnchorPoint や setScale が想定通りにならず上手く位置が合わないことが有ります。

そこで今回はCCMenuを使う際の setAnchorPoint と setScale の設定で気を付けたいことを書こうと思います。


まず AnchorPoint とは、オブジェクトの基準点です。
何も指定しないデフォルトの設定では真ん中になっていることが多いです。
今回は下の画像(図1)を使って動きを確認して行きます。

BlogFile_01
図1

画像を CCSprite でポジションを真ん中にセットし、setAnchorPoint は設定しなかった場合が下図(図2)です。

BlogFile_02

図2

画像の真ん中が基準点となっています。

次に setAnchorPoint を左下(0, 0) にセットした場合が下図(図3)です。
指定通り基準点が左下に切り替わっています。

BlogFile_03

図3

画像の「CCSprite」以外にも、文字列の「CCLabelTTF」、ボタンを作る「CCMenu」、CCMenuとセットで使う「CCMenuItemImage」も setAnchorPoint のデフォルトは真ん中になっています。

次にsetScale です。指定したオブジェクトの倍率を指定し、拡大や縮小をかけます。
下図(図4)は setAnchorPoint を右下(1, 0)で、setScale を3.0倍した結果です。

BlogFile_12

図4

右下を基準点として3.0倍に拡大されています。

ここで本題
「CCMenu」は setAnchorPoint を指定しても基準点がズレなくなっており、要注意です。

先ほど図2で示したCCSpriteの画像を CCMenu にして setAnchorPoint を左下(0, 0)にセットしてみます。(図5)

BlogFile_03

図5

真ん中のままです。基準点を右上にしたり他にズラしても同じ結果です。何て頑固な。

今度は setScale で倍率を調整して見ましょう。
以下、括弧の順番に倍率を設定した結果です。
(2.0f、 1.75f、 1.5f、 1.25f、 0.75f、 0.5f)(図6〜11)

BlogFile_05

図6

BlogFile_06

図7

BlogFile_07

図8

BlogFile_08

図9

BlogFile_09

図10

BlogFile_10

図11

何て不思議な動き!レイアウト調整したくないですね!!

因みに CCMenu とセットで使用する CCMenuItemImage に対しては、素直に設定が効きます。
下図(図12)は setAnchorPoint 右上(1, 1)で、setScale(2.0f) に指定した結果です。とても素直でいい子ですね^^

BlogFile_11
図12

CCMenu は、なまじ配置の setPosition が普通にできてしまうので、setAnchorPoint や setScale も設定できてしまいそうに思いがちですが、実は素直にできないので困りものです。

なので、ボタンに対する setAnchorPoint や setScale は、CCMenu ではなく、CCMenuItemImage の方に対して設定することをおすすめします。

CCMenu のボタン配置で困っている人がこれを見て CCMenuItemImage を操作してくれることを祈ります。