4. 让图片动起来

资源

原图:

原理

动画其实就是利用人眼视觉的暂留效应, 将一帧一帧的图片快速播放, 看起来就像物体动起来了. 上述是一张由6帧图片组成的一张图片, 每一帧为128*82. 我们为了实现动态效果, 将src_rect.x每隔一段时间向前推进128px就行了.(即上图中的红框, 每个一段时间移动到下一帧, 也就是蓝框的位置). 图片的加载和第三篇文章一样. 主要代码变更如下

// Game.cpp
bool Game::init(const char* title, int xpos, int ypos, int width, int height, int flags)
{
	...
	if (success) {
        SDL_QueryTexture(m_pTexture, NULL, NULL, &m_srcRect.w, &m_srcRect.h);
        m_destRect.x = m_srcRect.x = 0;
        m_destRect.y = m_srcRect.y = 0;
        m_destRect.w = m_srcRect.w = 128;
        m_destRect.h = m_srcRect.h;
    }
    ...
}

void Game::update()
{
    m_srcRect.x = 128 * ((SDL_GetTicks() / 100) % 6);
}

解释

update中, 128为每一帧128像素宽. 100是每隔100毫秒, 刷新一帧, 值越小, 动画速度越快, 值越大越慢. 6代表总帧数, 图片只有6帧, 因此为6.

反方向跑

如果我们希望上述动画反向跑, 我们当然可以在制作同样的反向素材, 但同时增大了内存消耗. 好消息是SDL2.0有了一个新函数: SDL_RenderCopyEx, 他比SDL_RenderCopy多了几个参数, 其中最后一个为翻转, 可以横向翻转, 也可以纵向翻转. 所以实现反向跑可以将render函数改为:

void Game::render()
{
    SDL_RenderClear(m_pRenderer);

    SDL_RenderCopyEx(m_pRenderer, m_pTexture, &m_srcRect, &m_destRect, 0, 0, SDL_FLIP_HORIZONTAL);

    SDL_RenderPresent(m_pRenderer);
}

这样做主要为了节约资源, 同时反向这个工能对于实现敌人反向追击和回头杀都是有用的.