Затухать текст и исчезать на следующем холсте

Question

Итак, у меня есть холст в моей игре, который отобразит какой-то текст, но я бы хотел, чтобы это было, если вы когда-либо играли Clicker Heros, когда вы нажимаете на текст, отображающий повреждение, но его затемнены и медленно и своего рода движется вверх, выведении я хотел бы, чтобы произвести тот же эффект здесь

Так что у меня есть функция, которая вызывается, когда пользователь нажимает на терминал мне нужен текст, чтобы произвести аналогичное поведение, но я очень новичок в холсте и не знаю, как это сделать. Вот мой текущий код

var canvas = document.getElementById("terminalCanvas"); 
var terminal = canvas.getContext("2d"); 

terminal.fillStyle = "#000000"; 
terminal.fillRect(0,0,150,200); 

function WriteToCanvas(){ 
    if(Game.Player.HTMLSupport == 1){ 
     var rand = Math.floor(Math.random() * 122) + 1; 
     var tag = htmltags[rand]; 
     terminal.font = "20px Comic Sans MS"; 
     terminal.fillStyle = "rgb(0,255,1)"; 
     terminal.textAlign = "center"; 
     terminal.fillText(tag, canvas.width/2, canvas.height/2); 
     ClearCanvas(); 
    } 
} 

function ClearCanvas(){ 
    terminal.clearRect(0,0,canvas.width,canvas.height); 
    terminal.fillStyle = "#000000"; 
    terminal.fillRect(0,0,150,200); 
} 

Answer 1

Система частиц - это то, что вам нужно. Пыль в верхней части кода - это то, что вам нужно для создания простой и эффективной системы частиц. Использует пул частиц. Мертвые частицы идут в бассейн, когда их время увеличивается. Когда нужны новые частицы, проверьте, нет ли мертвых в пуле, если их воскресить, а затем создайте новый. Это позволяет избежать страшного запаздывания ГХ, что системы частиц могут усложнить работу.

Возможно, вы заплатите за то, что вы не используете fillText (как это очень медленно) для рендеринга частицы, но предварительно визуализируйте и используйте drawImage. Вам решать.

К сожалению у меня нет времени для более глубокого объяснения

/*===================================================================================== 
 
ANSWER code start 
 
=====================================================================================*/ 
 

 

 
const LIFETIME = 1/180; // 180 frames 
 
const YDIST = -140; // number of pixels to move over the life 
 
const MOVE_CURVE_SHAPE = 1.5; 
 
const FADE_CURVE_SHAPE = 1.5; 
 
const FADE_CURVE_ADVANCE = 0.25; // Want the fade not to start early on the fade curve 
 
var particles = []; // array to hold live particles 
 
var particlePool = []; // to hold the dead 
 

 

 

 
// this function is called once a frame 
 
function display(){ // put code in here 
 
    ctx.setTransform(1,0,0,1,0,0); // reset transform 
 
    ctx.globalAlpha = 1;   // reset alpha 
 
    ctx.clearRect(0,0,w,h); 
 
    ctx.font = "40px Comic Sans MS"; 
 
    ctx.fillStyle = "black"; 
 
    ctx.textAlign = "center"; 
 
    ctx.textBaseline = "middle"; 
 
    ctx.fillText("Click mouse to add particles",canvas.width/2, 30); 
 
    if(mouse.buttonRaw & 1){ 
 
     var p; 
 
     if(particlePool.length){ // check if the are any dead particles in the pool 
 
      p = particlePool.shift(); // if so get the first on in out 
 
     }else{ // nothing in the pool so create a new on 
 
      p = {}; 
 
     } 
 
     // set up the paticle  
 
     var text = (Math.floor(Math.random()* 10) *100) + "!"; // the text to display 
 
     p = createParticle(mouse.x,mouse.y,text,p); // set up the particle 
 
     particles.push(p); // push it onto the active array 
 
     mouse.buttonRaw = 0; // clear mouse down; 
 
    } 
 
    
 
    updateParticles(); // update particles 
 
    renderParticles(); // and draw them 
 
    
 
} 
 

 

 
// sets up a particle x,y startung pos, text the value to display, p and object to hold the data 
 
function createParticle(x,y,text,p){ 
 
    p.life = 1; // when this get down to zero it is dead 
 
    p.x = x; 
 
    p.y = y; 
 
    p.text = text; 
 
    return p; 
 
} 
 

 

 
// ease functions 
 
var easeBell = function (x, pow) { // x 0-1 pos > 0 
 
    x = x * 2; 
 
    if(x > 1){ 
 
     x = 1 - (x - 1); 
 
     var xx = Math.pow(x,pow); 
 
     return xx/(xx + Math.pow(1 - x, pow)); 
 
    }else{ 
 
     var xx = Math.pow(x,pow); 
 
     return xx/(xx + Math.pow(1 - x, pow)); 
 
    } 
 
} 
 
var ease = function (x, pow) { // x 0-1 pos > 0 
 
    var xx = Math.pow(x,pow); 
 
    return xx/(xx + Math.pow(1 - x, pow)); 
 
} 
 
