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 ………………………