Cocos2d-x 3.x学习笔记:猩先生带你打飞机(二)素材准备与游戏菜单场景

注:那个,秉着敬业爱业的精神,代码我会尽量解释清楚和一些路上捡的心得体会外加一堆废话(这段也是废话!!!)。如果没有解释的,那是我也没看懂,(╯3╰),百度去吧。倒是感觉这代码注释过多也是影响了代码的可见度,so如有影响,直接参照源代码。(这尼玛HelloWorld也要注释?额~~请轻喷)

一、材料准备
http://download.csdn.net/detail/dyyaries/6014343
这个是我在百度的时候找到的素材,微信飞机大战。百度真方便!!!真心慷慨,这不是做广告!嘿嘿,别动手,别~~~。
因为这个游戏比较简单,适合新手练手,所以拿他来开刀是再好不过了。当然里面许多素材是不需要的,实现基本的游戏逻辑只需要几张图片就够了,用到哪些后面有提及。
打开项目文件夹,把需要用到的游戏图片资源导入游戏项目根目录下的Resourse文件夹中。注:游戏里要用到的资源是默认从这里开始为根目录去读取的,比如Resourse下有一张simple.png的图片,到时候可以在项目中直接读取资源路径”simple.png”即可。
二、 屏幕大小调节
下面就需要我们调戏,啊不是调试和编写我们的代码了。
先打开vs2012,这个是我当前的IDE,依次点击文件->打开->项目/解决方案,打开游戏项目的proj.win32下的planegame.sln即可以导入游戏项目到vs 2012中。
打飞机当然是竖屏了才有感觉,在AppDelagate那里修改下窗口的属性,调整游戏窗口的大小。
打开src目录下的AppDelegate,src目录是我们游戏代码存放的地方,在applicationDidFinishLaunching()的如下位置添加如下代码
glview = GLViewImpl::create(“飞机大战”); //这里是修改后的窗口左上角显示的标题

glview->setFrameSize(480,800);        //添加的代码
director->setOpenGLView(glview);

现在可以跑下看看窗口改变的效果。
三、 背景图片与滚动
打开HelloWorldScene.cpp。
以下段落可以略过。
注意,这个是我们游戏的第一个场景,Cocos2d引擎帮我们封装了许多逻辑,以至于我们只需关注我们的游戏场景和处理逻辑。其实游戏的开始是从win32下的main.cpp里面的APIENTRY _tWinMain方法开始,这是个宏,其实就是c++语言的main方法,他定义了AppDelegate的一个对象,随后他会初始化AppDelegate的父类Application然后把他本身的指针给了父类的一个父类自身变量,这样做的目的是为了随后调用AppDelegate的applicationDidFinishLaunching()方法,这个是我们可以接触到用来初始化游戏窗口初始化导演类,还有初始化我们的第一个场景HelloWorld。最后main方法执行到了Application::getInstance()->run(),这里面封装的是我们游戏的循环和渲染等等逻辑。这时候我们的游戏已经跑起来了。这个就是简单的游戏启动过程。更加深层的代码有兴趣可以去研究研究源码,这也是开源带来的好处。
打开HelloWorldScene.cpp,删除原有的创建菜单和背景的代码,再添加如下代码:

//背景精灵
 auto bg1 = Sprite::create("background.png");

//注意,Vec2是cocos2d的数据结构,里面包含两个float型的数据,分别用来表示x轴和y轴。
//setPosition是设置精灵的相对屏幕的位置(也就是世界坐标)。当前这两个参数表示设置精灵在屏幕的宽度一半,高度为零的位置,即屏幕最下方的中间位置。cocos2d是以OpenGl的坐标的右手坐标为标准,屏幕的左下方为原点。visibleSize.width和height是屏幕的宽高,
bg1->setPosition(Vec2(origin.x + visibleSize.width/2,0));
//注意这里的锚点设置,为了图片永远在屏幕中间,x轴必须设置为0.5,其中的意思就是这个精灵向左移动精灵的一半宽度,y轴则是向下
bg1->setAnchorPoint(Vec2(0.5,0));
bg1->setTag(101); //设置Tag,以后可以通过这个标签找到这个精灵,以便对这个精灵进行操作。
this->addChild(bg1,0); //将背景精灵添加到层中。可以认为是当前的屏幕。其中的0是设置可见优先权,数值越小优先权越小,即当如果有其他的精灵的优先权比他大时,他会被遮挡住的。

