I'm trying to create an iPad/iPhone game using GLES2.0 that contains a 3D scene with a heads-up-display/GUI overlaid on the top. However, this problem would also apply if I were to port my game to a computer and run the game in a resizable window, or allow the user to change screen resolutions...

When trying to make the 2D GUI/HUD work I've made the assumption that all I'm really doing is drawing a load of 2D textured 'quads' on the screen and am trying to treat the orthographic projection as an old-style 2D display with 0,0 in the upper left and screenWidth,ScreenHeight in the lower right.

This causes me all sorts of confusion when I rotate my ipad into Landscape mode since I can't work out what to put into my projection and modelview matrices to turn everything around the right way. It also gets messy if I want to support the iPad's large screen, an iPhone or a Retina display since I have to then draw three sets of textures for everything and work out which ones to use.

Should I be trying to map the 2D OpenGL co-ords 1:1 with the screen? While typing out this question it occurs to me that I could keep my origin in the centre, still running -1/+1 along the axes. This would let me scale my 2D content appropriately on the different screen sizes, but wouldn't I end up with the textures being scaled and possibly losing quality?

I'm using OpenGLES 2.0 and have a matrix library that has equivalents to the GLES1.1 glOrthof() and glFrustrum() calls.


1 Answer 1


You look to be on the right track to me with your last set of questions.

I would suggest first and foremost that you scale the position but not nessecarily the size of the HUD elements. That way when you rotate your device or simply change the resolution the elements look the same but are positioned properly.

Next up I would take a look at how many rendering iPhone/iPad games actually support horizontal and vertical rotation modes. I would say hands down they almost all support only one or the other and additionally, rarely rotate to even the alternate (180 degrees) positioning that would keep the same resolution.

Lastly, to address the quality issue, this should kind of go away if you only scale positional information. What may come up however is visual clarity. And while this can lead back to quality I am just attempting to focus on the fact that if they scale the resolution very high, the HUD elements may appear so small as to be unreadable. Alternately if they scale the resolution down alot and then you can see nothing but the HUD. My suggestion for solutions to this is to develop a more advanced set of HUD elements since it sounds like you are doing one quad per element. If you could make a button up out of 9 background pieces and a text rendering on top of it it may take care of most of your issues as then you could scale the size of the hud or offer hud sizing options to the end user. You break apart the button's background into the top left corner the top bar the top right corner the left border the central background the right border the bottom left corner the central bottom border and finally the bottom right corner. In this manner you scale the size of the object (and likely the text) but not the texture, you let the corners remain the same size and the borders be the same height for horizontal ones and width for vertical ones so the texture can repeat along the edges. Same for the background section which I would suggest even just making a solid color.

Anywho, like I said you look to be in the right direction.

Hope this helps.

  • \$\begingroup\$ After a bit of thinking and testing I have a system that scales nicely between the iPhone 4 and iPad screen resolutions - everything remains square, the axes go the correct ways and I don't need to worry about screen sizes. The key was to not think about "1024x768" or other resolutions, but to instead think about proportions of my GUI elements - 1x1 unit, 1x5 units, etc. \$\endgroup\$
    – Piku
    Dec 6, 2011 at 15:33

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .