最新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 pointerstatic cocos2d::Scene* createScene();// Here's a difference. Method 'init' in cocos2d-x returns bool, instead of returning 'id' in cocos2d-iphonevirtual bool init();  // a selector callbackvoid menuCloseCallback(Object* pSender);// implement the "static create()" method manuallyCREATE_FUNC(HelloWorld);
};#endif // __HELLOWORLD_SCENE_H__

HelloWorldScene.cpp

#include "HelloWorldScene.h"
#include "ScrollViewScene.h"USING_NS_CC;Scene* HelloWorld::createScene()
{// 'scene' is an autorelease objectauto scene = Scene::create();// 'layer' is an autorelease objectauto layer = HelloWorld::create();// add layer as a child to scenescene->addChild(layer);// return the scenereturn scene;
}// on "init" you need to initialize your instance
bool HelloWorld::init()
{//// 1. super init firstif ( !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个这样的类，我们的游戏主画面跟场景就算是做好了，大家一起加油把。

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

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

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

最新文章

热门文章

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

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

最新文章

热门文章

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

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