PixiJS Marching Ants Marquee

Use TilingSprite to create "marching ants"

by Matt Karl

HTML

<script src="https://pixijs.download/dev/pixi.min.js"></script>

CSS

body {
  margin: 0;
  overflow: hidden;
}
canvas {
  display: block;
}

JavaScript

class Marquee extends PIXI.Container {
	constructor({ thickness = 2, color = 'white', dash = 2, dashSpace = 2, speed = 0.2, width = 100, height = 100, ...rest}) {
  	super(rest);
    
    this.thickness = thickness;
    this.dash = dash;
    this.dashSpace = dashSpace;
    this.speed = speed;
    this.time = 0;
    
    // Draw a 4 x 4 texture as a grid
    const spacer = (dashSpace - dash);
    const canvas =  PIXI.DOMAdapter.get().createCanvas(
    	dash + dashSpace,
      dash + dashSpace
    );
    const ctx = canvas.getContext('2d');
    ctx.fillStyle = color;
    ctx.fillRect(0, 0, dash, dash);
    const texture = PIXI.Texture.from(canvas, {
      scaleMode: PIXI.SCALE_MODES.NEAREST,
    });

    this.topLine = new PIXI.TilingSprite({
    	roundPixels: true,
    	texture,
      width,
      height: thickness
    });
    this.leftLine = new PIXI.TilingSprite({
    	roundPixels: true,
    	texture,
      width: thickness,
      height,
    });
    this.rightLine = new PIXI.TilingSprite({
    	roundPixels: true,
    	texture,
      width: thickness,
      height,
    });
    this.bottomLine = new PIXI.TilingSprite({
    	roundPixels: true,
    	texture,
      width,
      height: thickness,
    });
    this.setSize(width, height);
    this.addChild(
      this.topLine,
      this.leftLine,
      this.rightLine,
      this.bottomLine
    );
  }
  
  setSize(width, height) {
  	const l = this.thickness;
  	this.topLine.position.set(-l, -l);
    this.leftLine.position.set(-l, 0);
    this.rightLine.position.set(width, 0);
    this.bottomLine.position.set(-l, height);
    
    this.topLine.width = width + l * 2;
    this.bottomLine.width = width + l * 2;
    this.leftLine.height = height;
    this.rightLine.height = height;
  }
  
  animate() {
  	if (this.visible) {
    	this.time += this.speed;
      const size = this.dash + this.dashSpace;
      // avoid large numbers for the position as precision
      // issues will cause this to stop working
   ...