How can I make a handdrawn text animation in Pixi.js?

Question

There's a handful of questions and answers for creating animations that mimic drawing or handwriting text. Although I've found a canvas api example, and a svg-based solution, but I haven't seen anything using Pixi.js's API. I'm a rookie with canvas and Pixi.

Here's the jsfiddle code:

var ctx = document.querySelector("canvas").getContext("2d"),
  dashLen = 220,
  dashOffset = dashLen,
  speed = 11,
  txt = "Wingardium Leviosa",
  x = 30,
  i = 0;

ctx.font = "50px cursive, TSCu_Comic, sans-serif";
ctx.lineWidth = 5;
ctx.lineJoin = "round";
ctx.globalAlpha = 2 / 3;
ctx.strokeStyle = ctx.fillStyle = "black";

(function loop() {
  ctx.clearRect(x, 0, 60, 150);
  ctx.setLineDash([dashLen - dashOffset, dashOffset - speed]); // create a long dash mask
  ctx.setLineDash([dashLen - dashOffset, dashOffset]); // create a long dash mask   
  dashOffset -= speed; // reduce dash length
  ctx.strokeText(txt[i], x, 90); // stroke letter

  if (dashOffset > 0) requestAnimationFrame(loop); // animate
  else {
    ctx.fillText(txt[i], x, 90); // fill final letter
    dashOffset = dashLen; // prep next char
    x += ctx.measureText(txt[i++]).width + ctx.lineWidth * Math.random();
    ctx.setTransform(1, 0, 0, 1, 0, 3 * Math.random()); // random y-delta
    ctx.rotate(Math.random() * 0.005); // random rotation
    if (i < txt.length) {
      setTimeout(() => {
        requestAnimationFrame(loop);
      }, 300 * Math.random())
    };
  }
})();

<canvas width=600></canvas>

As I understand it, the canvas approach I liked to above is creating the draw effect largely from setLineDash which does not exist in Pixi. I like this approach, I'm just not sure how to implement it in Pixi.

Where is your Pixi code? – Helder Sepulveda Jun 18 '20 at 14:06 — Helder Sepulveda, Jun 18 '20 at 14:06

Daniele Ricci · Answer 1 · 2020-06-14T22:46:06.503

I don't know Pixi, but a viable solution could be to use the routine in your example against an hidden canvas, then using ctx.getImageData you could grab the result, finally to use the grabbed image as a Pixi texture.

Another solution, maybe easier, but that can be only used when you don't need other Pixi effects (as an example, in a game, at game end or between two levels) you can stop the Pixi renderer and use the code you posted directly against Pixi canvas.

Hope this helps.

How can I make a handdrawn text animation in Pixi.js?

1 Answers1