Cocos2d-x《雷电大战》(2)-精灵随手指移动，你点哪我走哪！

朱雀 2021-09-10 11:56 292阅读 0赞

[林炳文Evankaka][Evankaka]原创作品。转载请注明出处[http://blog.csdn.net/evankaka][Evankaka]

本文要实现飞机游戏中，人的手指按着飞机，就能拖着飞机走动，这里实现了当你手指按在手机的图片上，手指一直按着屏幕，飞机就会跟着你走。同时，还加入了边界判断条件，让飞机在你的视野内移动，实现的效果完全和我们手机上的飞机游戏一样。

效果：

![20150308202023346][]

**Cocos2d-x版本：3.4**

**工程环境：VS30213**

# 一、代码编写 #

1、头文件GameMain.h

/**
    *@作者 林炳文（邮箱：ling20081005@126.com）
    *@博客 http://blog.csdn.net/evankaka
    *@时间 2015.3.8
    *@功能 游戏的主界面
    */
    #ifndef __GameMain_H__
    #define __GameMain_H__
    #include "BackLayerDown.h"
    #include "BackLayerUp.h"
    #include "cocos2d.h"
    USING_NS_CC;
    class GameMain : public cocos2d::Layer
    {
    public:
        static cocos2d::Scene* createScene();
        virtual bool init();
    	
    	virtual bool onTouchBegan(cocos2d::Touch *touch, cocos2d::Event *unused_event);
    	virtual void onTouchMoved(cocos2d::Touch *touch, cocos2d::Event *unused_event);
    	virtual void onTouchEened(cocos2d::Touch *touch, cocos2d::Event *unused_event);
    	virtual void onTouchCancelled(cocos2d::Touch *touch, cocos2d::Event *unused_even);
       
        CREATE_FUNC(GameMain);
    private:
    	bool isHeroPlaneControl;//飞机是否被控制着
    	float mDeltaX;//英雄飞机随手指移动时的X偏移量
    	float mDeltaY;//英雄飞机随手指移动时的Y偏移量
    	Sprite *mHeroPlane;//英雄飞机
    };
    
    #endif // __GameMain_H__

然后在GameMain.cpp中增加：

#include "GameMain.h"
    USING_NS_CC;
    Scene* GameMain::createScene()
    {
        auto scene = Scene::create();
        auto layer = GameMain::create();
        scene->addChild(layer);
        return scene;
    }
    
    bool GameMain::init()
    {
    	Size visibleSize = Director::getInstance()->getVisibleSize();
    	Point origin = Director::getInstance()->getVisibleOrigin();
    	//这是地面图层
    	this->addChild(BackLayerUp::create());
    	//这是白云图层
    	this->addChild(BackLayerDown::create());
    
    	//加个飞机
    	mHeroPlane = Sprite::create("air1.png");
    	mHeroPlane->setPosition(Vec2(visibleSize.width / 2, visibleSize.height / 5));
    	this->addChild(mHeroPlane, 1, 100);
    	isHeroPlaneControl = false;
    
    	//打开触摸，增加触摸监听事件
    	this->setTouchEnabled(true);
    	auto listen = EventListenerTouchOneByOne::create();
    	listen->onTouchBegan = CC_CALLBACK_2( GameMain::onTouchBegan,this);
    	listen->onTouchMoved = CC_CALLBACK_2(GameMain::onTouchMoved, this);
    	listen->onTouchEnded = CC_CALLBACK_2(GameMain::onTouchEened, this);
    	listen->onTouchCancelled = CC_CALLBACK_2(GameMain::onTouchCancelled, this);
    	listen->setSwallowTouches(false);//不截取触摸事件
    	Director::getInstance()->getEventDispatcher()->addEventListenerWithSceneGraphPriority(listen,this);
    
        return true;
    }
    bool  GameMain::onTouchBegan(cocos2d::Touch *touch, cocos2d::Event *unused_event){
    	
    	Point mHeroPos = mHeroPlane->getPosition();
    	Point mBeganPos = touch->getLocationInView();
    	mBeganPos = Director::getInstance()->convertToGL(mBeganPos);
    
    	//判断当前手指按下区域是否是英雄飞机的区域,并且计算飞机要移动时的偏移量
    	if (mBeganPos.x > mHeroPos.x - mHeroPlane->getContentSize().width / 2 && mBeganPos.x<mHeroPos.x + mHeroPlane->getContentSize().width / 2 &&
    		mBeganPos.y>mHeroPos.y - mHeroPlane->getContentSize().height / 2 && mBeganPos.y < mHeroPos.y + mHeroPlane->getContentSize().height / 2){
    		isHeroPlaneControl = true;
    		//計算偏移量
    		mDeltaX = mBeganPos.x - mHeroPos.x;
    		mDeltaY = mBeganPos.y - mHeroPos.y;
    
    	}
    
    	return true;
    }
    void  GameMain::onTouchMoved(cocos2d::Touch *touch, cocos2d::Event *unused_event){
    	if (isHeroPlaneControl){
    		Point mMovedPos = touch->getLocationInView();
    		mMovedPos = Director::getInstance()->convertToGL(mMovedPos);
    
    		Size visibleSize = Director::getInstance()->getVisibleSize();
    		Point origin = Director::getInstance()->getVisibleOrigin();
    		float x = mMovedPos.x - mDeltaX;//記得減去偏移量
    		float y = mMovedPos.y - mDeltaY;
    	
    		if (x <= mHeroPlane->getContentSize().width / 2 + origin.x)//x到达屏幕左边界
    			x = mHeroPlane->getContentSize().width / 2 + origin.x;
    		else if (x >= visibleSize.width - mHeroPlane->getContentSize().width / 2)//x到达屏幕右边界
    			x = visibleSize.width - mHeroPlane->getContentSize().width / 2;
    
    		if (y <= mHeroPlane->getContentSize().height / 2 + origin.y)//y到达屏幕下边界
    			y = mHeroPlane->getContentSize().height / 2 + origin.y;
    		else if (y >= visibleSize.height - mHeroPlane->getContentSize().height / 2)//x到达屏幕上边界
    			y = visibleSize.height - mHeroPlane->getContentSize().height/ 2;
    
    		//飞机跟随手指移动
    		mHeroPlane->setPosition(Vec2(x,y));
    	}
    }
    void  GameMain::onTouchEened(cocos2d::Touch *touch, cocos2d::Event *unused_event){
    	isHeroPlaneControl = false;
    }
    void  GameMain::onTouchCancelled(cocos2d::Touch *touch, cocos2d::Event *unused_even){
    	isHeroPlaneControl = false;
    }

这里再说一写主要函数：

头文件增加触摸事件：

virtual bool onTouchBegan(cocos2d::Touch *touch, cocos2d::Event *unused_event);
    	virtual void onTouchMoved(cocos2d::Touch *touch, cocos2d::Event *unused_event);
    	virtual void onTouchEened(cocos2d::Touch *touch, cocos2d::Event *unused_event);
    	virtual void onTouchCancelled(cocos2d::Touch *touch, cocos2d::Event *unused_even);

实现文件开启触摸事件监听：

//打开触摸，增加触摸监听事件
    	this->setTouchEnabled(true);
    	auto listen = EventListenerTouchOneByOne::create();
    	listen->onTouchBegan = CC_CALLBACK_2( GameMain::onTouchBegan,this);
    	listen->onTouchMoved = CC_CALLBACK_2(GameMain::onTouchMoved, this);
    	listen->onTouchEnded = CC_CALLBACK_2(GameMain::onTouchEened, this);
    	listen->onTouchCancelled = CC_CALLBACK_2(GameMain::onTouchCancelled, this);
    	listen->setSwallowTouches(false);//不截取触摸事件
    	Director::getInstance()->getEventDispatcher()->addEventListenerWithSceneGraphPriority(listen,this);

然后就是触摸事件 的处理了：

bool  GameMain::onTouchBegan(cocos2d::Touch *touch, cocos2d::Event *unused_event){
    	
    	Point mHeroPos = mHeroPlane->getPosition();
    	Point mBeganPos = touch->getLocationInView();
    	mBeganPos = Director::getInstance()->convertToGL(mBeganPos);
    
    	//判断当前手指按下区域是否是英雄飞机的区域,并且计算飞机要移动时的偏移量
    	if (mBeganPos.x > mHeroPos.x - mHeroPlane->getContentSize().width / 2 && mBeganPos.x<mHeroPos.x + mHeroPlane->getContentSize().width / 2 &&
    		mBeganPos.y>mHeroPos.y - mHeroPlane->getContentSize().height / 2 && mBeganPos.y < mHeroPos.y + mHeroPlane->getContentSize().height / 2){
    		isHeroPlaneControl = true;
    		//計算偏移量
    		mDeltaX = mBeganPos.x - mHeroPos.x;
    		mDeltaY = mBeganPos.y - mHeroPos.y;
    
    	}
    
    	return true;
    }
    void  GameMain::onTouchMoved(cocos2d::Touch *touch, cocos2d::Event *unused_event){
    	if (isHeroPlaneControl){
    		Point mMovedPos = touch->getLocationInView();
    		mMovedPos = Director::getInstance()->convertToGL(mMovedPos);
    
    		Size visibleSize = Director::getInstance()->getVisibleSize();
    		Point origin = Director::getInstance()->getVisibleOrigin();
    		float x = mMovedPos.x - mDeltaX;//記得減去偏移量
    		float y = mMovedPos.y - mDeltaY;
    	
    		if (x <= mHeroPlane->getContentSize().width / 2 + origin.x)//x到达屏幕左边界
    			x = mHeroPlane->getContentSize().width / 2 + origin.x;
    		else if (x >= visibleSize.width - mHeroPlane->getContentSize().width / 2)//x到达屏幕右边界
    			x = visibleSize.width - mHeroPlane->getContentSize().width / 2;
    
    		if (y <= mHeroPlane->getContentSize().height / 2 + origin.y)//y到达屏幕下边界
    			y = mHeroPlane->getContentSize().height / 2 + origin.y;
    		else if (y >= visibleSize.height - mHeroPlane->getContentSize().height / 2)//x到达屏幕上边界
    			y = visibleSize.height - mHeroPlane->getContentSize().height/ 2;
    
    		//飞机跟随手指移动
    		mHeroPlane->setPosition(Vec2(x,y));
    	}
    }
    void  GameMain::onTouchEened(cocos2d::Touch *touch, cocos2d::Event *unused_event){
    	isHeroPlaneControl = false;
    }
    void  GameMain::onTouchCancelled(cocos2d::Touch *touch, cocos2d::Event *unused_even){
    	isHeroPlaneControl = false;
    }

方法很简单，代码量也很少，有需要的把上面的自己拿过去，把图片改改，把类名改改就可以了。

其实这里应该把英雄和移动事件单独写一个类，然后在GameMain里头来调用，因为英雄这个类我还构思好，所以先这样写，后头会把英雄飞机单独提取出来成为一个类，就不会在GameMain里头写这么多了；

效果：

![20150308202118538][]

![20150308201947856][]\\

效果很好，飞机能跟随移动并且不会跑出屏幕范围

# 二、思路说明 #

1、首先在onTouchBegan判断触摸点是否在英雄飞机的图片矩形内，若在这个范围内，刚将布尔型的mHeroPlaneControl设置为true,并且计算触摸点的横纵坐标与英雄飞机的锚点坐标的差值。

2、因为要让英雄飞机移动，要修改锚点位置，必须知道锚点位置与触摸位置的偏移量，之后才可以通过这个偏移量设置主角的位置。

3、判断英雄飞机是否跑出屏幕范围了，如果是，就将它设置在边界处，详看上面的两个if判断。

4、在onTouchMoved中，若mHeroPlaneControl为true，说明可以移动英雄飞机。

[林炳文Evankaka][Evankaka]原创作品。转载请注明出处[http://blog.csdn.net/evankaka][Evankaka]

若你觉得此文对你有用，那就帮我顶一下～～谢谢啦！

[Evankaka]: http://blog.csdn.net/evankaka
[20150308202023346]: /images/20210811/2b6c40bcecc04942a461e7ad07125ad2.png
[20150308202118538]: /images/20210811/9e3b5447f4af4c5ba03b8f3ef59a5779.png
[20150308201947856]: /images/20210811/539b94f60d6841d785526527de43496f.png