//第二张背景图,是跟在第一张的上面,无缝连接,两张图形成不间断的地图滚动,getContentSize是获取精灵的size其中有它的宽度和高度。

auto bg2 = Sprite::create("background.png");
bg2->setPosition(Vec2(origin.x + visibleSize.width/2,bg1->getPositionY()+bg1->getContentSize().height));
bg2->setAnchorPoint(Vec2(0.5,0));
bg2->setTag(102);
this->addChild(bg2,0);

为什么有两个一样的背景精灵呢?这个是为了滚动地图设定的。
先在HelloWorldScene.h文件中声明定时器的回调方法。添加如下代码:
void backgroundMove(float f); //定时器回调的背景滚动方法
然后在HelloWorldScene.cpp中定义他。

void HelloWorld::backgroundMove(float f)     //背景滚动的回调方法 
{
 //背景滚动逻辑
 auto bg1 = this->getChildByTag(101);
 auto bg2 = this->getChildByTag(102);
 //当第二张图片退出屏幕时,把第一张图片设置到屏幕中,由于我的背景图片的高度是大于屏幕的高度的,所以判断逻辑要复杂点
 if(bg2 -> getPositionY() + bg2->getContentSize().height <= Director::getInstance()->getVisibleSize().height)
 {
  bg1->setPositionY(-bg1->getContentSize().height + Director::getInstance()->getVisibleSize().height);
 }
 bg1->setPositionY(bg1->getPositionY()-3);
 bg2->setPositionY(bg1->getPositionY()+bg1->getContentSize().height);
}

背景滚动逻辑第一次接触也是件麻烦事,下面一张图告诉你。下面的图表示的逻辑也是上面的回调方法的实现。

游戏一开始是①状态,定时器会不断得修改背景精灵一和背景精灵二的坐标,当两者的坐标到达②的状态时,修改两者的坐标到③状态,其实也就是回到了游戏刚开始的状态①,然后就是你看到的无限背景滚动的效果了。注意背景图片的高度比屏幕小时两张图片就不足以做到以上效果了,该如何做呢,自己斟酌斟酌。不过这里的逻辑容易想清楚,但是其中的坐标计算也不是件头疼的事。
最后,启动定时器,在添加两个背景精灵下面添加如下代码:
//背景滚动的定时器,0.01执行一次传入的函数
this->schedule(schedule_selector(HelloWorld::backgroundMove),0.01); 这里写代码片
好,背景滚动大功告成。跑一下看看效果如何吧。
四、 游戏菜单项
现在这个项目还比较简单,只有简单的开始游戏、退出游戏这两个选项,玩过游戏的都知道还有游戏设置啊、关于啊帮助啊这些。
首先在HelloWorldScene.h中声明两个回调方法,这两个方法是在点击两菜单项时触发的函数。
添加如下代码:

// 菜单项的回调方法
 void menuCloseCallback(cocos2d::Ref* pSender);        //这个是系统默认写好的下面的才是新添加的。
 void menuStartCallback(cocos2d::Ref* pSender);        //参数什么的先不用去了解,循规蹈矩再去创新。

创建如下的菜单项:
//这个是开始游戏菜单项,其中的”game_start.png”,“game_start2.png”是读取本地资源,作为未点击前和点击之后的显示图片。
// HelloWorld::menuStartCallback是他的回调函数,即点击这个菜单项的时候会执行该函数

