<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: 0X000000,
});
const datGuiData = function() {
this.speed = 0.05;
};
const datGuiTools = new datGuiData();
const gui = new dat.GUI();
gui.add(datGuiTools, 'speed', 0.00, 1);
AnimatedHex('top');
function AnimatedHex(status) {
let alienImages = ["https://i.imgur.com/xAVBpW0.png","https://i.imgur.com/gs9NiFX.png"];
let textureArray = [];
for (let i=0; i < alienImages.length; i++)
{
let texture = PIXI.Texture.from(alienImages[i]);
textureArray.push(texture);
};
let animatedSprite = new PIXI.AnimatedSprite(textureArray);
app.stage.addChild(animatedSprite);
animatedSprite.play();
app.ticker.add((delta) => {
animatedSprite.animationSpeed = datGuiTools.speed;
})
}
This Pen doesn't use any external CSS resources.