JSFiddle - React, Tailwind, and code Playground

by Bouh

HTML

<script src="https://pixijs.download/dev/pixi.min.js"></script>
<link rel="preload" href="https://cdn.jsdelivr.net/gh/pilssken/assets/fonts/monogram.ttf" as="font" type="font/ttf" crossorigin="anonymous">

CSS

@font-face {
  font-family: "monogram";
  src: url("https://cdn.jsdelivr.net/gh/pilssken/assets/fonts/monogram.ttf");
}

body {
  font-family: "monogram", serif;
  margin: 0;
  padding: 0;
}

JavaScript

/*
 Use the left and right cick on the bitmapText.
*/

//----------

const fontSize = 150;
const screenSize = [1920,1080]
const ratio = screenSize[0] / screenSize[1];

//----------

PIXI.settings.PRECISION_FRAGMENT = PIXI.PRECISION.HIGH;
PIXI.settings.ROUND_PIXELS = true;
PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST;

const app = new PIXI.Application({
  backgroundColor: 0x1099bb,
  width: screenSize[0],
  height: screenSize[1],
});



document.body.appendChild(app.view);

const style = new PIXI.TextStyle({
  fontFamily: 'monogram',
  fontSize: fontSize
});

const font = PIXI.BitmapFont.from("fontName", style);

const bitmapText = new PIXI.BitmapText('Bitmap Text test', {
  fontName: 'fontName',
  fontSize: fontSize,

});

bitmapText.interactive = true;
bitmapText.buttonMode = true;

bitmapText.on("mousedown", onclick_one);
bitmapText.on("rightdown", onclick_two);


function onclick_one() {
  app.renderer.view.style.width = 640;
  app.renderer.view.style.height = 360;
  app.renderer.resize(640, 360);
}

function onclick_two() {
  app.renderer.view.style.width = 1920;
  app.renderer.view.style.height = 1080;
  app.renderer.resize(1920, 1080);
}

app.stage.addChild(bitmapText);

requestAnimationFrame(animate);
resize();

function animate() {
  requestAnimationFrame(animate);
  app.renderer.render(app.stage);
}

function resize() {
  var w, h;
  if (window.innerWidth / window.innerHeight >= ratio) {
    w = window.innerHeight * ratio;
    h = window.innerHeight;
  } else {
    w = window.innerWidth;
    h = window.innerWidth / ratio;
  }
  app.renderer.view.style.width = w + 'px';
  app.renderer.view.style.height = h + 'px';
}
window.onresize = function(event) {
  resize();
};


// texture from generated font
for (const id in font.pageTextures) {
  document.body.appendChild(font.pageTextures[id].baseTexture.resource.source);
}