<!doctype html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>PIXI List</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="../../dist/iwmlib.3rdparty.js"></script> <script src="../3rdparty/gsap/src/uncompressed/plugins/ThrowPropsPlugin.js"></script> <script src="../../dist/iwmlib.pixi.js"></script> <script src="../../dist/iwmlib.js"></script> </head> <body onload="Doctest.run()"> <h1>List</h1> <p> Using the List class, any PIXI elements (PIXI.DisplayObject) can be included in a scrollable list. </p> <p><a href="../../doc/out/List.html">JavaScript API</a></p> <p>Let's look at some list examples:</p><br /> <canvas id="canvas" class="interactive"></canvas> <p> What you should see: Three lists, one horizontal and two vertical. </p> <script class="doctest"> const app = new PIXIApp({ view: canvas, width: 900, height: 420, transparent: false }).setup().run() app.loadTextures([ './assets/elephant-1.jpg', './assets/elephant-2.jpg', './assets/elephant-3.jpg', './assets/elephant-4.jpg', './assets/elephant-5.jpg', './assets/bamboo-1.jpg', './assets/bamboo-2.jpg', './assets/bamboo-3.jpg', './assets/bamboo-4.jpg', './assets/bamboo-5.jpg' ], textures => { // Example 1 //-------------------- const elephant1 = new PIXI.Sprite(textures.get('./assets/elephant-1.jpg')) const elephant2 = new PIXI.Sprite(textures.get('./assets/elephant-2.jpg')) const elephant3 = new PIXI.Sprite(textures.get('./assets/elephant-3.jpg')) const elephant4 = new PIXI.Sprite(textures.get('./assets/elephant-4.jpg')) const elephant5 = new PIXI.Sprite(textures.get('./assets/elephant-5.jpg')) const elephants = [elephant1, elephant2, elephant3, elephant4, elephant5] elephants.forEach(it => it.scale.set(.1, .1)) const elephantList = new List(elephants) elephantList.x = 10 elephantList.y = 10 // Example 2 //-------------------- const bamboo1 = new PIXI.Sprite(textures.get('./assets/bamboo-1.jpg')) const bamboo2 = new PIXI.Sprite(textures.get('./assets/bamboo-2.jpg')) const bamboo3 = new PIXI.Sprite(textures.get('./assets/bamboo-3.jpg')) const bamboo4 = new PIXI.Sprite(textures.get('./assets/bamboo-4.jpg')) const bamboo5 = new PIXI.Sprite(textures.get('./assets/bamboo-5.jpg')) const bamboos = [bamboo1, bamboo2, bamboo3, bamboo4, bamboo5] bamboos.forEach(it => it.scale.set(.15, .15)) const bambooList = new List(bamboos, { orientation: 'horizontal', width: 300, app }) bambooList.x = 200 bambooList.y = 10 window.bambooList = bambooList // Example 3 //-------------------- const style = {fontSize: 14, fill : 0xe7bc51} const texts = [] for (let i = 0; i < 1000; i++) { const text = new PIXI.Text(`Example Text ${i}`, style) text.interactive = true text.on('tap', event => console.log(`tap text ${i}`)) text.on('click', event => console.log(`click text ${i}`)) texts.push(text) } const textList = new List(texts, { orientation: 'vertical', height: 200, padding: 2, app }) textList.x = 200 textList.y = 200 // Add to scene //-------------------- app.scene.addChild(elephantList, bambooList, textList) }, {resolutionDependent: false}) </script> <h1>List in a Scatter</h1> <p> A PixiJS UI List is displayed inside a ScatterObject. </p> <canvas id="canvas2" class="interactive"></canvas> <p> What you should see: A ScatterObject with a list in it. </p> <script class="doctest"> const app2 = new PIXIApp({ view: canvas2, width: 900, height: 420, transparent: false }).setup().run() app2.loadTextures([ './assets/jungle.jpg', './assets/elephant-1.jpg', './assets/elephant-2.jpg', './assets/elephant-3.jpg', './assets/elephant-4.jpg', './assets/elephant-5.jpg' ], textures => { // ScatterContainer //-------------------- const scatterContainer = new ScatterContainer(app2.renderer, { showBounds: true, showPolygon: true, app: app2, stopEvents: true, claimEvents: true }) app2.scene.addChild(scatterContainer) // ScatterObject //-------------------- const jungle = new PIXI.Sprite(textures.get('./assets/jungle.jpg')) jungle.interactive = true const scatter = new DisplayObjectScatter(jungle, app2.renderer, { x: 200, y: 20, startScale: 1, minScale: 0.25, maxScale: 1 }) scatterContainer.addChild(jungle) // Example 1 //-------------------- const elephant1 = new PIXI.Sprite(textures.get('./assets/elephant-1.jpg')) const elephant2 = new PIXI.Sprite(textures.get('./assets/elephant-2.jpg')) const elephant3 = new PIXI.Sprite(textures.get('./assets/elephant-3.jpg')) const elephant4 = new PIXI.Sprite(textures.get('./assets/elephant-4.jpg')) const elephant5 = new PIXI.Sprite(textures.get('./assets/elephant-5.jpg')) const elephants = [elephant1, elephant2, elephant3, elephant4, elephant5] elephants.forEach(it => it.scale.set(.15, .15)) const elephantList = new List(elephants, { height: 200 }) elephantList.x = 10 elephantList.y = 10 // Add to scene //-------------------- jungle.addChild(elephantList) }, {resolutionDependent: false}) </script> </body>