如何在melonJS中随时间改变精灵的颜色

Question

我想添加一些跟踪效果，一个移动的物体，将随着时间的推移。到目前为止，这就是我所得到的：

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或箭头键移动)

这里是用于本地测试的指向整个项目的链接。

但是我想用褪色的方式改变线索中物品的颜色。

在相位，这可以做的着色雪碧，但我不知道如何实现这一点上的甜瓜。

注意:如果效果可以用基本形状来完成，而不是图像，那么效果也会很好。

Answer 1

使用melonJS画布渲染器，您必须通过重写sprite或renderable对象上的绘图方法来添加着色。RGBA有一些有用的实用工具来执行CanvasRenderingContext2D填充，等等，这些实用工具可以在目标画布上着色。由于“着色”不是在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创建临时画布上下文；将原始的sprite复制到纹理中，在尊重透明度的情况下应用颜色，必要时使用剪辑。

在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中有效，因为着色器已经设置为将源图像乘以全局颜色值。您将从上面的CanvasRenderer选项中得到不同的颜色结果，因为WebGL是乘前α最快乐的。(在本例中，源图像中的蓝色和绿色组件的值将减少一半，从而使雪碧看起来更红。)

您可以随意使用它，但是通常您可以更多地控制WebGL中的呈现，而且实际上，如果您需要执行非常疯狂的效果，您可以选择自定义排序器和着色器。