最新cocos2d-x 3.0博客教学 小游戏[史上最坑爹的游戏] 001主画面以及关卡选择画面的制作

cocs2d的开发环境我相信大家都能搭建好了，下面我们直接的进入正题，开始做我们的小游戏，如果对搭建环境还有不懂的童鞋请看我写的这篇博文

 cocos2d-x 3.0游戏开发xcode5帅印博客教学 001.[HoldTail]环境的搭建以及项目创建

首先我们来看看主画面和关卡选择画面的背景图片

我这里就不上传过多的图片了，直接进入正题看我们的第一个画面如何实现

图片我们是用的原来的官方团对的美术图片在这里大家都要感谢一下官方团体能做出这么美丽的图片（广科院移动应用开发中心）

我这里就不上传过多的图片了，直接进入正题看我们的第一个画面如何实现

主画面由HelloWorldScene.h和HelloWorldScene.cpp构成

HelloWorldScene.h

#ifndef __HELLOWORLD_SCENE_H__
#define __HELLOWORLD_SCENE_H__

#include "cocos2d.h"

class HelloWorld : public cocos2d::Layer
{
public:
    // there's no 'id' in cpp, so we recommend returning the class instance pointer
    static cocos2d::Scene* createScene();

    // Here's a difference. Method 'init' in cocos2d-x returns bool, instead of returning 'id' in cocos2d-iphone
    virtual bool init();  
    
    // a selector callback
    void menuCloseCallback(Object* pSender);
    
    // implement the "static create()" method manually
    CREATE_FUNC(HelloWorld);
};

#endif // __HELLOWORLD_SCENE_H__

HelloWorldScene.cpp

#include "HelloWorldScene.h"
#include "ScrollViewScene.h"

USING_NS_CC;

Scene* HelloWorld::createScene()
{
    // 'scene' is an autorelease object
    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
    return scene;
}

// on "init" you need to initialize your instance
bool HelloWorld::init()
{
    //
    // 1. super init first
    if ( !Layer::init() )
    {
        return false;
    }
    
    Size visibleSize = Director::getInstance()->getVisibleSize();
    Point origin = Director::getInstance()->getVisibleOrigin();

    /
    // 2. add a menu item with "X" image, which is clicked to quit the program
    //    you may modify it.
    
    
    //加入背景
    Size size = CCDirector::getInstance()->getWinSize();
    SpriteFrameCache *cache = SpriteFrameCache::getInstance();
    cache->addSpriteFramesWithFile("UIResoure.plist");
    
    Sprite* sprite =Sprite::createWithSpriteFrameName("start-bg.png");
    sprite->setPosition(Point(size.width*0.5+100,size.height*0.5));
    addChild(sprite);
    
    
    
    
    // add a "close" icon to exit the progress. it's an autorelease object
//    auto closeItem = MenuItemImage::create(
//                                           "UIResoure_play.png",
//                                           "UIResoure_plays.png",
//                                           CC_CALLBACK_1(HelloWorld::menuCloseCallback, this));
//    closeItem->setPosition(Point(size.width*0.5,size.height*0.5-100));
//
//    // create menu, it's an autorelease object
//    auto menu = Menu::create(closeItem, NULL);
//    menu->setPosition(Point::ZERO);
//    this->addChild(menu, 1);
    
    MenuItemImage *closeItem = MenuItemImage::create();
    closeItem->setNormalSpriteFrame(cache->spriteFrameByName("play-1.png"));
    closeItem->setSelectedSpriteFrame(cache->spriteFrameByName("play-2.png"));
    closeItem->initWithTarget(this, menu_selector(HelloWorld::menuCloseCallback));
    closeItem->setPosition(Point(size.width*0.5,size.height*0.5-100));
    auto menu = Menu::create(closeItem, NULL);
    menu->setPosition(Point::ZERO);
    this->addChild(menu, 1);
    
    
    
    return true;
}


void HelloWorld::menuCloseCallback(Object* pSender)
{
    //Director::getInstance()->end();
    //实现
    CCDirector::getInstance()->replaceScene(CCTransitionFade::create(0.5, ScrollViewScene::create()));
    
    //释放没有用到过的缓冲
    //CCTextureCache::sharedTextureCache()->removeUnusedTextures();
//#if (CC_TARGET_PLATFORM == CC_PLATFORM_IOS)
//    exit(0);
//#endif
}

这样主画面就做好了，下面进入关卡选择画面的制作，关卡选择画面的制作要比想像中的复杂，首先我们要建立一个场景类

ScrollViewScene.h  和   ScrollViewScene.cpp

