JSFiddle - React, Tailwind, and code Playground

by adil_invideo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.3.3/pixi.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@pixi-essentials/[email protected]/dist/texture-allocator.js"></script>

JavaScript

const aspects = {
	"480" : [852, 480],
	"720" : [1280, 720],
  "1080" : [1920, 1080],
}

const selectedAspect = aspects["480"];
const app = new PIXI.Application({
  width: selectedAspect[0],
  height: selectedAspect[1],
  backgroundColor: 0x1099bb,
  antialias: true,
  forceFXAA: true,
});

document.body.appendChild(app.view);


const container = new PIXI.Container();

app.stage.addChild(container);

const url = 'https://d1efk3962q5p8g.cloudfront.net/480x480/_1616479253057.png';
const url2 = 'https://d1efk3962q5p8g.cloudfront.net/480x480/_1616479232096.png';
// Create a new texture

const sprite = PIXI.Sprite.from(url2);
sprite.width = 96.66666666666664;
sprite.height = 109.828125;
sprite.x = 50;

const sprite2 = PIXI.Sprite.from(url);
sprite2.x = 300;
sprite2.width = 111.13043478260869;
sprite2.height = 110.14492753623193;

app.stage.addChild(sprite);
app.stage.addChild(sprite2);


const allocator = new AtlasAllocator();