Why sprites tremble in cocos2d-x

Question

I create a little game on cocos2d-x and have some problem in mobile version. Game have layer with terrain and character and layer with ui/info objects. Layer with terrain does not move. And layer with ui/info move with character (so it static on screen). In mobile version all sprites from ui layer are trembling, but only sprites, labels are static. In PC version sprites and labels are also static.

Create label and sprite. Label static on PC (Win and Mac) and mobile (Android), sprite static on PC and tremble on mobile:

auto infoLayer = m_params->getGameInfoDelegate();    // class GameInfo
auto size = Director::getInstance()->getVisibleSize();

TTFConfig ttfconfig("fonts/Marker Felt.ttf", 100);
auto label = Label::createWithTTF(ttfconfig, "0");
label->setPosition(Vec2(size.width / 2, size.height / 2 + 40));
label->setString("Hello");
infoLayer->getLayer()->addChild(label, 10);

auto spr = Sprite::create();
spr->setColor(Color3B(200, 100, 100));
spr->setTextureRect(Rect(0, 0, 150, 150));
spr->setPosition(Vec2(size.width / 2, size.height / 2 - 40));
infoLayer->getLayer()->addChild(spr, 9);

Update position layer and camera:

update(float t)
{

    ...
    m_cameraFollow->update();
    ...
}

void CameraFollow::update()
{
    float moveX;
    float moveY;
    ...
    m_camera->move(Vec2(moveX, moveY));    // class GameCamera 
}

void GameCamera::move(const cocos2d::Vec2& m)
{
    float x;
    float y;
    ...
    m_position.x = x;
    m_position.y = y;
    m_camera->setPosition(m_position);    // class cocos2d::Camera
    auto infoPanel = m_params->getGameInfoDelegate();    // class GameInfo
    if(infoPanel)
    {
        infoPanel->setMoving(m_position - m_startPosition);
    }
}

class GameInfo : public cocos2d::Layer, public GameInfoDelegate

void GameInfo::setMoving(const cocos2d::Vec2 &position)
{
    this->setPosition(position);
}

So, how i can fix it?

Answer 1

The answer to your question is complicated. The main reason is that your phone does not have the same processing power as your computer, and Cocos2d-x uses some clever optimizations to try and hide that. With moving sprites, it has to redraw them every frame (usually 30-60 fps), and slight inconsistencies can lead to this effect. To remedy this, I would double check that your fps is 60, because 30 fps will lead to trembling. Also, if you're updating the sprite's position in update(float dt), I would try and use the physics engine instead, with velocities. If that isn't an option, maybe try to have less layers, because the more sprites you draw ontop of one another, the more it will look like it is jittering. Let me know if any of these solutions work.

Answer 2

The issue may be related to how you are moving the camera. Setting new X,Y coordinates through your update method without factoring in the delta time on each update call will result in jerky movement on screen.

You need to smooth out the movement from one location to another.

Try this:

update(float dt)
{
    ...
    m_cameraFollow->update(dt);
    ...
}

void CameraFollow::update(float dt)
{
    float moveX;
    float moveY;
    float speed = 1.0f;
    ...

    Vec2 cameraPosition = m_camera->getPosition();
    Vec2 targetPosition = Vec2(moveX, moveY);
    Vec2 newPosition = cameraPosition.lerp(targetPosition, dt * speed);

    m_camera->move(newPosition);
}