iwmlib/lib/pixi/scatter-resolution-2.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>