【Cocos2dx】飘字特效与碰撞检测

飘字特效主要常见与游戏里面的掉血表示伤害输出等。碰撞检测常见于一些横版过关或者跑酷的手游,判断是否有碰到食物,或者什么障碍物等,都是比较常见的功能,下面就用一个小例子,来说明这两个特效如何完成。

如下图所示,有两个按钮,点击/触摸屏幕,则下方的按钮则会跳起来。碰到处于屏幕中央的按钮,则会弹出飘字特效,显示碰撞。

同时,左上角的时刻,这两个按钮是否碰撞,也就是是否交汇,相互接触,相交,intersection就是这个意思。

【Cocos2dx】飘字特效与碰撞检测_第1张图片

0、首先利用(cocos2d-x-2.2.6安装目录).\tools\project-creator下的create_project.py创建一个FlowWords的Cocos2dx工程,之后打开其中的proj.win32中的HelloCpp.sln利用vs2010进行编辑,先在AppDelegate.h关闭调试信息,设置窗口大小。这些简单的创建Cocos2dx工程步骤,我就不再赘述了。详情可以参考《【Cocos2dx】Windows平台下Cocos2dx 2.x的下载、安装、配置,打造自己的Helloworld》(点击打开链接)

1、之后新建一个飘字特效的类,包含FlowWord.h与FlowWord.cpp,工程的目录如下图所示:

【Cocos2dx】飘字特效与碰撞检测_第2张图片

飘字特效,本质其实就是一个标签文本CCLabelTTF的放大->移动->缩小的动作序列,没什么大不了,关于Cocos2dx的动作序列具体可以参考《【Cocos2dx】基本动作、动作序列与动作合并》(点击打开链接),FlowWord.h代码如下,主要用于一些函数的声明,showWord是暴露给其它类调用的方法,private是完成showWord中的一些必须的类成员变量与类成员函数,这里由于用到了CCLabelTTF,注意引入cocos2d.h的头文字,当然using namespace cocos2d;也就可以的,看上去没什么区别,当然建议使用#include "cocos2d.h",因为你不用在FlowWord.cpp再写一次using namespace cocos2d;了:

#ifndef _FlowWord_H_
#define _FlowWord_H_

#include "cocos2d.h"
USING_NS_CC;

class FlowWord : public CCNode {
public:
	void showWord(const char* text, CCPoint pos);//飘字方法,text为飘字的内容,pos为飘字的位置
private:
	CCLabelTTF* label;//类成员
	void flowEnd();//飘字结束时的回调(处理)函数,主要用于删除自己	
};

#endif
之后的FlowWord.cpp则按照如下的逻辑完成一个动作序列,完成飘字特效:
#include "FlowWord.h"

void FlowWord::showWord( const char* text, CCPoint position){//text为飘字的内容,pos为飘字的位置
	/*初始化*/
	label=CCLabelTTF::create(text,"Arial",18);//创建一个字体为Arial,字号为18,内容为text的CCLabelTTF,也就是标签文本
	label->setColor(ccc3(255, 255, 0));//设置其颜色为黄色
	label->setPosition(position);//设置其位置
	this->addChild(label);//在场景上添加这个标签文本
	/*三个动作,放大->移动->缩小*/	
	CCSize visibleSize = CCDirector::sharedDirector()->getVisibleSize();//获取屏幕的尺寸、位置信息等     
	CCFiniteTimeAction* action1=CCScaleTo::create(0.2f,3.0f,3.0f);//0.2s内在x、y上方向皆放大为原尺寸的3倍
	CCFiniteTimeAction* action2=CCMoveTo::create(0.3f,ccp(visibleSize.width/4,3*visibleSize.height/4));//在0.3s内,移动到坐标为(x=屏幕宽度的25%,y=屏幕高度的75%处)
	CCFiniteTimeAction* action3 = CCScaleTo::create(0.2f, 0.1f,0.1f);//之后在0.2s内在x、y上皆缩小为原尺寸的0.1倍
	CCCallFunc* callFunc = CCCallFunc::create(this, callfunc_selector(FlowWord::flowEnd));//声明一个回调(处理)函数,为FlowWord类中的flowEnd()
	CCFiniteTimeAction* action = CCSequence::create(action1,action2,action3,callFunc, NULL);//以上的所有动作组成动作序列action
	/*对label实行action这个动作*/
	label->runAction(action);
}