ScrollViewScene.h 

//
//  ScrollViewScene.h
//  ScrollView
//
//  Created by Tom on 12-6-4.
//  Copyright (c) 2012年 __MyCompanyName__. All rights reserved.
//

#ifndef ScrollView_ScrollViewScene_h
#define ScrollView_ScrollViewScene_h

#include "cocos2d.h"

USING_NS_CC;

class ScrollViewScene: public Scene
{
    
public:
    ScrollViewScene();
    virtual bool init();
    CREATE_FUNC(ScrollViewScene);
    
    void menuCloseCallback(Object* pSender);
    
    static ScrollViewScene *sharedSC();
};

#endif

ScrollViewScene.cpp

//
//  ScrollViewScene.cpp
//  ScrollView
//
//  Created by Tom on 12-6-4.
//  Copyright (c) 2012年 __MyCompanyName__. All rights reserved.
//

#include "ScrollViewScene.h"
#include "ScrollView.h"
#include "ScorllMainLayer01.h"
#include "ScorllMainLayer02.h"
#include "ScorllMainLayer03.h"
#include "ScorllMainLayer04.h"
#include "ScorllMainLayer05.h"
#include "ScorllMainLayer06.h"
#include "ScorllMainLayer07.h"
#include "HelloWorldScene.h"

//using namespace CocosDenshion;
//声明静态变量
static ScrollView *scrollView;

static ScrollViewScene *sc;

ScrollViewScene *ScrollViewScene::sharedSC(){
    if(sc != NULL){
        return sc;
    }
    return  NULL;
}

ScrollViewScene::ScrollViewScene()
{
    
}


bool ScrollViewScene::init()
{
    sc = this;
    
    bool bRet = false;
    
    do {
        CC_BREAK_IF(!CCScene::init());
        scrollView = ScrollView::create();
        
        for (int i=0; i<7; ++i) {
            if (0==i) {
                ScorllMainLayer01 *layer = ScorllMainLayer01::create();
                layer->setTag(i);
                scrollView->addPage(layer);
            }else if(1==i){
                ScorllMainLayer02 *layer = ScorllMainLayer02::create();
                layer->setTag(i);
                scrollView->addPage(layer);
            }else if(2==i){
                ScorllMainLayer03 *layer = ScorllMainLayer03::create();
                layer->setTag(i);
                scrollView->addPage(layer);
            }else if(3==i){
                ScorllMainLayer04 *layer = ScorllMainLayer04::create();
                layer->setTag(i);
                scrollView->addPage(layer);
            }else if(4==i){
                ScorllMainLayer05 *layer = ScorllMainLayer05::create();
                layer->setTag(i);
                scrollView->addPage(layer);
            }else if(5==i){
                ScorllMainLayer06 *layer = ScorllMainLayer06::create();
                layer->setTag(i);
                scrollView->addPage(layer);
            }else if(6==i){
                ScorllMainLayer07 *layer = ScorllMainLayer07::create();
                layer->setTag(i);
                scrollView->addPage(layer);
            }
            
        }
        
        Size size = CCDirector::getInstance()->getWinSize();
        //初始化信息
        SpriteFrameCache *cache = SpriteFrameCache::getInstance();
        cache->addSpriteFramesWithFile("level_scene.plist");
        
        Sprite* spritebg =Sprite::createWithSpriteFrameName("list-bg.png");
        spritebg->setPosition(Point(size.width*0.5+100,size.height*0.5));
        addChild(spritebg);
        
        //下面的星星
        Sprite* sprite1 =Sprite::createWithSpriteFrameName("dots-1.png");
        sprite1->setPosition(Point(size.width*0.5-150,size.height*0.5-200));
        addChild(sprite1);
        Sprite* sprite2 =Sprite::createWithSpriteFrameName("dots-1.png");
        sprite2->setPosition(Point(size.width*0.5-100,size.height*0.5-200));
        addChild(sprite2);
        Sprite* sprite3 =Sprite::createWithSpriteFrameName("dots-1.png");
        sprite3->setPosition(Point(size.width*0.5-50,size.height*0.5-200));
        addChild(sprite3);
        Sprite* sprite4 =Sprite::createWithSpriteFrameName("dots-1.png");
        sprite4->setPosition(Point(size.width*0.5,size.height*0.5-200));
        addChild(sprite4);
        Sprite* sprite5 =Sprite::createWithSpriteFrameName("dots-1.png");
        sprite5->setPosition(Point(size.width*0.5+50,size.height*0.5-200));
        addChild(sprite5);
        Sprite* sprite6 =Sprite::createWithSpriteFrameName("dots-1.png");
        sprite6->setPosition(Point(size.width*0.5+100,size.height*0.5-200));
        addChild(sprite6);
        Sprite* sprite7 =Sprite::createWithSpriteFrameName("dots-1.png");
        sprite7->setPosition(Point(size.width*0.5+150,size.height*0.5-200));
        addChild(sprite7);
        
        Sprite* sprite =Sprite::createWithSpriteFrameName("dots-2.png");
        sprite->setPosition(Point(size.width*0.5-150,size.height*0.5-200));
        sprite->setTag(888);
        addChild(sprite);
        
        
        MenuItemImage *closeItem = MenuItemImage::create();
        closeItem->setNormalSpriteFrame(cache->spriteFrameByName("back-1.png"));
        closeItem->setSelectedSpriteFrame(cache->spriteFrameByName("back-2.png"));
        closeItem->initWithTarget(this, menu_selector(ScrollViewScene::menuCloseCallback));
        closeItem->setPosition(Point(80,80));
        
        auto menu = Menu::create(closeItem, NULL);
        menu->setPosition(Point::ZERO);
        this->addChild(menu, 1);
        
        this->addChild(scrollView);
        bRet = true;
    } while (0);
    
    return bRet;
}

