Creating light spot effect on a bitmap tiled poker/billard table - with test code and screenshots

Question

While my simplified test case (pasted below) is in Flex, my question is actually an ActionScript 3 one.

I have a small card game, where I currently draw the background as a not very exciting looking greenish radial gradient:

Here is my very simple test code (just put it into a new Flash Builder project):

TestBg.mxml:

<?xml version="1.0" encoding="utf-8"?>
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx"
    xmlns:comps="*">

    <comps:MyBg width="100%" height="100%" />

</s:Application>

MyBg.as (a custom component):

package {
    import flash.display.GradientType;
    import flash.display.InterpolationMethod;
    import flash.display.Shape;
    import flash.display.SpreadMethod;
    import flash.geom.Matrix;
    import mx.core.BitmapAsset;
    import mx.core.UIComponent;

    public class MyBg extends UIComponent {
        [Embed('bg.png')]
        private static const BG_ASSET:Class;
        private static const BG:BitmapAsset = new BG_ASSET() as BitmapAsset;

        private static const COLORS:Array = [0xCCFFCC, 0x669966];
        private static const ALPHAS:Array = [1, 1];
        private static const RATIOS:Array = [0, 255];

        private var _matrix:Matrix = new Matrix();
        private var _bg:Shape = new Shape();

        override protected function createChildren():void {
            super.createChildren();
            addChild(_bg);
        }

        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
            super.updateDisplayList(unscaledWidth, unscaledHeight);

            _bg.graphics.clear();
            //_bg.graphics.beginBitmapFill(BG.bitmapData);
            _matrix.createGradientBox(unscaledWidth, unscaledHeight, 0, 0, -unscaledHeight / 6);
            _bg.graphics.beginGradientFill(GradientType.RADIAL,
                COLORS,
                ALPHAS,
                RATIOS,
                _matrix,
                SpreadMethod.PAD,
                InterpolationMethod.LINEAR_RGB,
                0);
            _bg.graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);
            _bg.graphics.endFill();
        }
    }
}

I would like to use a seamless tile instead of the gradient:

bg.png:

mask.png (currently not used):

to make my background look similar to the (arguably) good looking Apple Game Center shown at the bottom of this Stackoverflow question.

So I uncomment the beginBitmapFill call above and comment the beginGradientFill and get the following dark and dull looking background:

My question is: how to add a light spot to my background an make it look bit lighter overall?

Can I use the mask.png somehow for that or maybe some of the blendModes?

Answer 1

I would use two layers, a _bgTexture with just the texture as you have, and a _bgShading with some greyscale lighting above that based on your original, but with a blendMode of BlendMode.OVERLAY, then expand the radial gradient a bit to avoid the sharp edges and add an inner shadow.

Just testing in the Flash IDE, I've used COLORS:Array = [0xDDDDDD, 0x777777], the texture exported as a BackgroundTexture class, and the following method based off your updateDisplayList to get this:

function drawBG(unscaledWidth:Number, unscaledHeight:Number):void {
    _bgShading.graphics.clear();

    _matrix.createGradientBox(unscaledWidth * 1.2, unscaledHeight * 2.2, 0, -unscaledWidth * 0.1, -unscaledHeight * 0.8);
    _bgShading.graphics.beginGradientFill(GradientType.RADIAL,
        COLORS,
        ALPHAS,
        RATIOS,
        _matrix,
        SpreadMethod.PAD,
        InterpolationMethod.LINEAR_RGB,
        0);
    _bgShading.graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);
    _bgShading.graphics.endFill();

    _bgShading.filters = [new DropShadowFilter(0, 0, 0x000000, 1.0, 10.0, 10.0, 1.0, 3, true)];

    _bgTexture.graphics.clear();
    _bgTexture.graphics.beginBitmapFill(new BackgroundTexture());
    _bgTexture.graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);
    _bgTexture.graphics.endFill();

    _bgShading.blendMode = BlendMode.OVERLAY;
}

Answer 2

The easiest way is probably to draw the gradient in a separate shape and add it to the display list above the textured background.

You could either create the gradient with transparency or as a white-to-black (or gray-to-black) gradient and set the Shape's blendMode to, for example, BlendMode.SCREEN.