Cocos2dx项目实践-FlappyBird代码编辑-1

之前介绍了游戏产品的结构，项目的创建，这一篇正式进入代码阶段，先从整个游戏的入口开始介绍。

代码编写

用Xcode打开工程，AppDelegate.cpp就是我们的入口函数文件，只要工程创建，就会有这个文件，文件里默认的编辑好的代码，当前项目只需要在该函数中略做修改即可

在上一节中我们编译过，最后模拟器生成的游戏界面是横屏的，当前FlappyBird是竖屏游戏，所以需要修改相应的设置和代码，

项目设置修改

我们需要进入FlappyBird项目中，取消LandScape选项，选择Portrait，表示竖屏。

改完设置后，我们进行编译，Xcode模拟器就变成竖屏的了

从模拟器中，大家已经能够看到这个界面上已经有labe（HelloWord）和Sprite（居中图片）的元素了，这些元素实际上是通过AppDelegate.cpp中下面的代码进入HelloWordScene这个Scene的

auto scene = HelloWord::createScene();

director->runWithScene(scene);

上面的代码就是通过导演director启动HelloWord创建的这个scene。

所以这个时候场景就由HelloWordScene接管了，我们去看看HellowordScene的代码，先看HellowordScene.hpp文件，请看注释，class HelloWord实际上是继承cocos2d中的layer，说明HelloWord其实是一个Layer

HellowordScene.hpp——————

#ifndef __HELLOWORLD_SCENE_H__

#define __HELLOWORLD_SCENE_H__

#include "cocos2d.h"

class HelloWorld : public cocos2d::Layer

{

public:

//定义创建场景的函数

static cocos2d::Scene* createScene();

//初始化场景的函数

virtual bool init();

// a selector callback，点击menu后的回调函数

void menuCloseCallback(cocos2d::Ref* pSender);

// implement the "static create()" method manually

CREATE_FUNC(HelloWorld);

};

#endif // __HELLOWORLD_SCENE_H__

接下来看HelloWordScene.cpp————

#include "HelloWorldScene.h"

#include "SimpleAudioEngine.h"

USING_NS_CC;

//场景创建函数的实现

Scene* HelloWorld::createScene()

{

// 'scene' is an autorelease object，先用Scene类创建了场景实例

auto scene = Scene::create();

// 'layer' is an autorelease object，再创建了布景图层实例

auto layer = HelloWorld::create();

// add layer as a child to scene，将布景图层添加到场景中

scene->addChild(layer);

// return the scene，把创建的场景返回给调用对象，这时候对象就已经是一个包含layer的场景了

return scene;

}

// 初始化HelloWord这个Layer，其实这个Layer初始化函数的执行，是在上面Layer创建的时候就先执行的，在creat的时候调用init（）这个函数。 on "init" you need to initialize your instance

bool HelloWorld::init()

