讓Cocos Studio 2.3.2制作UI界面中控件支持運(yùn)行3d動(dòng)作特效的間接途徑

2019-11-11 04:46:40

字體：大中小

供稿：網(wǎng)友

引子

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

實(shí)現(xiàn)過(guò)程記錄

先上圖，下圖給出的是我的教學(xué)游戲中游戲中啟動(dòng)場(chǎng)景在Cocos Studio 2.3.2中的截圖，同學(xué)們可以注意我在圖中標(biāo)記的部分。

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

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這兩個(gè)變量類(lèi)型都是NodeGrid類(lèi)型指針。

顯然，如果我的Button_Start是NodeGrid類(lèi)型子類(lèi)，那么一切就OK了，但恰恰不是。

接下來(lái)，我又分析如下圖實(shí)例。

此實(shí)例介紹的是在Studio創(chuàng)建的Widget控件中動(dòng)態(tài)在向場(chǎng)景添加一般的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);}

大家注意最后一句！！！

接下來(lái)，我又想到如今的Studio中可以很容易地在Widget控件中加入Sprite子結(jié)點(diǎn)，如下圖所示。

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

　　Sprite_1的默認(rèn)錨點(diǎn)是(0.5,0.5)，而上面那個(gè)Button的錨點(diǎn)也是（0.5,0.5）。只是Sprite_1的坐標(biāo)是（０，０）。顯然，這是相對(duì)其父的相對(duì)坐標(biāo)，如果你仔細(xì)觀察（上圖中沒(méi)有），你當(dāng)然會(huì)注意到那個(gè)Button的坐標(biāo)，也就是相對(duì)整個(gè)場(chǎng)景的世界坐標(biāo)。

解決方案

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

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

12345678910111213141516171819 Button* Button_Start = static_cast<Button*>(Helper::seekWidgetByName(Panel_Back, "Button_Start")); NodeGrid *_bgNode = NodeGrid::create(); //經(jīng)測(cè)試，與下面的錨點(diǎn)坐標(biāo)沒(méi)有關(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));

小結(jié)與補(bǔ)充

　　大家看，上面的確拐了一個(gè)彎，但終究是實(shí)現(xiàn)了我們的渴望已久的動(dòng)畫(huà)效果。歸納來(lái)看，還有一個(gè)需要補(bǔ)充的部分：使用上述方案的話，在Studio設(shè)計(jì)時(shí)刻只能使用一些臨時(shí)的占位符方法了，例如一個(gè)1*1像素的精靈圖片先占住Button的位置。這一點(diǎn)恐怕同學(xué)們不難理解，在此就不贅述了。

登錄樂(lè)搏學(xué)院官網(wǎng)http://www.learnbo.com/

或關(guān)注我們的官方微博微信，還有更多驚喜哦~