如何在Open GL中创建连续重复滚动的背景图像?

时间:2012-04-19 10:22:09

标签: android opengl-es graphic

我有一张图片:background.png。如何使用Android OpenGL ES或AndEngine库或您知道的其他技术创建连续重复滚动的背景图像?

例:
moving cloud

目前,我使用双相邻图像技术。我加载了两次image(background.png)并将它们相邻放置,然后移动它们。所以看起来只有一个图像连续滚动。

但是,不知何故,我认为只使用一个图像实例可能会有更好的解决方案。任何人都可以分享?

更新
对于那个好奇的人来说,这是两个相邻的图像代码(使用AndEngine库):

movingBackgroundSprite.registerEntityModifier(new LoopEntityModifier(
    new MoveYModifier(10, -CAMERA_HEIGHT, 0)));     
movingBackgroundSprite2.registerEntityModifier(new LoopEntityModifier(
    new MoveYModifier(10, 0, CAMERA_HEIGHT)));

上面的代码是关于重复制作背景图像&从上到下垂直滚动。

注意:
* movingBackgroundSprite是一个加载background.png图像的Sprite类。你可以看到后台Sprite有两个实例 * registerEntityModifier - >应用修饰符/行为为Sprite
* LoopEntityModifier - >循环行为
* MoveYModifier - >通过y位置移动行为。第一个参数是持续时间(你可以忽略它,因为它与问题无关),第二个参数是Source-Y位置,第三个参数是Destination-Y位置。
* CAMERA_HEIGHT - >定义背景图像高度的常数。

2 个答案:

答案 0 :(得分:4)

如果您设置了glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT)(我认为无论如何都是默认设置),您只需绘制一个全屏四边形并以小步长递增s纹理坐标(它也可以垂直放置,如果你想要那个)。

大于1.0的值将换行到纹理的左侧,不需要额外的任何内容。并且,不需要两个绘制调用。

你没有说你是否有ES 1.0或2.0,但如果它是2.0,你可以将偏移作为一个整体传递,并将其添加到着色器中的纹理坐标,这比更改顶点数据更有效( texcoord)每一帧。虽然它是一个每帧一次的东西,但它可能无关紧要,它可能只是一样。

修改
我不知道AndEngine,可能有更简单,更方便的命令来绘制纹理全屏四边形...但是给定“OpenGL ES 1.0”,使用立即模式并假设默认的MVP矩阵,这可能看起来像这样非常粗略的例子:

glBindTexture(GL_TEXTURE_2D, cloudy_sky_texture);
glTexImage(...);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);
...
float offset = 0.0f;
while(!quit)
{
    offset += 1.0f/texture_size;

    glBindTexture(GL_TEXTURE_2D, cloudy_sky_texture);

    glBegin(GL_QUADS);
        glVertex2f(-1.0f, -1.0f);
        glTexCoord2f(0.0f + offset, 0.0f);
        ...
        glVertex2f(1.0f,  1.0);
        glTexCoord2f(1.0f + offset, 1.0f);
    glEnd();

    DrawForegroundStuff();
}

为简洁起见省略了一些行,立即模式并不好,并且有足够的优化空间,但原则应该是清楚的。您只需绘制一个四边形并增加纹理坐标的s分量。

答案 1 :(得分:1)

你可能已经找到了答案但是如果其他Andengine游戏开发者在制作背景可滚动方面存在困惑,我建议使用 AutoParallaxBackground ,因为它易于使用且效率很高。

要实现AutoParallaxBackground,请按照以下步骤操作:

1)声明并初始化BitmapTextureAtlas和TextureRegion。

private BitmapTextureAtlas mAutoParallaxBackgroundTexture;
private TextureRegion background_region;
mAutoParallaxBackgroundTexture = new BitmapTextureAtlas(1024, 1024,TextureOptions.DEFAULT);
background_region= BitmapTextureAtlasTextureRegionFactory.createFromAsset(this.mAutoParallaxBackgroundTexture, this,"backgroundImg.png", 0, 0);

2)声明并初始化背景精灵和AutoParallaxBackground。

final AutoParallaxBackground auto_background = new AutoParallaxBackground(0, 0, 0, 5);         
final Sprite background_sprite = new Sprite(0,0, this.background_region,vbom);

3)将background_sprite作为视差实体添加到AutoParallaxBackground对象。

auto_background.attachParallaxEntity(new ParallaxEntity(1.7f,background_sprite));

4)最后,将AutoParallaxBackground对象设置为场景背景。

your_scene.setBackground(auto_background);

希望这会有所帮助。