【Cocos2d-x 游戏开发】 2 --- Button、CCMoveBy

原创 2015年07月10日 22:30:30

好久没写了,今天抽空补一篇.....

cocos2dx中包含很多物体运动方式、特效的函数,这使得我们在实现某些功能时很方便,关于这些,大家可以自行百度“cocos2dx中常见的46中动作+22中特效详解"进行学习。

今天的工程涉及CCMoveBy,Buttob的使用,先看一下效果图。


(是不是很熟悉,嘿嘿 )由于手里的资源短缺,所以某些地方缺了零件,不过不影响今天的内容,大家先凑合看看,回头自行完善吧。。。大笑

打开cocos studio,新建一个开发语言是C++的项目。由于我们项目的背景图是700*600的,所以我们修改项目场景大小为700*600(默认没有700*600的使用自定义尺寸)。


接下来在资源栏导入今天使用的资源,然后删除项目中原有的png资源(个人习惯把一类功能的资源归到一个文件夹便于管理)


新建一个精灵到场景,使用"image3245"作为精灵的贴图,设置位置为350,300,尺寸使用原尺寸(700*600),接下来发布项目到Visual studio,使用visual studio打开项目(以上内容如果不会,可以看第一节内容)。此时F5运行查看,发现图片只占了屏幕左下角,看下一步吧(如果显示一切正常,可以跳过下一步了)

打开文件AppDelegate.cpp,定位到applicationDidFinishLaunching函数,修改以下代码调整窗口大小到700*600

glview = GLViewImpl::createWithRect("KingdomBrush", Rect(0, 0, 700, 600));
director->getOpenGLView()->setDesignResolutionSize(700, 600, ResolutionPolicy::SHOW_ALL);
再次运行,背景完整显示了吧。


接下来做背景上的图,我们发现背景以上有5个对象,其中四个对象只是用来显示的(姑且这么认为),一个对象是一个按钮(start)。由于这5个对象要运动,把他们当做精灵比较方便,但是有一个按钮,按钮使用精灵的话,按钮的不同贴图切换就比较复杂,所以我们在cocos studio中新建五个控件,其中四个是精灵,一个是按钮。



其中俩个精灵的贴图为”image3278",另外俩个精灵的贴图为"image3279"和"image3289",按钮使用"image 3264"和"image 3264"作为正常状态和按下状态的贴图,禁用状态先不管,加好贴图以后需要调整各控件的位置,使之位于我们效果图的位置(开始按钮上面的铁链精灵需要使用缩放放大一些),注意这里需要调整各控件的层级关系,在上面的图中可以调整各控件的层级关系,在界面中越靠上的,在上图中的位置越靠下,那么Sprite_1就是我们的背景,因为他在整个图的最底层。(这里的层级关系大家可以看成是ps中的层级,如果你不会ps,就当我没说...)调整好这些控件以后发布资源,切换到visual studio,ctrl+s保存一下,F5执行程序,看看我们的效果,如果和我们要的效果不一样,返回cocos studio继续调整。

接下来我们实现控件的运行效果。控件运动使用CCMoveBy函数实现,因为有一个先后顺序,所以我们在设计之前需要确定每一个控件的时间差,这里我使用时间差相差0.1s,控件位置相差100px,然后依次计算每一个控件的初始位置,然后再程序运行后,依次运动到我们刚刚调整好的位置上。搞明白这个过程就可以写了,打开HelloWorld.cpp的init函数在addChild(rootNode)之后添加以下代码

	//Sprite move speed:0.1s Move 100 Pixel
	//Title init postion(350,820),Move to(350,420) 
	CCSprite* TitleSprite = (CCSprite*)rootNode->getChildByName("Sprite_4");
	CCActionInterval* moveBy1 = CCMoveBy::create(0.4f, ccp(0, -400));
	TitleSprite->runAction(moveBy1);

	//Chain1 Init position(350,820),Move to(350,220)
	CCSprite* ChainSprite1 = (CCSprite*)rootNode->getChildByName("Sprite_3");
	CCActionInterval * moveBy2 = CCMoveBy::create(0.6f, ccp(0, -600));
	ChainSprite1->runAction(moveBy2);

	//Button Sprite Init position(350,790),Move to(350,190)
	CCSprite* BtnSprite = (CCSprite*)rootNode->getChildByName("Button_1");
	CCActionInterval* moveBy3 = CCMoveBy::create(0.6, ccp(0, -600));
	BtnSprite->runAction(moveBy3);

	//Chain2 Init position(350,810),Move to(350,110)
	CCSprite* ChainSprite2 = (CCSprite*)rootNode->getChildByName("Sprite_2");
	CCActionInterval * moveBy4 = CCMoveBy::create(0.7f, ccp(0, -700));
	ChainSprite2->runAction(moveBy4);

	//About Init position(350,890),Move to(350,90)
	CCSprite* AboutSprite = (CCSprite*)rootNode->getChildByName("Sprite_5");
	CCActionInterval* moveBy5 = CCMoveBy::create(0.8, ccp(0, -800));
	AboutSprite->runAction(moveBy5);

