最近也不知道怎么了，总想用Cocos2d-X做一个比较好的东西，想想也是，学习Cocos2d-X快一个月了，也该做个东西练练手了，最近总用手机拍照，看照片，忽然想做一款与图片相关的小游戏，游戏非常简单打开后会显示一个界面，界面上有三个按钮(实际上是使用精灵创建的菜单项)

点击按钮后可以进入相关的场景中（例如点击校园后进入校园创建）

通过鼠标的拖拽可以查看校园场景的图片

如果再看其它创建的图片可以通过点击右下角返回程序主界面

工程文件结构

文件解析：

MenuScene.h/MenuScene.cpp：创建程序的主创建、创建菜单项

LayerBack.h/LayerBack.cpp：创建返回按钮，实现各个场景到主场景的切换

ParkScene.h/Park.cpp：创建公园场景

SchoolScene.h/SchoolScene.cpp：创建校园场景

ViewScene.h/ViewScene.cpp：创建风景区场景

程序中所用到的技术：

程序主界面显示的一张背景图和三个按钮

背景图片使用的是精灵

    //设置程序背景
    CCSprite* background = CCSprite::create("background.png");
    addChild(background);
    background->setPosition(center);

三个按钮使用了CCMenu 、CCMenuItemSprite、通过精灵创建菜单项，并且实现点击菜单项切换场景

    //创建一个菜单
    CCMenu* menu = CCMenu::create();
    addChild(menu);

    //设置菜单的坐标原点在窗口的左下角
     menu->setPosition(CCPointZero);


     //创建个按钮(用精灵创建菜单项，点击后进入公园)
    CCMenuItemSprite* Item1 = CCMenuItemSprite::create (
        CCSprite::create("Button_3.png"),CCSprite::create("Button_3.png"));
    menu->addChild(Item1);
    Item1->setPosition(ccp(center.x,center.y + 70));


    //创建个按钮(用精灵创建菜单项,点击后进入校园)
    CCMenuItemSprite* Item2 = CCMenuItemSprite::create (
        CCSprite::create("Button_1.png"),CCSprite::create("Button_1.png"));
    menu->addChild(Item2);
    Item2->setPosition(center);


     //创建个按钮(用精灵创建菜单项,点击后进入风景区)
    CCMenuItemSprite* Item3 = CCMenuItemSprite::create (
        CCSprite::create("Button_2.png"),CCSprite::create("Button_2.png"));
    menu->addChild(Item3);
    Item3->setPosition(ccp(center.x,center.y - 70));


   //设置响应函数:当触摸到item时调用Menu::menuHandler  
    //第一个参数：响应函数所在的对象  
    //第二个参数：成员函数指针  
    Item1->setTarget(this,menu_selector(MenuScene::menu));  
    Item2->setTarget(this,menu_selector(MenuScene::menu));  
    Item3->setTarget(this,menu_selector(MenuScene::menu));  
  
   //设置菜单项的ID
   Item1->setTag(1);
   Item2->setTag(2);
   Item3->setTag(3);
   

定义一个菜单响应函数，实现点击菜单项切换场景

void MenuScene::menu(CCObject* pSender)
{
    //将obj强制转换成菜单项类型  
    CCMenuItemSprite* item = (CCMenuItemSprite*)pSender;  
  
    //得到菜单项的ID  
    int tag = item->getTag();  

    //用于调用场景
    CCScene* scene = NULL;
  
    //判断用户点击了那个菜单  
    if(1 == tag)  
    {   
        scene = ParkScene::scene();  
    }  
    else if(2 == tag)  
    {  
          scene = SchoolScene::scene();  
    }
    else
    {
         scene = ViewScene::scene();  
    }
    
    if(scene)
    {
        CCDirector::sharedDirector()->pushScene(scene);
    }
}

返回的特殊处理，实现从各个场景返回程序主界面时，由于各个层中都需要一个返回按钮，如果在每个层中都通过代码创建返回按钮，会写许多重复的代码，为了解决这个问题，可以单独创建一个层，层中只有一个返回按钮，其它层可以初始化的时候使用只有一个按钮的层，就可以减少代码量

创建一个LayerBack类用于处理返回按钮

LayerBack.h中的代码

#ifndef __LayerBack_H__
#define __LayerBack_H__

#include "cocos2d.h"
#include "cocos-ext.h"
USING_NS_CC;
USING_NS_CC_EXT;

class LayerBack : public CCLayer
{
public:
	bool init();

	void back(CCObject*);
};

#endif

LayerBack.cpp中的代码

