让Cocos Studio 2.3.2制作UI界面中控件支持运行3d动作特效的间接途径

引子

　　下了课有点小空，回想起前天的Studio中UI控件的3D动作问题，还是有点放心不下，毕竟3D高级动作特效是一件游戏开发的“法宝”。在仔细地研究了Waves3D等3D高级动作特效之后，我找到了一种如本文标题所示的间接途径。有兴趣的朋友可以参考一下。

 

实现过程记录

 

先上图，下图给出的是我的教学游戏中游戏中启动场景在Cocos Studio 2.3.2中的截图，同学们可以注意我在图中标记的部分。

　　显然，在上图中，我在原先的Cocos2d-x 2.x（结合早期的CocoStudio 2.4.0.1）环境下可以很轻松地让按钮Button_Start运行Waves3D动作。但是，由于当前的Waves3D动作要求运行此动作者必须是NodeGrid类型，而上面的按钮继承自Widget，Widget又继承自ProtectedNode，所以以前的代码在运行到下面相应的运行Waves3D动作代码时抛出异常。

 CCActionInterval* waves1 = CCWaves3D::create(10, CCSizeMake(15,10), 18, 5);

 Button_Start->runAction(CCRepeatForever::create(waves1));

 

在不甘心之余，我又分析起cpp-tests中的相关代码。主要参考文件是EffectsAdvancedTest.cpp，相关代码也不少，主要参考如下代码：

    auto waves = Waves::create(5, Size(15,10), 5, 20, true, false);

    auto shaky = Shaky3D::create(5, Size(15,10), 4, false);

    

    _target1->runAction( RepeatForever::create( waves ) );

    _target2->runAction( RepeatForever::create( shaky ) );

注意：_target1和_target2这两个变量类型都是NodeGrid类型指针。

显然，如果我的Button_Start是NodeGrid类型子类，那么一切就OK了，但恰恰不是。

 

接下来，我又分析如下图实例。

此实例介绍的是在Studio创建的Widget控件中动态在向场景添加一般的Node的方案。关键代码如下所示：

void UIWidgetAddNodeTest_Editor::configureGUIScene()
{
    UIScene_Editor::configureGUIScene();
    Size rootSize = _layout->getContentSize();
    // Create the ui widget
    Widget* widget = Widget::create();
    widget->setPosition(Vec2(rootSize.width / 2.0f, rootSize.height / 2.0f));
    widget->setLocalZOrder(_layout->getLocalZOrder() + 1);
    _layout->addChild(widget);
    
    Sprite* sprite = Sprite::create("cocosui/ccicon.png");
    widget->addChild(sprite);
}

大家注意最后一句！！！

 

接下来，我又想到如今的Studio中可以很容易地在Widget控件中加入Sprite子结点，如下图所示。

　　上面这幅图至关重要。

　　Sprite_1的默认锚点是(0.5,0.5)，而上面那个Button的锚点也是（0.5,0.5）。只是Sprite_1的坐标是（０，０）。显然，这是相对其父的相对坐标，如果你仔细观察（上图中没有），你当然会注意到那个Button的坐标，也就是相对整个场景的世界坐标。

 

解决方案

 

根据上面几个代码的综合分析，我们可以给Widget添加NodeGrid子结点，然后再给NodeGrid添加Sprite结点，并调整NodeGrid在其父结点下的相对坐标位置。最后，让NodeGrid运行Waves3D这种特效动作即可。

在我的上述示例中，相关答案代码如下：

 Button* Button_Start = static_cast(Helper::seekWidgetByName(Panel_Back, "Button_Start"));

 NodeGrid *_bgNode = NodeGrid::create();

 //经测试，与下面的锚点坐标没有关系//

 _bgNode->setAnchorPoint(Vec2(0.5, 0.5));

 Button_Start->addChild(_bgNode);

 auto bg = Sprite::create("Images/backbtnnormal.png");

 _bgNode->addChild(bg);

 _bgNode->setPosition(Vec2(Button_Start->getBoundingBox().size.width / 2, Button_Start->getBoundingBox().size.height / 2));

 ActionInterval* waves1 = Waves3D::create(10, CCSizeMake(15, 10), 18, 5);

 _bgNode->runAction(CCRepeatForever::create(waves1));

小结与补充

　　大家看，上面的确拐了一个弯，但终究是实现了我们的渴望已久的动画效果。归纳来看，还有一个需要补充的部分：使用上述方案的话，在Studio设计时刻只能使用一些临时的占位符方法了，例如一个1*1像素的精灵图片先占住Button的位置。这一点恐怕同学们不难理解，在此就不赘述了。