<canvas id="main"></canvas>
* {padding: 0; margin: 0}
const app = new PIXI.Application({
view: document.getElementById('main'),
width: 512,
height: 512,
antialias: true,
transparent: false,
backgroundColor: 0x00CC99,
});
const loader = new PIXI.Loader();
loader
.add('fakeimg','https://i.imgur.com/T2vjvYl.png')
.load((loader, resource)=> {
init(resource);
})
const spritelImg1 = new PIXI.Container();
app.stage.addChild(spritelImg1);
const spritelImg2 = new PIXI.Container();
app.stage.addChild(spritelImg2);
function init(item) {
let rectangle1 = new PIXI.Rectangle(192, 128, 64, 64);
let newTex = new PIXI.Texture(item.fakeimg.texture, rectangle1);
const sprite1 = new PIXI.Sprite(newTex);
sprite1.x = 100;
sprite1.y = 100;
spritelImg1.addChild(sprite1);
let rectangle2 = new PIXI.Rectangle(64, 2, 64, 64);
let newTex2 = new PIXI.Texture(item.fakeimg.texture, rectangle2);
const sprite2 = new PIXI.Sprite(newTex2);
spritelImg2.addChild(sprite2);
}
This Pen doesn't use any external CSS resources.