#include "LayerBack.h"

bool LayerBack::init()
{
    CCLayer::init();

    //得到窗口的尺寸
    CCSize winSize = CCDirector::sharedDirector()->getWinSize();

    CCMenu* menu = CCMenu::create();
    addChild(menu);

    CCMenuItem* backItem = CCMenuItemImage::create("CloseNormal.png","CloseSelected.png",this,menu_selector(LayerBack::back));

    menu->addChild(backItem);

    //设置菜单项的位置(将菜单项设置到右下角)
    backItem->setPosition(ccp(winSize.width / 2 - backItem->getContentSize().width / 2,backItem->getContentSize().height / 2 - winSize.height / 2));

    return true;
}

void LayerBack::back(CCObject*)
{
    //场景切换
    CCDirector::sharedDirector()->popScene();
}

然后将各个层初始化父类的代码改成下面的代码就可以实现场景的返回

 LayerBack::init();

图片滑动效果的实现

图片滑动效果是使用 CCScrollView实现的，为了说明 CCScrollView的用法，笔者决定举程序中风景区场景的代码

创建风景区创建，首先创建一个ViewScene类

ViewScene.h中的代码

#ifndef __ViewScene_H__
#define __ViewScene_H__

#include "LayerBack.h"

class ViewScene : public LayerBack
{
public:
    bool init();  

    static CCScene* scene();
    
    CREATE_FUNC(ViewScene);

    bool ccTouchBegan(CCTouch* touch,CCEvent* ev);
    void ccTouchEnded(CCTouch* touch,CCEvent* ev);
    
    CCNode*_contaner;
};

#endif

ViewScene.cpp中的代码

#include "ViewScene.h"

CCScene* ViewScene::scene()
{
    CCScene *scene = CCScene::create();
    
    ViewScene *layer = ViewScene::create();

    scene->addChild(layer);

    return scene;
}

//保存风景图片名
static const char* View[] = {
    "View_1.png","View_2.png","View_3.png","View_4.png","View_5.png",};

bool ViewScene::init()
{
    LayerBack::init();

    CCSize winSize = CCDirector::sharedDirector()->getWinSize();

    CCPoint center = ccp(winSize.width / 2,winSize.height / 2);
    
    //创建一个结点
    CCNode* c = CCNode::create();

    _contaner = c;

    //创建5个紧挨着的精灵
    for(int i = 0; i < 5; i++)
    {
        CCSprite* sprite = CCSprite::create(View[i]);
		c->addChild(sprite);
		
        //设置图片的位置，每两张图片相差一个屏幕的宽度
        sprite->setPosition(ccpAdd(center,ccp(i*winSize.width,0)));
    }

    //滚动视图
    //第一个参数：在窗口显示的视图大小
    //第二个参数：视图的实际大小
    CCScrollView* view = CCScrollView::create(winSize,c);
    addChild(view);

    //设置视图运动的方向为水平运动
    view->setDirection(kCCScrollViewDirectionHorizontal);

    //设置视图的宽度和高度
    view->setContentSize(CCSize(winSize.width * 5,winSize.height * 5));

    //取消ScrollView的弹性 
    view->setBounceable(false);

    //注册触摸事件
    setTouchEnabled(true);
    setTouchMode(kCCTouchesOneByOne);

    return true;
}

bool ViewScene::ccTouchBegan(CCTouch* touch,CCEvent* ev)
{
	return true;
}

void ViewScene::ccTouchEnded(CCTouch* touch,CCEvent* ev)
{
    //得到鼠标按下去的时候的坐标
	CCPoint ptClickDown = touch->getStartLocation();
	
    //得到鼠标松开时的坐标
    CCPoint ptUp = touch->getLocation();
	
    //当两个坐标的距离的平方小于25时(认为是点击，否则是滑动)
    if (ptUp.getDistanceSq(ptClickDown) > 25)
	{
		// 滑动
		int x = _contaner->getPositionX();
		
        if (x >= -1920 && x <= 0)
		{
			// adjust
			// 0,-480,-960,-1440,-1920
			int idx = (-x +240)/ 480;
			x = -idx * 480;

			CCMoveTo* moveTo = CCMoveTo::create(0.5f,ccp(x,this->_contaner->getPositionY()));
			
            this->_contaner->runAction(moveTo);
		}
	}
}

程序的主要的功能就分析到这里了

程序的下载地址：http://download.csdn.net/detail/u010105970/8061415

• 上一篇：如何在cocos2d-x中使用ECS(实体-组下一篇：Cocos2d-x 3.2 之 进度条 progress