void ScrollViewScene::menuCloseCallback(Object* pSender){
    CCDirector::getInstance()->replaceScene(CCTransitionFade::create(0.5, HelloWorld::createScene()));
}

建立完成场景类之后，我们要建立我们的场景工具类，这个类可以帮助我们实现左右滑动的效果，这是一个非常用的工具类哦，非常值得大家的学习哦。

ScrollVIew.h 和  ScrollView.cpp

ScrollVIew.h 

//
//  ScrollView.h
//  ScrollView
//
//  Created by 帅 印 on 13-8-26.
//  Copyright (c) 2012年 shuaiyinoo. All rights reserved.
//

#ifndef ScrollView_ScrollView_h
#define ScrollView_ScrollView_h

#include "cocos2d.h"

USING_NS_CC;

// 屏幕尺寸
const float WINDOW_WIDTH = 1136.0f;
const float WINDOW_HEIGHT = 640.0f;

// 触摸误差
const int TOUCH_DELTA = 20;

class ScrollView: public Layer
{
private:
    // 按下点
    Point m_TouchDownPoint;
    // 抬起点 配合使用判断是否为点击事件
    Point m_TouchUpPoint;
    // 当前触摸点
    Point m_TouchCurPoint;
    
private:
    // 总页数
    int m_Page;
    // 当前显示页
    int m_CurPage;
    
private:
    // 存储所有页层
    Array *m_PageLayer;
    
private:
    // 跳转页
    void goToPage();
    
public:
    ScrollView();
    ~ScrollView();
    
    virtual bool init();
    
    CREATE_FUNC(ScrollView);

public:
    // 初始化相关
    //virtual void onEnter();
    //virtual void onExit();
    
    // 触摸事件相关
    bool onTouchBegan(Touch *pTouch, Event  *pEvent);
    void onTouchMoved(Touch *pTouch, Event  *pEvent);
    void onTouchEnded(Touch *pTouch, Event  *pEvent);
    void onTouchCancelled(Touch *pTouch, Event  *pEvent);
    
public:
    // 添加页
    void addPage(Layer *pPageLayer);
    //公开方法跳转页面
    void gotoUserChoosePage(int _isToOrBack);

};

#endif

ScrollView.cpp

//
//  ScrollView.cpp
//  ScrollView
//
//  Created by 帅 印 on 13-8-26.
//  Copyright (c) 2012年 shuaiyinoo. All rights reserved.
//

#include "ScrollView.h"
#include "ScrollViewScene.h"

ScrollView::ScrollView()
{
    m_Page = 0;
    m_CurPage = 0;
    m_PageLayer = CCArray::createWithCapacity(5);
    m_PageLayer->retain();
    
    init();
}
ScrollView::~ScrollView()
{
    m_PageLayer->removeAllObjects();
    m_PageLayer->release();
}

bool ScrollView::init()
{
    bool bRet = false;
    
    do {
        CC_BREAK_IF(!CCLayer::init());
        
        bRet = true;
    } while (0);
    
    setTouchEnabled(true);
	//设置为单点响应
	setTouchMode(Touch::DispatchMode::ONE_BY_ONE);
    
    auto myListener = EventListenerTouchOneByOne::create();
    myListener->onTouchBegan = CC_CALLBACK_2(ScrollView::onTouchBegan, this);
    myListener->onTouchMoved = CC_CALLBACK_2(ScrollView::onTouchMoved, this);
    myListener->onTouchEnded = CC_CALLBACK_2(ScrollView::onTouchEnded, this);
    myListener->onTouchCancelled = CC_CALLBACK_2(ScrollView::onTouchCancelled, this);
    
    
    return bRet;
}

