JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.7.1/pixi.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pixi-layers.min.js"></script>
<script src="https://github.com/pixijs/pixi-tilemap/blob/master/src/pixi-tilemap.js"></script>
</head>
<body style="overflow: hidden;">
</body>
</html>
CSS
* {
padding: 0;
margin: 0
}
JavaScript
let app = new PIXI.Application();
app.renderer.view.style.position = "absolute";
app.renderer.view.style.display = "block";
app.renderer.autoResize = true;
app.renderer.resize(window.innerWidth, window.innerHeight);
app.renderer.backgroundColor = 0x2A2A2A;
document.body.appendChild(app.view);
var tilemap = new PIXI.tilemap.CompositeRectTileLayer(0, [], true);
for (i = 0; i < 50; i++) {
for (j = 0; j < 50; j++) {
tilemap.addFrame(PIXI.Texture.WHITE, i * 10, j * 10);
}
}
app.renderer.render(tilemap);