{

//////////////////////////////

// 首先保证其继承的父类Layer初始化成功，才能进行下面的操作1. super init first

if ( !Layer::init() )

{

return false;

}

//关于visibleSize和 origin暂时跳过，后面我们集中分析

auto visibleSize = Director::getInstance()->getVisibleSize();

Vec2 origin = Director::getInstance()->getVisibleOrigin();

/////////////////////////////

// 2. add a menu item with "X" image, which is clicked to quit the program

// you may modify it.

// 添加 closeItem，就是模拟器右下角显示的关闭按钮，这里就用到了MenuItemImage的UI元素，我们可以按照Dash 上其创建的函数看一下

第一个参数是字符串类型（图片路径及文件名称），表示正常未选中情况下的图片

第二个参数是字符串类型（图片路径及文件名称），表示选中情况下的显示的图片

第三个参数是回调函数，就是点击后执行的命令

static MenuItemImage* create (const std::string & normalImage, const std::string & selectedImage, const ccMenuCallback & callback )

正常显示的图片是CloseNormal.png

选中显示的图片是CloseSelected.png

回调函数是HelloWorld::menuCloseCallback，后面的this就是调用这个函数的对象

auto closeItem = MenuItemImage::create(

"CloseNormal.png",

"CloseSelected.png",

CC_CALLBACK_1(HelloWorld::menuCloseCallback, this));

//这里就是设置closeItem的位置，从模拟器中我们可以看出是右下角

closeItem->setPosition(Vec2(origin.x + visibleSize.width - closeItem->getContentSize().width/2 ,

origin.y + closeItem->getContentSize().height/2));

// MenuitemImage 的UI元素必须要添加到 Menu中；Menu的创建也是基于MenuItem的，有多种创建Menu的方法，Dash中的可见，

//这里通过closeItem创建menu，然后设置menu的位置，Vec2表示二维坐标（x,y）,Vec3表示3维坐标（x,y,z）,Vec2::ZERO表示原点坐标

auto menu = Menu::create(closeItem, NULL);

menu->setPosition(Vec2::ZERO);

//将menu添加到当天的layer中去，1表示在图层上的排序，其实也就是这个布景的z坐标

this->addChild(menu, 1);

/////////////////////////////

// 3. add your codes below...

// add a label shows "Hello World"

// create and initialize a label

//创建顶部helloword的label，通过ttf类的字体文件创建label

第一个参数是要显示的label的字符串

第二个参数是创建label所需的字体文件的路径

第三个参数是label的字体大小

后面的参数一般缺省，可以不设置，表示label位置的放置

auto label = Label::createWithTTF("Hello World", "fonts/Marker Felt.ttf", 24);

// 设置label 的位置，模拟器中可以看出居中显示

label->setPosition(Vec2(origin.x + visibleSize.width/2,

origin.y + visibleSize.height - label->getContentSize().height));

// 将label 添加到layer 中

this->addChild(label, 1);

// 创建精灵，最简单的方法，直接通过图片创建

auto sprite = Sprite::create("HelloWorld.png");

// 设置精灵的位置

sprite->setPosition(Vec2(visibleSize.width/2 + origin.x, visibleSize.height/2 + origin.y));

// 添加精灵到Layer中

this->addChild(sprite, 0);

return true;

}

//点击menu后的回调函数

void HelloWorld::menuCloseCallback(Ref* pSender)

