【cocos2d-x-3.2】【高仿微信打飞机系列一】【开始界面 子弹生成 背景滑动 主飞机】

Cocos2d-x 前端之家
前端之家收集整理的这篇文章主要介绍了【cocos2d-x-3.2】【高仿微信打飞机系列一】【开始界面 子弹生成 背景滑动 主飞机】，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

看了cocos2d有一段时间了，简单的小游戏还是可以写出来。这个过程主要还是看，而很少动手去写，这样本身水平很难提高。就好比看完设计模式，现在依旧不会用，时间一久，也忘记的差不多了。俗话说，纸上得来终觉浅，绝知此事要躬行。因此，决定写一个高仿发飞机的小游戏，虽然简单，但还是要坚持写完。

这个系列主要还是基于我想到哪就写到哪，不定期更新。

1.开始界面

首先，我们得找到微信打飞机的图片资源，直接到下面链接下载就可以了：

http://download.csdn.net/detail/q100036q/7524993

解压后：


资源图片准备就绪，我们就可以开始编码工作了，依旧是看图写代码，一步一步搭建。

开始画面很简单，一张背景图片再加一个animation，便构成了开始界面。

代码如下：

  1. #ifndef _START_GAME_SCENE_H_
  2. #define _START_GAME_SCENE_H_
  3. #include "cocos2d.h"
  4. USING_NS_CC;
  5. class StartGameScene : public Layer
  6. {
  7. public:
  8.     static cocos2d::Scene* createScene();
  9. 	virtual bool init();
  10. 	CREATE_FUNC(StartGameScene);
  11. 	void loadingHandler();
  12. 	void loadingDone();
  13. };
  14. #endif
  15. #include "StartGameScene.h"
  16. #include "PlayGameScene.h"
  17. Scene* StartGameScene::createScene()
  18. {
  19.     // 'scene' is an autorelease object
  20.     auto scene = Scene::create();
  21.     
  22.     // 'layer' is an autorelease object
  23.     auto layer = StartGameScene::create();
  24.  
  25.     // add layer as a child to scene
  26.     scene->addChild(layer);
  27.  
  28.     // return the scene
  29.     return scene;
  30. }
  31.  
  32. // on "init" you need to initialize your instance
  33. bool StartGameScene::init()
  34. {
  35.     //////////////////////////////
  36.     // 1. super init first
  37.     if ( !Layer::init() )
  38.     {
  39.         return false;
  40.     }
  41.     Size visibleSize = Director::getInstance()->getVisibleSize();
  42.     Vec2 origin = Director::getInstance()->getVisibleOrigin();
  43.  
  44.     // add background image
  45.     auto sprite = Sprite::create("shoot_background/background.png");
  46.  
  47.     // position the sprite on the center of the screen
  48.     sprite->setPosition(Vec2(visibleSize.width/2 + origin.x,visibleSize.height/2 + origin.y));
  49.  
  50.     // add the sprite as a child to this layer
  51.     this->addChild(sprite,0);
  52.     //加载页面
  53. 	loadingHandler();
  54.  
  55.     return true;
  56. }
  57. //loading handler
  58. void StartGameScene::loadingHandler()
  59. {
  60. 	Size visibleSize = Director::getInstance()->getVisibleSize();
  61. 	//start:开始界面的animation
  62. 	auto loadingSp = Sprite::create();
  63. 	loadingSp->setPosition(Point(visibleSize.width / 2,visibleSize.height / 2));
  64. 	this->addChild(loadingSp,1);
  65. 	
  66. 	Vector<SpriteFrame*> framelist;
  67. 	for(int i = 1; i <=4; i++)
  68. 	{
  69. 		SpriteFrame* sf = SpriteFrame::create(String::createWithFormat("shoot_background/game_loading%d.png",i)->_string,Rect(0,186,38));
  70. 		framelist.pushBack(sf);
  71. 	}
  72. 	
  73. 	Animation* an = Animation::createWithSpriteFrames(framelist,0.5f);
  74. 	auto animate = Animate::create(an);
  75. 	auto repeat = Repeat::create(animate,3);//播放三次
  76. 	//回调函数
  77. 	auto callback = CallFunc::create(CC_CALLBACK_0(StartGameScene::loadingDone,this));
  78. 	auto sequence = Sequence::create(repeat,callback,NULL);
  79. 	loadingSp->runAction(sequence);
  80. 	//end:开始界面的animation
  81. }
  82. //开始界面播放完，直接进入游戏场景
  83. void StartGameScene::loadingDone()
  84. {
  85. 	Director::getInstance()->replaceScene(PlayGameScene::createScene());
  86. }

