[SOLVED] OpenGL 2D Pixel Scaling Issues

[LeonBlade]

Hey everyone,

I usually try not to ask too many questions, but I'm a bit stumped here on my code.
I have a small sprite sheet animation that looks like this:


His animation and everything are working just fine, but my GLUT window is 640px by 480px:


So he looks lovely sitting there, but there's quite a bit of room going on around him, so I figured why not scale down the window:


Ahh, perfect so this is great, a 320px by 240px size for the window is just fine, but the problem is, everything now is so small.
I mean, I can barely see anything here, I want the window's resolution to be 320px by 240px but I want it to upscale to 640px by 480px.

So messing around I tend to get this kind of effect:


So you'll see some of the pixels translate well, but others do not. Some pixels are too wide I suppose you could say, it's not a proper scaling like I want it to be. If you take a look at a game sprite that has it's scaling increased it would look a bit like this:


If you'll notice that each pixel is being scaled up to four pixels per pixel.
So how would I go about making my sprites scale up properly to be like this so that I can have them stick at their standard resolution but increase the window size?

Thanks.

[Nokurn]

You haven't provided many details of how you're doing your rendering. From my assumptions, however, it would seem that you're using a fixed projection matrix but resizing your viewport. Unless you make sure that your viewport's aspect ratio matches that of your orthographic projection, you are going to get some weird scaling.

[LeonBlade]

You haven't provided many details of how you're doing your rendering. From my assumptions, however, it would seem that you're using a fixed projection matrix but resizing your viewport. Unless you make sure that your viewport's aspect ratio matches that of your orthographic projection, you are going to get some weird scaling.

Yeah I know I didn't, but I figured anyone would figure I was using for ortho.

This is what I'm trying, keep in mind I'm not too good at doing GL shit:

Code: Select all

glutInitWindowSize(640, 480);
...
glViewport(0, 0, 640, 480);
glOrtho(0.0f, 320, 240, 0.0f, -1.0f, 1.0f);

[qpHalcy0n]

What we're looking for here is how you're resizing the window. This looks like initialization code. Looks like you're using glut, so there will be a glut callback "glutReshapeFunc" in which you will register a callback method that needs to be sure to readjust your aspect ratio for the viewport and the projection.

Also, you need to post as many details as you can because glOrtho is but one method to achieve the projection that you've got. There are many many ways that you have not yet explored to achieve a mapping like you've got which is why these details are important.

[LeonBlade]

What we're looking for here is how you're resizing the window. This looks like initialization code. Looks like you're using glut, so there will be a glut callback "glutReshapeFunc" in which you will register a callback method that needs to be sure to readjust your aspect ratio for the viewport and the projection.

Also, you need to post as many details as you can because glOrtho is but one method to achieve the projection that you've got. There are many many ways that you have not yet explored to achieve a mapping like you've got which is why these details are important.

That's all I really use, here is my reshape function:

Code: Select all

GLvoid resizeGL(int width, int height)
{
	glMatrixMode(GL_PROJECTION);
	glLoadIdentity();

	glViewport(0, 0, width, height);
	glOrtho(0.0f, 320, 240, 0.0f, -1.0f, 1.0f);

	glMatrixMode(GL_MODELVIEW);
	glLoadIdentity();
}

This is how my textures are drawn, don't worry about some of the things being passed in like rotation and the function itself
I'll likely change it up later.
The rectangle TO specifies the X and Y of where on the screen it should be placed and the W and H for the size of the sprite.
The rectangle FROM specifies the source rectangle; where to pull the texture coords from X and Y and W and H.

Code: Select all

