cocos2d-x 3.2 之 2048 —— 第一篇

***************************************转载请注明出处：http://blog.csdn.net/lttree******************************************

2048这款游戏，已经有一段时间了，之前一直想做一款。

但是，cocos2d-x 引擎 正在学习，并有别的事情忙，一直延到现在。

好吧，终于要做一下了~。~

这是第一篇，主要会说明一下：

——屏幕适配

——主界面 布局及设计

在前言 中，已经展示过我做的2048，

本次教程内容，将会显示，最基础的2048制作，

场景，按钮，神马的，自己按兴趣添加吧~

o,还有，我的环境是WIN7+VS2012+cocos2d-x 3.2

每篇文章最后，都会加载做到目前篇章的代码，

我也是写一点，发一篇的，

若有错误，敬请指出，O(∩_∩)O谢谢！

开始，Go！

第一步，屏幕适配

之前，在  屏幕适配 一文中 也有说明，

可以用320*480的，也可以用 480*800 的，

这里，显示方便，就用了320*480的，

AppDelegate.cpp中：

 if(!glview) {
        glview = GLView::create("My Game");
        director->setOpenGLView(glview);
		glview -> setFrameSize( 320 , 480 );
    }
	glview -> setDesignResolutionSize(320,480,ResolutionPolicy::EXACT_FIT);

恩，适配问题就大体这样了，

说一下，本游戏结构：

—— 三个游戏界面 类 （ 主界面，游戏界面，游戏结束界面 ）

—— 一个 宏定义 类 （ 主要放一些 游戏内容的 宏定义 ）

—— 一个数字块类  （ 就是 我们需要滑动的 数字 ）

没错，就只有这几个类~。~

是不是感觉思路略清晰了呢？

首先，搞一下主界面，

原带的HelloworldScene 直接移除了，

右击项目->添加-> 新建项，填写类名称，并选择存在Classes文件夹

添加MainScene.h 和 .cpp 两个文件，

然后在MainScene.h 中 添加内容：

#ifndef __test2048_MAINSCENE_H__
#define __test2048_MAINSCENE_H__

#include "cocos2d.h"
USING_NS_CC;

class MainScene : public Layer
{
public:
	// 创建场景
    static Scene* createScene();
    // 初始化函数
	bool init();  
    CREATE_FUNC(MainScene);
};

#endif 

然后在.cpp中，对.h定义的函数进行设置：

#include "MainScene.h"

USING_NS_CC;

// 创建场景
Scene* MainScene::createScene()
{
	auto scene = Scene::create();
	auto layer = MainScene::create();
	scene -> addChild( layer );
	return scene;
}

// 初始化函数
bool MainScene::init()
{
	// 父类初始化失败，则返回false
	if( !Layer::init() )
	{
		return false;
	}



	return true;
}

然后，要在这个场景中，添加一些相关内容，

比如： 游戏名称 ， 开始游戏按钮 ， 退出游戏按钮 

等下，在这些东西设置前，要先设置一些 游戏 相关宏定义，

比如，屏幕的宽高，

新建一个 GameDefine.h  ：

#ifndef __test2048_GameDefine_H__
#define __test2048_GameDefine_H__

#define Game_Screen_Width 320
#define Game_Screen_Height 480




#endif

这个类，就是存游戏一些宏定义，

后面还有，滑动的上下左右（枚举类型），

设置的几行几列 及  每行每列长度等等。

当然，不定义这个宏，屏幕的大小也可以通过函数来调用：

Size visibleSize = Director::getInstance()->getVisibleSize();

言归正传，要加一些按钮，可以是图片按钮，可以是文字按钮，

开始游戏用 文字按钮，

退出 用图片按钮吧。

添加游戏名称，我用的 是 网上找的字体文件（.ttf ）来创建的，

首先要  将ttf加载进来，然后用Label::createWithTTF来创建：

// 将ttf文件载入，并设置大小
	TTFConfig config("HelloKitty.ttf",60);
	//显示游戏名称
	auto labelGame=Label::createWithTTF( config , "2048" );
    labelGame->setPosition(Point(GAME_SCREEN_WIDTH/2,GAME_SCREEN_HEIGHT*2/3));
    this->addChild(labelGame);
    labelGame->setScale(1.5);

然后，加入退出按钮，这个就用原来自带的那个图片，放在右下角：

auto closeItem = MenuItemImage::create(
                                           "CloseNormal.png",
                                           "CloseSelected.png",
                                           CC_CALLBACK_1(MainScene::menuCloseCallback, this));
    
	closeItem->setPosition(Point( GAME_SCREEN_WIDTH - closeItem->getContentSize().width/2 , closeItem->getContentSize().height/2 ) );

    auto menu = Menu::create(closeItem, NULL);
    menu->setPosition(Vec2::ZERO);
    this->addChild(menu);

当然，要在.h文件加上，这个按钮的回调函数：

void menuCloseCallback( Ref* pSender );

然后，在.cpp中加上，这个函数的定义：

void MainScene::menuCloseCallback( Ref * pSender )
{
	Director::getInstance()->end();
}

PS：说一下，为什么设置这个位置，

我们要把  关闭 按钮放在右下角，整个屏幕  左下角是0,0点，

而且图片锚点是在0.5,0.5及中央位置，

getContentSize 是获取当前对象的大小，

酱紫就明白了吧？ ~

这样，可以运行看一下效果，

在运行之前，要在AppDelegate.cpp中加上MainScene.h ，并将运行场景换成MainScene：

// create a scene. it's an autorelease object
	auto scene = MainScene::createScene();

    // run
    director->runWithScene(scene);

效果 出来咯：

然后，要加上开始游戏的文字按钮了：

auto startItem = MenuItemFont::create(" Start ",CC_CALLBACK_1(MainScene::menuStartCallback,this));
	startItem -> setPosition( Point( GAME_SCREEN_WIDTH/2,GAME_SCREEN_HEIGHT/2));
	

	auto menu = Menu::create(closeItem,startItem, NULL);
    menu->setPosition(Vec2::ZERO);
    this->addChild(menu);

然后，按照之前方法，新建一个类，GameScene，

.h和.cpp仍是原来样子。

再加上start按钮的回调，

void MainScene::menuStartCallback( Ref * pSender )
{
	auto scene = GameScene::createScene();
	// 添加个动画
	Director::getInstance() -> replaceScene(TransitionFadeDown::create(0.5f,scene));
}

来，运行试一下吧：

下面有点空啊，可以随便加些什么，比如你的信息等等。

第一篇就先到这里，

第二篇主要讲述的就是游戏界面的格子绘制那些啦~

本篇代码下载：http://pan.baidu.com/s/1gdzPoFD

***************************************转载请注明出处：http://blog.csdn.net/lttree******************************************