显示效果如下：


2.背景移动

进入游戏后，要让背景图片动起来，并且无缝衔接。实际上，用两张背景图片就可以达到这种效果。当第一张移出屏幕的时候，立即放置到最上面，衔接第二张，达到无缝衔接的效果。主要代码如下：

  1. 	//run the background 
  2. 	auto bg_1 = Sprite::create("shoot_background/background.png");
  3. 	bg_1->setAnchorPoint(Point(0,0 ));
  4. 	bg_1->setPosition(Point(0,0));
  5. 	bg_1->setTag(BG_1);
  6. 	this->addChild(bg_1,0);
  7.  
  8. 	auto bg_2 = Sprite::create("shoot_background/background.png");
  9. 	bg_2->setAnchorPoint(Point(0,0 ));
  10. 	bg_2->setPosition(Point(0,bg_1->getContentSize().height));
  11. 	bg_2->setTag(BG_2);
  12. 	this->addChild(bg_2,0);
  13. 	//run background image
  14. 	this->schedule(schedule_selector(PlayGameScene::runBackground),0.01f);
  15.  
  16. void PlayGameScene::runBackground(float dt)
  17. {
  18. 	auto visibleSize = Director::getInstance()->getVisibleSize();
  19.  
  20. 	auto bg_1 = this->getChildByTag(BG_1);
  21. 	auto bg_2 = this->getChildByTag(BG_2);
  22.  
  23. 	int bg_height = bg_1->getContentSize().height;
  24.  
  25. 	bg_1->setPositionY(bg_1->getPositionY() - bg_speed);
  26. 	bg_2->setPositionY(bg_2->getPositionY() - bg_speed);
  27. 	//bg2移出屏幕后衔接在bg1后面
  28. 	if(bg_2->getPositionY() <= 0)
  29. 	{
  30. 		bg_1->setPositionY(bg_2->getPositionY() + bg_height);
  31. 	}
  32. 	//bg1移出屏幕后衔接在bg2后面
  33. 	if(bg_1->getPositionY() <= 0)
  34. 	{
  35. 		bg_2->setPositionY(bg_1->getPositionY() + bg_height);
  36. 	}
  37. }
  38.  

3.加载主飞机

