让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中的截图,同学们可以注意我在图中标记的部分。

wKiom1ZS3AmSoTeXAAIVeBRu8Ak752.jpg

  显然,在上图中,我在原先的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,相关代码也不少,主要参考如下代码

autowaves=Waves::create(5,Size(15,5,20,true,false);

autoshaky=Shaky3D::create(5,4,false);



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

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

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

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

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

wKiom1ZS3tnT2mgLAAFZyqbAfgE466.jpg

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

voidUIWidgetAddNodeTest_Editor::configureGUIScene()
{
UIScene_Editor::configureGUIScene();
SizerootSize=_layout->getContentSize();
//Createtheuiwidget
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子结点,如下图所示。

wKioL1ZS4DeRkV5xAAKQo93_oQs548.jpg

  上面这幅图至关重要。

  Sprite_1的默认锚点是(0.5,0.5),而上面那个Button的锚点也是(0.5,0.5)。只是Sprite_1的坐标是(0,0)。显然,这是相对其父的相对坐标,如果你仔细观察(上图中没有),你当然会注意到那个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);

autobg=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,5);

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

小结与补充

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

猜你在找的Cocos2d-x相关文章