Cocos2D游戏之旅（一）：贝塞尔曲线画心形---花瓣桃心

晓石头的博客

邮箱：[email protected]

转载请注明出处，原文连接：http://blog.csdn.net/qiulanzhu/article/details/47205609

效果演示图

一、贝塞尔曲线生成工具

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

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

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

p0：起点

p1：控制点一

p2：控制点二

p3：终点

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

 

这样便得到了坐标点：

p0(280,145);

p1(191,  2);

p2( 11,189);

p3(271,307);

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

转换后的坐标：

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