Sign in to follow this  

OpenGL Supporting both high and low resolutions in a 2D game

This topic is 1736 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

I want to support both low-end desktop resolutions (like 1024x768) and pretty large resolutions (that's 2880x1800 for the 15" Retina MBP).

 

My basic approach is this:

  • Use a large reference resolution (3200x1800) to position/size elements (it's a simulation game that's basically just GUI, so there is no world space, just screen space)
  • Use large artwork, specify its size relative to the reference resolution so that it's scaled at runtime
  • Draw everything scaled down to the actual resolution (using OpenGL's glScale)

But I'm not sure if it's a good approach. It's not a huge game, so I don't think asset size is going to be an issue, but I see some other red flags:

  1. It looks pretty scruffy on lower resolutions like 1280x720. Like as if there's no anti-aliasing. I suppose I could fix that with OpenGL, but it makes me wonder whether I should
  2. I render fonts (using FreeType) at huge sizes like 160 pt, just to scale them down again later. That wastes both memory and makes them look worse then they could. I'm thinking of not scaling fonts and instead calculating font sizes based on the difference between reference resolution and actual resolution, but that's not going to be very exact.

Is there a better approach than what I came up with?

Edited by futlib

Share this post


Link to post
Share on other sites

1) Don't manually scale things with OpenGL , just use the reference resolution (adjust for the aspect ratio if you don't want to squash/stretch things when going from 4:3 to 16:9 for example) when you create your orthographic projection matrix.

 

2) Use texture filtering and mipmaps to reduce scaling artifacts.

 

3) possibly use multiple sprite sets for different resolutions (it might be a good idea to remove small details at lower resolutions)

Share this post


Link to post
Share on other sites

1) Don't manually scale things with OpenGL , just use the reference resolution (adjust for the aspect ratio if you don't want to squash/stretch things when going from 4:3 to 16:9 for example) when you create your orthographic projection matrix.

 

Fixed this, now it looks much nicer (but could still do with antialiasing).

 

However, this is kind of a hack I came up with to zoom in on all aspect ratios less narrow than 16:9. My reference resolution is 16:9, but I don't want black bars on 5:4, so I basically just zoom in until there are no bars anymore (that's at 2250x1800 for 5:4) Without the glScale hack, everything gets stretched. Any idea how to better solve this?

 

Edit: Came up with a better hack (I think): I'm adjusting the reference width for the aspect ratio, i.e. I end up with a reference size of 2250x1800 for 5:4, which I use for the ortographic projection matrix. Means I end up with a dynamic reference width, but that's fine since I can account for that in the UI code.

 

2) Use texture filtering and mipmaps to reduce scaling artifacts.

 

That's a topic I avoided until now, but I suppose I'll dig deeper into it. OpenGL seems to offer a ton of options, fortunately.

 

Anyway, rather relieved that the approach I sort of made up myself is apparently common smile.png Got any advice on the font issue? Should I just scale the damn fonts down or should I try to make FreeType render them in a different size based on e.g. the vertical resolution?

Edited by futlib

Share this post


Link to post
Share on other sites

1) Don't manually scale things with OpenGL , just use the reference resolution (adjust for the aspect ratio if you don't want to squash/stretch things when going from 4:3 to 16:9 for example) when you create your orthographic projection matrix.

 

Fixed this, now it looks much nicer (but could still do with antialiasing).

 

However, this is kind of a hack I came up with to zoom in on all aspect ratios less narrow than 16:9. My reference resolution is 16:9, but I don't want black bars on 5:4, so I basically just zoom in until there are no bars anymore (that's at 2250x1800 for 5:4) Without the glScale hack, everything gets stretched. Any idea how to better solve this?

 

 

>2) Use texture filtering and mipmaps to reduce scaling artifacts.

 

 

If you got 3200x1800 at 16:9 and switch to a 5:4 resolution and want to cut off the sides rather than stretch or add black borders you can set glOrtho to use:

 

top: 1800

bottom: 0 (or swap them depending on which way you want your y axis to go)

 

and then since we only want a 2250 region we need to cut off 950 pixels on the sides (475px per side), thus:

left: 475

right: 2725

 

so glOrtho(475.0, 2725.0, 0.0, 1800.0, 0.0, 1.0) should do the trick.

 

or more generic:

if we have:

referenceResolution.x = 3200

referenceResolution.y = 1800

referenceResolution.aspect = referenceResolution.x / referenceResolution.y // 1.7777777777778 in this case

and:

resolution_x = 1280

resolution_y = 1024

aspect = resolution_x / resolution_y // 1.25 in this case

horizontalFactor = aspect / referenceResolution.aspect //0.703125 in this case

 

then in order to not get any borders we do:

 

width = referenceResolution.x * horizontalFactor // 2250 in this case

diff = referenceResolution.x - width // 950

left = diff/2

right = left+width

 

glOrtho(left,right,0.0, 1800.0,0.0,1.0)

 

if you switch to a aspect ratio that is wider than the reference you will see objects rendered at a negative x position (if nothing is rendered at a negative horizontal position you get a border)

to get the border on the side(Which you want if nothing is really rendered there anyway) at ultra wide resolutions(horizontalFactor > 1.0) you can just render one black (or textured if you want fancy borders) quad from 0.0,bottom(0 or 1800) to left, top(1800 or 0) and one from right,bottom to referenceResolution.x, top

 

