() => { return { modules: ['https://cdnjs.cloudflare.com/ajax/libs/pixi.js/8.1.0/pixi.min.js'], body: `
`, console: true, script: () => { console.log("VOALA", PIXI) const { Application, Assets, Sprite, Texture } = PIXI; const app = new Application(); // Initialize the application app.init({ resizeTo: window }).then(()=> { // Append the application canvas to the document body document.body.appendChild(app.canvas); Assets.load([ 'https://pixijs.com/assets/bg_button.jpg', 'https://pixijs.com/assets/button.png', 'https://pixijs.com/assets/button_down.png', 'https://pixijs.com/assets/button_over.png', ]).then(()=> { const background = Sprite.from('https://pixijs.com/assets/bg_button.jpg'); background.width = app.screen.width; background.height = app.screen.height; app.stage.addChild(background); // Create some textures from an image path const textureButton = Texture.from('https://pixijs.com/assets/button.png'); const textureButtonDown = Texture.from('https://pixijs.com/assets/button_down.png'); const textureButtonOver = Texture.from('https://pixijs.com/assets/button_over.png'); const buttons = []; const buttonPositions = [175, 75, 655, 75, 410, 325, 150, 465, 685, 445]; function onButtonDown() { this.isdown = true; this.texture = textureButtonDown; this.alpha = 1; console.log("Pressed button!") } function onButtonUp() { this.isdown = false; if (this.isOver) { this.texture = textureButtonOver; } else { this.texture = textureButton; } } function onButtonOver() { this.isOver = true; if (this.isdown) { return; } this.texture = textureButtonOver; } function onButtonOut() { this.isOver = false; if (this.isdown) { return; } this.texture = textureButton; } for (let i = 0; i < 5; i++) { const button = new Sprite(textureButton); button.anchor.set(0.5); button.x = buttonPositions[i * 2]; button.y = buttonPositions[i * 2 + 1]; button.eventMode = 'static'; button.cursor = 'pointer'; button .on('pointerdown', onButtonDown) .on('pointerup', onButtonUp) .on('pointerupoutside', onButtonUp) .on('pointerover', onButtonOver) .on('pointerout', onButtonOut); app.stage.addChild(button); // Add button to array buttons.push(button); } }); }); } } }