在位图平铺扑克/桌球桌上创建亮点效果 - 带有测试代码和屏幕截图

Question

虽然我的简化测试用例（粘贴在下面）是在Flex中，但我的问题实际上是一个ActionScript 3。

我有一个小型纸牌游戏，我目前将背景绘制为一个看起来不太令人兴奋的绿色径向渐变：

这是我非常简单的测试代码（只是将它放入一个新的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 ：

mask.png （目前尚未使用）：

让我的背景看起来类似于this Stackoverflow question底部显示的（可以说）漂亮的Apple游戏中心。

所以我取消注释上面的beginBitmapFill调用并评论beginGradientFill并获得以下黑暗和暗淡的背景：

我的问题是：如何在我的背景中添加一个亮点，使整体看起来更轻一些？

我能否以某种方式使用mask.png或某些blendMode s？

Answer 1

最简单的方法可能是在单独的形状中绘制渐变并将其添加到纹理背景上方的显示列表中。

您可以创建具有透明度的渐变或作为白色到黑色（或灰色到黑色）渐变，并将Shape的blendMode设置为，例如BlendMode.SCREEN。

Answer 2

我会使用两个图层，一个_bgTexture只包含您拥有的纹理，一个_bgShading上面有一些基于原始图像的灰度照明，但blendMode为BlendMode.OVERLAY COLORS:Array = [0xDDDDDD, 0x777777]，然后稍微扩展径向渐变以避免锐边并添加内部阴影。

只是在Flash IDE中进行测试，我使用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; } 的以下方法来获取此信息：

{{1}}