讓Cocos Studio 2.3.2制作UI界面中控件支持運行3d動作特效的間接途徑

2019-11-11 03:31:11

字體：大中小

供稿：網(wǎng)友

引子

　　下了課有點小空，回想起前天的Studio中UI控件的3D動作問題，還是有點放心不下，畢竟3D高級動作特效是一件游戲開發(fā)的“法寶”。在仔細地研究了Waves3D等3D高級動作特效之后，我找到了一種如本文標題所示的間接途徑。有興趣的朋友可以參考一下。

實現(xiàn)過程記錄

先上圖，下圖給出的是我的教學游戲中游戲中啟動場景在Cocos Studio 2.3.2中的截圖，同學們可以注意我在圖中標記的部分。

　　顯然，在上圖中，我在原先的Cocos2d-x 2.x（結(jié)合早期的CocoStudio 2.4.0.1）環(huán)境下可以很輕松地讓按鈕Button_Start運行Waves3D動作。但是，由于當前的Waves3D動作要求運行此動作者必須是NodeGrid類型，而上面的按鈕繼承自Widget，Widget又繼承自PRotectedNode，所以以前的代碼在運行到下面相應的運行Waves3D動作代碼時拋出異常。

123	`CCActionInterval* waves1 = CCWaves3D::create(10, CCSizeMake(15,10), 18, 5);` `Button_Start->runAction(CCRepeatForever::create(waves1));`

在不甘心之余，我又分析起cpp-tests中的相關(guān)代碼。主要參考文件是EffectsAdvancedTest.cpp，相關(guān)代碼也不少，主要參考如下代碼：

123456789 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創(chuàng)建的Widget控件中動態(tài)在向場景添加一般的Node的方案。關(guān)鍵代碼如下所示：

12345678910111213 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子結(jié)點，如下圖所示。

　　上面這幅圖至關(guān)重要。

　　Sprite_1的默認錨點是(0.5,0.5)，而上面那個Button的錨點也是（0.5,0.5）。只是Sprite_1的坐標是（０，０）。顯然，這是相對其父的相對坐標，如果你仔細觀察（上圖中沒有），你當然會注意到那個Button的坐標，也就是相對整個場景的世界坐標。

解決方案

根據(jù)上面幾個代碼的綜合分析，我們可以給Widget添加NodeGrid子結(jié)點，然后再給NodeGrid添加Sprite結(jié)點，并調(diào)整NodeGrid在其父結(jié)點下的相對坐標位置。最后，讓NodeGrid運行Waves3D這種特效動作即可。

在我的上述示例中，相關(guān)答案代碼如下：

12345678910111213141516171819 Button* Button_Start = static_cast<Button*>(Helper::seekWidgetByName(Panel_Back, "Button_Start")); NodeGrid *_bgNode = NodeGrid::create(); //經(jīng)測試，與下面的錨點坐標沒有關(guān)系// _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));