我有一个精灵(例如纸飞机),我想让它像下面的图片那样移动。
我可以使用大量的
MoveTo
和RotateBy
动作来定义路径,但我认为这是一个不好的主意。如何实现呢?MoveTo
和RotateBy
动作来定义路径,但我认为这是一个不好的主意。如何实现呢?我认为发布一篇展示如果您有明确的精灵控制权,更新将如何工作的答案可能很好。
我不确定您是否使用Cocos2d或Cocos2d-X,但是这种技术在任何情况下都适用。该代码使用Cocos2d-x的C++编写。
基本思路是根据时间(手动)更新精灵的位置。精灵在任何时刻的位置取决于动画开始以来的秒数。该行通常沿着从(x0,y0)到(x1,y0)的直线路径。然后,可以使用一些三角函数将该行投影到任何角度绘制的线上。这使得可以沿任何方向具有正弦曲线路径的能力。
以下是基本代码(主要工作在UpdateAnimation()中执行):
// This assumes the frame rate is relatively constant
// at 60 fps.
const double SECONDS_PER_TICK = 1.0/60;
const double DURATION = 8.0; // Seconds for total animation.
const double X_START = 100; // Pixels
const double Y_START = 200; // Pixels
const double X_STOP = 800; // Pixels
const double X_SPEED = (X_STOP-X_START)/DURATION;
const double Y_PERIOD = 4.0; // Seconds for y cycle.
const double Y_HEIGHT = 100;
const double LAUNCH_ANGLE = M_PI/4; // Angle for line.
const CCPoint ANCHOR(X_START,Y_START);
CCPoint RotatePointAboutAnchor(const CCPoint& pt,double theta,const CCPoint& anchor)
{
double xPrime = cos(theta) * (pt.x-anchor.x) - sin(theta) * (pt.y-anchor.y) + anchor.x;
double yPrime = sin(theta) * (pt.x-anchor.x) + cos(theta) * (pt.y-anchor.y) + anchor.y;
return CCPoint(xPrime,yPrime);
}
void HelloWorld::InitAnimation()
{
_ticks = 0;
_ticksTotal = DURATION/SECONDS_PER_TICK;
}
void HelloWorld::UpdateAnimation()
{
if(_ticks <= _ticksTotal)
{
double seconds = _ticks*SECONDS_PER_TICK;
double xPos = X_START + seconds*X_SPEED;
double yPos = Y_START + Y_HEIGHT*sin(seconds*2*M_PI/Y_PERIOD);
CCPoint pos = RotatePointAboutAnchor(CCPoint(xPos,yPos), LAUNCH_ANGLE, ANCHOR);
// Set the position of the sprite
_sprite->setPosition(pos);
CCLOG("Tick: %d, Seconds: %5.2f, Position: (%f,%f)",_ticks,seconds,pos.x,pos.y);
if(_ticks%10 == 0)
{ // Add a trail
CCSprite* marker = CCSprite::create("Icon-72.png");
marker->setScale(0.1);
marker->setPosition(_sprite->getPosition());
marker->setZOrder(50);
addChild(marker);
}
// Increment the ticks count for next time.
_ticks++;
}
}
void HelloWorld::draw()
{
CCLayer::draw();
CCPoint start;
CCPoint stop;
start = RotatePointAboutAnchor(CCPoint(X_START,Y_START), LAUNCH_ANGLE, ANCHOR);
stop = RotatePointAboutAnchor(CCPoint(X_STOP,Y_START), LAUNCH_ANGLE, ANCHOR);
ccDrawLine(start,stop);
start = RotatePointAboutAnchor(CCPoint(X_START,Y_START+Y_HEIGHT), LAUNCH_ANGLE, ANCHOR);
stop = RotatePointAboutAnchor(CCPoint(X_STOP,Y_START+Y_HEIGHT), LAUNCH_ANGLE, ANCHOR);
ccDrawLine(start,stop);
start = RotatePointAboutAnchor(CCPoint(X_START,Y_START-Y_HEIGHT), LAUNCH_ANGLE, ANCHOR);
stop = RotatePointAboutAnchor(CCPoint(X_STOP,Y_START-Y_HEIGHT), LAUNCH_ANGLE, ANCHOR);
ccDrawLine(start,stop);
}
void HelloWorld::onEnterTransitionDidFinish()
{
InitAnimation();
scheduleUpdate();
}
void HelloWorld::onExitTransitionDidStart()
{
unscheduleUpdate();
}
void HelloWorld::update(float dt)
{
UpdateAnimation();
}
我画了一些标记来显示路径,并在应该遵循的路径“周围”画了线。这是它的样子:
您可以更改LAUNCH_ANGLE,以使其沿不同角度移动。
显然,这不是生产代码,但它确实演示了您可以在任何方向上跟随正弦波路径的想法。 您应将其封装为与应用程序更符合的东西。
整个代码库可在Git Hub上获得。
还有更多关于此类内容的帖子,请参见此博客。
感谢您的问题!
下面是正弦 cocos2d 动作 :)
class NDActionSineMoveBy : public ActionInterval
{
public:
static NDActionSineMoveBy* create(float duration, float sines, float sineSize, const Vec2& deltaPosition);
//
// Overrides
//
virtual NDActionSineMoveBy* clone() const override;
virtual NDActionSineMoveBy* reverse() const override;
virtual void startWithTarget(Node *target) override;
/**
* @param time in seconds
*/
virtual void update(float time) override;
CC_CONSTRUCTOR_ACCESS:
NDActionSineMoveBy() {}
virtual ~NDActionSineMoveBy() {}
/** initializes the action */
bool initWithDuration(float duration, float sines, float sineSize, const Vec2& deltaPosition);
protected:
Vec2 rotate(const Vec2 & point, float angle, const Vec2 & anchor);
protected:
float _sines;
float _sineSize;
float _baseAngle;
Vec2 _positionDelta;
Vec2 _startPosition;
Vec2 _previousPosition;
float _currentAngle;
float _distance;
private:
CC_DISALLOW_COPY_AND_ASSIGN(NDActionSineMoveBy);
};
NDActionSineMoveBy* NDActionSineMoveBy::create(float duration, float sines, float sineSize, const Vec2& deltaPosition)
{
NDActionSineMoveBy *ret = new (std::nothrow) NDActionSineMoveBy();
if (ret && ret->initWithDuration(duration, sines, sineSize, deltaPosition))
{
ret->autorelease();
return ret;
}
delete ret;
return nullptr;
}
bool NDActionSineMoveBy::initWithDuration(float duration, float sines, float sineSize, const Vec2& deltaPosition)
{
bool ret = false;
if (ActionInterval::initWithDuration(duration))
{
_sines = sines;
_sineSize = sineSize;
_positionDelta = deltaPosition;
_baseAngle = atan2f(_positionDelta.y, _positionDelta.x);
_currentAngle = _sines * (M_PI * 2);
ret = true;
}
return ret;
}
NDActionSineMoveBy* NDActionSineMoveBy::clone() const
{
// no copy constructor
return NDActionSineMoveBy::create(_duration, _sines, _sineSize, _positionDelta);
}
void NDActionSineMoveBy::startWithTarget(Node *target)
{
ActionInterval::startWithTarget(target);
_previousPosition = _startPosition = target->getPosition();
_distance = _positionDelta.length();
}
NDActionSineMoveBy* NDActionSineMoveBy::reverse() const
{
return NDActionSineMoveBy::create(_duration, _sines, _sineSize, -_positionDelta);
}
void NDActionSineMoveBy::update(float t)
{
if (_target)
{
Vec2 newPos;
newPos.x = _distance * t;
newPos.y = sin(_currentAngle * t) * _sineSize;
newPos = rotate(newPos, _baseAngle, Vec2::ZERO);
#if CC_ENABLE_STACKABLE_ACTIONS
Vec2 currentPos = _target->getPosition();
Vec2 diff = currentPos - _previousPosition;
_startPosition = _startPosition + diff;
newPos += _startPosition;
_target->setPosition(newPos);
_previousPosition = newPos;
#else
newPos += _startPosition;
_target->setPosition(newPos);
#endif // CC_ENABLE_STACKABLE_ACTIONS
}
}
Vec2 NDActionSineMoveBy::rotate(const Vec2& point, float angle, const Vec2& anchor)
{
Vec2 res;
res.x = cos(angle) * (point.x - anchor.x) - sin(angle) * (point.y - anchor.y) + anchor.x;
res.y = sin(angle) * (point.x - anchor.x) + cos(angle) * (point.y - anchor.y) + anchor.y;
return res;
};