在位圖平鋪的撲克桌面上創建光斑效果 - 帶有測試代碼和屏幕截圖

儘管我的簡化測試用例（粘貼在下面）是在Flex中，但我的問題實際上是ActionScript 3。在位圖平鋪的撲克桌面上創建光斑效果 - 帶有測試代碼和屏幕截圖

我有一個小卡片遊戲，我現在畫的背景是一個不是很令人興奮的看着綠色的徑向漸變：

enter image description here

這是我非常簡單的測試代碼（只是把它變成一個新的Flash 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：

enter image description here

（目前未使用）：

enter image description here

使我的背景看起來類似於在this Stackoverflow question底部顯示的（可以說是）好看的Apple Game Center。

所以我去掉上面的beginBitmapFill通話和評論的beginGradientFill，並得到以下暗淡，無光澤尋找背景：

enter image description here

我的問題是：如何將一個光點添加到我的背景的整體看起來更輕一點？

我可以使用mask.png以某種方式或爲某些blendMode？

來源

2013-02-20 Alexander Farber

我會用兩層，只有你有質感_bgTexture，並與上面，基於原來的一些灰度照明_bgShading，但與BlendMode.OVERLAY一個blendMode，然後展開徑向漸變一點，以避免尖銳的邊緣，並添加一個內部的陰影。

就在Flash IDE中進行測試時，我用COLORS:Array = [0xDDDDDD, 0x777777]，導出爲BackgroundTexture類的質地，和基於折以下方法你updateDisplayList得到這個：

Textured background with a lighting overlay.

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

來源

2013-02-20 11:33:19

作品像魅力，你是一個親！ – 2013-02-20 12:09:22

最簡單的方法可能是在單獨的形狀中繪製漸變並將其添加到紋理背景上方的顯示列表中。

您可以使用透明度創建漸變，也可以使用白色到黑色（或灰色到黑色）漸變創建漸變，並將Shape的blendMode設置爲例如BlendMode.SCREEN。

來源

2013-02-20 11:32:04

在位圖平鋪的撲克桌面上創建光斑效果 - 帶有測試代碼和屏幕截圖

回答

相關問題