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

WonderPlanet DEVELOPER BLOG

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

【Cocos2d-x】CCMenuを自動的に整列させて表示させよう

Cocos2d-x

今回のエンジニアブログを担当する大原です。

CCMenuに追加したCCMenuItemを整列させたいときに、プログラムで微調節しなくても、自動的に微調節してくれます。
今回は、そのメソッドを紹介したいと思います。

1.縦一連に並べてくれるメソッド

alignItemsVertically()

実際の使用例

    //メニューボタンオブジェ作成  
    CCArray *menuItems = CCArray::create();  
    for(int index = 1;index < = 16;index++)  
    {  
        CCLabelTTF *labelItem = CCLabelTTF::create(CCString::createWithFormat("[%2d]",index)->getCString(), "Arial", 32);  
        CCMenuItemLabel *menuItem = CCMenuItemLabel::create(labelItem);  
        menuItems->addObject(menuItem);  
    }  
  
    CCMenu *menu = CCMenu::createWithArray(menuItems);  
    this->addChild(menu);  
    //ボタンを縦に整列する  
    menu->alignItemsVertically();  

blog4_alignItemsVertically

以下のメソットで縦幅の間隔を指定し整列することができる
alignItemsHorizontallyWithPadding(間隔)

    menu->alignItemsVerticallyWithPadding(50);  

blog4_alignItemsVerticallyWithPadding

2.横一連に並べてくれるメソッド

alignItemsHorizontally()

実際の使用例

    //メニューボタンオブジェ作成  
    CCArray *menuItems = CCArray::create();  
    for(int index = 1;index < = 16;index++)  
    {  
        CCLabelTTF *labelItem = CCLabelTTF::create(CCString::createWithFormat("[%2d]",index)->getCString(), "Arial", 32);  
        CCMenuItemLabel *menuItem = CCMenuItemLabel::create(labelItem);  
        menuItems->addObject(menuItem);  
    }  
  
    CCMenu *menu = CCMenu::createWithArray(menuItems);  
    this->addChild(menu);  
    //ボタンを横に整列する  
    menu->alignItemsHorizontally();  

blog4_alignItemsHorizontally

以下のメソットで横幅の間隔を指定し整列することができる
alignItemsHorizontallyWithPadding(間隔)

    menu->alignItemsHorizontallyWithPadding(50);  

blog4_alignItemsHorizontallyWithPadding

3.1列に並ぶ個数を指定して、マトリクス上に並べるメソッド

alignItemsInColumns(1行の列数...)

実際の使用例

//ブロックオブジェクト作成  
CCLayerColor * HelloWorld::createBlockLayer(const char *strlabel, ccColor3B fontColor, ccColor4B backColor)  
{  
    CCLayerColor * ret = CCLayerColor::create(backColor, 128, 128);  
    CCLabelTTF *Label = CCLabelTTF::create(strlabel, "Arial-BoldMT", 28,CCSizeMake(128, 128), kCCTextAlignmentCenter, kCCVerticalTextAlignmentCenter);  
    Label->setColor(fontColor);  
    Label->setAnchorPoint(CCPointZero);  
    ret->addChild(Label);  
    return ret;  
}  
  
