小游戏1主画面以及关卡选择画面的制作
发表于2016-01-15
cocos2d-x 3.0游戏开发xcode5帅印博客教学 001.[HoldTail]环境的搭建以及项目创建
首先我们来看看主画面和关卡选择画面的背景图片
我这里就不上传过多的图片了，直接进入正题看我们的第一个画面如何实现
图片我们是用的原来的官方团对的美术图片在这里大家都要感谢一下官方团体能做出这么美丽的图片（广科院移动应用开发中心）
我这里就不上传过多的图片了，直接进入正题看我们的第一个画面如何实现
主画面由HelloWorldScene.h和HelloWorldScene.cpp构成
HelloWorldScene.h
01.#ifndef __HELLOWORLD_SCENE_H__
02.#define __HELLOWORLD_SCENE_H__
03.
04.#include "cocos2d.h"
05.
06.class HelloWorld : public cocos2d::Layer
07.{
08.public:
09.// there's no 'id' in cpp, so we recommend returning the class instance pointer
10.static cocos2d::Scene* createScene();
11.
12.// Here's a difference. Method 'init' in cocos2d-x returns bool, instead of returning 'id' in cocos2d-iphone
13.virtual bool init();
14.
15.// a selector callback
16.void menuCloseCallback(Object* pSender);
17.
18.// implement the "static create()" method manually
19.CREATE_FUNC(HelloWorld);
20.};
21.
22.#endif // __HELLOWORLD_SCENE_H__
HelloWorldScene.cpp
01.#include "HelloWorldScene.h"
02.#include "ScrollViewScene.h"
03.
04.USING_NS_CC;
05.
06.Scene* HelloWorld::createScene()
07.{
08.// 'scene' is an autorelease object
09.auto scene = Scene::create();
10.
11.// 'layer' is an autorelease object
12.auto layer = HelloWorld::create();
13.
14.// add layer as a child to scene
15.scene->addChild(layer);
16.
17.// return the scene
18.return scene;
19.}
20.
21.// on "init" you need to initialize your instance
22.bool HelloWorld::init()
23.{
24.//////////////////////////////
25.// 1. super init first
26.if ( !Layer::init() )
27.{
28.return false;
29.}
30.
31.Size visibleSize = Director::getInstance()->getVisibleSize();
32.Point origin = Director::getInstance()->getVisibleOrigin();
33.
34./////////////////////////////
35.// 2. add a menu item with "X" image, which is clicked to quit the program
36.// you may modify it.
37.
38.
39.//加入背景
40.Size size = CCDirector::getInstance()->getWinSize();
41.SpriteFrameCache *cache = SpriteFrameCache::getInstance();
42.cache->addSpriteFramesWithFile("UIResoure.plist");
43.
44.Sprite* sprite =Sprite::createWithSpriteFrameName("start-bg.png");
45.sprite->setPosition(Point(size.width*0.5+100,size.height*0.5));
46.addChild(sprite);
47.
48.
49.
50.
51.// add a "close" icon to exit the progress. it's an autorelease object
52.// auto closeItem = MenuItemImage::create(
53.// "UIResoure_play.png",
54.// "UIResoure_plays.png",
55.// CC_CALLBACK_1(HelloWorld::menuCloseCallback, this));
56.// closeItem->setPosition(Point(size.width*0.5,size.height*0.5-100));
57.//
58.// // create menu, it's an autorelease object
59.// auto menu = Menu::create(closeItem, NULL);
60.// menu->setPosition(Point::ZERO);
61.// this->addChild(menu, 1);
62.
63.MenuItemImage *closeItem = MenuItemImage::create();
64.closeItem->setNormalSpriteFrame(cache->spriteFrameByName("play-1.png"));
65.closeItem->setSelectedSpriteFrame(cache->spriteFrameByName("play-2.png"));
66.closeItem->initWithTarget(this, menu_selector(HelloWorld::menuCloseCallback));
67.closeItem->setPosition(Point(size.width*0.5,size.height*0.5-100));
68.auto menu = Menu::create(closeItem, NULL);
69.menu->setPosition(Point::ZERO);
70.this->addChild(menu, 1);
71.
72.
73.
74.return true;
75.}
76.
77.
78.void HelloWorld::menuCloseCallback(Object* pSender)
79.{
80.//Director::getInstance()->end();
81.//实现
82.CCDirector::getInstance()->replaceScene(CCTransitionFade::create(0.5, ScrollViewScene::create()));
83.
84.//释放没有用到过的缓冲
85.//CCTextureCache::sharedTextureCache()->removeUnusedTextures();
86.//#if (CC_TARGET_PLATFORM == CC_PLATFORM_IOS)
87.// exit(0);
88.//#endif
89.}
这样主画面就做好了，下面进入关卡选择画面的制作，关卡选择画面的制作要比想像中的复杂，首先我们要建立一个场景类
ScrollViewScene.h 和 ScrollViewScene.cpp
ScrollViewScene.h
01.//
02.// ScrollViewScene.h
03.// ScrollView
04.//
05.// Created by Tom on 12-6-4.
06.// Copyright (c) 2012年 __MyCompanyName__. All rights reserved.
07.//
08.
09.#ifndef ScrollView_ScrollViewScene_h
10.#define ScrollView_ScrollViewScene_h
11.
12.#include "cocos2d.h"
13.
14.USING_NS_CC;
15.
16.class ScrollViewScene: public Scene
17.{
18.
19.public:
20.ScrollViewScene();
21.virtual bool init();
22.CREATE_FUNC(ScrollViewScene);
23.
24.void menuCloseCallback(Object* pSender);
25.
26.static ScrollViewScene *sharedSC();
27.};
28.
29.#endif
ScrollViewScene.cpp
001.//
002.// ScrollViewScene.cpp
003.// ScrollView
004.//
005.// Created by Tom on 12-6-4.
006.// Copyright (c) 2012年 __MyCompanyName__. All rights reserved.
007.//
008.
009.#include "ScrollViewScene.h"
010.#include "ScrollView.h"
011.#include "ScorllMainLayer01.h"
012.#include "ScorllMainLayer02.h"
013.#include "ScorllMainLayer03.h"
014.#include "ScorllMainLayer04.h"
015.#include "ScorllMainLayer05.h"
016.#include "ScorllMainLayer06.h"
017.#include "ScorllMainLayer07.h"
018.#include "HelloWorldScene.h"
019.
020.//using namespace CocosDenshion;
021.//声明静态变量
022.static ScrollView *scrollView;
023.
024.static ScrollViewScene *sc;
025.
026.ScrollViewScene *ScrollViewScene::sharedSC(){
027.if(sc != NULL){
028.return sc;
029.}
030.return NULL;
031.}
032.
033.ScrollViewScene::ScrollViewScene()
034.{
035.
036.}
037.
038.
039.bool ScrollViewScene::init()
040.{
041.sc = this;
042.
043.bool bRet = false;
044.
045.do {
046.CC_BREAK_IF(!CCScene::init());
047.scrollView = ScrollView::create();
048.
049.for (int i=0; i<7; ++i) {
050.if (0==i) {
051.ScorllMainLayer01 *layer = ScorllMainLayer01::create();
052.layer->setTag(i);
053.scrollView->addPage(layer);
054.}else if(1==i){
055.ScorllMainLayer02 *layer = ScorllMainLayer02::create();
056.layer->setTag(i);
057.scrollView->addPage(layer);
058.}else if(2==i){
059.ScorllMainLayer03 *layer = ScorllMainLayer03::create();
060.layer->setTag(i);
061.scrollView->addPage(layer);
062.}else if(3==i){
063.ScorllMainLayer04 *layer = ScorllMainLayer04::create();
064.layer->setTag(i);
065.scrollView->addPage(layer);
066.}else if(4==i){
067.ScorllMainLayer05 *layer = ScorllMainLayer05::create();
068.layer->setTag(i);
069.scrollView->addPage(layer);
070.}else if(5==i){
071.ScorllMainLayer06 *layer = ScorllMainLayer06::create();
072.layer->setTag(i);
073.scrollView->addPage(layer);
074.}else if(6==i){
075.ScorllMainLayer07 *layer = ScorllMainLayer07::create();
076.layer->setTag(i);
077.scrollView->addPage(layer);
078.}
079.
080.}
081.
082.Size size = CCDirector::getInstance()->getWinSize();
083.//初始化信息
084.SpriteFrameCache *cache = SpriteFrameCache::getInstance();
085.cache->addSpriteFramesWithFile("level_scene.plist");
086.
087.Sprite* spritebg =Sprite::createWithSpriteFrameName("list-bg.png");
088.spritebg->setPosition(Point(size.width*0.5+100,size.height*0.5));
089.addChild(spritebg);
090.
091.//下面的星星
092.Sprite* sprite1 =Sprite::createWithSpriteFrameName("dots-1.png");
093.sprite1->setPosition(Point(size.width*0.5-150,size.height*0.5-200));
094.addChild(sprite1);
095.Sprite* sprite2 =Sprite::createWithSpriteFrameName("dots-1.png");
096.sprite2->setPosition(Point(size.width*0.5-100,size.height*0.5-200));
097.addChild(sprite2);
098.Sprite* sprite3 =Sprite::createWithSpriteFrameName("dots-1.png");
099.sprite3->setPosition(Point(size.width*0.5-50,size.height*0.5-200));
100.addChild(sprite3);
101.Sprite* sprite4 =Sprite::createWithSpriteFrameName("dots-1.png");
102.sprite4->setPosition(Point(size.width*0.5,size.height*0.5-200));
103.addChild(sprite4);
104.Sprite* sprite5 =Sprite::createWithSpriteFrameName("dots-1.png");
105.sprite5->setPosition(Point(size.width*0.5+50,size.height*0.5-200));
106.addChild(sprite5);
107.Sprite* sprite6 =Sprite::createWithSpriteFrameName("dots-1.png");
108.sprite6->setPosition(Point(size.width*0.5+100,size.height*0.5-200));
109.addChild(sprite6);
110.Sprite* sprite7 =Sprite::createWithSpriteFrameName("dots-1.png");
111.sprite7->setPosition(Point(size.width*0.5+150,size.height*0.5-200));
112.addChild(sprite7);
113.
114.Sprite* sprite =Sprite::createWithSpriteFrameName("dots-2.png");
115.sprite->setPosition(Point(size.width*0.5-150,size.height*0.5-200));
116.sprite->setTag(888);
117.addChild(sprite);
118.
119.
120.MenuItemImage *closeItem = MenuItemImage::create();
121.closeItem->setNormalSpriteFrame(cache->spriteFrameByName("back-1.png"));
122.closeItem->setSelectedSpriteFrame(cache->spriteFrameByName("back-2.png"));
123.closeItem->initWithTarget(this, menu_selector(ScrollViewScene::menuCloseCallback));
124.closeItem->setPosition(Point(80,80));
125.
126.auto menu = Menu::create(closeItem, NULL);
127.menu->setPosition(Point::ZERO);
128.this->addChild(menu, 1);
129.
130.this->addChild(scrollView);
131.bRet = true;
132.} while (0);
133.
134.return bRet;
135.}
136.
137.void ScrollViewScene::menuCloseCallback(Object* pSender){
138.CCDirector::getInstance()->replaceScene(CCTransitionFade::create(0.5, HelloWorld::createScene()));
139.}
建立完成场景类之后，我们要建立我们的场景工具类，这个类可以帮助我们实现左右滑动的效果，这是一个非常用的工具类哦，非常值得大家的学习哦。
ScrollVIew.h 和 ScrollView.cpp
ScrollVIew.h
01.//
02.// ScrollView.h
03.// ScrollView
04.//
05.// Created by 帅 印 on 13-8-26.
06.// Copyright (c) 2012年 shuaiyinoo. All rights reserved.
07.//
08.
09.#ifndef ScrollView_ScrollView_h
10.#define ScrollView_ScrollView_h
11.
12.#include "cocos2d.h"
13.
14.USING_NS_CC;
15.
16.// 屏幕尺寸
17.const float WINDOW_WIDTH = 1136.0f;
18.const float WINDOW_HEIGHT = 640.0f;
19.
20.// 触摸误差
21.const int TOUCH_DELTA = 20;
22.
23.class ScrollView: public Layer
24.{
25.private:
26.// 按下点
27.Point m_TouchDownPoint;
28.// 抬起点 配合使用判断是否为点击事件
29.Point m_TouchUpPoint;
30.// 当前触摸点
31.Point m_TouchCurPoint;
32.
33.private:
34.// 总页数
35.int m_Page;
36.// 当前显示页
37.int m_CurPage;
38.
39.private:
40.// 存储所有页层
41.Array *m_PageLayer;
42.
43.private:
44.// 跳转页
45.void goToPage();
46.
47.public:
48.ScrollView();
49.~ScrollView();
50.
51.virtual bool init();
52.
53.CREATE_FUNC(ScrollView);
54.
55.public:
56.// 初始化相关
57.//virtual void onEnter();
58.//virtual void onExit();
59.
60.// 触摸事件相关
61.bool onTouchBegan(Touch *pTouch, Event *pEvent);
62.void onTouchMoved(Touch *pTouch, Event *pEvent);
63.void onTouchEnded(Touch *pTouch, Event *pEvent);
64.void onTouchCancelled(Touch *pTouch, Event *pEvent);
65.
66.public:
67.// 添加页
68.void addPage(Layer *pPageLayer);
69.//公开方法跳转页面
70.void gotoUserChoosePage(int _isToOrBack);
71.
72.};
73.
74.#endif
ScrollView.cpp
001.//
002.// ScrollView.cpp
003.// ScrollView
004.//
005.// Created by 帅 印 on 13-8-26.
006.// Copyright (c) 2012年 shuaiyinoo. All rights reserved.
007.//
008.
009.#include "ScrollView.h"
010.#include "ScrollViewScene.h"
011.
012.ScrollView::ScrollView()
013.{
014.m_Page = 0;
015.m_CurPage = 0;
016.m_PageLayer = CCArray::createWithCapacity(5);
017.m_PageLayer->retain();
018.
019.init();
020.}
021.ScrollView::~ScrollView()
022.{
023.m_PageLayer->removeAllObjects();
024.m_PageLayer->release();
025.}
026.
027.bool ScrollView::init()
028.{
029.bool bRet = false;
030.
031.do {
032.CC_BREAK_IF(!CCLayer::init());
033.
034.bRet = true;
035.} while (0);
036.
037.setTouchEnabled(true);
038.//设置为单点响应
039.setTouchMode(Touch::DispatchMode::ONE_BY_ONE);
040.
041.auto myListener = EventListenerTouchOneByOne::create();
042.myListener->onTouchBegan = CC_CALLBACK_2(ScrollView::onTouchBegan, this);
043.myListener->onTouchMoved = CC_CALLBACK_2(ScrollView::onTouchMoved, this);
044.myListener->onTouchEnded = CC_CALLBACK_2(ScrollView::onTouchEnded, this);
045.myListener->onTouchCancelled = CC_CALLBACK_2(ScrollView::onTouchCancelled, this);
046.
047.
048.return bRet;
049.}
050.
051.//void ScrollView::onEnter()
052.//{
053.// CCLayer::onEnter();
054.// //CCDirector::sharedDirector()->getInstance()->addTargetedDelegate(this, 0, true);
055.//}
056.//
057.//void ScrollView::onExit()
058.//{
059.// //CCDirector::sharedDirector()->getTouchDispatcher()->removeDelegate(this);
060.// CCLayer::onExit();
061.//}
062.
063.void ScrollView::goToPage()
064.{
065.MoveTo *moveTo = MoveTo::create(0.2f, Point::Point(-m_CurPage * WINDOW_WIDTH, 0));
066.
067.this->runAction(moveTo);
068.}
069.
070.void ScrollView::addPage(cocos2d::Layer *pPageLayer)
071.{
072.if (pPageLayer) {
073.// 设置成一页大小
074.pPageLayer->setContentSize(Size::Size(WINDOW_WIDTH, WINDOW_HEIGHT));
075.pPageLayer->setPosition(Point(WINDOW_WIDTH * m_Page, 0));
076.this->addChild(pPageLayer);
077.// 添加到页
078.m_PageLayer->addObject(pPageLayer);
079.m_Page = m_PageLayer->count();
080.}
081.}
082.
083.//公开方法进行页面跳转
084.void ScrollView::gotoUserChoosePage(int _isToOrBack){
085.if (0 == _isToOrBack) {
086.//上一页
087.if (m_CurPage > 0) {
088.--m_CurPage;
089.}
090.}else if(1 == _isToOrBack){
091.//下一页
092.if (m_CurPage < (m_Page - 1)) {
093.++m_CurPage;
094.}
095.}
096.
097.// 执行跳转动画
098.goToPage();
099.}
100.
101.bool ScrollView::onTouchBegan(Touch *pTouch, Event *pEvent){
102.m_TouchDownPoint = CCDirector::getInstance()->convertToGL(pTouch->getLocationInView());
103.m_TouchCurPoint = m_TouchDownPoint;
104.
105.return true;
106.}
107.void ScrollView::onTouchMoved(Touch *pTouch, Event *pEvent){
108.// 移动
109.Point touchPoint = CCDirector::getInstance()->convertToGL(pTouch->getLocationInView());
110.Point posPoint = Point::Point(getPositionX() + touchPoint.x - m_TouchCurPoint.x, getPositionY());
111.setPosition(posPoint);
112.m_TouchCurPoint = touchPoint;
113.}
114.void ScrollView::onTouchEnded(Touch *pTouch, Event *pEvent){
115.m_TouchUpPoint = CCDirector::getInstance()->convertToGL(pTouch->getLocationInView());
116.// 计算按下和抬起的偏移量
117.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);
118.
119.if (offset < (TOUCH_DELTA * TOUCH_DELTA)) {
120.// 点击
121.// 向子Layer发送Click消息
122.//((CCLayer*) m_PageLayer->objectAtIndex(m_CurPage))->ccTouchBegan(pTouch, pEvent);
123.}
124.else {
125.// 滑动结束
126.int offset = getPositionX() - m_CurPage * (-WINDOW_WIDTH);
127.//if (offset > WINDOW_WIDTH / 2) {
128.if (offset > 50) {
129.// 上一页
130.if (m_CurPage > 0) {
131.--m_CurPage;
132.Sprite *sprite = (Sprite *)ScrollViewScene::sharedSC()->getChildByTag(888);
133.sprite->setPosition(Point(sprite->getPositionX()-50,sprite->getPositionY()));
134.}
135.}
136.//else if (offset < -WINDOW_WIDTH / 2) {
137.else if (offset < -50) {
138.// 下一页
139.if (m_CurPage < (m_Page - 1)) {
140.++m_CurPage;
141.Sprite *sprite = (Sprite *)ScrollViewScene::sharedSC()->getChildByTag(888);
142.sprite->setPosition(Point(sprite->getPositionX()+50,sprite->getPositionY()));
143.}
144.}
145.
146.// 执行跳转动画
147.goToPage();
148.}
149.}
150.void ScrollView::onTouchCancelled(Touch *pTouch, Event *pEvent){
151.
152.}
下面就是建立不同的场景这样就可以实现场景的切换和关卡的选择了，场景一共有7个我就只带大家创建一个哈
ScorllMainLayer01.h 和 ScorllMainLayer01.cpp
ScorllMainLayer01.h
01.//
02.// ScorllMainLayer01.h
03.// Holdtail
04.//
05.// Created by 帅 印 on 13-8-26.
06.//
07.//
08.
09.#ifndef __Holdtail__ScorllMainLayer01__
10.#define __Holdtail__ScorllMainLayer01__
11.
12.#include <iostream>
13.#include "cocos2d.h"
14.
15.USING_NS_CC;
16.
17.class ScorllMainLayer01: public Layer
18.{
19.public:
20.ScorllMainLayer01();
21.~ScorllMainLayer01();
22.
23.virtual bool init();
24.
25.CREATE_FUNC(ScorllMainLayer01);
26.
27.void menuCloseCallback01(Object* pSender);
28.void menuCloseCallback02(Object* pSender);
29.void menuCloseCallback03(Object* pSender);
30.void menuCloseCallback04(Object* pSender);
31.
32.};
33.
34.#endif /* defined(__Holdtail__ScorllMainLayer0101__) */
35.</iostream>
ScorllMainLayer01.cpp
01.//
02.// ScorllMainLayer01.cpp
03.// Holdtail
04.//
05.// Created by 帅 印 on 13-8-26.
06.//
07.//
08.
09.#include "ScorllMainLayer01.h"
10.#include "SimpleAudioEngine.h"
11.
12.using namespace CocosDenshion;
13.
14.ScorllMainLayer01::ScorllMainLayer01()
15.{
16.}
17.
18.ScorllMainLayer01::~ScorllMainLayer01()
19.{
20.}
21.
22.bool ScorllMainLayer01::init()
23.{
24.bool bRet = false;
25.
26.do {
27.Size size = CCDirector::getInstance()->getWinSize();
28.//初始化信息
29.SpriteFrameCache *cache = SpriteFrameCache::getInstance();
30.cache->addSpriteFramesWithFile("level_image.plist");
31.
32.MenuItemImage *closeItem01 = MenuItemImage::create();
33.closeItem01->setNormalSpriteFrame(cache->spriteFrameByName("shutdown-pc-cover.png"));
34.closeItem01->setSelectedSpriteFrame(cache->spriteFrameByName("shutdown-pc-cover.png"));
35.closeItem01->initWithTarget(this, menu_selector(ScorllMainLayer01::menuCloseCallback01));
36.closeItem01->setPosition(Point(size.width*0.5-150,size.height*0.5+200));
37.
38.MenuItemImage *closeItem02 = MenuItemImage::create();
39.closeItem02->setNormalSpriteFrame(cache->spriteFrameByName("clickon-the-100times-cover.png"));
40.closeItem02->setSelectedSpriteFrame(cache->spriteFrameByName("clickon-the-100times-cover.png"));
41.closeItem02->initWithTarget(this, menu_selector(ScorllMainLayer01::menuCloseCallback02));
42.closeItem02->setPosition(Point(size.width*0.5+150,size.height*0.5+200));
43.
44.MenuItemImage *closeItem03 = MenuItemImage::create();
45.closeItem03->setNormalSpriteFrame(cache->spriteFrameByName("through-the-bridge-cover.png"));
46.closeItem03->setSelectedSpriteFrame(cache->spriteFrameByName("through-the-bridge-cover.png"));
47.closeItem03->initWithTarget(this, menu_selector(ScorllMainLayer01::menuCloseCallback03));
48.closeItem03->setPosition(Point(size.width*0.5-150,size.height*0.5));
49.
50.MenuItemImage *closeItem04 = MenuItemImage::create();
51.closeItem04->setNormalSpriteFrame(cache->spriteFrameByName("click-me-cover.png"));
52.closeItem04->setSelectedSpriteFrame(cache->spriteFrameByName("click-me-cover.png"));
53.closeItem04->initWithTarget(this, menu_selector(ScorllMainLayer01::menuCloseCallback04));
54.closeItem04->setPosition(Point(size.width*0.5+150,size.height*0.5));
55.
56.auto menu = Menu::create(closeItem01,closeItem02,closeItem03,closeItem04, NULL);
57.menu->setPosition(Point::ZERO);
58.this->addChild(menu, 1);
59.
60.
61.bRet = true;
62.} while (0);
63.
64.return bRet;
65.}
66.
67.void ScorllMainLayer01::menuCloseCallback01(Object* pSender){
68.log("SS");
69.}
70.void ScorllMainLayer01::menuCloseCallback02(Object* pSender){
71.
72.}
73.void ScorllMainLayer01::menuCloseCallback03(Object* pSender){
74.
75.}
76.void ScorllMainLayer01::menuCloseCallback04(Object* pSender){
77.
78.}
这样下来只要你自己再写6个这样的类，我们的游戏主画面跟场景就算是做好了，大家一起加油把。