Создание эффекта светового пятна на растровом черепичном покерном/бильярдном столе - с тестовым кодом и скриншотами

Question

Хотя мой упрощенный тестовый пример (вставленный ниже) находится в Flex, мой вопрос на самом деле является ActionScript 3.

У меня есть небольшая карточная игра, где я в настоящее время нарисовать фон как не очень интересно, глядя зеленоватый радиальный градиент:

Вот мой очень простой тест код (просто положить его в новый флэш-проект Builder):

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 (пользовательский компонент):

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(); 
     } 
    } 
} 

Я хотел бы использовать бесшовную плитку вместо градиента:

bg.png:

mask.png (в настоящее время не используется):

сделать мой фон выглядеть так, как (возможно) элегантный Apple, Game Center, показанный в нижней части this Stackoverflow question.

Так что я раскомментировать beginBitmapFill вызов выше и комментарий beginGradientFill и получить следующий темный и унылый глядя фон:

Мой вопрос: как добавить светлое пятно на моем фоне заставить его выглядеть немного легче?

Могу ли я использовать mask.png как-то для этого или, может быть, для некоторых из blendMode?

Answer 1

Я хотел бы использовать два слоя, а _bgTexture только с текстурой, как у вас есть, и _bgShading с некоторыми оттенками серого освещения выше, что на основе оригинал, но с blendMode из BlendMode.OVERLAY, затем разверните радиальный градиент немного, чтобы избежать острые края и добавить внутреннюю тень.

Просто проверяю в Flash IDE, я использовал COLORS:Array = [0xDDDDDD, 0x777777], текстуру экспортированный в качестве BackgroundTexture класса, и следующий метод, основанный свой updateDisplayList, чтобы получить это:

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

Самый простой способ - это, вероятно, рисовать градиент в отдельной форме и добавлять его в список отображения над текстурированным фоном.

Вы можете создать градиент с прозрачностью или градиентом от белого до черного (или от серого до черного) и установить blendMode формы, например, BlendMode.SCREEN.