1

私の単純化されたテスト ケース (以下に貼り付け) は 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 (現在は使用されていません):

ここに画像の説明を入力

私の背景を、この Stackoverflow questionの下部に示されている (ほぼ間違いなく) 見栄えの良い Apple Game Center に似たものにするためです。

したがって、beginBitmapFill上記の呼び出しのコメントを外し、コメントを付けるbeginGradientFillと、次の暗くてくすんだ背景が表示されます。

ここに画像の説明を入力

私の質問は、背景に光点を追加して、全体的に少し明るく見せるにはどうすればよいですか?

mask.pngそのために何とか使用できますか、それともblendModeのいくつかを使用できますか?

4

2 に答える 2

2

おそらく最も簡単な方法は、グラデーションを別の形状で描画し、それをテクスチャ背景の上の表示リストに追加することです。

透明度のあるグラデーションを作成するか、白から黒 (または灰色から黒) のグラデーションとして作成し、Shape の blendMode をたとえば に設定することができますBlendMode.SCREEN。

于 2013-02-20T11:32:04.383 に答える
2

私は2つのレイヤーを使用_bgTextureします。あなたが持っているテクスチャだけを使用_bgShadingし、オリジナルに基づいてその上にグレースケールの照明を使用しますblendModeが、 を使用BlendMode.OVERLAYして、放射状のグラデーションを少し拡張して、鋭いエッジを避け、内側の影を追加します.

Flash IDE でテストするだけで、クラスCOLORS:Array = [0xDDDDDD, 0x777777]としてエクスポートされたテクスチャと、これを取得するためにあなたに基づいた次のメソッドを使用しました。BackgroundTextureupdateDisplayList

照明オーバーレイを使用したテクスチャ背景。

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 に答える