void FlowWord::flowEnd() {//动作结束,从父节点中删除自身
	label->setVisible(false);//先隐藏显示
	label->removeFromParentAndCleanup(true);//再删除
}
2、完成了飘字特效的构建,我们要在HelloWorld这个场景中,完成效果图的所有内容。实质是在《【Cocos2dx】精灵触摸跳跃功能》( 点击打开链接)这个工程进一步衍生,在里面多增多一个精灵,再增加一个类似《【Cocos2dx】连续滚动的场景》( 点击打开链接)中的即时更新事件完成碰撞检测的功能。

首先HelloWorldScene.h修改成如下的样子,删去原有的关闭程序的按钮的回调函数,添加一些我们需要的声明:

#ifndef __HELLOWORLD_SCENE_H__
#define __HELLOWORLD_SCENE_H__

#include "cocos2d.h"
using namespace cocos2d;//精灵等属于Cocos2dx东西,因此要在此文件的开始声明使用cocos2dx的命名空间,即使有#include "cocos2d.h"也要引用,不知道为什么

class HelloWorld : public cocos2d::CCLayer
{
public:
	// Here's a difference. Method 'init' in cocos2d-x returns bool, instead of returning 'id' in cocos2d-iphone
	virtual bool init();  

	// there's no 'id' in cpp, so we recommend returning the class instance pointer
	static cocos2d::CCScene* scene();

	// implement the "static node()" method manually
	CREATE_FUNC(HelloWorld);

	void ccTouchesBegan(CCSet *pTouches, CCEvent *pEvent);//触摸事件的函数声明  
	void jumpEnd();//声明跳跃结束的回调函数  
	virtual void update(float delta);//即时更新事件


private:
	CCLabelTTF *label;//文字1
	CCSprite* sprite1;//精灵1  
	bool isJumping;//精灵1,是否跳跃的flag 
	CCSprite* sprite2;//精灵2 
	bool isFlowing;//即时更新事件中,判断此时是否正在飘字的flag
};

#endif // __HELLOWORLD_SCENE_H__
最后是HelloWorldScene.cpp,也就是整个工程的核心了。

1、将原有的HelloWorldScene.cpp中的初始化函数bool HelloWorld::init(){}中的所有内容删去。我们要在里面声明一个位于左上角标签文本CCLabelTTF与2个按钮精灵。

2、在声明左上角标签文本CCLabelTTF的时候用到setAnchorPoint,这个设置中心点的函数,里面的参数的效果具体如下图所示,以下的按钮精灵的中心店都处于屏幕的中央,然而由于中心点的不同,导致,按钮精灵的位置最终不同。

【Cocos2dx】飘字特效与碰撞检测_第3张图片

3、碰撞检测之所以搞这么复杂,要根据中心点与精灵尺寸创建矩形,也是没有办法,这不是单纯的两只的中心点是否相交的问题,比如如下图,两飞机的中心点并没有相交,然而两飞机是相交、已经碰撞的。Cocos2dx自带矩形创建函数已经算给面子了,在原生的JavaScript中,《【JavaScript】黑点捉红点并躲绿点游戏》(点击打开链接)if里面N个无聊的、同质化的不等式写得我想打人。

【Cocos2dx】飘字特效与碰撞检测_第4张图片

4、飘字特效必须有个flag控制它,不然在下方的按钮精灵跳跃经过上方的按钮精灵的时候,会疯狂地飘字,极其占有资源,我们仅仅是让其飘一次!

5、其余在注释写明了,个人感觉基本都说明清楚了。

#include "HelloWorldScene.h"
#include "FlowWord.h" //飘字特效

USING_NS_CC;

CCScene* HelloWorld::scene()
{
	// 'scene' is an autorelease object
	CCScene *scene = CCScene::create();

	// 'layer' is an autorelease object
	HelloWorld *layer = HelloWorld::create();

	// add layer as a child to scene
	scene->addChild(layer);

	// return the scene
	return scene;
}

// on "init" you need to initialize your instance

/*初始化*/
bool HelloWorld::init()
{
	//获取屏幕的尺寸、位置信息等      
	CCSize visibleSize = CCDirector::sharedDirector()->getVisibleSize();    

	//声明这个场景是存在触摸事件的  
	this->setTouchEnabled(true);  

	//声明这个场景是存在即时更新事件的 
	this->scheduleUpdate();

	//声明一个表示是否碰撞的文字
	label = CCLabelTTF::create("Collision:false","arial",36);//声明文字内容
	label->setAnchorPoint(ccp(0,1));//设置label的中心点在左上角,默认是label->setAnchorPoint(ccp(0.5,0.5));中心点在精灵的中央,label->setAnchorPoint(ccp(1,0));中心点则去了右下角了
	label->setPosition(ccp(0,visibleSize.height));//把中心点摆在屏幕的左上交     
	this->addChild(label);//添加此文字到场景中
	isFlowing=false;

	//声明2只精灵

	//精灵1
	sprite1 = CCSprite::create("CloseSelected.png");    
	sprite1->setPosition(ccp(visibleSize.width / 2, visibleSize.height / 6));    
	this->addChild(sprite1);    
	//开始精灵处于未跳跃的状态,由于头文件中“只有静态常量整型数据成员才可以在类中初始化”,因此在这里初始化声明变量  
	isJumping=false; 

	//精灵2
	sprite2 = CCSprite::create("CloseNormal.png");    
	sprite2->setPosition(ccp(visibleSize.width / 2, visibleSize.height / 2));    
	this->addChild(sprite2);

	return true;
}

