MSDFText sample

by Shen Yiming

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.7.0/pixi.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.1/dat.gui.min.js"></script>
<script src="https://github.com/soimy/pixi-msdf-text/releases/download/0.0.1/pixi-msdf-text.min.js"></script>
<p id="anno"> &uarr; Click &amp; Drag to Rotate/Scale &uarr;</p>

CSS

body { margin: 0px; padding: 0px; background: #AAA; align-items: center; justify-content: center; }
canvas { display: block; position: absolute; left:0px; top:0px; width: 100%; height: 100% }
p#anno { text-align: center; width: 100%; position: absolute; bottom: 40px; color:#051855; font-family: sans-serif; }

JavaScript

const options = { 
    width: window.innerWidth,
    height: window.innerHeight,
    resolution: window.devicePixelRatio,
    transparent: true
}
const app = new PIXI.Application(options);
document.body.appendChild(app.view);
app.stop();

const resourceList = [
    "https://raw.githubusercontent.com/soimy/pixi-msdf-text/master/demo/assets/fonts/DimboR.fnt"
];
app.loader.add(resourceList).load(onAssetsLoaded);

let sampleText;
let isDrag = false;
let lastPointerVector, lastRot, lastScale;
let textControl;

function onAssetsLoaded() {
    const textOptions = {
        fontFace: "DimboR",
        fontSize: 150,
        fillColor: 0xFFAA22,
        weight: 0.4,
        strokeThickness: 0.3,
        strokeColor: 0x051855,
        dropShadow: true,
        dropShadowColor: 0x000000,
        dropShadowOffset: new PIXI.Point(0.004, 0.004),
        dropShadowAlpha: 0.4,
        dropShadowBlur: 0.1,
        align: "center",
        letterSpacing: 0,
        baselineOffset: 8,
        // debugLevel: 3
    }
    sampleText = new MSDFText.MSDFText("PixiJS support\nMSDF BitmapFont", textOptions);
    app.stage.addChild(sampleText);
    sampleText.pivot.set(sampleText.textWidth / 2, sampleText.textHeight / 2);
    sampleText.position.set(app.screen.width / 2, app.screen.height / 2);
    app.start();

    sampleText.interactive = true;
    sampleText.buttonMode = true;

    sampleText.on("pointerdown", e => {
        const pos = e.data.getLocalPosition(app.stage);
        lastPointerVector = new PIXI.Point(pos.x - sampleText.x, pos.y - sampleText.y);
        lastRot = sampleText.rotation;
        lastScale = sampleText.scale.x;
        isDrag = true;
        sampleText.tint = 0xAAAAAA;
    });

    sampleText.on("pointermove", e => {
        if (!isDrag) return;
        const p = e.data.getLocalPosition(app.stage);
        const pointerVector = new PIXI.Point(p.x - sampleText.x, p.y - sampleText.y);
        sampleText.rotation = lastRot - getRadsBetween(lastPointerVector,...