melonJSで時間の経過とともにスプライトの色を変更する方法

Question

時間の経過とともにフェードする移動オブジェクトにいくつかのトレイルエフェクトを追加します。 これは私がこれまで持っているものである。ここで（WASDまたは矢印キーで移動します）

game.Trail = me.Entity.extend({ 

    init:function (x, y, settings) 
    { 
    this._super(me.Entity, 'init', [ 
     x, y, 
     { 
     image: "ball", 
     width: 32, 
     height: 32 
     } 
    ]); 

    (new me.Tween(this.renderable)) 
    .to({ 
     alpha : 0, 
    }, 5000) 
    .onComplete((function() { 
     me.game.world.removeChild(this); 
    }).bind(this)) 
    .start(); 
    }, 

    update : function (dt) { 
    this.body.update(dt); 
    return (this._super(me.Entity, 'update', [dt]) || this.body.vel.x !== 0 || this.body.vel.y !== 0); 
    } 
}); 

Demo

ローカルでテストすることa link to the full projectです。

しかし、フェイディングと同じ方法でトレイル内のアイテムの色を変更したいと思います。

フェイザーでこれを行うことができました染め私はmelonjsでそれを達成する方法についての手がかりがありません。

注：エフェクトは、画像の代わりに基本的な形で行うこともできます。

Answer 1

melonJSキャンバスレンダラでは、スプライトまたはレンダリング可能なオブジェクトにdrawメソッドをオーバーライドすることによって色合いを追加する必要があります。 CanvasRenderingContext2D APIには、デスティネーションキャンバスに色を付けることができるRGBA塗りつぶしなどの便利なユーティリティがあります。 melonJSには「色づき」が組み込まれていないので、一時的なキャンバスコンテキストを維持して、スプライトを非破壊的に色づけする必要があります。

最小限の例（非破壊ますが、良く透明性を処理しません）：

draw : function (renderer) { 
    renderer.save(); 

    // Call superclass draw method 
    this._super(me.Entity, "draw", [ renderer ]); // XXX: Assumes you are extending me.Entity 

    // Set the tint color to semi-transparent red 
    renderer.setColor("rgba(255, 0, 0, 0.5)"); 

    // Fill the destination rect 
    renderer.fillRect(this.pos.x, this.pos.y, this.width, this.height); 

    renderer.restore(); 
} 

より複雑なオプションは、一時的なキャンバスのコンテキストを作成するためにCanvasRenderingContext2D APIを使用しています。元のスプライトをテクスチャにコピーし、透明度を考慮しながらティントを適用します。必要な場合はclipを使用します。 melonJS WebGLのレンダラで

---

、あなただけのドロー前global renderer colorの値を変更した後、元の値を復元する必要があります。最小の例：

draw : function (renderer) { 
    renderer.save(); 

    // Set the tint color to semi-transparent red 
    renderer.setColor("rgba(255, 128, 128, 1)"); 

    // Call superclass draw method 
    this._super(me.Entity, "draw", [ renderer ]); // XXX: Assumes you are extending me.Entity 

    renderer.restore(); 
} 

これはシェーダーがソース画像にグローバルな色の値を乗算するように既に設定されているため、WebGLで機能します。上記のCanvasRendererオプションとは異なる色の結果が得られます。なぜならWebGLはあらかじめ乗算されたアルファで最も楽しいからです。 （この例では、ソースイメージ内の青と緑の成分の値が半分になり、スプライトが赤く表示されます）。

少し遊んでも大丈夫ですが、 WebGLのレンダリングをはるかにコントロールできます。本当にクレイジーなエフェクトを行う必要がある場合は、実際にコンポジットとシェーダをカスタマイズするオプションがあります。