Saturday, 27 August 2011

Neon Label Test

Saw quite a lot of games using fancy label/text/drawings with nice "neon" effect. Searched on the net for a while and found 2 sites ( Cocoanetics and stackoverflow.com info by Brad Larson) which have some useful information. So I combined the 2, plus some colour info from Visibone, and I was able get some nice labels with Neon effect working.

But I think that's not enough. Mainly because the effect of these neon labels will also depend on the background colour/image underneath.  So I modified one of my old projects (the "project#2" mentioned in this post, based on Chapter 7 example code from the iPhone Application Development for iOS4 Visual QuickStart guide book) a bit. It used to have 3 little squares which you can drag it around. I changed it into 12 different coloured squares, with the different Neon labels at the front. So you can easily change the background colour by dragging different square behind the neon coloured text.

When the project starts, you will see something as below. You will notice each colour was displayed twice. The reason for that is, the 2 links I mentioned above used slightly different techniques. The Cocoanetics one defined 3 colours (insideColor, outlineColor, blurColor) with different "alpha" value. So I created 2 objects (both extending UILabel) one accepting UIColor, while the other accepts R/G/B value separately so that the code can have different alpha value specified (this is because I can't change alpha value of UIColor?). The top 5 labels uses "NeonLabel" while the bottom 5 uses "NeonLabelRGB" object, have a look carefully and see if you can spot the differences.


In my opinion, although the RGB method indeed creates a slightly better blurring effect, it's too much trouble to have to pass R/G/B value on every call. I still prefer the easier way to make my life easier...

After you dragged a few boxes around, you will get a slightly messier screen as below for you to compare the effect of different coloured neon label on different coloured background.
Hope you find this project interesting!


Source of the Neon Label Test project


1 comment:

  1. Thank you for this code. Very helpful!!!

    ReplyDelete