189 lines
5.7 KiB
HTML
189 lines
5.7 KiB
HTML
|
<!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="../3rdparty/all.js"></script>
|
||
|
|
|
||
|
|
<script src="../all.js"></script>
|
||
|
|
<script src="./all.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
|
||
|
|
})
|
||
|
|
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
|
||
|
|
})
|
||
|
|
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>
|