1

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

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

在此处输入图像描述

这是我非常简单的测试代码（只需将其放入新的 Flash Builder 项目中）：

测试Bg.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（目前未使用）：

在此处输入图像描述

让我的背景看起来类似于这个 Stackoverflow 问题底部显示的（可以说）好看的 Apple Game Center 。

所以我取消注释beginBitmapFill上面的调用并注释beginGradientFill并得到以下黑暗和沉闷的背景：

在此处输入图像描述

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

我可以使用mask.png某种方式或者一些blendMode吗？

4

2 回答 2

2

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

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

于 2013-02-20T11:32:04.383 回答
2

我会使用两层，一个_bgTexture只有你所拥有的纹理，一个_bgShading在你原来的基础之上有一些灰度照明，但是使用 a 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;
}
于 2013-02-20T11:33:19.843 回答