OpenGL and 2D Games

[N36fSL3A]

I'm just wondering how anyone can make 2D games in OpenGL. I have sprites, but when I load them in game, they're all big and stuff, not pixel for pixel how I'd like them. How can I do this?

[N36fSL3A]

bumpity

[3qX21hU5]

Post some code. We can't tell you what you are doing wrong without knowing what you are doing.

2D is just like 3D without a extra axis.

[Disch]

OpenGL expects the vertex positions you give to be in "clip space"... which is the same as "NDC space" before the perspective division.

In 2D, you won't have perspective division, so you can think of clip space and NDC space as the same thing.

X=-1 is the left edge of the screen
X=+1 is the right edge
Y=-1 is the bottom
Y=+1 is the top


These are the cords OpenGL expects to get regardless of your window size. So if you are outputting positions that have X=10 because you want your object to be 10 pixels wide... that is wrong because X=10 is waaaaaaay offscreen.

You need to transform/scale your output positions to conform to NDC space. This is usually done by multiplying the positions by some kind of projection matrix. In modern OpenGL this would be done by your vertex shader.

If you're interested in learning about OpenGL... this tutorial is excellent:
http://www.arcsynthesis.org/gltut/


Or... since you're just doing basic 2D work... you could use a wrapper lib like SFML/SDL which do all of this for you.

[N36fSL3A]

Or... since you're just doing basic 2D work... you could use a wrapper lib like SFML/SDL which do all of this for you.

But I want OpenGL :P

In 2D, you won't have perspective division, so you can think of clip space and NDC space as the same thing.

X=-1 is the left edge of the screen
X=+1 is the right edge
Y=-1 is the bottom
Y=+1 is the top

And would I add the +1/-1s to my x and y?

[3qX21hU5]

This might help http://www.arcsynthesis.org/gltut/Positioning/Tut04%20Perspective%20Projection.html it is from the tutorials Disch suggested. I would highly suggest going through them since they seem to be very informative (Also wanted to say thanks for introducing me to that tutorial Disch).

[Disch]

And would I add the +1/-1s to my x and y?

No you need to scale your positions so that the final coords you give OpenGL fall between -1 and +1. Anything outside that range is "offscreen" and won't be displayed.

For example... if you want your coords to be pixels... and you have a 800x600 screen...

If you want to draw an object at pixel coord 20,80 (20 pixels from the left, 80 pixels from the bottom), you'd have to scale it like so:

outcoord.x = (pixelcoord.x / 400.0) - 1.0;
outcoord.y = (pixelcoord.y / 300.0) - 1.0;

Or, if you are using matrixes, you can just create an orthogonal 2D matrix for your projection:

[ Xscale   0     0     0   ]
[    0   Yscale  0     0   ]
[    0     0     1     0   ]
[    0     0     0     1   ]

where

Xscale = 2.0 / screendims.x
Yscale = 2.0 / screendims.y

Though I really recommend you read that arcsynthesis tutorial I linked. I can give you the magical math you need to make this work, but reading that tutorial will explain how it all works and you'll be able to come up with this on your own.

[htirwin]

If you want to make it easier on yourself, you can use the openGL math library (glm) to make vector and matrix math easier. It's also a header only lib, so you don't have to worry about linking.

It's good to learn how it all works beforehand, so that you understand what you're doing though.

glm::mat4 scale_mat = glm::scale(glm::mat4(1.0f), glm::vec3(0.5f));
//this gets you a transformation matrix which will scale a 3d vector by .5 

glm::mat4 scale_mat = glm::scale(glm::mat4(1.0f), glm::vec3(0.5f, .1f, .3f));
//this gets matrix for scaling by .5 in x dim, .1 in y dim, and .3 in z dim 

glm also has the functionality to make perspective matrices, view matrices, rotation matrices, translation matrices, and so forth. What's nice about it is that the operators such as +, -, *, and /, are overloaded to do the appropriate math when multiplying vectors/matrices/scalars.

[Disch]

+1 @ htirwin.

FWIW, the arcsynthesis tutorial also introduces you to basic glm functionality.

[N36fSL3A]

Well can I just write a wrapper over this?

[Disch]

Of course you can.

But note that "just" writing a wrapper still means you have to understand how to do it (if you don't understand it, how can you write the wrapper?)

[N36fSL3A]

Mkay. Would it look like this in glScalef?

glScalef((pixelcoord.x / 400.0) - 1.0, (pixelcoord.y / 300.0) - 1.0, 1.0);

[Disch]

If you're using oldschool OpenGL, I can't help. glScalef has been deprecated for years.

[N36fSL3A]

Are there OpenGL 2.0 shader tutorials? Isn't that tutorial for 3.0?

[Disch]

The arcsynthesis tutorial uses 3.3. I'm not familiar enough with older tuts to recommend any of them.

[o1vk4iN6]

@Fred
http://msdn.microsoft.com/en-us/library/windows/desktop/dd368580(v=vs.85).aspx

If you've read what the function does, it's pretty clear what the answer is from a number of the above posts.

[Luke Stones]

outcoord.x = (pixelcoord.x / 400.0) - 1.0;
outcoord.y = (pixelcoord.y / 300.0) - 1.0;

For example:

0001110000110000
0011111100000011
0011010111011010
0000001110000000
0101111101101101

1= Object
0= Air