2

時間の経過とともにフェードする移動オブジェクトにトレイル エフェクトを追加したいと考えています。これは私がこれまでに得たものです：

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);
  }
});

デモ（WASDまたは矢印キーで移動）

ローカルでテストするための完全なプロジェクトへのリンクを次に示します。

しかし、フェードが行われるのと同じ方法で、トレイル内のアイテムの色を変更したいと思います。

フェイザーでは、これはスプライトに色を付けることができますが、 melonjsでそれを達成する方法についてはわかりません。

注: 効果がイメージの代わりに基本的な形状で実行できる場合も機能します。

4

1 に答える 1

2

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 を使用して一時的なキャンバス コンテキストを作成することです。元のスプライトをテクスチャにコピーし、必要に応じてクリップを使用して、透明度を考慮しながらティントを適用します。

melonJS WebGL レンダラーでは、描画前にグローバル レンダラー カラーの値を変更し、描画後に元の値に戻すだけで済みます。最小限の例:

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 で機能します。これは、シェーダーがソース イメージにグローバル カラー値を乗算するように既に設定されているためです。WebGL はあらかじめ乗算されたアルファに最も適しているため、上記の CanvasRenderer オプションとは異なる色の結果が得られます。(この例では、ソース イメージの青と緑のコンポーネントの値が半分に減らされ、スプライトがより赤く表示されます。)

少し自由に遊んでみてください。しかし、一般的には、WebGL でのレンダリングをはるかに細かく制御できます。実際、非常にクレイジーな効果を行う必要がある場合は、コンポジターとシェーダーをカスタマイズするオプションがあります。

于 2016-07-15T23:05:27.273 に答える