【2048强势来袭 cocos2d-x版本】第一期:搭建上下左右手势识别的框架

2048有多火,这个就不要我多废话啦,嘿嘿。之前看到论坛里有大牛发布了2048的cocos2d-js版本。那么现在,本菜鸟就来试水一下cocos2d-x版本。欢迎拍砖。

本游戏使用的是cocos2d-x 3.0alpha1版本。
本篇文章将来讲解2048游戏中的手势识别:上下左右。

  1. 创建“TZFE”项目(2048数字英文单词的开头)
    (1)在cocos2d-x 3.0alpha1版本中,创建一个“TZFE”项目,如果不懂的话,请参考这篇文章:http://blog.csdn.net/legendof1991/article/details/22778173
    (2)删除项目中不必要的代码,为后续开发做准备,使代码如下:
    HelloWorldScene.h
#ifndef __HELLOWORLD_SCENE_H__
#define __HELLOWORLD_SCENE_H__
#include "cocos2d.h"
class HelloWorld : public cocos2d::Layer{
public:    
static cocos2d::Scene* createScene();
virtual bool init();  
CREATE_FUNC(HelloWorld);
};
#endif // __HELLOWORLD_SCENE_H__
```

HelloWorldScene.cpp
#include "HelloWorldScene.h"
USING_NS_CC;
Scene* HelloWorld::createScene()
{    
auto scene = Scene::create();          
auto layer = HelloWorld::create();
scene->addChild(layer);return scene;}
bool HelloWorld::init(){
    if ( !Layer::init() )   
 {        return false;    }     
//Size visibleSize = Director::getInstance()->getVisibleSize(); 
//Point origin = Director::getInstance()->getVisibleOrigin();
 return true;}
```


2. 在HelloWorldScene.h头文件中添加事件监听回调和滑向上下左右方法,当然别忘了添加成员函数
#ifndef __HELLOWORLD_SCENE_H__
#define __HELLOWORLD_SCENE_H__
#include "cocos2d.h"
class HelloWorld : public cocos2d::Layer
{
public:      
static cocos2d::Scene* createScene();
virtual bool init();  
CREATE_FUNC(HelloWorld);
 //在这里加入手势识别的事件检测 
//监听事件回调:触摸开始和触摸结束 
virtual bool onTouchBegan(cocos2d::Touch *touch, cocos2d::Event *unused_event); 
virtual void onTouchEnded(cocos2d::Touch *touch, cocos2d::Event *unused_event);
 //滑向上下左右的方法 
bool doUp(); bool doDown();bool doLeft(); bool doRight();
private:
 //点击元素
int firstX,firstY,endX,endY;};
#endif // __HELLOWORLD_SCENE_H__
```


3. 在HelloWorldScene.cpp中具体实现函数
(1)实现onTouchBegan()函数
//事件监听回调:触摸开始
bool HelloWorld::onTouchBegan(cocos2d::Touch *touch, cocos2d::Event *unused_event)
{
//获取触摸的X轴和Y轴 
Point touchPoint = touch->getLocation(); //获取OpenGL坐标(即cocos2d-x坐标,原点在左下角)
touch->getLocationInView(); 
firstX=touchPoint.x; 
firstY=touchPoint.y;
 return true;
}
```




(2)实现onTouchEnded()函数
//事件监听回调:触摸结束void HelloWorld::onTouchEnded(cocos2d::Touch *touch, cocos2d::Event *unused_event)
{ 
//获取X轴和Y轴的移动范围
 Point touchPoint=touch->getLocation(); //获取OpenGL坐标(即cocos2d-x坐标,原点在左下角)
endX=firstX - touchPoint.x; 
endY=firstY - touchPoint.y;
 //判断X轴和Y轴的移动距离,如果X轴的绝对值大,则向左右滑动,如果Y轴的绝对值大,则向上下滑动 
if(abs(endX) > abs(endY)) { //手势向左右
 //判断向左还是向右 
if(endX+5>0) 
{ //向左 doLeft(); } 
else { //向右 doRight(); } } 
else { //手势向上下 
//判断手势向上还是向下 
if(endY+5>0) { //向下 doDown(); } else { //向上 doUp(); }
 }}
```




(3)当然别忘了要实现上下左右滑动的函数
//滑向上下左右的方法bool HelloWorld::doUp(){ log("doUp"); return true;}
bool HelloWorld::doDown(){ log("doDown"); return true;}
bool HelloWorld::doLeft(){ log("doLeft"); return true;}
bool HelloWorld::doRight(){ log("doRight"); return true;}
```




4. 在init()函数中创建监听事件
 auto touchListener=EventListenerTouchOneByOne::create(); 
touchListener->onTouchBegan=CC_CALLBACK_2(HelloWorld::onTouchBegan,this); 
touchListener->onTouchEnded=CC_CALLBACK_2(HelloWorld::onTouchEnded,this);
 _eventDispatcher->addEventListenerWithSceneGraphPriority(touchListener,this);
```


5. 运行项目
(1)项目运行后,效果如下:
  



(2)在屏幕上面,上下左右滑动,可以看到输出效果:
  


不断更新中。  或者请猛戳 http://blog.csdn.net/legendof1991?viewmode=contents   感谢支持




第二期请猛击:http://www.cocoachina.com/bbs/read.php?tid=198346
http://www.cocoachina.com/bbs/read.php?tid=198346



第三期请猛击:http://www.cocoachina.com/bbs/read.php?tid=198377




第四期请猛戳:http://www.cocoachina.com/bbs/read.php?tid=198536
http://www.cocoachina.com/bbs/read.php?tid=198536

能不能吐槽一下这里的编辑器啊,貌似好难用啊:6:      :6:      :6:      为了让代码好看一点,我修改了好几次


最后要特别感谢一下帅印大神!

好东西,谢谢帖子

:2: :2: :2: 谢谢支持。。。编辑这东西,真心有点辛苦:7::7::7:

您的文章已被推荐到CocoaChina首页热门文章精选,感谢您的分享。:846:

图片资源找到了。。不用了
THX

恩,这个东西我昨天刚好用到,也是模拟这个游戏,正在做啊,到时候发上来共享!

要图片? :2: :2: :2: :2:

嗯???? :7: :7: :7: :7: :7:

感谢感谢 :14: :14: :14:

支持了~这个需求蛮常见的 能不能整合到cocos2d-x中去呢

哪个需求呢

为什么要+5呢

触摸移动的原因,这个可以依个人需要进行调整

:3::3::3:学习了

互相学习 :14: :14: :14: :14:

好东东哦:14::14:

mark下,厉害

学习学习……

关于触摸移动而 ”+5“ 楼主能详细给解释下不?是个什么原因呢