访问 Canvas 中的精灵？

Question

在 OpenFL 中以 HTML5 为目标很容易，但是，我无法为精灵添加发光效果，我正在考虑一种变通方法，即使用 JavaScript 库来添加Canvas.

中精灵的 webGL 效果

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

Answer 1

正如我在评论中所说，Sprites 不存在于 JS/HTML 中，它是 Canvas 之上的抽象 ends up calling .drawImage，因此，您不会在任何浏览器开发人员工具中都找不到它。您可以 'access' 这些精灵的唯一方法就是使用 OpenFL 提供的东西 - 您的精灵对象、位图数据等

您尝试获得发光的方法可能是通过 GlowFilter class, which is wrongly described as 'Avaliable on all platforms' in the docs. This class isn't implemented with the Canvas element yet, but could have been。

但是，WebGL 存在于 OpenFL 中，并非全部 canvas。这就是着色器成为可能的原因。有一种用于 webgl 的辉光过滤器，内置于 openfl 中，首先显示在 this commit of this pull request 中。所以使用着色器可能是你最好的选择。

不幸的是，着色器不适用于 Canvas。我觉得 glows in canvas 是最好的方法，但尚未实施。

Answer 2

首先，因为 4.0 版 openfl 默认使用 webgl 渲染器，在这种情况下添加发光效果需要 'deep dive' 到 openfl/lime 源代码，我不能给你。但如果这适合你，强制 openfl 使用 canvas 后备

<haxedef name="canvas"/>

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

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

看起来如何

访问 Canvas 中的精灵？

Access sprites in Canvas?

haxe

html5-canvas

openfl

haxeflixel