A decent OpenGL2D Tutorial

Started by
6 comments, last by mmakrzem 12 years, 9 months ago
Hello GameDev.net! I hope we become best friends in the coming months!

I want to create a video game. I am developing in Visual Studio 2010 (C++). I want the project to one day be portable. Because of this, I would like to use OpenGL for my graphics.

The problem is that no tutorial I have found decently explains how to do 2D in OpenGL for a beginner. I am not interested in 3D, just 2D. Can anyone link me to a decent tutorial that also was made relatively recently?
Advertisement

Hello GameDev.net! I hope we become best friends in the coming months!

I want to create a video game. I am developing in Visual Studio 2010 (C++). I want the project to one day be portable. Because of this, I would like to use OpenGL for my graphics.

The problem is that no tutorial I have found decently explains how to do 2D in OpenGL for a beginner. I am not interested in 3D, just 2D. Can anyone link me to a decent tutorial that also was made relatively recently?

I don't know of any tutorials off-hand that directly relate to 2-d graphics in OpenGL, but if you understand how OpenGL works in general, working in 2-d should be fairly straightforward. Here's a few considerations though:

- For a strictly 2-d game, you'd typically use an orthographic rather than perspective projection.

- 'Sprites' can be rendered as textured quads.

- If pixel-perfect graphics aren't needed, you can make the size of the projection whatever you like.

- If pixel-perfect graphics are needed, you'd typically set up the projection so that it matches the window pixel-for-pixel. (For more on how to realize pixel-perfect graphics in OpenGL, search for 'opengl pixel perfect'.)

- You can achieve layering either via the depth buffer, or via render order (painter's algorithm) with depth buffering turned off.
The keywords here are 'orthogonal' and 'orthographic'. Also found this: http://www.gamedev.net/topic/104791-last-post-about-2d-in-opengl-so-please-stop/. Hope it helps!
"I will personally burn everything I've made to the fucking ground if I think I can catch them in the flames."
~ Gabe
"I don't mean to rush you but you are keeping two civilizations waiting!"
~ Cavil, BSG.
"If it's really important to you that other people follow your True Brace Style, it just indicates you're inexperienced. Go find something productive to do."
[size=2]~ Bregma

"Well, you're not alone.


There's a club for people like that. It's called Everybody and we meet at the bar[size=2].

"

[size=2]~

[size=1]Antheus

I don't know of any tutorials off-hand that directly relate to 2-d graphics in OpenGL, but if you understand how OpenGL works in general, working in 2-d should be fairly straightforward. Here's a few considerations though:

- For a strictly 2-d game, you'd typically use an orthographic rather than perspective projection.

- 'Sprites' can be rendered as textured quads.

- If pixel-perfect graphics aren't needed, you can make the size of the projection whatever you like.

- If pixel-perfect graphics are needed, you'd typically set up the projection so that it matches the window pixel-for-pixel. (For more on how to realize pixel-perfect graphics in OpenGL, search for 'opengl pixel perfect'.)

- You can achieve layering either via the depth buffer, or via render order (painter's algorithm) with depth buffering turned off.


The problem is that I am not familiar with OpenGL.

What I have to do: Welcome to OpenGL -> a bunch of stuff -> how to do 2D for someone familiar with OpenGL
What I want to do: Welcome to OpenGL -> 2D in OpenGL

DarklyDreaming: That is a start, but it is only code with no description as to what everything does. (Also: 2002)

The problem is that I am not familiar with OpenGL.

What I have to do: Welcome to OpenGL -> a bunch of stuff -> how to do 2D for someone familiar with OpenGL
What I want to do: Welcome to OpenGL -> 2D in OpenGL

Have you considered using a library such as SFML or SDL 1.3 that will handle the details of OpenGL-based 2-d graphics for you?

If you want to do it yourself, I wouldn't get too hung up on finding OpenGL references that are specifically geared towards 2-d. OpenGL is OpenGL, more or less, and the differences between a 2-d and 3-d OpenGL-based app will generally reduce to just a few key points (some of which are listed above) which should be easy enough to get a handle on. (And of course if you have any specific questions, you can always ask here or in the OpenGL forum.)
2D in OpenGL is just the same as 3D execpt everything has the same Z, so work on the 3D stuff (it will be useful to you in the future when you move beyond your current objective) and you're there.

Direct3D has need of instancing, but we do not. We have plenty of glVertexAttrib calls.

Hi Kurt.
I am a hobbiest using OpenGL.

What you have to do:
First, let me tell you that most OpenGL Tutorials on the Web are outdated. Unfortunately. You should not use glVertex3f etc anymore, meaning Immediate Mode. Also, Fixed Function Pipeline, meaning OpenGL2 is outdated and should not be used anymore.
Actually, people should learn and use OpenGL3. Best way to learn OpenGL is to read the "OpenGL Superbible, 5th Edition". It covers most techniques.
To get you going, I can show you the basic things needed:

Window Manager Library, I recommend GLUT for you as Beginner or SDL 1.3 or even SFML.
While SFML cannot create a core context (which denies you using deprecated functions).

GLew or GLee. This is a library for loading extensions from the Drivers and you don't have to go through this pain.

glm. This is a math library for OpenGL, written against the Shaderspec 3.0 of OpenGL.

Now I show you in a rough overview how someone renders:
You push your data into a Vertex Buffer Object. This gets uploaded to the Videocard.
Then you tell OpenGL whats in it by defining Attribute Sets.
You can use those Attribute sets in shaders.
You should have Vertices, and TextureCoords there.
The Vertices are multiplied in the Shader with the ViewMatrix which you have to send to the Shader using OpenGL.
The matrix should be a orthographic one, if you want 2D.
This can be achieved with OpenGL and glm like this:


glm::mat4 viewmatrix = glm::ortho<float>(0.0f, x, y, 0, -1.0f, 1.0f);
int position = glGetAttribLocation(shaderID, "myProjectionMatrix");
glUniformMatrix4fv(position, 1, false, glm::value_ptr(viewmatrix ));

Note, that you need a bound shader while doing this.

Here is a basic Shader:


// Vertex Shader:

#version 330

//----------------------------------------------
// Layout Vars
//----------------------------------------------
layout(location = 0) in vec3 NL_Vertex;
layout(location = 1) in vec4 NL_Color;
layout(location = 2) in vec2 NL_TextureCoord;

//----------------------------------------------
// Uniforms from NightLight
//----------------------------------------------
uniform mat4 NL_ProjectionMatrix;

//----------------------------------------------
// Output to fragment shader
//----------------------------------------------
smooth out vec4 theColor;

void main()
{
//----------------------------------------------
// Applying position
//----------------------------------------------
gl_Position = NL_ProjectionMatrix*vec4(NL_Vertex, 1.0);

//----------------------------------------------
// Output
//----------------------------------------------
theColor = NL_Color;
}

// Fragment Shader:

#version 330

smooth in vec4 theColor;

out vec4 outputColor;

void main()
{
outputColor = theColor;
}



All it does is to apply the Viewmatrix to each Vertex and uses the colors defined in the VBO to display the object.

I hope you got a rough overview, but best thing to start learning is here:
Learning Modern 3D Graphics Programming Through OpenGL

You can also have a look into the sourcecode of my project, it uses OpenGL3 Core and is heavily documented, maybe it helps you getting an idea:
http://code.google.com/p/nightlight2d/source/browse/trunk/NightLightDLL/
If you say "pls", because it is shorter than "please", I will say "no", because it is shorter than "yes"
http://nightlight2d.de/
I've posted video tutorials on my website that show how to get 2D and 3D working.

This topic is closed to new replies.

Advertisement