如何讓Cocos Studio 2.3.2制作UI界面中控件支持運行3d動作特效

本篇文章為大家展示了如何讓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<Button*>(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的位置。

上述內容就是如何讓Cocos Studio 2.3.2制作UI界面中控件支持運行3d動作特效，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。