JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://pixijs.download/dev/pixi.min.js"></script>
<script src="https://pixijs.io/layers/dist/pixi-layers.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@pixi/tilemap@latest/dist/pixi-tilemap.umd.js"></script>
CSS
body {
background: #000;
}
JavaScript
const W = 800;
const H = 600;
const PAD = 80;
const resolution = 1;
const WIDTH = W / resolution;
const HEIGHT = H / resolution;
//https://i.imgur.com/kcJBLJG.png
const app = new PIXI.Application({
width: WIDTH,
height: HEIGHT,
resolution,
});
document.body.appendChild(app.view);
// create the stage instead of container
app.stage = new PIXI.layers.Stage();
const tilemap = new PIXI.tilemap.CompositeTilemap();
tilemap.tile("https://i.imgur.com/kcJBLJG.png", 0, 0);
app.stage.addChild(tilemap);
// make container for bunnies
const bunnyWorld = new PIXI.Container();
app.stage.addChild(bunnyWorld);
const lighting = new PIXI.layers.Layer();
lighting.on('display', (element) => {
element.blendMode = PIXI.BLEND_MODES.ADD;
});
lighting.useRenderTexture = true;
lighting.clearColor = [0.5, 0.5, 0.5, 1]; // ambient gray
app.stage.addChild(lighting);
const lightingSprite = new PIXI.Sprite(lighting.getRenderTexture());
lightingSprite.blendMode = PIXI.BLEND_MODES.MULTIPLY;
app.stage.addChild(lightingSprite);
const bunnyTexture = PIXI.Texture.from('https://pixijs.io/layers/examples/assets/bunny.png');
function updateBunny(bunny) {
bunny.x += bunny.vx;
bunny.y += bunny.vy;
if (bunny.x > WIDTH + PAD) {
bunny.x -= WIDTH + 2 * PAD;
}
if (bunny.x < -PAD) {
bunny.x += WIDTH + 2 * PAD;
}
if (bunny.y > HEIGHT + PAD) {
bunny.y -= HEIGHT + 2 * PAD;
}
if (bunny.y < -PAD) {
bunny.y += HEIGHT + 2 * PAD;
}
}
function createBunny() {
const bunny = new PIXI.Sprite(bunnyTexture);
bunny.update = updateBunny;
const angle = Math.random() * Math.PI * 2;
const speed = 200.0; // px per second
bunny.vx = Math.cos(angle) * speed / 60.0;
bunny.vy = Math.sin(angle) * speed / 60.0;
bunny.position.set(Math.random() * WIDTH, Math.random() * HEIGHT);
bunny.anchor.set(0.5, 0.5);
const lightbulb = new PIXI.Graphics();
const rr = Math.random() * 0x80 | 0;
const rg = Math.random() * 0x80 | 0;
const rb = Math.random() * 0x80 | 0;
...