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画布渲染器，您必须通过覆盖精灵或可渲染对象上的draw方法来添加着色。 CanvasRenderingContext2D API具有一些用于执行RGBA填充等的有用实用程序，可以对目标画布进行着色。由于“tinting”没有内置到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最适合使用预乘alpha。（在此示例中，源图像中蓝色和绿色分量的值将减半，使精灵看起来更红。）

随意玩一下，但一般来说，你可以更好地控制WebGL中的渲染，事实上，如果你需要做真正疯狂的效果，你可以选择自定义合成器和着色器。 / p>

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

1 个答案: