0

HTML5 をターゲットにするのOpenFLは簡単ですが、スプライトに輝く効果を追加できませんでした。JavaScript ライブラリを使用して、Canvas のスプライトに webGL 効果を追加するという回避策を考えています。

しかし、問題は、CanvasJavaScript を使用してスプライトにアクセスするにはどうすればよいかということです。でスプライトを検査するために使用するツールは何Canvasですか?

4

2 に答える 2

0

まず、バージョン 4.0 の openfl はデフォルトで webgl レンダラーを使用しており、その場合にグロー効果を追加するには、openfl/lime のソース コードを「深く掘り下げる」必要があり、それをお伝えすることはできません。しかし、それがあなたに適している場合は、openflに強制的にキャンバスフォールバックを使用させます

<haxedef name="canvas"/>

そして、そのようなグロー効果を持つカスタム Bitmap クラス (たとえば) を作成できます。

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

どのように見えるか

レギュラーvsグローリー

于 2016-09-21T12:58:35.707 に答える
0

私のコメントで述べたように、JS/HTML には存在しません。これは、最終的にを呼び出すSprites抽象化であるため、どのブラウザー開発者ツールでも見つけることができません。これらのスプライトに「アクセス」できる唯一の方法は、OpenFL が提供するもの (スプライト オブジェクト、BitmapData など) を使用することです。Canvas.drawImage

グローを取得しようとした方法は、おそらくGlowFilterクラスを使用したものであり、ドキュメントでは「すべてのプラットフォームで使用可能」と誤って説明されています。このクラスはまだ Canvas 要素で実装されていませんが、実装されていた可能性があります。

ただし、WebGL は OpenFL 用に存在し、すべてがキャンバスではありません。そのため、シェーダーが可能です。openfl に組み込まれている webgl 用の一種のグロー フィルターがあり、このプル リクエストのこのコミットで最初に示されています。したがって、シェーダーを使用するのが最善の策かもしれません。

残念ながら、シェーダーは Canvas では機能しません。キャンバスでグローを行うのが最善の方法だと思いますが、まだ実装されていません。

于 2016-09-20T01:09:02.270 に答える