<!doctype html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>PIXI Flippable</title> <link rel="stylesheet" href="../3rdparty/highlight/styles/default.css"> <link rel="stylesheet" href="../../css/doctest.css"> <script src="../3rdparty/highlight/highlight.pack.js"></script> <script src="../3rdparty/all.js"></script> <script src="../all.js"></script> <script src="./all.js"></script> </head> <body onload="Doctest.run()"> <h1>Flippable</h1> <p> Using the Flippable class, any PIXI element (PIXI.DisplayObject) can be back-mounted (which can include another PIXI.DisplayObject), and turning it over to the back can be adjusted by many parameters in speed and behavior. </p> <p><a href="../../doc/out/Flippable.html">JavaScript API</a></p> <p>Let's look at some flippable examples:</p><br /> <canvas id="canvas" class="interactive"></canvas> <p> What you should see: Six flippable elements and one button. </p> <script class="doctest"> const app = new PIXIApp({ view: canvas, width: 900, height: 420, transparent: false }).setup().run() app.loadTextures([ './assets/fruit-1.jpg', './assets/fruit-2.jpg', './assets/fruit-3.jpg', './assets/fruit-4.jpg', './assets/fruit-5.jpg', './assets/fruit-6.jpg', './assets/fruit-7.jpg', './assets/fruit-8.jpg', './assets/fruit-9.jpg', './assets/fruit-10.jpg' ], textures => { // Example 1 //-------------------- const sprite1 = new PIXI.Sprite(textures.get('./assets/fruit-1.jpg')) sprite1.position.set(10, 10) sprite1.scale.set(.2, .2) const sprite2 = new PIXI.Sprite(textures.get('./assets/fruit-2.jpg')) const flippable1 = new Flippable(sprite1, sprite2, app.renderer) // Example 2 //-------------------- const sprite3 = new PIXI.Sprite(textures.get('./assets/fruit-3.jpg')) sprite3.position.set(10, 120) sprite3.scale.set(.2, .2) const sprite4 = new PIXI.Sprite(textures.get('./assets/fruit-4.jpg')) const flippable2 = new Flippable(sprite3, sprite4, app.renderer, { duration: 6, ease: Bounce.easeOut, shadow: true, eulerX: .8 }) // Example 3 //-------------------- const sprite5 = new PIXI.Sprite(textures.get('./assets/fruit-5.jpg')) sprite5.position.set(10, 240) sprite5.scale.set(.2, .2) const sprite6 = new PIXI.Sprite(textures.get('./assets/fruit-6.jpg')) sprite6.position.set(400, 180) sprite6.scale.set(.3, .3) sprite6.rotation = .3 const flippable3 = new Flippable(sprite5, sprite6, app.renderer, { duration: 4, ease: Circ.easeInOut, shadow: true, useBackTransforms: true }) // Example 4 //-------------------- const sprite7 = new PIXI.Sprite(textures.get('./assets/fruit-7.jpg')) sprite7.position.set(700, 10) sprite7.scale.set(.2, .2) const sprite8 = new PIXI.Sprite(textures.get('./assets/fruit-8.jpg')) sprite8.position.set(550, 180) sprite8.scale.set(.15, .15) sprite8.skew.set(0, .1) const flippable4 = new Flippable(sprite7, sprite8, app.renderer, { duration: 5, ease: Elastic.easeOut.config(1, 0.3), transformEase: Elastic.easeOut.config(1, 0.3), shadow: true, focus: 600, near: 50, far: 10000, useBackTransforms: true }) // Example 5 //-------------------- const sprite9 = new PIXI.Sprite(textures.get('./assets/fruit-9.jpg')) sprite9.position.set(700, 130) sprite9.scale.set(.2, .2) sprite9.skew.set(.2, .2) const sprite10 = new PIXI.Sprite(textures.get('./assets/fruit-10.jpg')) sprite10.position.set(700, 130) sprite10.scale.set(.2, .2) sprite10.skew.set(-.2, -.2) const flippable5 = new Flippable(sprite9, sprite10, app.renderer, { duration: 2, useBackTransforms: true }) // Example 6 //-------------------- const graphic1 = new PIXI.Graphics() graphic1.position.set(700, 280) graphic1.beginFill(0x6b6acf, 1) graphic1.drawRect(0, 0, 160, 100) graphic1.lineStyle(1, 0xe7bc51, 1) for (let i = 0; i < 100; i++) { graphic1.drawCircle(Math.random() * 160, Math.random() * 100, 2) } const graphic2 = new PIXI.Graphics() graphic2.position.set(700, 280) graphic2.beginFill(0xcedc9c, 1) graphic2.drawRect(0, 0, 160, 100) for (let i = 0; i < 1000; i++) { graphic2.beginFill(Math.random() * 0xffffff << 0, 1) graphic2.lineStyle(1, Math.random() * 0xffffff << 0, 1) graphic2.drawCircle(Math.random() * 160, Math.random() * 100, 2) } const flippable6 = new Flippable(graphic1, graphic2, app.renderer, { eulerX: -.3 }) // Button //-------------------- const button = new Button({ x: 400, y: 10, label: 'Toggle', type: 'checkbox', action: e => { flippable1.toggle() flippable2.toggle() flippable3.toggle() flippable4.toggle() flippable5.toggle() flippable6.toggle() } }) app.scene.addChild(sprite1, sprite3, sprite5, sprite7, sprite9, graphic1, button) }, {resolutionDependent: false}) </script> </body>