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

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

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();

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

    menu->alignItemsVerticallyWithPadding(50);

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();

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

    menu->alignItemsHorizontallyWithPadding(50);

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

alignItemsInColumns(１行の列数...)

実際の使用例

//ブロックオブジェクト作成  
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;
}

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

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