93 lines
3.9 KiB
HTML
93 lines
3.9 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>
|
|
<link rel="stylesheet" href="../3rdparty/highlight/styles/default.css" />
|
|
<link rel="stylesheet" href="../../css/doctest.css" />
|
|
<script src="../../dist/iwmlib.3rdparty.js"></script>
|
|
<script src="../../dist/iwmlib.js"></script>
|
|
<script src="../../dist/iwmlib.pixi.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<h1><a href="../index.html">lib.</a><a href="index.html">pixi.</a>Scatter Resolution 2</h1>
|
|
<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)
|
|
|
|
// Add the queen to ScatterContainer one
|
|
let sprite1 = PIXI.Sprite.from('../examples/test-1280-720.png')
|
|
sprite1.interactive = true
|
|
let scatter1 = new DisplayObjectScatter(sprite1, this.renderer, {
|
|
x: 20,
|
|
y: 40,
|
|
startScale: 0.5,
|
|
minScale: 0.01,
|
|
maxScale: 5.0
|
|
})
|
|
this.scatterContainerBack.addChild(sprite1)
|
|
|
|
// Add the king to ScatterContainer two
|
|
let sprite2 = PIXI.Sprite.from('../examples/test-1280-720.png')
|
|
sprite2.interactive = true
|
|
let scatter2 = new DisplayObjectScatter(sprite2, this.renderer, {
|
|
x: 280,
|
|
y: 40,
|
|
startScale: 1,
|
|
minScale: 0.01,
|
|
maxScale: 5.0
|
|
})
|
|
this.scatterContainerFront.addChild(sprite2)
|
|
|
|
// Add the queen to ScatterContainer one
|
|
let sprite3 = PIXI.Sprite.from('../examples/test-800-450.png')
|
|
sprite3.interactive = true
|
|
let scatter3 = new DisplayObjectScatter(sprite3, this.renderer, {
|
|
x: 140,
|
|
y: 400,
|
|
startScale: 0.5,
|
|
minScale: 0.01,
|
|
maxScale: 5.0
|
|
})
|
|
this.scatterContainerBack.addChild(sprite3)
|
|
|
|
// Add the king to ScatterContainer two
|
|
let sprite4 = PIXI.Sprite.from('../examples/test-800-450.png')
|
|
sprite4.interactive = true
|
|
let scatter4 = new DisplayObjectScatter(sprite4, this.renderer, {
|
|
x: 280,
|
|
y: 400,
|
|
startScale: 1,
|
|
minScale: 0.01,
|
|
maxScale: 5.0
|
|
})
|
|
this.scatterContainerFront.addChild(sprite4)
|
|
return this
|
|
}
|
|
}
|
|
|
|
const scatterApp = new ScatterApp({
|
|
view: canvas2,
|
|
roundPixels: true,
|
|
antialias: true
|
|
})
|
|
.setup()
|
|
.run()
|
|
</script>
|
|
</body>
|
|
</html>
|