//void ScrollView::onEnter()
//{
//    CCLayer::onEnter();
//    //CCDirector::sharedDirector()->getInstance()->addTargetedDelegate(this, 0, true);
//}
//
//void ScrollView::onExit()
//{
//    //CCDirector::sharedDirector()->getTouchDispatcher()->removeDelegate(this);
//    CCLayer::onExit();
//}

void ScrollView::goToPage()
{
    MoveTo *moveTo = MoveTo::create(0.2f, Point::Point(-m_CurPage * WINDOW_WIDTH, 0));
    
    this->runAction(moveTo);
}

void ScrollView::addPage(cocos2d::Layer *pPageLayer)
{
    if (pPageLayer) {
        // 设置成一页大小
        pPageLayer->setContentSize(Size::Size(WINDOW_WIDTH, WINDOW_HEIGHT));
        pPageLayer->setPosition(Point(WINDOW_WIDTH * m_Page, 0));
        this->addChild(pPageLayer);
        // 添加到页
        m_PageLayer->addObject(pPageLayer);
        m_Page = m_PageLayer->count();
    }
}

//公开方法进行页面跳转
void ScrollView::gotoUserChoosePage(int _isToOrBack){
    if (0 == _isToOrBack) {
        //上一页
        if (m_CurPage > 0) {
            --m_CurPage;
        }
    }else if(1 == _isToOrBack){
        //下一页
        if (m_CurPage < (m_Page - 1)) {
            ++m_CurPage;
        }
    }
    
    // 执行跳转动画
    goToPage();
}

bool ScrollView::onTouchBegan(Touch *pTouch, Event  *pEvent){
    m_TouchDownPoint = CCDirector::getInstance()->convertToGL(pTouch->getLocationInView());
    m_TouchCurPoint = m_TouchDownPoint;
    
    return true;
}
void ScrollView::onTouchMoved(Touch *pTouch, Event  *pEvent){
    // 移动
    Point touchPoint = CCDirector::getInstance()->convertToGL(pTouch->getLocationInView());
    Point posPoint = Point::Point(getPositionX() + touchPoint.x - m_TouchCurPoint.x, getPositionY());
    setPosition(posPoint);
    m_TouchCurPoint = touchPoint;
}
void ScrollView::onTouchEnded(Touch *pTouch, Event  *pEvent){
    m_TouchUpPoint = CCDirector::getInstance()->convertToGL(pTouch->getLocationInView());
    // 计算按下和抬起的偏移量
    float offset = (m_TouchUpPoint.x - m_TouchDownPoint.x) * (m_TouchUpPoint.x - m_TouchDownPoint.x) + (m_TouchUpPoint.y - m_TouchDownPoint.y) * (m_TouchUpPoint.y - m_TouchDownPoint.y);
    
    if (offset < (TOUCH_DELTA * TOUCH_DELTA)) {
        // 点击
        // 向子Layer发送Click消息
        //((CCLayer*) m_PageLayer->objectAtIndex(m_CurPage))->ccTouchBegan(pTouch, pEvent);
    }
    else {
        // 滑动结束
        int offset = getPositionX() - m_CurPage * (-WINDOW_WIDTH);
        //if (offset > WINDOW_WIDTH / 2) {
        if (offset > 50) {
            // 上一页
            if (m_CurPage > 0) {
                --m_CurPage;
                Sprite *sprite =  (Sprite *)ScrollViewScene::sharedSC()->getChildByTag(888);
                sprite->setPosition(Point(sprite->getPositionX()-50,sprite->getPositionY()));
            }
        }
        //else if (offset < -WINDOW_WIDTH / 2) {
        else if (offset < -50) {
            // 下一页
            if (m_CurPage < (m_Page - 1)) {
                ++m_CurPage;
                Sprite *sprite =  (Sprite *)ScrollViewScene::sharedSC()->getChildByTag(888);
                sprite->setPosition(Point(sprite->getPositionX()+50,sprite->getPositionY()));
            }
        }
        
        // 执行跳转动画
        goToPage();
    }
}
void ScrollView::onTouchCancelled(Touch *pTouch, Event  *pEvent){
    
}

下面就是建立不同的场景这样就可以实现场景的切换和关卡的选择了，场景一共有7个我就只带大家创建一个哈

