***************************************转载请注明出处:http://blog.csdn.net/lttree********************************************
废话:
放寒假了,放松了一下下....(有点多)
前几天 办了张健身卡,准备减肥了,健康重要啊,尤其是身为 程序猿。
话说,办完卡做的体测,20多岁的我,现在身体年龄竟然达到了40 !
然后,拿了一个韩版 三星 Galaxy S 刷汉化,用惯了一键刷机,这些东西,面对这个不能一键刷的,只能自己研究,最后还是刷出来了。。。
这里可以推荐下,用三星的朋友,可以多逛逛 力卓社区,挺不错的。
再来,回到本篇文章,当时 开心消消乐、糖果的消除游戏 很火,然后看万圣节快到了,就做了这个消除游戏。
具体可以看这个 -> 万圣大作战!
和上次的2048一样,想把做法写出来,共同学习进步,
就是时间拖的有点长。。。
正文:
1.准备工作
好吧,开始说正事吧
前期步骤,比如配置环境啊,什么的, 可以看这篇文章 -> cocos2d-x
3.0 WIN7+VS2012 安卓平台搭建
虽然是3.0的,都通用的,至少3.2没问题,3.3还没测
建立一个项目了,
第一步,调整下分辨率啥的~
在 AppDelegate.cpp 中的函数:
bool AppDelegate::applicationDidFinishLaunching() { // initialize director auto director = Director::getInstance(); auto glview = director->getOpenGLView(); if(!glview) { glview = GLView::create("My Game"); director->setOpenGLView(glview); glview -> setFrameSize(320,480); } glview->setDesignResolutionSize(480, 800, ResolutionPolicy::EXACT_FIT); // turn on display FPS director->setDisplayStats(true); // set FPS. the default value is 1.0/60 if you don't call this director->setAnimationInterval(1.0 / 60); // create a scene. it's an autorelease object auto scene = HelloWorld::createScene(); // run director->runWithScene(scene); return true; }
2.界面的制作
然后,制作开始界面啦~
新建一个类 WelcomeScene
WelcomeScene.h:
#ifndef __WELCOME_SCENE_H__ #define __WELCOME_SCENE_H__ #include "cocos2d.h" class WelcomeScene : public cocos2d::Layer { public: static cocos2d::Scene* createScene(); virtual bool init(); void menuStartCallback( Ref* pSender ); CREATE_FUNC(WelcomeScene); }; #endif // __WELCOME_SCENE_H__
噢,对了,这中间还有一件事情,
先建立一个 GameDefine.h
这个头文件,用来放一些关于游戏的宏定义,
这次用来放 画布的宽高,后面还用来放一些 其他定义。
#ifndef _Inkmoo_Elimination_h_ #define _Inkmoo_Elimination_h_ // 定义屏幕宽高,这与所做的图片有关 #define GAME_SCREEN_WIDTH 480 #define GAME_SCREEN_HEIGHT 800 #endif
现在,我们就可以在其他文件用这些放宏定义了
WelcomeScene.cpp:
#include "WelcomeScene.h" #include "GameDefine.h" USING_NS_CC; Scene* WelcomeScene::createScene() { auto scene = Scene::create(); auto layer = WelcomeScene::create(); scene->addChild(layer); return scene; } // 欢迎界面 初始化函数 bool WelcomeScene::init() { // 先初始化父类,不成功返回false if( !Layer::init() ) { return false; } // 添加背景图片 auto sprite = Sprite::create("scene_sta.png"); sprite->setPosition(Point(GAME_SCREEN_WIDTH/2,GAME_SCREEN_HEIGHT/2)); this->addChild(sprite); // 添加开始按钮 auto startItem = MenuItemImage::create( "btn_start01.png", "btn_start02.png", CC_CALLBACK_1(WelcomeScene::menuStartCallback, this)); startItem->setPosition(Vec2(GAME_SCREEN_WIDTH/2,GAME_SCREEN_HEIGHT/6)); auto menu = Menu::create(startItem, NULL); menu->setPosition(Vec2::ZERO); this -> addChild( menu ); return true; } void WelcomeScene::menuStartCallback( Ref* pSender ) { // 跳转到游戏界面 }
OK,开始界面做了,连带开始按钮都完成了,接下来就是 游戏界面啦:
GameScene.h:
#ifndef __GAME_SCENE_H__ #define __GAME_SCENE_H__ #include "cocos2d.h" class GameScene : public cocos2d::Layer { public: static cocos2d::Scene* createScene(); virtual bool init(); // 返回欢迎界面函数 void menuBackCallback( Ref* pSender ); CREATE_FUNC(GameScene); }; #endif // __GAME_SCENE_H__
然后就是,CPP文件:
#include "GameScene.h" #include "GameDefine.h" #include "WelcomeScene.h" USING_NS_CC; Scene* GameScene::createScene() { auto scene = Scene::create(); auto layer = GameScene::create(); scene->addChild(layer); return scene; } // 欢迎界面 初始化函数 bool GameScene::init() { // 先初始化父类,不成功返回false if( !Layer::init() ) { return false; } // 添加背景图片 auto sprite = Sprite::create("scene_bg.png"); sprite->setPosition(Point(GAME_SCREEN_WIDTH/2,GAME_SCREEN_HEIGHT/2)); this->addChild(sprite,-1); // 添加返回按钮 auto backItem = MenuItemImage::create( "btn_back01.png", "btn_back02.png", CC_CALLBACK_1(GameScene::menuBackCallback, this)); backItem->setPosition(Vec2(GAME_SCREEN_WIDTH-backItem->getContentSize().width/2,backItem->getContentSize().height/2)); auto menu = Menu::create(backItem, NULL); menu->setPosition(Vec2::ZERO); this -> addChild( menu ); return true; } // 返回函数,跳转到欢迎界面 void GameScene::menuBackCallback( Ref* pSender ) { auto scene = WelcomeScene::createScene(); CCDirector::sharedDirector()->replaceScene(scene); }
对了,不要忘了之前 欢迎界面的相应函数(开始按钮函数),也要修改咯:
void WelcomeScene::menuStartCallback( Ref* pSender ) { // 跳转到游戏界面 auto scene = GameScene::createScene(); CCDirector::sharedDirector()->replaceScene(scene); }
OK,现在我们可以运行一下,欢迎界面,点击 >开始< 进入游戏界面,
在游戏界面点击 >返回主菜单< 回到 欢迎界面!
3.精灵相关
前面这些都是准备工作,太稀了,一点都不干啊= =..
接下来,要做的就是添加相应的精灵了....
这些精灵的材料都存在一张png里,用TexturePacker压缩即可。(如果不会用的话,点这里)
三消游戏,主要就是精灵的创造-移动-消除
这些精灵在游戏界面的存储,类似于二维表格,向里面放精灵。
所以 精灵要有一个单独的类来管理,
SpriteShape.h:
#include "cocos2d.h" #include "GameDefine.h" USING_NS_CC; class SpriteShape : public Sprite { public: static SpriteShape* create( int row , int col ); CC_SYNTHESIZE(int, m_row, Row); CC_SYNTHESIZE(int, m_col, Col); CC_SYNTHESIZE(int, m_imgIndex, ImgIndex); };
关于 create函数,这个函数就是根据传进来的 行列值,在相应位置创建精灵。
下面的 CC_SYNTHESIZE ,就是相当于自动生成两个函数,
就以 CC_SYNTHESIZE(int,m_row,Row)来说,就是 定义一个int类型的保护型变量 m_row,
再定义一个 setRow函数 和 getRow函数,可以对m_row操作。
接下来就是 精灵类的CPP:
#include "SpriteShape.h" SpriteShape *SpriteShape::create(int row, int col) { SpriteShape *spr = new SpriteShape(); spr->m_row = row; spr->m_col = col; spr->m_imgIndex = rand() % TOTAL_SPRITE; spr->initWithSpriteFrameName(spriteNormal[spr->m_imgIndex]); spr->autorelease(); return spr; }
这个函数实现方法,就是先定位 这个精灵的位置,通过传参,然后再获取一个随机数,对应相应的图片,当然随机数范围要在种类数内。然后再根据随机数获取到图片。
?关于这些精灵种类数和精灵图片,都存在了GameDefine中了:
// GameDefine.h // 定义每个精灵大小与边框大小 #define SPRITE_WIDTH 48 #define BOADER_WIDTH 2 // 游戏精灵行数和列数 #define ROWS 8 #define COLS 8 // 精灵种类总数 #define TOTAL_SPRITE 6 // 普通的精灵 static const char *spriteNormal[TOTAL_SPRITE] = { "icon1.png", "icon2.png", "icon3.png", "icon4.png", "icon5.png", "icon6.png" };
好了,精灵类创建完了,要在游戏界面显示出来了,
之前有说过,游戏界面其实就是一个大二维表格,肯定先要创建这个表格,然后定义一个初始化地图函数,把表格都初始化,实现起来,也不是很难:
// GameScene.cpp // 初始化地图 void GameScene::initMap( ) { for( int r = 0 ; r < ROWS ; ++r ){ for( int c = 0 ; c < COLS ; ++c ){ createSprite(r,c); } } } // 创建精灵 void GameScene::createSprite( int row , int col ) { // 先创建一个寿司 SpriteShape* spr = SpriteShape::create(row, col); Point endPosition = positionOfItem(row, col); spr -> setPosition( endPosition ); // 加入到spriteSheet中,等待绘制 spriteSheet -> addChild(spr); // 数组相应位置,置上寿司对象 map[row][col] = spr; } // 根据行列,获取坐标值 Point GameScene::positionOfItem(int row , int col) { float x = mapLBX + (SPRITE_WIDTH + BOADER_WIDTH) * col + SPRITE_WIDTH / 2; float y = mapLBY + (SPRITE_WIDTH + BOADER_WIDTH) * row + SPRITE_WIDTH / 2; return Point(x, y); }
现在,运行一下,精灵就出现在游戏界面啦。
4.再额外加一点改进
现在实现出来的这个样子有些太平面了,稍微2.1D一下,
整个下落动作。
这个动作也很好做,就是在创建精灵的时候,放在原来位置上面的位置一些距离,然后通过一定速度进行下落到原来位置,就是加一个action。
// GameScene.cpp // 创建精灵 void GameScene::createSprite( int row , int col ) { // 先创建一个寿司 SpriteShape* spr = SpriteShape::create(row, col); // 创建下落动画 Point endPosition = positionOfItem(row, col); Point startPosition = Point(endPosition.x, endPosition.y + GAME_SCREEN_HEIGHT / 2); spr->setPosition(startPosition); float speed = startPosition.y / (1.5 * GAME_SCREEN_HEIGHT ); spr->runAction(MoveTo::create(speed, endPosition)); // 加入到spriteSheet中,等待绘制 spriteSheet -> addChild(spr); // 数组相应位置,置上寿司对象 map[row][col] = spr; }
Ok,现在可以运行下试一试啦~
本章代码:这里
***************************************转载请注明出处:http://blog.csdn.net/lttree********************************************