title: Creating light spot effect on a bitmap tiled poker/billard table - with test code and screenshots
body: <p>While my simplified test case (pasted below) is in Flex, my question is actually an ActionScript 3 one.</p>
  
  <p>I have a small card game, where I currently draw the background as a not very exciting looking greenish radial gradient:</p>
  
  <p><img src="https://i.stack.imgur.com/MbjDs.png" alt="enter image description here"></p>
  
  <p>Here is my very simple test code (just put it into a new Flash Builder project):</p>
  
  <p><strong>TestBg.mxml</strong>:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;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="*"&gt;
  
      &lt;comps:MyBg width="100%" height="100%" /&gt;
  
  &lt;/s:Application&gt;
  </code></pre>
  
  <p><strong>MyBg.as</strong> (a custom component):</p>
  
  <pre><code>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();
          }
      }
  }
  </code></pre>
  
  <p>I would like to use a seamless tile instead of the gradient:</p>
  
  <p><strong>bg.png</strong>:</p>
  
  <p><img src="https://i.stack.imgur.com/kgFnW.png" alt="enter image description here"></p>
  
  <p><strong>mask.png</strong> (currently not used):</p>
  
  <p><img src="https://i.stack.imgur.com/1rxvc.png" alt="enter image description here"></p>
  
  <p>to make my background look similar to the (arguably) good looking Apple Game Center shown at the bottom of <a href="https://stackoverflow.com/questions/6467732/drawing-game-center-like-tableview-cells">this Stackoverflow question</a>.</p>
  
  <p>So I uncomment the <code>beginBitmapFill</code> call above and comment the <code>beginGradientFill</code> and get the following dark and dull looking background:</p>
  
  <p><img src="https://i.stack.imgur.com/3y8jb.png" alt="enter image description here"></p>
  
  <p><strong>My question is:</strong> how to add a light spot to my background an make it look bit lighter overall?</p>
  
  <p>Can I use the <code>mask.png</code> somehow for that or maybe some of the <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/DisplayObject.html#blendMode" rel="nofollow noreferrer">blendMode</a>s?</p>