Cocos2D游戏之旅(一):贝塞尔曲线画心形---花瓣桃心

前端之家收集整理的这篇文章主要介绍了Cocos2D游戏之旅(一):贝塞尔曲线画心形---花瓣桃心前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

晓石头的博客

邮箱:178673693@qq.com

转载请注明出处,原文连接:http://www.jb51.cc/article/p-oyajubhs-vx.html



效果演示图

一、贝塞尔曲线生成工具

工欲善其事必先利其器,好的工具能让你如虎添翼。Cocos2D中画贝塞尔曲线,最大的难点就是定坐标:起点、控制点一、控制点二、终点。嘿嘿,有了这个工具你就会感觉到神马是面朝大海,春暖花开,一片祥和的景象。进主题,先上图:


啊,你说你木有这个工具,这个好说,工具和源代码都本文末尾。

1.1的左下角是贝塞尔曲线的四个点,对应到图中的

p0:起点

p1:控制点一

p2:控制点二

p3:终点

绿色的线即为绘制的贝塞尔曲线。(心形的一半有木有^_^

这样便得到了坐标点:

p0(280,145);

p1(191,2);

p2(11,189);

p3(271,307);

由于该工具的零点位置设置的是左上角,而我们的Cocos2D零点在左下角,故对Y坐标需要转换下。工具窗口的高为320,用320-YCocos2DY坐标。

转换后的坐标:

p0(280,320-145) -> p1(280,175)

p1(191,320-2) -> p2(191,318)

p2(11,320-189) -> p3(11,131)

p3(271,320-307) -> p4(271,13)

二、代码实现

//创建精灵,设置起始点p0
	CCSprite* sprFlower = CCSprite::create("a1.png");
	sprFlower->setPosition(Point(280,175));//320-145=175
	this->addChild(sprFlower,1,FLOWERTAG);

//配置贝塞尔曲线的p1、p2、p3,因为用BezierBy需要减去p0的坐标,换算成相对位置
//注BezierBy才有reverse(),BezierTo没有。
//其他动作(如MoveTo\MoveBy)同样也是By有reverse()而To没有。
	ccBezierConfig bezier;
	bezier.controlPoint_1 = Point(191 - 280,318-175); //320-2=318
	bezier.controlPoint_2 = Point(11 - 280,131-175);//320-189=131
	bezier.endPosition = Point(271 - 280,13-175);//320-307=13
	Action* bezierby = BezierBy::create(4.0f,bezier);

//执行动作
	sprFlower->runAction(bezierby);

//安装定时器,每0.1秒执行一次回调函数
	this->schedule(schedule_selector(HelloWorld::flowerUpdate),0.1f);

void HelloWorld::flowerUpdate(float dt)
{
//产生1-19的随机数
//获得执行贝塞尔曲线的精灵对象
	int i = 1;
	i = CCRANDOM_0_1() * 18 + 1;
	auto sprFlower = this->getChildByTag(FLOWERTAG);

//随机参数不同花瓣的精灵
	CCSprite* sprFlowerTmp = CCSprite::create("a"+Value(i).asString()+".png");

//将随机参数的花瓣精灵坐标设置为执行贝塞尔曲线精灵的当前坐标
	sprFlowerTmp->setPosition(sprFlower->getPosition());
	this->addChild(sprFlowerTmp);

//执行到贝塞尔曲线终点时取消定时器
	if ( sprFlower->getPositionX() == 271 && sprFlower->getPositionY() == 13)
	{
		this->unschedule(schedule_selector(HelloWorld::flowerUpdate));
	}
}


工具和源代码下载地址:http://download.csdn.net/detail/qiulanzhu/8953021

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