首先创建Cocos2d-x项目,命名为Plane,在AppDelegate类中的applicationDidFinishLaunching方法中增加一行屏幕适配的代码。
然后创建菜单层MenuLayer,继承至CCLayerColor类(带颜色的层),MenuLayer类中有如下方法:
static CCScene* scene();
CREATE_FUNC(MenuLayer);
bool init();
void addXXX();
void addBackGround();
void addLogo();
void addMenu();
void onStarGame(CCObject* sender)。
首先实现场景创建方法scene,该方法中创建场景并添加菜单层。
接下来实现init方法,该方法添加欢迎界面,欢迎界面是一个logo的显示和消失
最后实现菜单层界面上的精灵、菜单项和菜单。
然后创建一个地图层MapLayer,继承至CCLayer,该层用于创建游戏的背景地图,游戏滚动地图的实现由两个地图背景精灵交替滚动实现,该类有以下方法和属性:
static CCScene* scene(int Level);
static MapLayer* createMapLayer(int Level);
CCSprite *m_map1;
CCSprite *m_map2;
int m_level;
bool initMapLayer(int Level);
void initMap();
void mapMove(float time);
实现此案例需要按照如下步骤进行。
步骤一:创建菜单层MenuLayer
首先创建Cocos2d-x项目,命名为Plane,在AppDelegate类中的applicationDidFinishLaunching方法中增加一行屏幕适配的代码,代码如下所示:
- bool AppDelegate::applicationDidFinishLaunching() {
- // initialize director
- CCDirector* pDirector = CCDirector::sharedDirector();
- CCEGLView* pEGLView = CCEGLView::sharedOpenGLView();
- pDirector->setOpenGLView(pEGLView);
- //屏幕适配
- pEGLView->setDesignResolutionSize(320, 568, kResolutionExactFit);
- pDirector->setDisplayStats(true);
- pDirector->setAnimationInterval(1.0 / 60);
- CCScene *pScene = MenuLayer::scene();
- pDirector->runWithScene(pScene);
- return true;
- }
然后创建菜单层MenuLayer,继承至CCLayerColor类(带颜色的层),代码如下所示:
- class MenuLayer : public CCLayerColor {
- public:
- static CCScene* scene();
- CREATE_FUNC(MenuLayer);
- private:
- bool init();
- void addTarena();
- void addBackGround();
- void addLogo();
- void addMenu();
- void onStarGame(CCObject* sender);
- };
首先实现场景创建方法scene,该方法中创建场景并添加菜单层,代码如下所示:
- //创建场景
- CCScene* MenuLayer::scene() {
- CCScene *scene = CCScene::create();
- MenuLayer *menuLayer = MenuLayer::create();
- scene->addChild(menuLayer);
- return scene;
- }
接下来实现init方法,该方法中通过调用addTarena方法添加欢迎界面,欢迎界面是一个logo的显示和消失,代码如下所示:
- bool MenuLayer::init() {
- if (!CCLayerColor::initWithColor(ccc4(255, 255, 255, 255))) return false;
- //添加菜单的欢迎界面
- this->addTarena();
- return true;
- }
实现addTarena方法,先创建一个tarena图片的精灵到界面中,然后创建一个CCFadeIn类型的从无到有的渐变效果,接下来是一个fadeOut类型的从有到无的渐变效果,最后添加回调函数addBackGround,将以上动作放入一个顺时执行动作中,代码如下所示:
- void MenuLayer::addTarena() {
- //添加tarena的logo,并添加显示和消失动作
- CCSprite *tarena = CCSprite::create("Menu/tarena.jpg");
- this->addChild(tarena);
- tarena->setPosition(SCREEN_CENTER);
- tarena->setOpacity(0);
- CCDelayTime *delay = CCDelayTime::create(1);
- //从无到有的渐变效果
- CCFadeIn *fadeIn = CCFadeIn::create(1);
- CCDelayTime *delay2 = CCDelayTime::create(1);
- //从有到无的渐变效果
- CCFadeOut *fadeOut = CCFadeOut::create(1);
- //回调函数
- CCCallFunc *callFunc = CCCallFunc::create(this, callfunc_selector(MenuLayer::addBackGround));
- //将以上所有动作放入一个顺时动作中
- CCSequence *seq = CCSequence::create(delay, fadeIn, delay2,callFunc, fadeOut, NULL);
- tarena->runAction(seq);
- }
接下来实现回调函数addBackGround添加菜单层的背景,以及背景的入场动作,代码如下所示:
- //添加菜单层的背景
- void MenuLayer::addBackGround() {
- CCSprite *bg = CCSprite::create("Menu/img_bg_logo.jpg");
- bg->setAnchorPoint(CCPointZero);
- bg->setOpacity(0);
- this->addChild(bg);
- //背景图片的入场动作
- CCFadeIn *fadeIn = CCFadeIn::create(1);
- CCMoveTo *moveTo = CCMoveTo::create(1, ccp(0, SCREEN.height - bg->getContentSize().height));
- CCCallFunc *callFunc = CCCallFunc::create(this, callfunc_selector(MenuLayer::addLogo));
- CCSequence *seq = CCSequence::create(fadeIn, moveTo, callFunc, NULL);
- bg->runAction(seq);
- }
实现回调函数logo,添加logo精灵和入场动作,代码如下所示:
- //添加游戏logo
- void MenuLayer::addLogo() {
- CCSprite *logo = CCSprite::create("Menu/LOGO.png");
- logo->setPosition(ccp(-200, 200));
- this->addChild(logo);
- CCMoveTo *moveTo = CCMoveTo::create(1, SCREEN_POSITION(0.5, 0.8));
- CCEaseBounceOut *bounce = CCEaseBounceOut::create(moveTo);
- CCCallFunc *callFunc = CCCallFunc::create(this, callfunc_selector(MenuLayer::addMenu));
- CCSequence *seq = CCSequence::create(callFunc, bounce, NULL);
- logo->runAction(seq);
- }
最后实现回调函数addMenu,添加菜单项和菜单,代码如下所示:
- //添加菜单和菜单项
- void MenuLayer::addMenu() {
- CCMenu *menu = CCMenu::create();
- CCLabelBMFont *bmFont = CCLabelBMFont::create("Start", "font/bitmapFontTest.fnt");
- CCMenuItemLabel *itemLabel = CCMenuItemLabel::create(bmFont, this, menu_selector(MenuLayer::onStarGame));
- itemLabel->setScale(0);
- CCRotateBy *rotate = CCRotateBy::create(1, 1800);
- CCScaleTo *scaleTo = CCScaleTo::create(1, 1);
- CCSpawn *spawn = CCSpawn::create(rotate, scaleTo, NULL);
- itemLabel->runAction(spawn);
- menu->addChild(itemLabel);
- this->addChild(menu);
- }
- //游戏开始事件,切换到游戏场景
- void MenuLayer::onStarGame(CCObject* sender) {
- CCDirector::sharedDirector()->replaceScene(CCTransitionFade::create(1, MapLayer::scene(1)));
- CCLog("游戏开始");
- }
步骤二:创建地图层MapLayer
创建一个地图层MapLayer,继承至CCLayer,该层用于创建游戏的背景地图,游戏滚动地图的实现由两个地图背景精灵交替滚动实现,代码如下所示:
- class MapLayer : public CCLayer {
- public:
- static CCScene* scene(int Level);
- static MapLayer* createMapLayer(int Level);
- private:
- //两个地图精灵
- CCSprite *m_map1;
- CCSprite *m_map2;
- int m_level;
- bool initMapLayer(int Level);
- void initMap();
- void mapMove(float time);
- };
首先实现场景创建方法scene,该方法中创建场景并添加地图层,代码如下所示:
- //创建场景
- CCScene* MapLayer::scene(int Level) {
- CCScene *scene = CCScene::create();
- //地图层
- MapLayer *mapLayer = MapLayer::createMapLayer(Level);
- scene->addChild(mapLayer);
- return scene;
- }
然后实现createMapLayer方法和initMapLayer方法创建地图层并初始化地图,代码如下所示:
- //创建地图层
- MapLayer* MapLayer::createMapLayer(int Level) {
- MapLayer *mapLayer = new MapLayer();
- if (mapLayer && mapLayer->initMapLayer(Level)) {
- mapLayer->autorelease();
- return mapLayer;
- }
- CC_SAFE_DELETE(mapLayer);
- return NULL;
- }
- bool MapLayer::initMapLayer(int Level) {
- if (!CCLayer::init()) return false;
- m_level = Level;
- //初始化地图
- this->initMap();
- return true;
- }
实现方法initMap,根据当前等级初始化不同的地图文件,为了实现滚动地图需要创建两个地图精灵,代码如下所示:
- void MapLayer::initMap() {
- //根据当前等级初始化不同的地图文件
- const char *imageName = CCString::createWithFormat("BG/img_bg_level_%d.jpg", m_level)->getCString();
- m_map1 = CCSprite::create(imageName);
- m_map1->setAnchorPoint(CCPointZero);
- this->addChild(m_map1);
- m_map2 = CCSprite::create(imageName);
- m_map2->setAnchorPoint(CCPointZero);
- m_map2->setPosition(ccp(0, m_map1->getContentSize().height));
- this->addChild(m_map2);
- this->schedule(schedule_selector(MapLayer::mapMove));
- }
最后实现地图的滚动,通过地图移动和坐标由两个地图交替显示,代码如下所示:
- void MapLayer::mapMove(float time) {
- //地图滚动及滚轴地图逻辑
- m_map1->setPositionY(m_map1->getPositionY() - map_speed);
- m_map2->setPositionY(m_map2->getPositionY() - map_speed);
- if (m_map1->getPositionY() <= -m_map1->getContentSize().height) {
- m_map1->setPositionY(m_map2->getContentSize().height + m_map2->getPositionY());
- }
- if (m_map2->getPositionY() <= -m_map2->getContentSize().height) {
- m_map2->setPositionY(m_map1->getContentSize().height + m_map1->getPositionY());
- }
- }
本案例中,AppDelegate.cpp文件中的完整代码如下所示:
- #include "AppDelegate.h"
- #include "MenuLayer.h"
- #include "MapLayer.h"
- USING_NS_CC;
- AppDelegate::AppDelegate() {
- }
- AppDelegate::~AppDelegate()
- {
- }
- bool AppDelegate::applicationDidFinishLaunching() {
- // initialize director
- CCDirector* pDirector = CCDirector::sharedDirector();
- CCEGLView* pEGLView = CCEGLView::sharedOpenGLView();
- pDirector->setOpenGLView(pEGLView);
- //屏幕适配
- pEGLView->setDesignResolutionSize(320, 568, kResolutionExactFit);
- pDirector->setDisplayStats(true);
- pDirector->setAnimationInterval(1.0 / 60);
- CCScene *pScene = MenuLayer::scene();
- pDirector->runWithScene(pScene);
- return true;
- }
隐藏
本案例中,MenuLayer.h文件中的完整代码如下所示:
- #ifndef __Plane__MenuLayer__
- #define __Plane__MenuLayer__
- #include <stdio.h>
- #include "cocos2d.h"
- USING_NS_CC;
- //继承带颜色的层
- class MenuLayer : public CCLayerColor {
- public:
- static CCScene* scene();
- CREATE_FUNC(MenuLayer);
- private:
- bool init();
- void addTarena();
- void addBackGround();
- void addLogo();
- void addMenu();
- void onStarGame(CCObject* sender);
- };
- #endif /* defined(__Plane__MenuLayer__) */
隐藏
本案例中,MenuLayer.cpp文件中的完整代码如下所示:
- #include "MenuLayer.h"
- #include "MapLayer.h"
- #include "Tools.h"
- //创建场景
- CCScene* MenuLayer::scene() {
- CCScene *scene = CCScene::create();
- MenuLayer *menuLayer = MenuLayer::create();
- scene->addChild(menuLayer);
- return scene;
- }
- //初始化方法
- bool MenuLayer::init() {
- if (!CCLayerColor::initWithColor(ccc4(255, 255, 255, 255))) return false;
- //添加菜单的欢迎界面
- this->addTarena();
- return true;
- }
- //菜单的欢迎界面
- void MenuLayer::addTarena() {
- //添加tarena的logo,并添加显示和消失动作
- CCSprite *tarena = CCSprite::create("Menu/tarena.jpg");
- this->addChild(tarena);
- tarena->setPosition(SCREEN_CENTER);
- tarena->setOpacity(0);
- CCDelayTime *delay = CCDelayTime::create(1);
- //从无到有的渐变效果
- CCFadeIn *fadeIn = CCFadeIn::create(1);
- CCDelayTime *delay2 = CCDelayTime::create(1);
- //从有到无的渐变效果
- CCFadeOut *fadeOut = CCFadeOut::create(1);
- //回调函数
- CCCallFunc *callFunc = CCCallFunc::create(this, callfunc_selector(MenuLayer::addBackGround));
- //将以上所有动作放入一个顺时动作中
- CCSequence *seq = CCSequence::create(delay, fadeIn, delay2,callFunc, fadeOut, NULL);
- tarena->runAction(seq);
- }
- //添加菜单层的背景
- void MenuLayer::addBackGround() {
- CCSprite *bg = CCSprite::create("Menu/img_bg_logo.jpg");
- bg->setAnchorPoint(CCPointZero);
- bg->setOpacity(0);
- this->addChild(bg);
- CCFadeIn *fadeIn = CCFadeIn::create(1);
- CCMoveTo *moveTo = CCMoveTo::create(1, ccp(0, SCREEN.height - bg->getContentSize().height));
- CCCallFunc *callFunc = CCCallFunc::create(this, callfunc_selector(MenuLayer::addLogo));
- CCSequence *seq = CCSequence::create(fadeIn, moveTo, callFunc, NULL);
- bg->runAction(seq);
- }
- //添加游戏logo
- void MenuLayer::addLogo() {
- CCSprite *logo = CCSprite::create("Menu/LOGO.png");
- logo->setPosition(ccp(-200, 200));
- this->addChild(logo);
- CCMoveTo *moveTo = CCMoveTo::create(1, SCREEN_POSITION(0.5, 0.8));
- CCEaseBounceOut *bounce = CCEaseBounceOut::create(moveTo);
- CCCallFunc *callFunc = CCCallFunc::create(this, callfunc_selector(MenuLayer::addMenu));
- CCSequence *seq = CCSequence::create(callFunc, bounce, NULL);
- logo->runAction(seq);
- }
- //添加菜单和菜单项
- void MenuLayer::addMenu() {
- CCMenu *menu = CCMenu::create();
- CCLabelBMFont *bmFont = CCLabelBMFont::create("Start", "font/bitmapFontTest.fnt");
- CCMenuItemLabel *itemLabel = CCMenuItemLabel::create(bmFont, this, menu_selector(MenuLayer::onStarGame));
- itemLabel->setScale(0);
- CCRotateBy *rotate = CCRotateBy::create(1, 1800);
- CCScaleTo *scaleTo = CCScaleTo::create(1, 1);
- CCSpawn *spawn = CCSpawn::create(rotate, scaleTo, NULL);
- itemLabel->runAction(spawn);
- menu->addChild(itemLabel);
- this->addChild(menu);
- }
- //游戏开始事件,切换到游戏场景
- void MenuLayer::onStarGame(CCObject* sender) {
- CCDirector::sharedDirector()->replaceScene(CCTransitionFade::create(1, MapLayer::scene(1)));
- CCLog("游戏开始");
- }
隐藏
本案例中,MapLayer.h文件中的完整代码如下所示:
- #ifndef __Plane__MapLayer__
- #define __Plane__MapLayer__
- #include <stdio.h>
- #include "cocos2d.h"
- USING_NS_CC;
- #define map_speed 1
- class MapLayer : public CCLayer {
- public:
- static CCScene* scene(int Level);
- static MapLayer* createMapLayer(int Level);
- private:
- //两个地图精灵
- CCSprite *m_map1;
- CCSprite *m_map2;
- int m_level;
- bool initMapLayer(int Level);
- void initMap();
- void mapMove(float time);
- };
- #endif /* defined(__Plane__MapLayer__) */
隐藏
本案例中,MapLayer.cpp文件中的完整代码如下所示:
- #include "MapLayer.h"
- //创建场景
- CCScene* MapLayer::scene(int Level) {
- CCScene *scene = CCScene::create();
- //地图层
- MapLayer *mapLayer = MapLayer::createMapLayer(Level);
- scene->addChild(mapLayer);
- return scene;
- }
- //创建地图层
- MapLayer* MapLayer::createMapLayer(int Level) {
- MapLayer *mapLayer = new MapLayer();
- if (mapLayer && mapLayer->initMapLayer(Level)) {
- mapLayer->autorelease();
- return mapLayer;
- }
- CC_SAFE_DELETE(mapLayer);
- return NULL;
- }
- bool MapLayer::initMapLayer(int Level) {
- if (!CCLayer::init()) return false;
- m_level = Level;
- //初始化地图
- this->initMap();
- return true;
- }
- void MapLayer::initMap() {
- //根据当前等级 初始化不同的 地图文件
- const char *imageName = CCString::createWithFormat("BG/img_bg_level_%d.jpg", m_level)->getCString();
- m_map1 = CCSprite::create(imageName);
- m_map1->setAnchorPoint(CCPointZero);
- this->addChild(m_map1);
- m_map2 = CCSprite::create(imageName);
- m_map2->setAnchorPoint(CCPointZero);
- m_map2->setPosition(ccp(0, m_map1->getContentSize().height));
- this->addChild(m_map2);
- this->schedule(schedule_selector(MapLayer::mapMove));
- }
- void MapLayer::mapMove(float time) {
- //地图滚动及滚轴地图逻辑
- m_map1->setPositionY(m_map1->getPositionY() - map_speed);
- m_map2->setPositionY(m_map2->getPositionY() - map_speed);
- if (m_map1->getPositionY() <= -m_map1->getContentSize().height) {
- m_map1->setPositionY(m_map2->getContentSize().height + m_map2->getPositionY());
- }
- if (m_map2->getPositionY() <= -m_map2->getContentSize().height) {
- m_map2->setPositionY(m_map1->getContentSize().height + m_map1->getPositionY());
- }
- }
隐藏
本案例中,Tools.h文件中的完整代码如下所示:
- #ifndef Plane_Tools_h
- #define Plane_Tools_h
- #define SCREEN CCDirector::sharedDirector()->getWinSize()
- #define SCREEN_CENTER ccp(SCREEN.width * 0.5, SCREEN.height * 0.5)
- #define SCREEN_POSITION(_x, _y) ccp(SCREEN.width * _x, SCREEN.height * _y)
- #define SCREEN_POSITION_X(_x) (SCREEN.width + _x)
- #define SCREEN_POSITION_Y(_y) (SCREEN.height + _y)
- #endif