Saturday, January 4, 2014

Workaround for adjusting image brightness in the Starling Framework

In the Starling Framework, there isn't a property of 'brightness' for the Image Class. As a result, there is no straightforward approach when adjusting the image brightness.

However, we tend to have the feature of image glowing or flickering to attract the users, especially in the games. How to achieve the effects? Fortunately, with the understanding of the onEnterFrame function, there is a simple workaround here.

First, you need to define another class (extending Sprite) in which the images (that you want to flicker) are added. Here, ONLY 2 images are required: a normal image and a brighter image of the identical objects, as shown below:




Then, inside the onEnterFrame function, all you need to do, is to add a harmonic function (sine, cosine or tangent) to adjust the transparency (alpha) of the either one image, as stated here:

      public const FLICKER_FREQUENCY:int = 1000;
      public var yourImage1:Image = new Image(...);
   public var yourImage2:Image = new Image(...);
   
   private function onEnterFrame():void
   {
        var curDate:Date = new Date();
        yourImage.alpha = (Math.cos(curDate.getTime()*(1/
FLICKER_FREQUENCY)));
   }

Simple enough. You can adjust the flickering frequency at any rate you want :)

Wish to see a real example? There you go. The effects of adjusting the image brightness is applied in my Match 3 Pop Saga game. The flickering balloons are formed when you perform matching of 4 balloons in a row.

1 comment: