Author Topic: 2D Drop Shadows  (Read 2427 times)

Offline bigtunacan

  • Mr. Polyvector
  • ***
  • Posts: 195
    • View Profile
2D Drop Shadows
« on: 2011-Oct-10 »
I'm trying to implement a 2d drop shadow affect.  I can get this working by creating a copy of each image I want to shadow in solid black, then draw with blending of around -.5 offset slightly from the sprite.  This looks pretty good, but I don't want to create a 2nd image for all of my assets as that is going to cut into my texture space in a huge way.  I'm thinking I should be able to do something like this by loading the original image and somehow in memory set everything except the transparent area to black, but I'm not quite seeing how I can implement this.

Offline monono

  • Mr. Polyvector
  • ***
  • Posts: 213
    • View Profile
    • Sockel Lernmedien
Re: 2D Drop Shadows
« Reply #1 on: 2011-Oct-10 »
Have a look into polyvector. There are some routines here in the forum to do the same as drawsprite with it, but with extra features like setting color.

Offline Kitty Hello

  • code monkey
  • Administrator
  • Prof. Inline
  • *******
  • Posts: 10695
  • here on my island the sea says 'hello'
    • View Profile
    • http://www.glbasic.com
Re: 2D Drop Shadows
« Reply #2 on: 2011-Oct-10 »
what platform? On a PC you could run a shader that puts black pixels.
But usually a 2nd shadow sprite would be the best thing.
You can create the shadow images with SPRITE2MEM and MEM2SPRITE.

Offline Crivens

  • Prof. Inline
  • *****
  • Posts: 913
    • View Profile
Re: 2D Drop Shadows
« Reply #3 on: 2011-Oct-10 »
Quote
You can create the shadow images with SPRITE2MEM and MEM2SPRITE
Yeah, I would imagine my generic routine (see code snippets) for different resolutions could easily be adapted to do that. Still uses 2 sprites in memory though as would be a right killer for frame rate in real time...

Cheers
Current fave quote: Cause you like musicians and I like people with boobs.

Offline bigtunacan

  • Mr. Polyvector
  • ***
  • Posts: 195
    • View Profile
Re: 2D Drop Shadows
« Reply #4 on: 2011-Oct-10 »
IPhone and Android platform.

I've been looking at vector, but don't quite see how to make this work.

Offline bigsofty

  • Community Developer
  • Prof. Inline
  • ******
  • Posts: 2606
    • View Profile
Re: 2D Drop Shadows
« Reply #5 on: 2011-Oct-10 »
Alphamode < 0 should produce a shadow effect? Not tried it but I seem to remember something about it in the manual.
Cheers,

Ian.

“It is practically impossible to teach good programming style to students that have had prior exposure to BASIC.  As potential programmers, they are mentally mutilated beyond hope of regeneration.”
(E. W. Dijkstra)

Offline ampos

  • Prof. Inline
  • *****
  • Posts: 1594
    • View Profile
    • AMpostata Website
Re: 2D Drop Shadows
« Reply #6 on: 2011-Oct-10 »
alphamode <1 will make images transparents. Example, a PNG with a transparent layer, imagine a boy.

alphamode 0 : the image is drawn with the background as black, not transparent.

alphamode -1: the image is displayed with background transparent (as should be, as seen on photoshop).

alphamode -.5: image is drawn with 50% transparency. Background remains fully transparent. (I use -0.01 for "full" image transparent)

alphamode >1 works the same as <1 but instead of transparent the image is added to the screen background.

check my web and/or my blog :D
http://diniplay.blogspot.com (devblog)
http://www.ampostata.org
http://ampostata.blogspot.com
I own PC-Win, MacBook 13", iPhone 3G/3GS/4G and iPAC-WinCE

Offline monono

  • Mr. Polyvector
  • ***
  • Posts: 213
    • View Profile
    • Sockel Lernmedien
Re: 2D Drop Shadows
« Reply #7 on: 2011-Oct-10 »
You could also change the spritecolor to black using glColor3f() importing the samples/common/gl.gbas. That way you could just draw the same sprite 2 times. First black glColor3f(0,0,0) and then full color glColor3f(1,1,1.)