注意这里,由于按钮控件不能执行MoveBy,所以这里我们把他转为Sprint类型,以实现按钮的运动。

以上代码 如果看不懂,那么你需要多看看其他教程了 。

执行我们的程序,发现我们的效果实现了(当然和原版的差了很多,以后慢慢完善吧)


最后我们为按钮添加响应。接着上面的代码写

<span style="white-space:pre">	</span>//Button
	Button* StartBtn = (Button*)rootNode->getChildByName("Button_1");
	StartBtn->addTouchEventListener(CC_CALLBACK_2(HelloWorld::BtnStartCallback, this));

这里我们为按钮添加回调函数,所以接下来要在HelloWorld类中添加BtnStartCallback函数,在HelloWorld.h中添加public函数定义

<span style="white-space:pre">	</span>//Start button Callback function
	void BtnStartCallback(Ref* pSender, Widget::TouchEventType type);
回到.cpp文件

void HelloWorld::BtnStartCallback(Ref* pSender, Widget::TouchEventType type)
{
	MessageBox("按钮", "提示");
}

回调函数我们使用MessageBox,验证按钮消息的响应,

注意在.h文件中添加命名空间

using namespace cocos2d::ui;
执行一下我们的项目,点击开始............网速问题,先上传资源文件,工程文件下次补上 

工程下载:链接:http://pan.baidu.com/s/1nt46GVv 密码:h7to

以上内容,如有错误,望大家指出...谢谢微笑

7/11 --- 0:30 Bug


版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

cocos2d-x手机游戏开发.pdf

  • 2015-01-07 11:04
  • 20.42MB
  • 下载

Cocos2D-X游戏开发

  • 2015-12-14 06:43
  • 50.36MB
  • 下载

小小菜之Cocos2d-x游戏开发旅程——项目实例:飞机大战(3)

3.子弹类和敌机类的封装

cocos2d-x手机游戏开发

  • 2013-12-06 10:51
  • 20.42MB
  • 下载

cocos2d-x手机游戏开发

  • 2013-11-04 20:12
  • 20.42MB
  • 下载

cocos2d-x + vs2015 android游戏开发环境搭建 及 新建项目

1.阅读cocos2d-x官方文档点击打开链接 文档2 2.下载所需安装文件 python2.7.5,Apache-ant1.9.3,cocos2d-x3.9,android-ndk-r10。  其中...

cocos2d-x 手机游戏开发

  • 2013-11-27 20:22
  • 23.11MB
  • 下载

COCOS2D-X手机游戏开发

  • 2013-05-28 10:18
  • 20.42MB
  • 下载

Cocos2d-x游戏开发之CCLabelTTF标签详解之Create方法(设置自动换行的标签)和换行符的巧妙使用(十六)(高级篇)

在上面的一篇文章之中,我们讲解了标签的对齐方式,设置后,可以固定标签的位置,向固定的方向增加内容,就像是写字一样的。 好的,问题来了,写字的时候,当一行足够填写内容的时候,上面的方法是OK的;当我们要...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)