• Advertisement
Sign in to follow this  

2D Scrolling Tutorial?

This topic is 2536 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

Hi, is there any possibility of doing a 2D multi-directional scrolling tutorial? This would allow people to learn how to scroll maps/tiles like most 2D scrolling games. I personally have an interest in scrolling portions of the screen (like a typical window with a scroll bar) but I'm sure the same principles could be applied to a 2D scrolling world.

Cheers
Sparky

Share this post


Link to post
Share on other sites
Advertisement
[quote name='SparkyNZ' timestamp='1296518337' post='4767720']
Hi, is there any possibility of doing a 2D multi-directional scrolling tutorial? This would allow people to learn how to scroll maps/tiles like most 2D scrolling games. I personally have an interest in scrolling portions of the screen (like a typical window with a scroll bar) but I'm sure the same principles could be applied to a 2D scrolling world.

Cheers
Sparky
[/quote]

I do that in my test game for my 2D Framework.
Since I use a strict OpenGL 3.2 Conext, I do that with shaders.

1.) Make sure your texture was set up using
[code]
glTexParameteri(mode, GL_TEXTURE_WRAP_S, GL_REPEAT);
glTexParameteri(mode, GL_TEXTURE_WRAP_T, GL_REPEAT);
[/code]

2.) The Shader Code:

Parallax.fragment
[code]
#version 150

//----------------------------------------------
// Layout Vars
//----------------------------------------------
layout (location = 0) in vec4 vertex;
layout (location = 1) in vec4 color;
layout (location = 2) in vec2 texture_coord;

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

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

uniform float tex_offset;

void main()
{
//----------------------------------------------
// Calulating position
//----------------------------------------------
vec4 offset = vec4( NL_Position.x, NL_Position.y, 0.0, 0.0);
offset += vertex;

//----------------------------------------------
// Applying position
//----------------------------------------------
gl_Position = NL_ProjectionMatrix*offset;

//----------------------------------------------
// Scrolling the Texture
//----------------------------------------------
vec2 tex_coord = texture_coord;
tex_coord.x += tex_offset;

//----------------------------------------------
// Output
//----------------------------------------------
theColor = color;
theTextureCoord = tex_coord;
}
[/code]

Parallax.vertex
[code]
#version 150

uniform sampler2D NL_TextureID;

smooth in vec4 theColor;
smooth in vec2 theTextureCoord;

out vec4 outputColor;

void main()
{
vec4 value = texture2D(NL_TextureID, theTextureCoord);

if ( value.a <= 0.01 ){
discard;
}

outputColor = theColor*value;
}
[/code]

As you see, I only increase the amount of the texture coords by a value each time the shader passes. The value is set inside my program and is 0.002f per Frame.
If you are unfamiliar with Shaders, you can that with pre-3.2 too, just add something to your texture-coords and pass GL_REPEAT as told in1.
HTH

Share this post


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

  • Advertisement