Search code examples
cocos2d-x

How to add glowing border effects to a MenuItemImage in coocs2d?

I'm new to cocos2d and I'm trying to make a menu. I created a MenuItemImage here:

mSetting = MenuItemImage::create("setting.png", "setting_selected.png");

Now I'm looking for a way to add glowing effect to the border of it in stead of a boring static setting_selected.png image.

(for example: the light-blue glowing border of the menu image here , check at 1:00 https://youtu.be/PJSlvhDbB4I?t=1m). Your attention and help is very much appreciated :D

Update: I have an idea that using a sprite with square shape, which exactly fits the menu item to make it looks like the border of it. Then make it animate (changing color) to show glowing effects likes how they do in the video. Is that possible, easy and effective to do the job?

Solution

  • You can use MenuItemSprite instead of MenuItemImage and run actions when menu item is clicked. Look at this link: Cocos2d-x: simple button effect

    You should find more actions here: Cocos2d-x actions

    I update and write the example to be similar to what you need (It's not exactly what you want but may help you). I have a scene named EditorScene.

    In EditorScene.h:

    ....
virtual void  onMenuItemSelected(Ref *item );
MenuItemSprite* createMenuButton( const char* img );
MenuItemSprite*   btEnter;
void actionEnter();
....

    And in EditorScene.cpp:

    bool EditorScene::init()
{
    ...
    btEnter = createMenuButton("button_normal.png");
    auto menu = Menu::create(btEnter, nullptr);
    menu->setPosition( 400,400);
    addChild(menu);
}

MenuItemSprite* EditorScene::createMenuButton( const char* img ) 
{
    Sprite* spr = Sprite::create( img );
    auto light = Sprite::create( "a2.png" );
    light->setTag( 1 );
    light->setPosition( 0,
                    spr->getBoundingBox().size.height );
    light->setOpacity( 0 );

    if( ! spr ) 
    {
        return NULL;
    }

    MenuItemSprite* item = MenuItemSprite::create( spr,
                                               NULL, NULL,
                                               CC_CALLBACK_1( EditorScene::onMenuItemSelected, this ) );
    item->addChild(light);

    return item;
}

void EditorScene::onMenuItemSelected( Ref* item ) {
    Sprite* btm = (Sprite*) item;
    Sprite* light = (Sprite*)btm->getChildByTag( 1 );
    if( item == btEnter ){
        float w = btm->getBoundingBox().size.width;
        float h = btm->getBoundingBox().size.height;
        std::function<void(void)> f1 = std::bind(&EditorScene::actionEnter, this);
        light->runAction(
            Sequence::create(
                    FadeIn::create(0),
                    MoveBy::create( 0.09f, Vec2(w, 0) ),
                    MoveBy::create( 0.045f, Vec2(0, -h) ),
                    MoveBy::create( 0.09f, Vec2(-w, 0) ),
                    MoveBy::create( 0.045f, Vec2(0, h) ),
                    FadeOut::create(0),
                    CallFunc::create( f1  ),
                    NULL ) );
    }
}

void EditorScene::actionEnter()
{
    log("Do something!");
}

    This code creates a menu item that by clicking shows a small dot orbiting on border of button: A simple effect

    You can use Animation::createWithSpriteFrames if you want to animate your menu item's background.