Rendering multiple 2D images in OpenGL-ES 2.0

Question

I am new to OpenGL, and trying to learn ES 2.0.

To start with, I am working on a card game, where I need to render multiple card images. I followed this http://www.l

Answer 1

To begin I'll point out some general things about OpenGL:

Each texture is a large square image. Loading that image into the gpu's memory takes time, as in you can't actively swap images into gpu's texture memory and hope for a fast run time.

Q1: The reason only the second image is showing is because of this line in your sprite class:

GLUtils.texImage2D(GLES20.GL_TEXTURE_2D, 0, bmp, 0);

You call that twice, therefore texture0 is replaced by the second image, and only that image is called.

To combat this, developers load a single image that contains a lot of smaller images in it, aka a texture map. The size of the image that can be loaded largely depends on the gpu. Android devices range roughly from 1024^2 pixels to 4096^2 pixels.

To use a smaller part of the texture for a sprite, you have to manually define the uvArray that is in your batcher class.

Let's imagine our texture has 4 images divided as follows:

 (0.0, 0.0) top left   _____ (1.0, 0.0) top right
                      |__|__| middle of the square is (0.5, 0.5) middle
 (0.0, 1.0) bot left  |__|__|(1.0, 1.0) bot right

That means the uv values for the top left image are:

static float[] uvArray = new float[]{
        0.0f, 0.0f, //top left
        0.0f, 0.5f, //bot left
        0.5f, 0.5f, //bot right
        0.5f, 0.0f  //top right
};

This way you just quadrupled the amount of sprites you can have on a texture.

Because of this you will have to pass no only which texture the sprite is on, but also it's custom uvs that the batcher should use.