Sorry your browser is not supported!

Hello all,

I'm trying to create a shadow behind a sprite. The way I thought of doing this is to (somehow) create a shadow-sprite and set its depth to the sprite's depth + 1, its X and Y positions to, say, the sprite's X and Y positions + 3.

That seems to work, and I can mess around with the colour of the shadow-sprite using SetSpriteColor().

Just a couple of things that could make it better.

1. Is it possible to create a sprite the same shape as another sprite (transparent png) but completely filled in one colour?

2. Is it possible to blur the edges of a sprite so that it looks more shadow-like? I'm no expert with shaders - I haven't got a clue!

Thanks in advance for any advice,

James

I've used a similar technique for shadows by copying the sprite then setting the sprite colour to a semi transparent black (0,0,0,200) and it works ok



Yes, you could use a shader which just draws the sprite colour and not the colour in the texture so that only a flat colour is drawn with alpha. this would give you a shadow sprite that you can set the colour of.

Code for that shader would be...


Alternatively, you can use CreatImageColor(),resizeimage() and then SetImagemask() to give you an image which is a solid colour but preserving the alpha values in the original image.
Create a solid colour image (CreateImageColor()) and resize it to be the same as the original sprite (ResizeImage()) then use setimagemask() to copy the alpha values over to your solid colour image. Of course you could just do this in a paint package too.



Simply put yes you can. Again, its not too hard to write a shader which will blur the original image so the shadow edge is less well defined. if your not too experienced with shaders then that might be a bit daunting.

In the shader you can take advantage of mipmapping and use the "bias" input in the texture lookup and it will do the blur for you with only a single texture lookup!! Its a cool trick

Another method without using shaders is to copy your original image and resize it to a quarter of the original (anything 0.1-0.4 works well) then use that image on the shadow sprite...The shadow sprite is set to be the same size as the original but due to the image being smaller, some blur is introduced due to the image size being smaller. No shader needed for this method and it works well enough. You could just resize the solid colour one i described above to give a similar result by making it 0.25 x its original size.

I personally would use a shader but either method works well.

Bengismo - thanks very much for your help. Fantastic post, very useful. I'll have a play around with it. Shaders seem so powerful, and I'm annoyed with myself that I don't know more about them.

Much appreciated,

James

Hello again

I've got Bengismo's shader working, but it doesn't seem to be responding to the alpha part of

SetSpriteColor(ID, iRed, iGreen, iBlue, iAlpha)

The colour changes, but it seems to ignore the alpha value. I wondered if someone could point me in the right direction. Must admit, I'm a bit overawed by shaders (just been reading about them in the AppGameKit docs, and it's as clear as mud. They seem amazingly powerful, though.

Is there something I need to add to Bengismo's shader above so that it takes into account the alpha value?

Thanks again,

James

You can change:

gl_FragColor = vec4(colorVarying.rgb,texture2D(texture0, uvVarying).a);

to

gl_FragColor = vec4(colorVarying.rgb,texture2D(texture0, uvVarying).a*colorVarying.a);

this will allow you to control the overall alpha value with the sprite colour.

It works!

I don't understand how, but it works. Thanks again.

No problem.

If you turn on mipmapping (SetGenerateMipmaps(1)) right before loading your sprites image then make a small change to the shader code (just adding ,2.5 in the texture lookup)

gl_FragColor = vec4(colorVarying.rgb,texture2D(texture0, uvVarying,2.5).a*colorVarying.a);

You get a blurred shadow

You can vary the bias value to get a varying amount of blur....too high and it will look blocky, too litle and it just wont blur.

There are some clever (and kind) folks around here!

Thanks again for the help.