javascript - How to change color of a sprite over time in melonJS -

i want add trail effect moving object fade on time. i've got far:

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 (move wasd or arrow keys)

here a link full project test locally.

but want change colors of items in trail in same way fading done.

in phaser done tinting sprite, have no clue how achieve on melonjs.

note: if effect can done basic shapes instead of images work too.

with melonjs canvas renderer, you'll have add tinting overriding draw method on sprite or renderable object. canvasrenderingcontext2d api has useful utilities doing rgba fills , on can tint destination canvas. since "tinting" not built melonjs, you'll need keep temporary canvas context tint sprites non-destructively.

minimal example (non-destructive, not handle transparency well):

draw : function (renderer) {     renderer.save();      // call superclass draw method     this._super(me.entity, "draw", [ renderer ]); // xxx: assumes extending me.entity      // set tint color semi-transparent red     renderer.setcolor("rgba(255, 0, 0, 0.5)");      // fill destination rect     renderer.fillrect(this.pos.x, this.pos.y, this.width, this.height);      renderer.restore(); } 

a more involved option using canvasrenderingcontext2d api create temporary canvas context; copy original sprite texture, apply tint while respecting transparency, using clip if have to.

---

in melonjs webgl renderer, have change value of global renderer color before draw , restore original value after. minimal example:

draw : function (renderer) {     renderer.save();      // set tint color semi-transparent red     renderer.setcolor("rgba(255, 128, 128, 1)");      // call superclass draw method     this._super(me.entity, "draw", [ renderer ]); // xxx: assumes extending me.entity      renderer.restore(); } 

this works in webgl because shader setup multiply source image global color value. you'll different color result canvasrenderer option above because webgl happiest premultiplied alpha. (in example, value of blue , green components in source image reduced half, making sprite appear more red.)

feel free play bit, in general you'll far more control on rendering in webgl, , in fact have option customize compositor , shaders if need crazy effects.