2D Scrolling Tutorial?

Started by
0 comments, last by NicoG 13 years, 2 months ago
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
Advertisement

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


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

glTexParameteri(mode, GL_TEXTURE_WRAP_S, GL_REPEAT);
glTexParameteri(mode, GL_TEXTURE_WRAP_T, GL_REPEAT);


2.) The Shader Code:

Parallax.fragment

#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;
}


Parallax.vertex

#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;
}


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
If you say "pls", because it is shorter than "please", I will say "no", because it is shorter than "yes"
http://nightlight2d.de/

This topic is closed to new replies.

Advertisement