ScorllMainLayer01.h  和  ScorllMainLayer01.cpp

ScorllMainLayer01.h

//
//  ScorllMainLayer01.h
//  Holdtail
//
//  Created by 帅 印 on 13-8-26.
//
//

#ifndef __Holdtail__ScorllMainLayer01__
#define __Holdtail__ScorllMainLayer01__

#include <iostream>
#include "cocos2d.h"

USING_NS_CC;

class ScorllMainLayer01: public Layer
{
public:
    ScorllMainLayer01();
    ~ScorllMainLayer01();
    
    virtual bool init();
    
    CREATE_FUNC(ScorllMainLayer01);
    
    void menuCloseCallback01(Object* pSender);
    void menuCloseCallback02(Object* pSender);
    void menuCloseCallback03(Object* pSender);
    void menuCloseCallback04(Object* pSender);
    
};

#endif /* defined(__Holdtail__ScorllMainLayer0101__) */

ScorllMainLayer01.cpp

//
//  ScorllMainLayer01.cpp
//  Holdtail
//
//  Created by 帅 印 on 13-8-26.
//
//

#include "ScorllMainLayer01.h"
#include "SimpleAudioEngine.h"

using namespace CocosDenshion;

ScorllMainLayer01::ScorllMainLayer01()
{
}

ScorllMainLayer01::~ScorllMainLayer01()
{
}

bool ScorllMainLayer01::init()
{
    bool bRet = false;
    
    do {
        Size size = CCDirector::getInstance()->getWinSize();
        //初始化信息
        SpriteFrameCache *cache = SpriteFrameCache::getInstance();
        cache->addSpriteFramesWithFile("level_image.plist");
        
        MenuItemImage *closeItem01 = MenuItemImage::create();
        closeItem01->setNormalSpriteFrame(cache->spriteFrameByName("shutdown-pc-cover.png"));
        closeItem01->setSelectedSpriteFrame(cache->spriteFrameByName("shutdown-pc-cover.png"));
        closeItem01->initWithTarget(this, menu_selector(ScorllMainLayer01::menuCloseCallback01));
        closeItem01->setPosition(Point(size.width*0.5-150,size.height*0.5+200));
        
        MenuItemImage *closeItem02 = MenuItemImage::create();
        closeItem02->setNormalSpriteFrame(cache->spriteFrameByName("clickon-the-100times-cover.png"));
        closeItem02->setSelectedSpriteFrame(cache->spriteFrameByName("clickon-the-100times-cover.png"));
        closeItem02->initWithTarget(this, menu_selector(ScorllMainLayer01::menuCloseCallback02));
        closeItem02->setPosition(Point(size.width*0.5+150,size.height*0.5+200));
        
        MenuItemImage *closeItem03 = MenuItemImage::create();
        closeItem03->setNormalSpriteFrame(cache->spriteFrameByName("through-the-bridge-cover.png"));
        closeItem03->setSelectedSpriteFrame(cache->spriteFrameByName("through-the-bridge-cover.png"));
        closeItem03->initWithTarget(this, menu_selector(ScorllMainLayer01::menuCloseCallback03));
        closeItem03->setPosition(Point(size.width*0.5-150,size.height*0.5));
        
        MenuItemImage *closeItem04 = MenuItemImage::create();
        closeItem04->setNormalSpriteFrame(cache->spriteFrameByName("click-me-cover.png"));
        closeItem04->setSelectedSpriteFrame(cache->spriteFrameByName("click-me-cover.png"));
        closeItem04->initWithTarget(this, menu_selector(ScorllMainLayer01::menuCloseCallback04));
        closeItem04->setPosition(Point(size.width*0.5+150,size.height*0.5));
        
        auto menu = Menu::create(closeItem01,closeItem02,closeItem03,closeItem04, NULL);
        menu->setPosition(Point::ZERO);
        this->addChild(menu, 1);
        
        
        bRet = true;
    } while (0);
    
    return bRet;
}

void ScorllMainLayer01::menuCloseCallback01(Object* pSender){
    log("SS");
}
void ScorllMainLayer01::menuCloseCallback02(Object* pSender){
    
}
void ScorllMainLayer01::menuCloseCallback03(Object* pSender){
    
}
void ScorllMainLayer01::menuCloseCallback04(Object* pSender){
    
}

这样下来只要你自己再写6个这样的类，我们的游戏主画面跟场景就算是做好了，大家一起加油把。

这里我强调一下由于是用的官方团队的原图片，源码我就暂时不公布出来，如果大家想要，我会联系官方团队后再开源出来，方便大家学习。