JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.5.1/pixi.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div id='mainRender'>
</div>
CSS
body {
margin:0;
}
#mainRender {
left: 0px;
top: 0px;
width: 100%;
height: 100%;
min-height: 480px;
position: absolute;
min-width: 640px;
image-rendering: pixelated;
}
JavaScript
class renderer {
constructor() {
//things pixi.js use --------------------------
this.app = new PIXI.Application(800, 600, {
antialiasing: false,
transparent: false,
resolution: window.devicePixelRatio,
autoResize: true,
});
//containers where the sprites appear
this.objectContainer = new PIXI.Container();
//different pixi.js modules
this.resources = PIXI.loader.resources,
this.TextureCache = PIXI.utils.TextureCache,
this.Texture = PIXI.Texture,
this.Sprite = PIXI.Sprite,
this.Text = PIXI.Text;
}
init() {
console.log("starting the renderer");
$("#mainRender").append(this.app.view);
this.app.stage.addChild(this.objectContainer);
this.app.renderer.view.style.display = "block";
//PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST;
this.resize();
window.addEventListener("resize", this.resize);
var message = new PIXI.Text(
"Hello Pixi!",
{font: "32px sans-serif", fill: "white"}
);
message.position.set(104, 196);
this.objectContainer.addChild(message);
this.app.ticker.add(function (delta) {
//console.log("im ticking so somehow im working?")
});
};
resize() {
render.app.view.style.width = $('#mainRender').offsetWidth + "px";
render.app.view.style.height = $('#mainRender').offsetHeight + "px";
render.app.renderer.resize($('#mainRender').offsetWidth, $('#mainRender').offsetHeight);
}
}
const render = new renderer();
render.init();