void Graphics::drawSprite(Sprite *sprite, Rectangle to, Rectangle from, float rotate)
{
	// push the matrix so we can mess with our own
	glPushMatrix();
	glLoadIdentity();

	// translate this object to it's X and Y position
	glTranslated(to.x + to.w / 2, to.y + to.h / 2, 0);

	glBegin(GL_QUADS);
	{
		float min_x = (float) (from.x) / sprite->getWidth();
		float max_y = (float) (from.y) / sprite->getHeight();
		float max_x = (float) (from.x + from.w) / sprite->getWidth();
		float min_y = (float) (from.y + from.h) / sprite->getHeight();

		glTexCoord2f(min_x, max_y);
		glVertex2f(-to.w/2, -to.h/2);

		glTexCoord2f(max_x, max_y);
		glVertex2f(to.w/2, -to.h/2);

		glTexCoord2f(max_x, min_y);
		glVertex2f(to.w/2, to.h/2);

		glTexCoord2f(min_x, min_y);
		glVertex2f(-to.w/2, to.h/2);
	}
	glEnd();

	// translate our matrix back
	glTranslated(-to.x, -to.y, 0);

	// restore the last matrix
	glPopMatrix();
}

This is what I use to draw my sprite, again don't worry about implementation:

Code: Select all

Rectangle r1 = { 320 / 2 - 8, 240 / 2 - 16, 16, 32 };
Rectangle r2 = { 0, 0, 16, 32 };

graphics->drawSprite(player, r1, r2, 0);

[qpHalcy0n]

Your resize function does not reshape the parallel projection. It looks hard coded to 320x240. Be sure to adjust your projection so that it matches the new window size. (The glOrtho call)

[LeonBlade]

Your resize function does not reshape the parallel projection. It looks hard coded to 320x240. Be sure to adjust your projection so that it matches the new window size. (The glOrtho call)

If I match the width and height exactly, it will just give me an undesired effect.

[LeonBlade]

Okay, so I looked over my code multiple times and found that it looked just fine and I was confused as shit obviously.
So I try to load just a regular sprite without other frames and THIS happens:

So it looks like it works just fine with a standard image like this... so I try a few things and eventually I resize my character graphic to be 64px by 32px instead of 48px by 32px and this is what happens as a result...


So I guess the texture coordinates care about the image size?
I did not think about that what so ever...

[szdarkhack]

I noticed that, as you said, your sprite image is 32x48, and yet in the code you posted you draw to a quad of size 16x32. If that is really the case, then the scaling issue is due to the fact that your sprite's height is 1.5 times its width, while your quad's height is 2 times it's width, thus the sprite gets stretched by a factor of 4/3 on the Y-axis.

This would also explain why setting the image size to 32x64 solved your problem. This would be the case *IF* the code you posted is actually for drawing that sprite (even though the "from" gives me some doubt). Anyway, just throwing it out there, it could be what you're looking for. BTW, you should switch your glOrtho() to use width/2.0f and height/2.0f to make sure you get the right projection for any window size, just to be safe.

Anyway, i hope that helps.

[LeonBlade]

I noticed that, as you said, your sprite image is 32x48, and yet in the code you posted you draw to a quad of size 16x32. If that is really the case, then the scaling issue is due to the fact that your sprite's height is 1.5 times its width, while your quad's height is 2 times it's width, thus the sprite gets stretched by a factor of 4/3 on the Y-axis.

This would also explain why setting the image size to 32x64 solved your problem. This would be the case *IF* the code you posted is actually for drawing that sprite (even though the "from" gives me some doubt). Anyway, just throwing it out there, it could be what you're looking for. BTW, you should switch your glOrtho() to use width/2.0f and height/2.0f to make sure you get the right projection for any window size, just to be safe.

Anyway, i hope that helps.

Oooh, I see, I wasn't aware of that; I didn't really think about it. Thank you for the explanation, hopefully if someone as stupid as me when it comes to this stuff needs help this will help them out.

Thank you szdarkhack for the explanation, and thank you everyone else who tried to help as well.

[szdarkhack]

Oooh, I see, I wasn't aware of that; I didn't really think about it. Thank you for the explanation, hopefully if someone as stupid as me when it comes to this stuff needs help this will help them out.

Thank you szdarkhack for the explanation, and thank you everyone else who tried to help as well.

Awesome, i'm glad i could help