/*触摸导致精灵1跳跃*/

//开始触摸    
void HelloWorld::ccTouchesBegan(cocos2d::CCSet *pTouches, cocos2d::CCEvent *pEvent){    

	//获取屏幕的尺寸、位置信息等        
	CCSize visibleSize = CCDirector::sharedDirector()->getVisibleSize();      

	//如果主角还在跳跃中,则不重复执行  
	if(isJumping) {  
		return;  
	}

	//标记主角为跳跃状态  
	isJumping = true;  

	//在2.0秒内,先跳起 屏幕尺寸的2/3 再落下0px,该动作重复1次  
	CCJumpBy* jump = CCJumpBy::create(1.5f, ccp(0, 0),2* visibleSize.height / 3, 1);  

	//创建回调函数,声明跳跃结束后调用jumpEnd函数  
	CCCallFunc* callFunc = CCCallFunc::create(this, callfunc_selector(HelloWorld::jumpEnd));  

	//将回调函数与跳跃动作结合起来  
	CCActionInterval* jumpActions = CCSequence::create(jump, callFunc, NULL);  

	//执行动作  
	sprite1->runAction(jumpActions);
};

void HelloWorld::jumpEnd() {  
	isJumping = false;  
}

/*碰撞检测*/
//判断两只精灵是否相交的函数
bool is_collision(CCSprite* sprite1,CCSprite* sprite2){
	//建立精灵1的矩形
	CCSize sprite_size1=sprite1->getContentSize();//求精灵的尺寸
	CCPoint sprite_position1=sprite1->getPosition();//求精灵的中心点坐标
	CCRect sprite_rect1=CCRectMake(//以精灵的中心点为中心点、以精灵的尺寸为宽与高,建立一个矩形。
		sprite_position1.x-sprite_size1.width/2, 
		sprite_position1.y-sprite_size1.height/2, 
		sprite_size1.width, 
		sprite_size1.height);
	//建立精灵2的矩形,同理
	CCSize sprite_size2=sprite2->getContentSize();
	CCPoint sprite_position2=sprite2->getPosition();
	CCRect sprite_rect2=CCRectMake(
		sprite_position2.x-sprite_size2.width / 2, 
		sprite_position2.y-sprite_size2.height / 2, 
		sprite_size2.width, 
		sprite_size2.height);
	return sprite_rect1.intersectsRect(sprite_rect2);//如果是判断矩形与一个像素点则用Rect实例.containsPoint(像素点);这里是判断两个矩形是否相交
}

//即时更新事件,就是在程序一开始就不停地执行这个函数
void HelloWorld::update(float delta){//这里的函数名、参数都不能改,即时你没有用到。
	if(is_collision(sprite1,sprite2)){//判断精灵1是否碰到精灵2
		if(!isFlowing){//如果现在不是在飘字
			label->setString("Collision:true");//左上角的文字内容改变
			FlowWord* flowWord=new FlowWord();//初始化FlowWord
			this->addChild(flowWord);//将FlowWord飘字特效放上舞台,尽管飘字特效,一不是精灵,二在showWord中同样有将字体放上舞台的代码,然而没有这一句,HelloWorldScene这个场景根本不会与FlowWord联系起来,也就是FlowWord中添加的Label根本无法在HelloWorldScene中显示。
			flowWord->showWord("collision!",sprite2->getPosition());//执行飘字collision!,位置在不动的sprite2位置开始。
			isFlowing=true;//表示现在正在飘字
		}
	}
	else{
		label->setString("Collision:false");//精灵1没有碰到精灵2才允许继续飘字
		isFlowing=false;
	}
}  


当然,其实还可以写得更好一些,将精灵1与精灵1本身的触摸跳跃事件打包成一个事件,以致于不用在HelloWorldScene.cpp中写这么长的代码。至此,整个程序最终完成。

你可能感兴趣的:(cocos2dx,碰撞检测,触摸事件,飘字特效,即时更新事件)