Text Shadow and Glow in Corona SDK

previewI was excited about the arrival of Graphics 2.0 in Corona SDK, because it meant that I could improve the shadow and glow in my custom text module.


It all started when I wanted some nicer looking text in an upcoming Corona app.  Nothing fancy, just a thin glow around the letters and a nice drop shadow.  So I searched Google for “corona sdk shadow”, “corona sdk font effects”, and various other phrases that didn’t end up giving me what I was looking for.  No problem, I thought, I can create my own module to apply glow and shadow effects to text.

After researching algorithms for creating glow and shadow effects, I created my styled text module, but I wasn’t happy with the results.  The shadow and glow effects weren’t smooth, they had hard pixel edges in them:

shadow1

Notice that unsightly staircase effect on the drop shadow.  I thought there must be a better way.  After more research I discovered that the shadow and glow could be improved by blurring them slightly, like this:

shadow2

 

Much better, thanks to the new Gaussian Blur effect.  Here is a preview of the different text effects possible in the module, including adding shadow and glow together:

effects

If this is the kind of simple but effective text effects that you’re looking for, then check out the Corona SDK module on GitHub:

https://github.com/prairiewest/corona_text_shadow

  • msy

    Awesome post ………………………

  • Clinton Hammons

    Not sure if you still monitor this or not. but it only seems to load once, then if you reload corona simulator it doesn’t work. have to delete files, then recreate them to get it to come back?

    • toddtrann

      Hi Clinton, I tried with Corona versions 3012 and 3175, and both of them worked. I’m unable to duplicate the issue sorry.