// on "init" you need to initialize your instance  
bool HelloWorld::init()  
{  
    //////////////////////////////  
    // 1. super init first  
    if ( !CCLayer::init() )  
    {  
        return false;  
    }  
      
    //メニューボタンオブジェ作成  
    CCArray *menuItems = CCArray::create();  
  
    //STAGE  
    menuItems->addObject(CCMenuItemLabel::create(createBlockLayer("STARGE", ccc3(0x00, 0xFF, 0x00), ccc4(0x7F,0x7F,0x7F,0xFF))));  
    //オクトパス  
    menuItems->addObject(CCMenuItemLabel::create(createBlockLayer("オクトパス", ccc3(0xFF, 0x7F, 0x7F), ccc4(0x7F,0x7F,0xFF,0xFF))));  
    //ペンギン  
    menuItems->addObject(CCMenuItemLabel::create(createBlockLayer("ペンギン", ccc3(0xFF, 0xFF, 0x00), ccc4(0x7F,0x7F,0xFF,0xFF))));  
    //MAP  
    menuItems->addObject(CCMenuItemLabel::create(createBlockLayer("MAP", ccc3(0x00, 0xFF, 0x00), ccc4(0x7F,0x7F,0x7F,0x7F))));  
    //アルマジロ  
    menuItems->addObject(CCMenuItemLabel::create(createBlockLayer("アルマジロ", ccc3(0xFF, 0xFF, 0x00), ccc4(0x7F,0x7F,0xFF,0xFF))));  
    //NOP  
    menuItems->addObject(CCMenuItemLabel::create(createBlockLayer("", ccc3(0x00, 0x00, 0x00), ccc4(0xFF,0xFF,0xFF,0x7F))));  
    menuItems->addObject(CCMenuItemLabel::create(createBlockLayer("", ccc3(0x00, 0x00, 0x00), ccc4(0xFF,0xFF,0xFF,0x7F))));  
    //エレファント  
    menuItems->addObject(CCMenuItemLabel::create(createBlockLayer("エレファント", ccc3(0xFF, 0xFF, 0x00), ccc4(0x7F,0x7F,0xFF,0xFF))));  
    //ファルコン  
    menuItems->addObject(CCMenuItemLabel::create(createBlockLayer("ファルコン", ccc3(0xFF, 0xFF, 0x00), ccc4(0x7F,0x7F,0xFF,0xFF))));  
    //NOP  
    menuItems->addObject(CCMenuItemLabel::create(createBlockLayer("", ccc3(0x00, 0x00, 0x00), ccc4(0xFF,0xFF,0xFF,0x7F))));  
    menuItems->addObject(CCMenuItemLabel::create(createBlockLayer("", ccc3(0x00, 0x00, 0x00), ccc4(0xFF,0xFF,0xFF,0x7F))));  
    //クワガタ  
    menuItems->addObject(CCMenuItemLabel::create(createBlockLayer("クワガタ", ccc3(0xFF, 0xFF, 0x00), ccc4(0x7F,0x7F,0xFF,0xFF))));  
    //SPEC  
    menuItems->addObject(CCMenuItemLabel::create(createBlockLayer("SPEC", ccc3(0x00, 0xFF, 0x00), ccc4(0x7F,0x7F,0x7F,0x7F))));  
    //マントヒヒ  
    menuItems->addObject(CCMenuItemLabel::create(createBlockLayer("マントヒヒ", ccc3(0xFF, 0xFF, 0x00), ccc4(0x7F,0x7F,0xFF,0xFF))));  
    //カメレオン  
    menuItems->addObject(CCMenuItemLabel::create(createBlockLayer("カメレオン", ccc3(0xFF, 0xFF, 0x00), ccc4(0x7F,0x7F,0xFF,0xFF))));  
    //WONDER  
    menuItems->addObject(CCMenuItemLabel::create(createBlockLayer("WONDER", ccc3(0x00, 0xFF, 0x00), ccc4(0x7F,0x7F,0x7F,0x7F))));  
      
    CCMenu *menu = CCMenu::createWithArray(menuItems);  
    this->addChild(menu);  
      
    //ボタンを横に整頓する  
    menu->alignItemsHorizontallyWithPadding(0);  
      
    //ボタンを縦に整頓する  
    menu->alignItemsVerticallyWithPadding(0);  
      
    //配置  
    menu->alignItemsInColumns(4,4,4,4);  
      
      
    return true;  
}  

blog4_alignItemsInColumns

<注意>
alignItemsInColumnsはボタンとボタンの間を調節するメソッドがない為、
思い通りの配置にしてくれないかもしれません。

使いどころは、少ないかもしれませんが、これらのメソッドを使えば、
デバッグ用の画面や簡易的な画面レイアウトで配置する際に、配置場所を気にしなくても良くなると思います。