如何在 coocs2d 中为 MenuItemImage 添加发光的边框效果？

Question

我是 cocos2d 的新手，我正在尝试制作菜单。我在这里创建了一个 MenuItemImage：

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

现在我正在寻找一种方法来为其边框添加发光效果，而不是无聊的静态 setting_selected.png 图片。

（例如：此处菜单图像的浅蓝色发光边框，请查看 1:00 https://youtu.be/PJSlvhDbB4I?t=1m）。非常感谢您的关注和帮助 :D

Update: 我有一个想法，使用一个正方形的精灵，它正好适合菜单项，使它看起来像它的边框。然后让它动画化（改变颜色）以显示发光效果，就像他们在视频中所做的那样。这是否可能、简单且有效地完成这项工作？

Answer 1

您可以使用 MenuItemSprite 而不是 MenuItemImage 和运行单击菜单项时的动作。看看这个 link： Cocos2d-x: simple button effect

您应该在此处找到更多操作：Cocos2d-x actions

我更新并编写了与您需要的示例相似的示例（这不完全是您想要的，但可能对您有所帮助）。我有一个名为 EditorScene 的场景。

在EditorScene.h中：

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

在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!");
}

这段代码创建了一个菜单项，单击该菜单项会在按钮的边框上显示一个环绕的小点：

如果您想为菜单项的背景设置动画，可以使用 Animation::createWithSpriteFrames。

如何在 coocs2d 中为 MenuItemImage 添加发光的边框效果？

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

cocos2d-x