Shader - 2D Sprite? How?

Started by PiQ, March 11, 2011, 00:27:12

Previous topic - Next topic

PiQ

Hey Guys,
now i searched a long time the forum and also the inet ^^, but i couldn´t find something that fits or was "easy" to understand. I want to have a shadow beside my 2D sprite after drawing but i really don´t know how i could that working. (actually i don´t want to use big lightning - just want a shadow^^ - just an unrealistic atmosphere)
I´m actually also new to lwjgl but i wanted to try that. Maybe you could give me a hint or helpful code?^^
i also tried ste3e´s tutorial for shaders but i dont know, how i could apply this to a 2D-Sprite. In addition to that, whats the point of this tutorial i couldnt figure it out :D? Is the box in the middle a shadow or what could we call it?

10mins ago i also found the redbook and the examples for it. I also saw an example with lighting and of course shadow, but this shadow just fits for a shape and not for a sprite or a texture or i´m wrong?

Hope anybody of you could help me please.
Thx in advance :)
(hope im right here & sry for my engl ^^)

bobjob

can you get a screenshot of example image of the kind of effect you are trying to perform.

PiQ

Of course i can, here is it :P

Thats an example: see attachment (the small figures on the picture should be the same ^^)

Loading the sprite isnt a problem also the drawing of it isnt a problem... but i think i just have bad ideas to achieve these shadows. For example i could read out the texture and draw every pixel black and draw it before the actual sprite with other coords - but then i dont have such a smooth shadow or?^^
If i got the shadow, then maybe im also able to draw a glow-effect around this sprite hopefully - this is my next step :D

Thx in advance again :)

bobjob

you can do it a few ways.

The way I would do it, is as follows:
first draw the sprite with the color:
...
float shadowStrength = 0.5f;
GL11.glColor4f(0,0,0,shadowStrength);
...
so its black and semi transperant

you need to make sure blending is enable and set to the appropriate mode.

then redraw the sprite at a different location with the color
GL11.glColor4f(1,1,1,1);

but make sure that the texture you load has an alpha channel for the transperant parts. for example a 32bit PNG file.



kappa

I've done a similar effect using Slick2D here.

It uses slick2d's drawFlash() method. The code for that method looks like this
public void drawFlash(float x,float y,float width,float height, Color col) {
		init();
		
		col.bind();
		texture.bind();

		if (GLContext.getCapabilities().GL_EXT_secondary_color) {
			GL.glEnable(EXTSecondaryColor.GL_COLOR_SUM_EXT);
			EXTSecondaryColor.glSecondaryColor3ubEXT((byte)(col.r * 255), 
													 (byte)(col.g * 255), 
													 (byte)(col.b * 255));
		}
		
		GL.glTexEnvi(SGL.GL_TEXTURE_ENV, SGL.GL_TEXTURE_ENV_MODE, SGL.GL_MODULATE);

        GL.glTranslatef(x, y, 0);
        if (angle != 0) {
	        GL.glTranslatef(centerX, centerY, 0.0f); 
	        GL.glRotatef(angle, 0.0f, 0.0f, 1.0f); 
	        GL.glTranslatef(-centerX, -centerY, 0.0f); 
        }
        
		GL.glBegin(SGL.GL_QUADS);
			drawEmbedded(0,0,width,height);
		GL.glEnd();

        if (angle != 0) {
	        GL.glTranslatef(centerX, centerY, 0.0f); 
	        GL.glRotatef(-angle, 0.0f, 0.0f, 1.0f); 
	        GL.glTranslatef(-centerX, -centerY, 0.0f); 
        }
        GL.glTranslatef(-x, -y, 0);
        
		if (GLContext.getCapabilities().GL_EXT_secondary_color) {
			GL.glDisable(EXTSecondaryColor.GL_COLOR_SUM_EXT);
		}
	}


I do note that you have a slight blur added to the shadows which complicates things a little, so you might also have to add a Gaussian Blur to achieve that exact effect. One easy way to achieve the effect is create the shadows before hand in a paint program and load them in as images.

PiQ

Thank you, you two! I got i worked, actually it was too easy :D
The thing with Slick: I think i come back to this later, but for now, the first methods works ^^

I think the glowing-effect i will also realize with this method. Or if you have any recommendations for me let it me know ^^

Bye and thank you!