<!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><a href="../index.html">lib.</a><a href="index.html">pixi.</a>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(0.1, 0.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(0.15, 0.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(0.15, 0.15))
const elephantList = new List(elephants, {
height: 200
})
elephantList.x = 10
elephantList.y = 10
// Add to scene
//--------------------
jungle.addChild(elephantList)
},
{ resolutionDependent: false }
)
</script>
</body>
</html>