function updateParticles(){ // update the life and death of the particles 
 
    for(var i = 0; i < particles.length; i ++){ 
 
     var p = particles[i]; 
 
     p.life -= LIFETIME; 
 
     if(p.life <= 0){ // time is up this particle is dead 
 
          // move it to the grave 
 
      particlePool.push(p); 
 
      particles.splice(i,1); // remove it from the array 
 
      i -= 1; // adjust i so we dont skip any 
 
     } 
 
    } 
 
} 
 

 
function renderParticles(){ 
 
    ctx.font = "20px Comic Sans MS" 
 
    ctx.fillStyle = "#F00"; 
 
    for(var i = 0; i < particles.length; i ++){ // for each active particle 
 
     var p = particles[i]; 
 
     var fadeCurveVal = 1- p.life; 
 
     fadeCurveVal *= (1 - FADE_CURVE_ADVANCE); // scale it down 
 
     fadeCurveVal += FADE_CURVE_ADVANCE; // move it forward 
 
      
 
     ctx.globalAlpha = easeBell(fadeCurveVal,FADE_CURVE_SHAPE); // get the fade fx 
 
     var y = p.y + ease((1-p.life)/2,MOVE_CURVE_SHAPE) * YDIST * 2; 
 
     ctx.fillText(p.text,p.x,y); 
 
    } 
 
} 
 

 
      
 
/*===================================================================================== 
 
ANSWER code End 
 
=====================================================================================*/ 
 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 
/** SimpleFullCanvasMouse.js begin **/ 
 
const CANVAS_ELEMENT_ID = "canv"; 
 
const U = undefined; 
 
var w, h, cw, ch; // short cut vars 
 
var canvas, ctx, mouse; 
 
var globalTime = 0; 
 
var createCanvas, resizeCanvas, setGlobals; 
 
var L = typeof log === "function" ? log : function(d){ console.log(d); } 
 
createCanvas = function() { 
 
    var c,cs; 
 
    cs = (c = document.createElement("canvas")).style; 
 
    c.id = CANVAS_ELEMENT_ID;  
 
    cs.position = "absolute"; 
 
    cs.top = cs.left = "0px"; 
 
    cs.zIndex = 1000; 
 
    document.body.appendChild(c); 
 
    return c; 
 
} 
 
resizeCanvas = function() { 
 
    if (canvas === U) { canvas = createCanvas(); } 
 
    canvas.width = window.innerWidth; 
 
    canvas.height = window.innerHeight; 
 
    ctx = canvas.getContext("2d"); 
 
    if (typeof setGlobals === "function") { setGlobals(); } 
 
} 
 
setGlobals = function(){ cw = (w = canvas.width)/2; ch = (h = canvas.height)/2; } 
 
mouse = (function(){ 
 
    function preventDefault(e) { e.preventDefault(); } 
 
    var mouse = { 
 
     x : 0, y : 0, w : 0, alt : false, shift : false, ctrl : false, buttonRaw : 0, 
 
     over : false, // mouse is over the element 
 
     bm : [1, 2, 4, 6, 5, 3], // masks for setting and clearing button raw bits; 
 
     mouseEvents : "mousemove,mousedown,mouseup,mouseout,mouseover,mousewheel,DOMMouseScroll".split(",") 
 
    }; 
 
    var m = mouse; 
 
    function mouseMove(e) { 
 
     var t = e.type; 
 
     m.x = e.offsetX; m.y = e.offsetY; 
 
     if (m.x === U) { m.x = e.clientX; m.y = e.clientY; } 
 
     m.alt = e.altKey; m.shift = e.shiftKey; m.ctrl = e.ctrlKey; 
 
     if (t === "mousedown") { m.buttonRaw |= m.bm[e.which-1]; } 
 
     else if (t === "mouseup") { m.buttonRaw &= m.bm[e.which + 2]; } 
 
     else if (t === "mouseout") { m.buttonRaw = 0; m.over = false; } 
 
     else if (t === "mouseover") { m.over = true; } 
 
     else if (t === "mousewheel") { m.w = e.wheelDelta; } 
 
     else if (t === "DOMMouseScroll") { m.w = -e.detail; } 
 
     if (m.callbacks) { m.callbacks.forEach(c => c(e)); } 
 
     e.preventDefault(); 
 
    } 
 
    m.addCallback = function (callback) { 
 
     if (typeof callback === "function") { 
 
      if (m.callbacks === U) { m.callbacks = [callback]; } 
 
      else { m.callbacks.push(callback); } 
 
     } else { throw new TypeError("mouse.addCallback argument must be a function"); } 
 
    } 
 
    m.start = function (element, blockContextMenu) { 
 
     if (m.element !== U) { m.removeMouse(); }   
 
     m.element = element === U ? document : element; 
 
     m.blockContextMenu = blockContextMenu === U ? false : blockContextMenu; 
 
     m.mouseEvents.forEach(n => { m.element.addEventListener(n, mouseMove); }); 
 
     if (m.blockContextMenu === true) { m.element.addEventListener("contextmenu", preventDefault, false); } 
 
    } 
 
    m.remove = function() { 
 
     if (m.element !== U) { 
 
      m.mouseEvents.forEach(n => { m.element.removeEventListener(n, mouseMove); }); 
 
      if (m.contextMenuBlocked === true) { m.element.removeEventListener("contextmenu", preventDefault);} 
 
      m.element = m.callbacks = m.contextMenuBlocked = U; 
 
     } 
 
    } 
 
    return mouse; 
 
})(); 
 
var done = function(){ 
 
    window.removeEventListener("resize",resizeCanvas) 
 
    mouse.remove(); 
 
    document.body.removeChild(canvas);  
 
    canvas = ctx = mouse = U; 
 
    L("All done!") 
 
} 
 

 
resizeCanvas(); // create and size canvas 
 
mouse.start(canvas,true); // start mouse on canvas and block context menu 
 
window.addEventListener("resize",resizeCanvas); // add resize event 
 

 

 
function update(timer){ // Main update loop 
 
    globalTime = timer; 
 
    display(); // call demo code 
 
    // continue until mouse right down 
 
    if (!(mouse.buttonRaw & 4)) { requestAnimationFrame(update); } else { done(); } 
 
} 
 
requestAnimationFrame(update); 
 

 
/** SimpleFullCanvasMouse.js end **/