html5-canvas - 在 Canvas 中访问精灵？

Question

以 HTML5 为目标OpenFL很容易，但是，我无法为精灵添加发光效果，我正在考虑一种解决方法，即使用 JavaScript 库向 Canvas 中的精灵添加 webGL 效果。

但是，问题是，我将如何Canvas使用 JavaScript 访问精灵？以及使用什么工具来检查精灵Canvas？

Answer 1

正如我在评论中所说，Sprites在 JS/HTML 中不存在，它是一个最终调用Canvas的抽象，因此，您在任何浏览器开发工具中都找不到它。你可以“访问”这些精灵的唯一方法就是使用 OpenFL 提供的东西——你的精灵对象、BitmapData 等。.drawImage

您尝试获得发光的方法可能是通过GlowFilter类，该类在文档中被错误地描述为“在所有平台上可用”。此类尚未使用 Canvas 元素实现，但可能是.

但是，OpenFL 存在 WebGL，它不全是画布。这就是为什么着色器是可能的。有一种用于 webgl 的发光过滤器，内置在 openfl 中，首先在此 pull request的提交中显示。所以使用着色器可能是你最好的选择。

不幸的是，着色器不适用于 Canvas。我觉得在画布上做发光是你最好的方法，但它还没有实现。

Answer 2

首先，由于版本 4.0 openfl 默认使用 webgl 渲染器，并且在这种情况下添加发光效果需要对 openfl/lime 源代码进行“深入研究”，我不能给你这个。但是，如果这适合您，请强制 openfl 使用画布后备

<haxedef name="canvas"/>

然后你可以像这样创建具有发光效果的自定义位图类（例如）

import openfl.display.Bitmap;
import openfl.display.BitmapData;
import openfl.display.PixelSnapping;
import openfl._internal.renderer.cairo.CairoBitmap;
import openfl._internal.renderer.canvas.CanvasBitmap;
import openfl._internal.renderer.dom.DOMBitmap;
import openfl._internal.renderer.opengl.GLBitmap;
import openfl._internal.renderer.RenderSession;

class HackyBitmap extends Bitmap
{

    /**
     * Custom property for tweening
     */
    public var glowBlur:Float = 0.0;    

    public function new(bitmapData:BitmapData=null, pixelSnapping:PixelSnapping=null, smoothing:Bool=false) 
    {
        super(bitmapData, pixelSnapping, smoothing);

    }


    public override function __renderCanvas (renderSession:RenderSession):Void {


        var context = renderSession.context;

        if (glowBlur > 0)
        {
            context.save();
            context.shadowBlur = glowBlur;
            context.shadowColor = "white";
        }


        CanvasBitmap.render (this, renderSession);

        if (glowBlur > 0)
        {
            context.restore();  
        }

    }

}

用法

var data = Assets.getBitmapData("img/berry.png");
var hacky = new HackyBitmap(data);
hacky.x = hacky.y = 20;
addChild(hacky);

//to animate glow property
Actuate.tween(hacky, 1.0, { glowBlur: 50 }).repeat().reflect();

OpenFL/Lime 版本

lime 3.2.0
openfl 4.2.0

它看起来如何