AS3：如何实现动态径向 alpha 渐变来混淆舞台？

Question

我有一个可以在舞台上移动的玩家。

我希望对玩家周围的舞台进行小幅照明，以便敌人和环境越远越难以看到。通过在这里使用这些答案AS3: beginGradientFIll() doesn't make me a gradient!

，我已经能够在一定程度上实现这一目标

此外，我希望能够动态控制 alpha，以便当玩家按下指定键时，更多的舞台会被照亮。在某种程度上，我也能够做到这一点。

这是迄今为止的 SWF。 http://www.fastswf.com/9cOxDwo

方向键移动，Z 增加亮度。

我的问题是

a) 渐变太刺眼并且

b) 按 Z 显示整个舞台，而我只是想增加照明半径。

这是我的代码的样子。

    var circle:Shape = new Shape;

    public function player():void
    {
        this.addEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
    }

    private function onAddedToStage(event:Event):void
    {
        var matrix:Matrix = new Matrix();
        matrix.createGradientBox(1000, 1000)            
        circle.graphics.beginGradientFill(GradientType.RADIAL, [0x000000, 0x000000], [0, 1], [0, 255])
        circle.graphics.drawCircle(0, 0, stage.stageWidth)
        circle.graphics.endFill()
        addChild(circle);

为了控制我刚刚使用的 alpha：

    private function lux():void
    {
        circle.alpha = 0
    }

    private function onFrame(event:Event):void
    {
        if(circle.alpha < 1)
        {
            circle.alpha += 0.005
        }

为了解决 b)，我能否以某种方式动态控制 beginGradientFill() 函数中的 alpha 参数？

我也一直在查看this，但不知道如何掩盖舞台而不是剪辑。

拯救我的 AS3 神。

谢谢。

Answer 1

只是关于手动设置叠加层的快速指南：

1. 首先，您需要一个容器 (MovieClip)，其混合模式设置为“LAYER”（在“属性检查器”面板中 [如果您不知道图像在哪里，我可以提供图像]）。这一步对于让以下子 MovieClips 的混合模式协同工作非常重要。
2. 接下来，您可以创建一个子影片剪辑，全舞台大小，具有所需 Alpha 值的深色矩形（对于您的阴影，项目将完全不亮）。这可以是一个简单的矩形，#000000 纯黑色，几乎没有任何透明度（比如... 95% alpha）。创建该影片剪辑后，将其混合模式设置为 LAYER（或者 MULTIPLY 也可以工作）。
3. 对于灯光，您可以创建另一个子影片剪辑（放置在上述“阴影”叠加层的顶部）。创建一个带有径向渐变的圆圈（比如说白色，从纯不透明的 100% alpha 到完全透明的 0% alpha）。无论游戏中的默认光照范围如何，使其大小符合您的需要。然后，将该影片剪辑的混合模式设置为 ERASE。

如果一切都正确完成（我希望我正确地描述了所有步骤！），当您导航回容器保存整个设置的时间线时，您应该看到灯光的混合模式“遮盖”了部分阴影层（与 Flash 层中的传统遮罩相比，仅考虑到渐变的 alpha 后，它会更平滑）。

您仍然需要代码来告诉灯光影片剪辑跟随您的播放器/光源，这可以通过两种方式进行：

• 仅移动灯光渐变。 或者 - 移动整个容器，但是，请确保将阴影剪辑拉得比舞台大小更远，这样如果您的播放器靠近舞台的任何边缘，阴影不会突然在另一侧被切断（s )。

说了这么多，传统Flash矢量渲染中的大屏幕变化往往会导致性能变慢。之后我能给你的唯一建议是考虑使用 Stage3D 驱动的引擎（Starling、Genome2D 等），但这会对你的游戏造成很大的改变——而且超出了这个问题的范围。

编辑：为了给您一个关于 DisplayObject 层次结构的更好答案，这里有一个图表
（尽管是用丑陋的 ASCII 字符制作的）

+ Root
|
|- Your HUD / UI elements (if applicable)
|
|--+ Container, set to "LAYER" (MovieClip, follows player position)
|  |
|  |-Erasing Light, set to "ERASE" (MovieClip)
|  |-Shadow Rect, set to "LAYER" or "MULTIPLY" (MovieClip)
|
|- Your Player
|- Enemies, Items, Background Etc.

您还可以在此处查看截屏教程：

https://www.screenr.com/6MJN

2021 年编辑： 抱歉各位，但自从被 Articulate 收购后，ScreenR 的录音似乎从互联网上消失了。尝试了短链接/6MJN，但没有骰子。考虑到 Flash 现在几乎在所有地方都被彻底消灭了，这段录音可能不再重要了。