auto startItem = MenuItemImage::create( "game_start.png","game_start2.png",CC_CALLBACK_1(HelloWorld::menuStartCallback,this));    
 startItem->setPosition(Vec2(visibleSize.width/2 + origin.x,visibleSize.height/2 + origin.y));    
 //这个是结束游戏菜单项
 auto closeItem = MenuItemImage::create( "game_exit.png","game_exit2.png",CC_CALLBACK_1(HelloWorld::menuCloseCallback,this));
 closeItem->setPosition(Vec2(origin.x + visibleSize.width/2,visibleSize.height/2 + origin.y - startItem->getContentSize().height));

 //把菜单项添加到菜单精灵中
 auto menu = Menu::create(startItem,closeItem,NULL);
 menu->setPosition(Vec2::ZERO);
 //把菜单精灵添加到当前的层中
 this->addChild(menu,1);

下面是回调函数的实现
结束游戏的回调函数就直接调用创建时默认生成的。

void HelloWorld::menuStartCallback(Ref* pSender)
{
 //开始游戏
}

好,菜单项搞定,编译运行下,是不是发现有两个菜单项在屏幕中间了!!!点击退出还可以退出游戏。不过开始游戏逻辑还没写。呵呵,小有成就是吧。好我们继续。
五、蠢蠢欲动的飞机
为了体现出我们的飞机饥渴难耐啊不,是迫不及待想直捣敌人基地的雄姿,我们给他一个动画展示,展示它飞翔的雄姿。
添加如下代码:

//添加飞机
 auto plane = Sprite::create("hero1.png");
 plane->setPosition(visibleSize.width/2+origin.x,200);
 this->addChild(plane);

//飞机添加帧动画,添加格式如下,别问我为什么,呵呵。
Animation * animation = Animation::create();
//本来是通过一张缓存图片去获取的,这样性能比较好。不过方便起见,so~~~。
//其中的Rect(0,102,126)聪明人都可以看出是读取图片资源的矩形区域的纹理。什么?你看不懂?呵呵。什么?纹理是什么?呵呵。

SpriteFrame * spriteFrame1 = SpriteFrame::create("hero1.png",Rect(0,0,102,126));        
 SpriteFrame * spriteFrame2 = SpriteFrame::create("hero2.png",126));       

 animation->addSpriteFrame(spriteFrame1);
 animation->addSpriteFrame(spriteFrame2);
 animation->setDelayPerUnit(0.15f);        //两张图片交互播放的间隔
 Animate * animate = Animate::create(animation);

 plane->runAction(RepeatForever::create(animate));     //开始执行动画

动画的执行是以精灵为单位,即可以为精灵添加动画,创建完动画,只要让精灵执行这个动作即可。如果执行完毕后,必须使用下面代码移除动画
sprite->stopAllActions(); //停止所有动画,应该是清除了动画的内存。
Animate 是继承了Ref,所以的他的内存的cocos2d框架自动回收的,我们不用自动释放他。但是如果不需要时也要手动停止它。因为我们当前的飞机精灵动画是在当前场景无限存活,不需手动停止它,当我们切换到开始游戏启动另一个场景时,它会自动清除内存,吧。为什么这么没自信,这是我猜的。嘿嘿,别冲动别冲动,有话好好说。

ok,飞机动画创建成功,启动运行一下吧。是不是看到小飞机的飞翔在天空中的雄姿了???

2-6 最终界面
如图:

素材:素材
源码:源码1

相关文章

    本文实践自 RayWenderlich、Ali Hafizji 的文章《...
Cocos-code-ide使用入门学习地点:杭州滨江邮箱:appdevzw@1...
第一次開始用手游引擎挺激动!!!进入正题。下载资源1:从C...
    Cocos2d-x是一款强大的基于OpenGLES的跨平台游戏开发...
1.  来源 QuickV3sample项目中的2048样例游戏,以及最近《...
   Cocos2d-x3.x已经支持使用CMake来进行构建了,这里尝试...