在OpenFL 中定位 HTML5 很容易，但是我无法为精灵添加发光效果，我正在考虑一种解决方法，即使用 JavaScript 库为 Canvas 中的精灵添加 webGL 效果。
但是，问题是，我如何使用 JavaScript 访问Canvas 中的精灵？以及使用什么工具来检查Canvas 中的精灵？
【问题讨论】：
标签： html5-canvas haxe openfl haxeflixel
首先，由于 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
它看起来如何
【讨论】：
RenderSession 但可以使用 Actuate 补间 context.shadowBlur 吗？有什么地方可以阅读上下文类（石灰中的 CanvasRenderContext）文档？
Actuate 补间context.shadowBlur，但不能直接使用，因为__renderCanvas 每帧都会被调用，您可以在HackyBitmap 上定义一个自定义属性，该属性将被补间，我会在一分钟内更新我的答案.
正如我在评论中所说，Sprites 不存在于 JS/HTML 中，它是 Canvas 之上的抽象，ends up calling .drawImage，因此，您不会在任何浏览器开发工具中找到它。您可以“访问”这些 sprite 的唯一方法是使用 OpenFL 提供的内容 - 您的 sprite 对象、BitmapData 等。
您尝试获得发光的方法可能是通过 GlowFilter 类，在文档中被错误地描述为“适用于所有平台”。这个类还没有用 Canvas 元素实现，但是could have been。
但是，WebGL 存在于 OpenFL 中，它并不全是画布。这就是为什么着色器是可能的。有一种用于 webgl 的发光过滤器，内置于 openfl 中，首先显示在 this commit 的 this pull request 中。所以使用着色器可能是你最好的选择。
很遗憾，着色器不适用于 Canvas。我觉得glows in canvas 是你最好的方法，但它还没有实现。
【讨论】：