如何在 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);
  }
});

Demo（使用 WASD 或箭头键移动）

这里a link to the full project在本地测试。

但我想以与完成褪色相同的方式更改轨迹中项目的颜色。

在移相器中，这可以完成给精灵着色，但我不知道如何在 melonjs 上实现它。

注意：如果可以使用基本形状而不是图像来完成效果，那也可以。

Answer 1

使用 melonJS canvas 渲染器，您必须通过重写 sprite 或可渲染对象上的 draw 方法来添加着色。 CanvasRenderingContext2D API 有一些有用的实用程序可用于执行 RGBA 填充等可以为目标着色 canvas。由于 "tinting" 没有内置到 melonJS 中，你需要保留一个临时的 canvas 上下文来非破坏性地为你的精灵着色。

最小示例（非破坏性，但不能很好地处理透明度）：

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 创建临时 canvas 上下文；将原始精灵复制到纹理，在尊重透明度的同时应用色调，必要时使用 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 最喜欢预乘 alpha。（在这个例子中，源图像中的蓝色和绿色分量的值将减少一半，使精灵看起来更红。）

随意尝试一下，但一般来说，您将对 WebGL 中的渲染有更多的控制权，事实上，如果您需要制作非常疯狂的效果，您可以选择自定义合成器和着色器.

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

How to change color of a sprite over time in melonJS

javascript

html5-canvas

melonjs