{

//获取导演的实例，调用end()函数，结束运行，释放当前运行的scene

Ends the execution, releases the running scene.

Director::getInstance()->end();

#if (CC_TARGET_PLATFORM == CC_PLATFORM_IOS)

exit(0);

#endif

/*To navigate back to native iOS screen(if present) without quitting the application ,do not use Director::getInstance()->end() and exit(0) as given above,instead trigger a custom event created in RootViewController.mm as below*/

//EventCustom customEndEvent("game_scene_close_event");

//_eventDispatcher->dispatchEvent(&customEndEvent);

上面花了较长时间来解释HelloWordScene.hpp和 HelloWordScene.cpp

现在我们要做的就是用写一个我们自己的MainLayer.hpp和MainLayer.cpp来代替当前的 HelloWordScene.hpp和 HelloWordScene.cpp

我们看这个Layer，进行分析，有背景图，有顶部FlappyBird的label，有六个MenuItemsImage，并执行点击后的回调函数，中间还有背景音乐的开启关闭的标志位

MainLayer.hpp————

#ifndef MainLayer_hpp

#define MainLayer_hpp

#include <stdio.h>

#include "cocos2d.h"

#include "GameSceneManager.hpp"

using namespace cocos2d;

class MainLayer : public Layer

{

public:

//背景精灵

Sprite* backGround;

//用于显示顶部title的节点

NodeGrid* effectNode;

//背景音乐的标志，判断当前背景音乐是否开启

static bool musicFlag;

//音效是否开启

static bool soundFlag;

//场景管理器，场景调度

GameSceneManager* sceneManager;

public:

//当前图层布景初始化

virtual bool init();

//随机函数，用于随机切换当前背景

int random();

//主页面的6个item的回调函数

void menuCallBack0(Ref* pSender);

void menuCallBack1(Ref* pSender);

void menuCallBack2(Ref* pSender);

void menuCallBack3(Ref* pSender);

void menuCallBack4(Ref* pSender);

void menuCallBack5(Ref* pSender);

//顶部title 的初始化函数

void initTitle();

//MainLayer的创建

CREATE_FUNC(MainLayer);

};

#endif /* MainLayer_hpp */

MainLayer.cpp————

#include "MainLayer.hpp"

#include "SimpleAudioEngine.h"

#include <time.h>

using namespace cocos2d;

//初始化背景音乐和和音效开启，设置为true

bool MainLayer::musicFlag =true;

bool MainLayer::soundFlag =true;

bool MainLayer::init()

{

if ( !Layer::init() )

{

return false;

}

auto visibleSize = Director::getInstance()->getVisibleSize();

Vec2 origin = Director::getInstance()->getVisibleOrigin();

//通过random（）函数获取随机值i

int i = random();

//通过i来判断到底用哪一张图片作为背景图

if (i%2==0) {

backGround = Sprite::create("pic/morning.png");

}else

{

backGround =Sprite::create("pic/night.png");

}

//将背景图添加到当前布景

this->addChild(backGround,0);

//播放背景音乐，之前已经将musicFlag设置为true了

if (musicFlag) {

CocosDenshion::SimpleAudioEngine::getInstance()->playBackgroundMusic("sounds/playscene.mp3",true);

}

//创建底部背景中底部地板的精灵

Sprite* floor =Sprite::create("pic/floor.png");

//设置地板精灵的锚点为Vec2(0, 0)

floor->setAnchorPoint(Vec2(0, 0));

//设置地板精灵的位置为Vec2(origin.x, origin.y)

floor->setPosition(Vec2(origin.x, origin.y));

this->addChild(floor);

//地板精灵执行重复动作，来回的从当前位置移动到Vec2(-120, 0)，从Vec2(-120, 0)再移动到Vec2(0, 0)，再移动回原位置，这里执行的是sequence延时动作，如果是spawn就是瞬时动作

floor->runAction(RepeatForever::create(Sequence::create(MoveTo::create(0.5, Vec2(-120, 0)),MoveTo::create(0, Vec2(0, 0)) ,NULL)));

//创建第一个gameItem（进入游戏），也就是第一排左边的按钮，并设置位置，回调函数为menuCallBack0

MenuItemImage* gameItem = MenuItemImage::create("button/start.png", "button/start_off.png", CC_CALLBACK_1(MainLayer::menuCallBack0, this));

gameItem->setPosition(Vec2(150, 600));

//创建第二个rankItem（排行榜），也就是第一排右边的按钮，并设置位置，回调函数为menuCallBack1

MenuItemImage* rankItem = MenuItemImage::create("button/rank.png", "button/rank_off.png", CC_CALLBACK_1(MainLayer::menuCallBack1, this));

rankItem->setPosition(Vec2(390, 600));

//创建第三个rankItem（设置），也就是第二排左边的按钮，并设置位置，回调函数为menuCallBack2

MenuItemImage* setItem = MenuItemImage::create("button/set.png", "button/set_off.png", CC_CALLBACK_1(MainLayer::menuCallBack2, this));

setItem->setPosition(Vec2(150, 450));

//创建第四个helpItem（帮助），也就是第二排右边的按钮，并设置位置，回调函数为menuCallBack3

MenuItemImage* helpItem = MenuItemImage::create("button/help.png", "button/help_off.png", CC_CALLBACK_1(MainLayer::menuCallBack3, this));

helpItem->setPosition(Vec2(390, 450));

//创建第五个aboutItem（关于），也就是第三排左边的按钮，并设置位置，回调函数为menuCallBack4

MenuItemImage* aboutItem = MenuItemImage::create("button/about.png", "button/about_off.png", CC_CALLBACK_1(MainLayer::menuCallBack4, this));

aboutItem->setPosition(Vec2(150, 300));

//创建第六个exittItem（退出），也就是第三排右边的按钮，并设置位置，回调函数为menuCallBack5

MenuItemImage* exitItem = MenuItemImage::create("button/exit.png", "button/exit_off.png", CC_CALLBACK_1(MainLayer::menuCallBack5, this));

exitItem->setPosition(Vec2(390, 300));

//通过menuItems创建menu，设置menu的位置，添加到layer

Menu* menu = Menu::create(gameItem,rankItem,setItem,helpItem,aboutItem,exitItem,NULL);

menu->setPosition(Vec2::ZERO);

this->addChild(menu);

//创建特效节点，并添加到layer中

effectNode = NodeGrid::create();

this->addChild(effectNode,10);

//创建title精灵，将title添加到特效节点中

Sprite* title = Sprite::create("pic/title.png");

title->setPosition(Vec2(270, 800));

effectNode->addChild(title,13);

//关闭深度检测，这里就是当点击时，两个精灵重叠在一起，可以设置下层的精灵来响应，这个时候必须要开启深度检测，但是现在不想要底部的精灵来响应，就将它关闭

Director::getInstance()->setDepthTest(false);

//特效节点执重复动作，ripple3D，详情可以参照Dash

Create the action with center position, radius, number of waves, amplitude, a grid size and duration.

• Parameters

• duration	Specify the duration of the Ripple3D action. It's a value in seconds.
  gridSize	Specify the size of the grid.
  position	Specify the center position of the ripple effect.
  radius	Specify the radius of the ripple effect.
  waves	Specify the waves count of the ripple effect.
  amplitude	Specify the amplitude of the ripple effect.

effectNode->runAction(RepeatForever::create(Ripple3D::create(2.0f, Size(32, 24), Vec2(270, 800), 360, 2, 5)));

return true;

}

//random 随机函数

int MainLayer::random()

{ 以时间点的无符号数作为生成随机数的种子数，对srand（）函数来说，只要种子数不变，rand生成的数就不变

srand((unsigned)time(NULL));

int number = rand()%4;

return number;

}

//回调函数0，通过sceneManager场景调度，跳转至游戏场景

void MainLayer::menuCallBack0(Ref* pSender)

{

initTitle();

sceneManager->goToGameScene();

}

//回调函数1，通过sceneManager场景调度，跳转至排行榜

void MainLayer::menuCallBack1(Ref* pSender)

{

initTitle();

sceneManager->goToRankBirdScene();

}

//回调函数2，通过sceneManager场景调度，跳转至设置场景

void MainLayer::menuCallBack2(Ref* pSender)

{

initTitle();

sceneManager->goToSetScene();

}

//回调函数3，通过sceneManager场景调度，跳转至帮助场景

void MainLayer::menuCallBack3(Ref* pSender)

{

initTitle();

sceneManager->goToHelpScene();

}

//回调函数4，通过sceneManager场景调度，跳转至关于场景

void MainLayer::menuCallBack4(Ref* pSender)

{

initTitle();

sceneManager->goToAboutScene();

}

//回调函数5，退出游戏，iOS平台中还要做一下平台判断，最后exit

void MainLayer::menuCallBack5(Ref* pSender)

{

Director::getInstance()->end();

#if (CC_TARGET_PLATFORM == CC_PLATFORM_IOS)

exit(0);

#endif

}

//顶部的title初始化函数

void MainLayer::initTitle()

{

effectNode = NodeGrid::create();

this->addChild(effectNode,10);

Sprite* title = Sprite::create("pic/title.png");

title->setPosition(Vec2(270, 800));

effectNode->addChild(title,13);

Director::getInstance()->setDepthTest(false);

effectNode->runAction(RepeatForever::create(Ripple3D::create(2.0f, Size(32, 24), Vec2(270, 800), 360, 2, 5)));

}

到这里我们MainLayer就是实现完了，很简单吧，我们让这个程序跑起来看看是什么效果（实际上在运行之前还要实现场景调度类GameSceneManager，这里我们先跳过）

大家看到上面这个结果一定不知道傻眼了，怎么界面布局和我们想想的不一样，不用着急，下一节我们重点要讲的就是这个屏幕适配。

零基础学习Cocos2d-x开发——游戏引擎基本框架

Cocos2dx开发学习-项目实践-FlappyBird-1

Cocos2dx项目实践-FlappyBird新建项目