Back to General and Gameplay Programming

how to code Axelay's scrolling?

General and Gameplay Programming Programming

Started by Nico_gamedev December 10, 2011 12:04 PM

7 comments, last by Nico_gamedev 12 years, 4 months ago

Nico_gamedev

109

Author

December 10, 2011 12:04 PM

Hi guys,

SNES gamers may remember Konami's Axelay (shoot'em up): actually, I would be interested in coding a shoot'em up which could include Axelay's scrolling effect (as seen as in the very 1st level the game).

To code this graphic effect, do you have any hint or piece of info to share ? (or some math tricks?)

Thank you very much for your help!!!

PS: depending on your answers, I would use Java or C# or C++/SDL to code my game.

Nik02

4,359

December 10, 2011 01:01 PM

Are you looking to emulate the actual technique used in the game (that involves per-scanline modification of graphics layer transform to fake perspective) or something that looks like it (3D geometry with true perspective and texture map)?

The former was used in the original game because robust 3D hardware that could handle the texturing was not available; the latter would be easier for today's hardware.

Niko Suni

Antheus

2,410

December 10, 2011 01:19 PM

Again, shaders would make it easy.

#ifdef GL_ES

precision highp float;

#endif



uniform vec2 resolution;

uniform float time;

uniform sampler2D tex0;

uniform sampler2D tex1;



void main(void)

{

    	vec2 p = -1.0 + 2.0 * gl_FragCoord.xy / resolution.xy;

    	vec2 uv;



    	uv.x = p.x;

    	uv.y = 0.5*sqrt(1.0-p.y) - time;



    	gl_FragColor = vec4(texture2D(tex0,uv).xyz, 1.0);

}

Nik02

4,359

December 10, 2011 01:45 PM

Regardless of the technique you end up using, the uv.y calculation in Antheus's shader is somewhat the precise formula used in the game (give or take some constant scaling).

The original effect used piecewise linear approximation, which is why there are progressive "zones" of perspective in the Axelay background. This approximation (should you want to emulate it too) could be easily achieved by using a vertex shader to interpolate the coordinates of a vertically-tessellated grid, instead of calculating them in the pixel/fragment shader. The vertex attribute interpolation is linear (hence the transitions between "slices" would also be piecewise linear).

Niko Suni

Nico_gamedev

109

Author

December 12, 2011 07:37 PM

Thank you very much, for your precise answers!!!

Antheus, thanks a lot for your shaders (the Axelay-like shader and the sinusoidal fx) and for the ShaderToy link ! This is very handy!

By the way guys, I'm a total newbie about these shader-things, so here's my newbie question (sorry :rolleyes:

) : guys, what would you choose between Java, C# or C++(SDL) to code a game with such shaders ?

(...and, if you know some cool links/tutorials to help me begin from scratch with shaders, don't hesitate to tell me about them

)

Once again, thank you very much!!!

PS: if you want to spend 5mn on a puzzle-game I coded, click here .

BeerNutts

4,410

December 13, 2011 01:19 AM

If you use C++, I'd suggest using SFML, not SDL. It's a much better (more features, and constantly updated) library.

My Gamedev Journal: 2D Game Making, the Easy Way

---(Old Blog, still has good info): 2dGameMaking
-----
"No one ever posts on that message board; it's too crowded." - Yoga Berra (sorta)

Nico_gamedev

109

Author

December 17, 2011 10:44 AM

Thank you for your answer about the SFML lib, BeerNutts! I wasn't aware about SFML.

Guys, about the shader above (thanks again Antheus!), do you know if it would be well handled by xbox360's graphic card? (XNA game)

Thanks!

Nik02

4,359

December 17, 2011 12:07 PM

Thank you for your answer about the SFML lib, BeerNutts! I wasn't aware about SFML.

Guys, about the shader above (thanks again Antheus!), do you know if it would be well handled by xbox360's graphic card? (XNA game)

Thanks!

While Antheus's shader is GLSL (OpenGL shading language), it can be easily ported to HLSL/SM3 code which can be compiled to run on XBox360. The syntax is extremely similar between the two, but HLSL doesn't have implicit global variables such as gl_FragCoord or gl_FragColor; instead, HLSL parameters and return values are accessed by semantics (annotations that specify the logical purpose of the symbols). This is a very minor issue though, as the available functionality is about the same.

Niko Suni

Nico_gamedev

109

Author

December 19, 2011 06:13 PM

Thank you very much for your detailed answer, Nik02!