次のキャンバスにテキストをフェードアウトしてフェードイン

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 **/