首页 > 代码库 > cocos2d-x 3.2 之 2048 —— 第一篇
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://blog.csdn.net/lttree******************************************
cocos2d-x 3.2 之 2048 —— 第一篇