经过步骤2，背景也可以无缝移动了，把主飞机（hero_plane）放上去,并且注册他的触碰事件检测，也就是我们手指触碰主飞机的时候，飞机能够跟着我们手指移动而移动。这样的效果也很简单，在层中去注册touchevent事件处理。点击时如果是touch飞机，设置一个标志位，touchmove事件的时候，不断去更新飞机的位置，这样就可以达到效果了。
主要代码如下：

  1. 	//add plane hero 
  2. 	Sprite* hero = Sprite::create("hero1.png");
  3. 	PlaneHero* hero_plane = PlaneHero::create(hero);
  4. 	hero_plane->setPosition(Point(visibleSize.width / 2,visibleSize.height / 2));
  5. 	hero_plane->setTag(HERO_PLANE);
  6. 	hero_plane->setAnchorPoint(Point(0,0));
  7. 	this->addChild(hero_plane,1);
  8.  
  9. 	//touch event handler
  10. 	auto touchListener = EventListenerTouchOneByOne::create();
  11. 	touchListener->setSwallowTouches(true);
  12. 	touchListener->onTouchBegan = CC_CALLBACK_2(PlayGameScene::onTouchBegan,this);
  13. 	touchListener->onTouchMoved = CC_CALLBACK_2(PlayGameScene::onTouchMoved,this);
  14. 	touchListener->onTouchCancelled = CC_CALLBACK_2(PlayGameScene::onTouchEnded,this);
  15. 	_eventDispatcher->addEventListenerWithSceneGraPHPriority(touchListener,this);
  16.  
  17. //Touch event handler
  18. bool PlayGameScene::onTouchBegan(Touch *touch,Event* event)
  19. {
  20. 	Point touchPoint = touch->getLocation();
  21. 	bTouchPlane = false;
  22.  
  23. 	auto hero_plane = this->getChildByTag(HERO_PLANE);
  24. 	Point hero_pos = hero_plane->getPosition();
  25. 	Size hero_size = hero_plane->getContentSize();
  26.  
  27. 	log("hero_pos x = %f,y = %f",hero_pos.x,hero_pos.y);
  28. 	log("touchPoint x = %f,touchPoint.x,touchPoint.y);
  29. 	log("hero_size width = %f,height = %f",hero_size.width,hero_size.height);
  30.  
  31. 	if(touchPoint.x >= hero_pos.x && touchPoint.x <= (hero_pos.x + hero_size.width) && touchPoint.y >= hero_pos.y && touchPoint.y <= (touchPoint.y + hero_size.height))
  32. 	{
  33. 		//touch the plane,mark this flag for use
  34. 		bTouchPlane = true;
  35. 	}
  36.  
  37. 	return true;
  38. }
  39.  
  40. void PlayGameScene::onTouchMoved(Touch *touch,Event* event)
  41. {
  42. 	if(bTouchPlane == true)
  43. 	{
  44. 		//move the hero_pane with out touch on screen
  45. 		auto hero_plane = this->getChildByTag(HERO_PLANE);
  46.  
  47. 		Point pos = touch->getLocation();
  48.  
  49. 		hero_plane->setPosition(pos);
  50.  
  51. 	}
  52. }
  53. void PlayGameScene::onTouchEnded(Touch *touch,Event* event)
  54. {
  55. 	bTouchPlane = false;
  56. }

4.子弹管理器

首先，我们写一个基类，用来绑定一个精灵，所有的飞机，子弹都会继承他。

  1. #ifndef _ENTITY_H_
  2. #define _ENTITY_H_
  3. #include "cocos2d.h"
  4. USING_NS_CC;
  5. class Entity : public Node
  6. {
  7. public:
  8. 	Entity();
  9. 	~Entity();
  10.  
  11. 	void bindSprite(Sprite* sprite);
  12. 	Sprite* getSprite();
  13.  
  14. private:
  15. 	Sprite* m_sprite;
  16. };
  17. #endif
  18. #include "Entity.h"
  19.  
  20. Entity::Entity()
  21. {
  22. 	m_sprite = NULL;
  23. }
  24.  
  25. Entity::~Entity()
  26. {}
  27.  
  28. void Entity::bindSprite(Sprite* sprite)
  29. {
  30. 	if(this->m_sprite != NULL)
  31. 	{
  32. 		m_sprite->removeFromParentAndCleanup(true);
  33. 	}
  34. 	this->m_sprite = sprite;
  35. 	this->addChild(m_sprite);
  36. 	Size size = m_sprite->getContentSize();
  37. 	this->setContentSize(size);
  38. }
  39.  
  40. Sprite* Entity::getSprite()
  41. {
  42. 	return this->m_sprite;
  43. }
接着，写一个子弹的基类，继承自Entity,他包含子弹的共有属性。不同的子弹类型都会继承自这个子弹基类。方便扩展。 
  1. #ifndef _BULLETBASE_BASE_H_
  2. #define _BULLETBASE_BASE_H_
  3. #include "Entity.h"
  4.  
  5. #define SPEED_DEFAULT 10
  6. #define SPEED_NORMAL 5
  7.  
  8. class BulletBase : public Entity
  9. {
  10. public:
  11. 	BulletBase();
  12. 	~BulletBase();
  13. 	//子弹是否在使用中
  14. 	void setUsed(bool isUsed);
  15. 	bool isUsed();
  16. 	
  17. 	bool isArrive();
  18. 	//设置子弹速度
  19. 	void setSpeed(int speed);
  20. 	int getSpeed();
  21.  
  22. 	//是否飞出屏幕
  23. 	bool isMoveOutScreen();
  24. 	void setIsMoveOutScreen(bool outScreen);
  25.  
  26. 	//是否加进层里面
  27. 	//bool isAddInLayer();
  28. 	//void setIsAddInLayer(bool inLayer);
  29. protected:
  30. 	bool m_isArrive;
  31. 	int  m_speed;
  32.  
  33. private:
  34. 	bool m_isUsed;
  35. 	bool m_isOutScreen;
  36. 	//bool m_isAddInLayer;
  37. };
  38. #endif
  39. #include "BulletBase.h"
  40.  
  41. BulletBase::BulletBase()
  42. {
  43. 	m_isUsed = false;
  44. 	m_isArrive = false;
  45. 	m_speed = SPEED_NORMAL;
  46. 	m_isOutScreen = false;
  47. 	//m_isAddInLayer = false;
  48. }
  49.  
  50. BulletBase::~BulletBase()
  51. {
  52. }
  53.  
  54. void BulletBase::setUsed(bool isUsed)
  55. {
  56. 	this->m_isUsed = isUsed;
  57. }
  58. bool BulletBase::isUsed()
  59. {
  60. 	return this->m_isUsed;
  61. }
  62. 	
  63. bool BulletBase::isArrive()
  64. {
  65. 	return this->m_isArrive;
  66. }
  67. //设置子弹速度
  68. void BulletBase::setSpeed(int speed)
  69. {
  70. 	this->m_speed = speed;
  71. }
  72. int BulletBase::getSpeed()
  73. {
  74. 	return this->m_speed;
  75. }
  76. //是否已经飞出屏幕
  77. bool BulletBase::isMoveOutScreen()
  78. {
  79. 	return this->m_isOutScreen;
  80. }
  81.  
  82. void BulletBase::setIsMoveOutScreen(bool outScreen)
  83. {
  84. 	this->m_isOutScreen = outScreen;
  85. }
  86. #if 0
  87. //是否加进层里面
  88. bool BulletBase::isAddInLayer()
  89. {
  90. 	return this->m_isAddInLayer;
  91. }
  92.  
  93. void BulletBase::setIsAddInLayer(bool inLayer)
  94. {
  95. 	this->m_isAddInLayer = inLayer;
  96. }
  97. #endif
紧接着，写一个普通类型的子弹，在这里其实主要是写入子弹的速度。不同类型的子弹拥有不同的属性值，我们先简单的设置子弹的速度就可以。以后需要扩展直接对这个类进行。 
  1. #ifndef _BULLET_NORMAL_H_
  2. #define _BULLET_NORMAL_H_
  3.  
  4. #include "BulletBase.h"
  5. class BulletNormal : public BulletBase
  6. {
  7. public:
  8. 	BulletNormal();
  9. 	~BulletNormal();
  10. 	CREATE_FUNC(BulletNormal);
  11. 	virtual bool init();
  12. 	static BulletNormal* create(Sprite* sprite);
  13. 	bool init(Sprite* sprite);
  14. private:
  15. 	void moveEnd();
  16. };
  17. #endif
  1. #include "BulletNormal.h"
  2.  
  3. BulletNormal::BulletNormal()
  4. {
  5. 	m_speed = SPEED_NORMAL;
  6. }
  7.  
  8. BulletNormal::~BulletNormal()
  9. {}
  10.  
  11. bool BulletNormal::init()
  12. {
  13. 	return true;
  14. }
  15. BulletNormal* BulletNormal::create(Sprite* sprite)
  16. {
  17. 	BulletNormal* bNor = new BulletNormal();
  18. 	if(bNor && bNor->init(sprite))
  19. 	{
  20. 		bNor->autorelease();
  21. 	}
  22. 	else
  23. 	{
  24. 		CC_SAFE_DELETE(bNor);
  25. 	}
  26. 	return bNor;
  27. }
  28. bool BulletNormal::init(Sprite* sprite)
  29. {
  30. 	bool ret = false;
  31. 	bindSprite(sprite);
  32. 	ret = true;
  33. 	return ret;
  34. }
  35. void BulletNormal::moveEnd()
  36. {
  37. 	m_isArrive = true;
  38. }
最后，创建子弹管理器，生成子弹，保存到一个列表里面，需要的时候直接取出。同时，子弹的飞行也在管理器中做处理，不断检测子弹并且设置子弹的运行。 
  1. #ifndef _BULLET_MANAGER_H_
  2. #define _BULLET_MANAGER_H_
  3.  
  4. #include "cocos2d.h"
  5. USING_NS_CC;
  6.  
  7. #define BULLET_MAX_CACHE_NUM 20 //子弹缓存数量
  8.  
  9. class BulletBase;
  10. class BulletManager : public Node
  11. {
  12. public:
  13. 	BulletManager();
  14. 	~BulletManager();
  15.  
  16. 	static BulletManager* create();
  17.  
  18. 	bool init();
  19.  
  20. 	//获取未用的子弹
  21. 	BulletBase* getUnusedBullet();
  22.  
  23. private:
  24. 	Vector<BulletBase*> m_bulletList;//子弹列表,保存子弹
  25.  
  26. 	void createBullets();//创建缓存子弹
  27.  
  28. 	void bulletLogicCheck(float dt);//子弹逻辑
  29. };
  30. #endif
  31. #include "BulletManager.h"
  32. #include "BulletBase.h"
  33. #include "BulletNormal.h"
  34. BulletManager::BulletManager()
  35. {}
  36. BulletManager::~BulletManager()
  37. {}
  38.  
  39. BulletManager* BulletManager::create()
  40. {
  41. 	BulletManager* bulletMgr = new BulletManager();
  42. 	if(bulletMgr && bulletMgr->init())
  43. 	{
  44. 		bulletMgr->autorelease();
  45. 	}
  46. 	else
  47. 	{
  48. 		CC_SAFE_DELETE(bulletMgr);
  49. 	}
  50. 	return bulletMgr;
  51. }
  52.  
  53. bool BulletManager::init()
  54. {
  55. 	//创建子弹列表
  56. 	createBullets();
  57. 	log("m_bulletList size() = %d",m_bulletList.size());
  58. 	//循环检测子弹列表
  59. 	this->schedule(schedule_selector(BulletManager::bulletLogicCheck));
  60.  
  61. 	return true;
  62. }
  63.  
  64. //获取未用的子弹
  65. BulletBase* BulletManager::getUnusedBullet()
  66. {
  67. 	log("m_bulletList size() = %d",m_bulletList.size());
  68. 	for(int i = 0; i < m_bulletList.size(); i++)
  69. 	{
  70. 		BulletBase* bullet = m_bulletList.at(i);
  71. 		if(bullet->isUsed() == false)
  72. 		{
  73. 			bullet->setUsed(true);
  74. 			bullet->setIsMoveOutScreen(false);
  75. 			return bullet;
  76. 		}
  77. 	}
  78. #if 0 //i don't know why 
  79. 	for(auto bullet : m_bulletList)
  80. 	{
  81. 		if(bullet->isUsed() == false)
  82. 		{
  83. 			bullet->setUsed(true);
  84. 			bullet->setIsMoveOutScreen(false);
  85. 			return bullet;
  86. 		}
  87. 	}
  88. #endif
  89. 	log("no bullet unused");
  90. 	return NULL;
  91. }
  92. //创建子弹缓存
  93. void BulletManager::createBullets()
  94. {
  95. 	BulletBase* bullet = NULL;
  96. 	for(int i = 0; i < BULLET_MAX_CACHE_NUM; i++)
  97. 	{
  98. 		auto bullet_sprite = Sprite::create("bullet1.png");
  99. 		bullet = BulletNormal::create(bullet_sprite);
  100. 		bullet->setUsed(false);
  101. 		bullet->setIsMoveOutScreen(false);
  102. 		m_bulletList.pushBack(bullet);
  103. 		this->addChild(bullet);
  104. 	}
  105. 	log("m_bulletList size() = %d",m_bulletList.size());
  106. }
  107. //检测子弹
  108. void BulletManager::bulletLogicCheck(float dt)
  109. {
  110. 	auto visibleSize = Director::getInstance()->getVisibleSize();
  111.  
  112. 	for(auto bullet : m_bulletList)
  113. 	{
  114. 		if(bullet->isUsed() == true)
  115. 		{
  116. 			//子弹运行
  117. 			int posY = bullet->getPositionY();
  118. 			posY += SPEED_DEFAULT;
  119. 			bullet->setPositionY(posY);
  120.  
  121. 			//out of screen
  122. 			if(posY >= visibleSize.height)
  123. 			{
  124. 				bullet->setIsMoveOutScreen(true);
  125. 				bullet->setUsed(false);
  126. 			}
  127. 		}
  128. 	}
  129. }

以上全部写完，基本的画面就出来了，画面如下



好了 第一篇就先写到这里，后续会写第二篇。

猜你在找的Cocos2d-x相关文章

创建自定义的Cocos2d-x场景
操作步骤 1、创建cocos2d-x工程 2、新建 Scene1.cpp Scene1.h Scene1.h代码 #ifndef __SCE...
给vs2010安装上cocos2d-x的模版
开发环境：OS(WINDOWS 8.1 X64 企业版) cocos2d-x 2.2.1 vs2010 想给vs安装上cocos的模版，...
Python创建Cocos2d-x 2.2方法
把创建项目做成一个批处理，当创建项目时可以省时省力很多。 操作步骤 1、在 E:cocos2d-x-...
cocos2dx 物理碰撞
https://www.cnblogs.com/JiaoQing/p/3906780.html 四个响应函数 1 EventListenerPhysics...
cocos2d-js 自定义事件监听派发
转载于 http://www.cnblogs.com/kenkofox/p/3926797.html 熟悉js的dom事件或者flash事件的...
cocos常用 实用 公共函数 lua代码
公共资源加载，缓存retain；防止被自动销毁 2. 数字滚动递增；用于得奖后，总金币跳动增加...
cocos creator box2d
title Map 使用box2d var sfloors = this.tiledMap.getObjectGroup(‘Special_Floor‘).g...
（转）让quick-cocos2d-x支持加密的plist文件
前篇：quick-cocos2d-x图片资源加密 在前篇里面，我们实现了图片资源的加密，但还没有实现...
（转）quick-cocos2d-x图片资源加密(续)
摘要: 对在quick-cocos2d-x上实现的资源加密方法的补充 前篇： quick-cocos2d-x图片资源加...
Cocos Creator 动态改变sprite图片
首先将存放图片最外层文件夹命名为resources 　　 changeBj: function(){ 　　　　var url...
iOSAndroidSwiftHybridCocos2d-xFlutterXcodeSilverlightcocoaCordova
调试桥筛选栏假异步不会丢失AndPermissio权限申请抽屉式systemUI信号栏多行排列跨多行显示viewmode数据共享录制语音视频通话多行显示Studio3.5拉伸控件望远镜发动态走势图点赞控件显示牌冷启动v3签名v2签名v1签名本地html外接键盘流式标签