As for the fonts, if scaling with mipmaps and filtering doesn't give clear enough results you could try to generate textures based on the vertical resolution, or look at the freetype-gl library and its distance field examples (that method requires OpenGL 2.0 but the results are really great)

Share this post


Link to post
Share on other sites

Thanks, I'm quite happy with this now.

 

I'll stick to OpenGL 1.4 if I can (don't need no fancy graphics but I want to support old hardware as much as possible), I'm quite sure antialiasing will make the fonts look good enough.

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Similar Content

    • By _OskaR
      Hi,
      I have an OpenGL application but without possibility to wite own shaders.
      I need to perform small VS modification - is possible to do it in an alternative way? Do we have apps or driver modifictions which will catch the shader sent to GPU and override it?
    • By xhcao
      Does sync be needed to read texture content after access texture image in compute shader?
      My simple code is as below,
      glUseProgram(program.get());
      glBindImageTexture(0, texture[0], 0, GL_FALSE, 3, GL_READ_ONLY, GL_R32UI);
      glBindImageTexture(1, texture[1], 0, GL_FALSE, 4, GL_WRITE_ONLY, GL_R32UI);
      glDispatchCompute(1, 1, 1);
      // Does sync be needed here?
      glUseProgram(0);
      glBindFramebuffer(GL_READ_FRAMEBUFFER, framebuffer);
      glFramebufferTexture2D(GL_READ_FRAMEBUFFER, GL_COLOR_ATTACHMENT0,
                                     GL_TEXTURE_CUBE_MAP_POSITIVE_X + face, texture[1], 0);
      glReadPixels(0, 0, kWidth, kHeight, GL_RED_INTEGER, GL_UNSIGNED_INT, outputValues);
       
      Compute shader is very simple, imageLoad content from texture[0], and imageStore content to texture[1]. Does need to sync after dispatchCompute?
    • By Jonathan2006
      My question: is it possible to transform multiple angular velocities so that they can be reinserted as one? My research is below:
      // This works quat quaternion1 = GEQuaternionFromAngleRadians(angleRadiansVector1); quat quaternion2 = GEMultiplyQuaternions(quaternion1, GEQuaternionFromAngleRadians(angleRadiansVector2)); quat quaternion3 = GEMultiplyQuaternions(quaternion2, GEQuaternionFromAngleRadians(angleRadiansVector3)); glMultMatrixf(GEMat4FromQuaternion(quaternion3).array); // The first two work fine but not the third. Why? quat quaternion1 = GEQuaternionFromAngleRadians(angleRadiansVector1); vec3 vector1 = GETransformQuaternionAndVector(quaternion1, angularVelocity1); quat quaternion2 = GEQuaternionFromAngleRadians(angleRadiansVector2); vec3 vector2 = GETransformQuaternionAndVector(quaternion2, angularVelocity2); // This doesn't work //quat quaternion3 = GEQuaternionFromAngleRadians(angleRadiansVector3); //vec3 vector3 = GETransformQuaternionAndVector(quaternion3, angularVelocity3); vec3 angleVelocity = GEAddVectors(vector1, vector2); // Does not work: vec3 angleVelocity = GEAddVectors(vector1, GEAddVectors(vector2, vector3)); static vec3 angleRadiansVector; vec3 angularAcceleration = GESetVector(0.0, 0.0, 0.0); // Sending it through one angular velocity later in my motion engine angleVelocity = GEAddVectors(angleVelocity, GEMultiplyVectorAndScalar(angularAcceleration, timeStep)); angleRadiansVector = GEAddVectors(angleRadiansVector, GEMultiplyVectorAndScalar(angleVelocity, timeStep)); glMultMatrixf(GEMat4FromEulerAngle(angleRadiansVector).array); Also how do I combine multiple angularAcceleration variables? Is there an easier way to transform the angular values?
    • By dpadam450
      I have this code below in both my vertex and fragment shader, however when I request glGetUniformLocation("Lights[0].diffuse") or "Lights[0].attenuation", it returns -1. It will only give me a valid uniform location if I actually use the diffuse/attenuation variables in the VERTEX shader. Because I use position in the vertex shader, it always returns a valid uniform location. I've read that I can share uniforms across both vertex and fragment, but I'm confused what this is even compiling to if this is the case.
       
      #define NUM_LIGHTS 2
      struct Light
      {
          vec3 position;
          vec3 diffuse;
          float attenuation;
      };
      uniform Light Lights[NUM_LIGHTS];
       
       
    • By pr033r
      Hello,
      I have a Bachelor project on topic "Implenet 3D Boid's algorithm in OpenGL". All OpenGL issues works fine for me, all rendering etc. But when I started implement the boid's algorithm it was getting worse and worse. I read article (http://natureofcode.com/book/chapter-6-autonomous-agents/) inspirate from another code (here: https://github.com/jyanar/Boids/tree/master/src) but it still doesn't work like in tutorials and videos. For example the main problem: when I apply Cohesion (one of three main laws of boids) it makes some "cycling knot". Second, when some flock touch to another it scary change the coordination or respawn in origin (x: 0, y:0. z:0). Just some streng things. 
      I followed many tutorials, change a try everything but it isn't so smooth, without lags like in another videos. I really need your help. 
      My code (optimalizing branch): https://github.com/pr033r/BachelorProject/tree/Optimalizing
      Exe file (if you want to look) and models folder (for those who will download the sources):
      http://leteckaposta.cz/367190436
      Thanks for any help...

  • Popular Now