Discussion for Tutorial 2 - Image Class

[jonny]

I have finally been able to upload the second tutorial on writing a game on the iPhone using OpenGL.

This Tutorial has turned out to be longer than I thought and comes in at around 1.5 hours. It covers the creation of an Image class which wraps around the Texture2D class and functions which I think would be useful in a game such as scaling, rotation and applying a colour filter and alpha etc. This image class will form the basis for the next tutorials where we will create a class for handling sprite maps, animation and bitmap fonts.

This Tutorial also gives you a quick look at some of the other classes we are going to cover in action, so not only how scaling, rotating and colours work but also animation and bitmap fonts.

[jalf]

Hi,

The image class is awesome! Thanks a lot!

In my game i need rotate a image with origin in the upper left corner (0,0) and this class only rotate around center or around the bottom-left corner. Any tips?

[mike]

Hi Jalf

The easiest way to do that would be to perform a glTranslate to the point of rotation before the rotation. At the moment there is either no translation i.e. bottom left hand corner, or it does a translation to the middle of the image. Simply translating to the top left hand corner before the rotation should give you what you need.

Mike

[jalf]

Thanks...works for me.

[rbackman]

Hi,

Thanks for the great tutorials they have been very helpful. I am currently developing a cool little game that I hope to put on the App store at some point, I will be sure to post a link. my question is:

I am trying to have a backgrounf texture scroll.
I found the following command that I put into the render function in the Image class :

glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);

so I try and animate textureOffsetX & textureOffsetY but it doesnt seem to effect the UV coordinates. any idea what is wrong?

Thanks

Rob

[mike]

Hmm, changing the offset for the texture while keeping the geometry the same size etc should give you the effect of the texture scrolling. I'd need to see some more code to really work out what is going on.

Mike

[Sumaleth]

A question about vertices in the Image class; in the Image class, and through to the video I'm up to at this point (Particles), this order is used for the four verts:

Code: Select all

// top right
quadVertices[0] = quadWidth;   
quadVertices[1] = quadHeight;
// bottom right
quadVertices[2] = quadWidth;
quadVertices[3] = 0;
// top left
quadVertices[4] = 0;
quadVertices[5] = quadHeight;
// bottom left
quadVertices[6] = 0;
quadVertices[7] = 0;

I'm interested in the clockwise order of those first three verts. From what I read, the order should be counter-clockwise if you want to "see" the face (the back side is not rendered), and the other GL_TRIANGLE_STRIP examples I've seen order them counter-clockwise.

But your Image class does work, so I wondered if there was some sort of double-sided-triangles option in use here?

[mike]

To be honest, I wind them that way as the point at which they render is the bottom left hand corner of the quad. For that reason alone I start there when defining my verts.

I am not using the winding at all or worrying about the back of the quad being rendered or not. I am never doing anything with my quads that would make the reverse side of them visible.

If you are working in 3D then the winding does become important so that you can specify back face culling and the like, so that the texture on the front is not rendered in reverse on the back of your polys.

As for my Image class there is nothing special going on

Mike

[Sumaleth]

I just had a play in Xcode. Results are confusing.

Backface culling is disabled by default, and can be enabled with:

Code: Select all

glEnable(GL_CULL_FACE);

Passing comments have suggested that it might give a speed boost even when working in 2D. It does mean you need to worry about winding directions, though you can switch to frontface culling with:

Code: Select all

glCullFace(GL_FRONT);

My tests were very inconsistent. If I added a rotating triangle with CCW winding, backface culling worked. If I gave the triangle CW winding, it didn't work (saw both sides of the triangle).

When I tried it with a triangle_strip with four verts, one of the triangles was visible on one side and the other triangle was visible only on the other side. Never saw the whole square.

I will keep at it. I'm sure it makes sense somehow.

[Eugene]

I have a micro optimization for image class.

This calls:

Code: Select all

glTranslatef(point.x, point.y, 0);
glRotatef(-rotation, 0.0f, 0.0f, 1.0f);
glTranslatef(-point.x, -point.y, 0);


are expensive, as I've figured out.

Wrap them with if. Like this:

Code: Select all

if (rotation) {
    glTranslatef(point.x, point.y, 0);
    glRotatef(-rotation, 0.0f, 0.0f, 1.0f);
    glTranslatef(-point.x, -point.y, 0);
}


As I can remember, it gave me three or four additional fps on a really small, one screen scene, with less than a half hundred images rendered.