BitmapText vs Text Comparision

Drop Shadow + Stroke

by ShukantPal

HTML

<script src="https://pixijs.download/feature/bitmap-font-factory/pixi-legacy.js"></script>
<!DOCTYPE html>
<html>
  <head>
    <title>Pixi Boilerplate</title>
  </head>
  <body>
    <canvas id="fiddle-canvas"></canvas>
  </body>
</html>

JavaScript

const app = new PIXI.Application({
	width: 800,
  height: 800,
  view: document.getElementById('fiddle-canvas'),
  backgroundColor: 0xFBFBFB,
  resolution: window.devicePixelRatio || 1,
  autoDensity: true,
  forceCanvas: true
});

// style from https://pixijs.io/pixi-text-style/#%7B%22style%22%3A%7B%22dropShadow%22%3Atrue%2C%22dropShadowColor%22%3A%22%23707070%22%2C%22dropShadowDistance%22%3A15%2C%22fill%22%3A%5B%22black%22%2C%22red%22%2C%22%2380ff00%22%2C%22%238df9fe%22%5D%2C%22fontFamily%22%3A%22Impact%2C%20Charcoal%2C%20sans-serif%22%2C%22fontSize%22%3A90%2C%22fontStyle%22%3A%22italic%22%2C%22fontVariant%22%3A%22small-caps%22%2C%22fontWeight%22%3A%22bold%22%2C%22stroke%22%3A%22%23400080%22%2C%22strokeThickness%22%3A5%7D%7D
const font = PIXI.BitmapFont.from({
    name: 'custom',
    chars: 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ !.()',
    resolution: window.devicePixelRatio || 1
},
{
    dropShadow: true,
    dropShadowColor: "#707070",
    dropShadowDistance: 15,
    fill: [
        "black",
        "red",
        "#80ff00",
        "#8df9fe"
    ],
    fontFamily: "Impact, Charcoal, sans-serif",
    fontSize: 90,
    fontVariant: "small-caps",
    fontWeight: "bold",
    stroke: "#400080",
    strokeThickness: 10
});

const text = new PIXI.BitmapText("Hello World!", { font: 'custom' });
const text2 = new PIXI.Text("Hello World!", {
    dropShadow: true,
    dropShadowColor: "#707070",
    dropShadowDistance: 30,
    fill: [
        "black",
        "red",
        "#80ff00",
        "#8df9fe"
    ],
    fontFamily: "Impact, Charcoal, sans-serif",
    fontSize: 90,
    fontVariant: "small-caps",
    fontWeight: "bold",
    stroke: "#400080",
    strokeThickness: 10
})

text2.y = 200;

app.stage.addChild(text);

app.stage.addChild(text2)