Как изменить цвет спрайта с течением времени в 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 для проверки на месте.

Но я хочу изменить цвета элементов в трейле так же, как и затухание.

В phaser это можно сделать tinting спрайт, но я понятия не имею, как добиться этого на melonjs.

Примечание: если эффект может быть сделан с основными формами вместо изображений, которые будут работать.

Answer 1

С помощью средства рендеринга canon melonJS вам нужно добавить оттенок, переопределив метод draw на вашем спрайте или визуализируемом объекте. API CanvasRenderingContext2D имеет некоторые полезные утилиты для заполнения RGBA и т. Д., Которые могут оттенять холст назначения. Так как «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(); 
} 

Более сложный вариант с использованием API CanvasRenderingContext2D, чтобы создать контекст временного холста; скопируйте исходный спрайт на текстуру, примените оттенок при соблюдении прозрачности, используя 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 является самым счастливым с премультиплексированной альфой. (В этом примере значение синих и зеленых компонентов в исходном изображении будет уменьшено наполовину, что сделает спрайт более красным.)

Не стесняйтесь играть с ним немного, но в целом вы будете получить гораздо больше контроля над рендерингом в WebGL, и на самом деле у вас есть возможность настроить композитор и шейдеры, если вам нужно делать действительно сумасшедшие эффекты.