105 lines
4.3 KiB
HTML
105 lines
4.3 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||
|
|
|
||
|
|
<title>PIXI Scatter Resolution Doctest</title>
|
||
|
|
|
||
|
|
<script src="../../dist/iwmlib.3rdparty.js"></script>
|
||
|
|
<script src="../../dist/iwmlib.js"></script>
|
||
|
|
<script src="../../dist/iwmlib.pixi.js"></script>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<canvas id="canvas2" class="interactive">Canvas not supported</canvas>
|
||
|
|
<script>
|
||
|
|
class ScatterApp extends PIXIApp {
|
||
|
|
setup() {
|
||
|
|
super.setup()
|
||
|
|
// Obey order in which ScatterContainer are created because the
|
||
|
|
// InteractionMapper register event handlers in a first come first serve
|
||
|
|
// order
|
||
|
|
this.scatterContainerFront = new ScatterContainer(this.renderer, { app: this })
|
||
|
|
this.scatterContainerBack = new ScatterContainer(this.renderer, { app: this })
|
||
|
|
|
||
|
|
// Note that the addChild order is different because later children
|
||
|
|
// are placed in front of earlier children.
|
||
|
|
this.scene.addChild(this.scatterContainerBack)
|
||
|
|
this.scene.addChild(this.scatterContainerFront)
|
||
|
|
|
||
|
|
let startScale = 0.5
|
||
|
|
|
||
|
|
// Add the queen to ScatterContainer one
|
||
|
|
let sprite1 = PIXI.Sprite.from('../examples/front__1_dpi75.png')
|
||
|
|
sprite1.interactive = true
|
||
|
|
let scatter1 = new DisplayObjectScatter(sprite1, this.renderer, {
|
||
|
|
x: 20,
|
||
|
|
y: 20,
|
||
|
|
startScale,
|
||
|
|
minScale: 0.01,
|
||
|
|
maxScale: 5.0
|
||
|
|
})
|
||
|
|
this.scatterContainerBack.addChild(sprite1)
|
||
|
|
|
||
|
|
// Add the king to ScatterContainer two
|
||
|
|
let sprite2 = PIXI.Sprite.from('../examples/front__1_dpi150.png')
|
||
|
|
sprite2.interactive = true
|
||
|
|
let scatter2 = new DisplayObjectScatter(sprite2, this.renderer, {
|
||
|
|
x: 320,
|
||
|
|
y: 20,
|
||
|
|
startScale: 0.5 * startScale,
|
||
|
|
minScale: 0.01,
|
||
|
|
maxScale: 5.0
|
||
|
|
})
|
||
|
|
this.scatterContainerFront.addChild(sprite2)
|
||
|
|
|
||
|
|
// Add the queen to ScatterContainer one
|
||
|
|
let sprite3 = PIXI.Sprite.from('../examples/front__1_dpi300.png')
|
||
|
|
sprite3.interactive = true
|
||
|
|
let scatter3 = new DisplayObjectScatter(sprite3, this.renderer, {
|
||
|
|
x: 620,
|
||
|
|
y: 20,
|
||
|
|
startScale: 0.25 * startScale,
|
||
|
|
minScale: 0.01,
|
||
|
|
maxScale: 5.0
|
||
|
|
})
|
||
|
|
this.scatterContainerBack.addChild(sprite3)
|
||
|
|
|
||
|
|
// Add the king to ScatterContainer two
|
||
|
|
let sprite4 = PIXI.Sprite.from('../examples/front__1_dpi600.png')
|
||
|
|
sprite4.interactive = true
|
||
|
|
let scatter4 = new DisplayObjectScatter(sprite4, this.renderer, {
|
||
|
|
x: 920,
|
||
|
|
y: 20,
|
||
|
|
startScale: 0.125 * startScale,
|
||
|
|
minScale: 0.01,
|
||
|
|
maxScale: 5.0
|
||
|
|
})
|
||
|
|
this.scatterContainerFront.addChild(sprite4)
|
||
|
|
|
||
|
|
// Add the king to ScatterContainer two
|
||
|
|
let sprite5 = PIXI.Sprite.from('../examples/front__1_dpi1200.png')
|
||
|
|
sprite5.interactive = true
|
||
|
|
let scatter5 = new DisplayObjectScatter(sprite5, this.renderer, {
|
||
|
|
x: 1220,
|
||
|
|
y: 20,
|
||
|
|
startScale: 0.0625 * startScale,
|
||
|
|
minScale: 0.01,
|
||
|
|
maxScale: 5.0
|
||
|
|
})
|
||
|
|
this.scatterContainerFront.addChild(sprite5)
|
||
|
|
return this
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const scatterApp = new ScatterApp({
|
||
|
|
view: canvas2,
|
||
|
|
roundPixels: true,
|
||
|
|
resolution: 2
|
||
|
|
})
|
||
|
|
.setup()
|
||
|
|
.run()
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|