Jump to content

  • Log In with Google      Sign In   
  • Create Account

We're offering banner ads on our site from just $5!

1. Details HERE. 2. GDNet+ Subscriptions HERE. 3. Ad upload HERE.


2D Scrolling Tutorial?


Old topic!
Guest, the last post of this topic is over 60 days old and at this point you may not reply in this topic. If you wish to continue this conversation start a new topic.

  • You cannot reply to this topic
1 reply to this topic

#1 SparkyNZ   Members   -  Reputation: 121

Like
0Likes
Like

Posted 31 January 2011 - 05:58 PM

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

Sponsor:

#2 GothSeiDank   Members   -  Reputation: 156

Like
0Likes
Like

Posted 07 February 2011 - 08:12 PM

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/




Old topic!
Guest, the last post of this topic is over 60 days old and at this point you may not reply in this topic. If you wish to continue this conversation start a new topic.



PARTNERS