Offline bigtunacan

  • Mr. Polyvector
  • ***
  • Posts: 195
    • View Profile
Re: 2D Drop Shadows
« Reply #8 on: 2011-Oct-11 »
@bigsofty

Like Ampos said, the ALPHAMODE < 0 produces transparency of image.  In my current implementation I have manually created an image that is a duplicate of original in black then draw with ALPHAMODE -.5.  This makes a very effective shadow IMHO.  Problem is two fold, the extra time it takes to create a shadow for every asset needed when I believe it could be done programmatically in less time. Secondly the texture space used since texture space is precious on mobile.  However... in regards to the second; I wonder if creating these in memory could still cause texture swapping to occur? 

@monono

What you suggested sounds like it may be just what I'm looking for.  I will take a peek at that in the next evening or two and post back how it turned out.

Thanks all.

Offline Crivens

  • Prof. Inline
  • *****
  • Posts: 913
    • View Profile
Re: 2D Drop Shadows
« Reply #9 on: 2011-Oct-11 »
Quote
when I believe it could be done programmatically in less time
Like I said look at my generic resolution code in code snippets. It loads a sprite into memory (sprite2mem) and then goes through it to resize it before saving to disk. A small adjustment should make it easy to automate the shadow sprite creation. Just remember if you use different levels on the alpha channels to have a level at which you cut of a pixel. For example a pixel could be RGB(255,0,0) and this should now be black on your new sprite, but if the alpha is 1 then is practically invisible. You would need a value where you decide if a pixel is black or not based on the alpha value.

Cheers
Current fave quote: Cause you like musicians and I like people with boobs.

Offline bigtunacan

  • Mr. Polyvector
  • ***
  • Posts: 195
    • View Profile
Re: 2D Drop Shadows
« Reply #10 on: 2011-Oct-11 »
@Crivens,

I took a peek at your code snippet.  Quite intriguing, not just for this, but for porting to other devices as well.  If I understand this correctly; it will scales the sprites disproportionately between devices using different screen ratios?  E.g. If I am going from a screen ratio of 4:3 to 16:9 the images will be stretched so they fill the screen even though this could have some side effects of images looking to be skewed horiz or vert?

Offline Crivens

  • Prof. Inline
  • *****
  • Posts: 913
    • View Profile
Re: 2D Drop Shadows
« Reply #11 on: 2011-Oct-11 »
Yes that's basically it. I considered keeping the target ratio but then rejected it because I hate black bars. Although they could be used for adverts and the like. Should be pretty easy to modify though.

Cheers
Current fave quote: Cause you like musicians and I like people with boobs.

Offline bigtunacan

  • Mr. Polyvector
  • ***
  • Posts: 195
    • View Profile
Re: 2D Drop Shadows
« Reply #12 on: 2011-Oct-13 »
@Crivens,

I came across this article that details how cross platform content scaling can be handled in the Corona game engine.

http://blog.anscamobile.com/2010/11/content-scaling-made-easy/

I really liked the technique they are using for letterboxing.  Essentially they are scaling their content at consistent x/y ratios to keep from distorting the content; so to handle the fact that the different screens will have differing scales they essentially create a screen that is larger than needed, where the excess is just filler image.  E.g. on one device you will have a little more sky than on the next, but none of the actual game action area is lost; no skewing takes place.  Only a single set of code would be required for coordinate calculations.  I really love this idea.

If you don't mind I would like to take the code you've posted, then update it to handle letterboxing in this style, then posted the updated version back to the forums here for others to use.

Offline Crivens

  • Prof. Inline
  • *****
  • Posts: 913
    • View Profile
Re: 2D Drop Shadows
« Reply #13 on: 2011-Oct-13 »
Yeah, go for it. I was going to have an option to make it decide to keep the ratio or not. It's something we discussed on the forum at the time, I just couldn't be bothered :) I never thought of the bigger screen idea though. I just thought keep the ratio the same and use the gained space to put an advert or something. To lose only a small part just means remembering to not draw anything critical there. And there isn't that many ratios to really make that too complicated. Nice! Should be a simple couple of lines change really.

Cheers
Current fave quote: Cause you like musicians and I like people with boobs.