IWMBrowser/iwmlib
IWMBrowser
/
iwmlib
4
0
Fork 0
Code Issues 6 Pull Requests Releases Wiki Activity

Added second resolution test.

This commit is contained in:
Sebastian Kupke 2022-05-05 12:29:27 +02:00
parent 72c6abf031
commit 63ebbba42b
1 changed files with 72 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

115
lib/pixi/scatter-resolution-2.html
View File

@ -11,94 +11,123 @@
</head> </head>
<body> <body>
<canvas id="canvas2" class="interactive">Canvas not supported</canvas> <canvas id="canvas" />
<script> <script>
class ScatterApp extends PIXIApp { const app = new PIXIApp({
setup() { view: canvas,
super.setup() roundPixels: true,
// Obey order in which ScatterContainer are created because the resolution: 2
// InteractionMapper register event handlers in a first come first serve })
// order .setup()
this.scatterContainerFront = new ScatterContainer(this.renderer, { app: this }) .run()
this.scatterContainerBack = new ScatterContainer(this.renderer, { app: this })
// Note that the addChild order is different because later children app.loadSprites(
// are placed in front of earlier children. [
this.scene.addChild(this.scatterContainerBack) '../examples/front__1_dpi75.png',
this.scene.addChild(this.scatterContainerFront) '../examples/front__1_dpi150.png',
'../examples/front__1_dpi300.png',
'../examples/front__1_dpi600.png',
'../examples/front__1_dpi1200.png'
],
sprites => {
app.scatterContainerFront = new ScatterContainer(app.renderer, { app })
app.scatterContainerBack = new ScatterContainer(app.renderer, { app })
app.scene.addChild(app.scatterContainerBack)
app.scene.addChild(app.scatterContainerFront)
let startScale = 0.5 let startScale = 0.5
// Add the queen to ScatterContainer one // sprite1
let sprite1 = PIXI.Sprite.from('../examples/front__1_dpi75.png') //--------------------
let sprite1 = sprites.get('../examples/front__1_dpi75.png')
sprite1.interactive = true sprite1.interactive = true
let scatter1 = new DisplayObjectScatter(sprite1, this.renderer, { let scatter1 = new DisplayObjectScatter(sprite1, app.renderer, {
x: 20, x: 20,
y: 20, y: 20,
startScale, startScale,
minScale: 0.01, minScale: 0.01,
maxScale: 5.0 maxScale: 5.0
}) })
this.scatterContainerBack.addChild(sprite1) app.scatterContainerBack.addChild(sprite1)
// Add the king to ScatterContainer two // sprite2
let sprite2 = PIXI.Sprite.from('../examples/front__1_dpi150.png') //--------------------
let sprite2 = sprites.get('../examples/front__1_dpi150.png')
sprite2.interactive = true sprite2.interactive = true
let scatter2 = new DisplayObjectScatter(sprite2, this.renderer, { let scatter2 = new DisplayObjectScatter(sprite2, app.renderer, {
x: 320, x: 320,
y: 20, y: 20,
startScale: 0.5 * startScale, startScale: 0.5 * startScale,
minScale: 0.01, minScale: 0.01,
maxScale: 5.0 maxScale: 5.0
}) })
this.scatterContainerFront.addChild(sprite2) app.scatterContainerFront.addChild(sprite2)
// Add the queen to ScatterContainer one // sprite3
let sprite3 = PIXI.Sprite.from('../examples/front__1_dpi300.png') //--------------------
let sprite3 = sprites.get('../examples/front__1_dpi300.png')
sprite3.interactive = true sprite3.interactive = true
let scatter3 = new DisplayObjectScatter(sprite3, this.renderer, { let scatter3 = new DisplayObjectScatter(sprite3, app.renderer, {
x: 620, x: 620,
y: 20, y: 20,
startScale: 0.25 * startScale, startScale: 0.25 * startScale,
minScale: 0.01, minScale: 0.01,
maxScale: 5.0 maxScale: 5.0
}) })
this.scatterContainerBack.addChild(sprite3) app.scatterContainerBack.addChild(sprite3)
// Add the king to ScatterContainer two // sprite4
let sprite4 = PIXI.Sprite.from('../examples/front__1_dpi600.png') //--------------------
let sprite4 = sprites.get('../examples/front__1_dpi600.png')
sprite4.interactive = true sprite4.interactive = true
let scatter4 = new DisplayObjectScatter(sprite4, this.renderer, { let scatter4 = new DisplayObjectScatter(sprite4, app.renderer, {
x: 920, x: 920,
y: 20, y: 20,
startScale: 0.125 * startScale, startScale: 0.125 * startScale,
minScale: 0.01, minScale: 0.01,
maxScale: 5.0 maxScale: 5.0
}) })
this.scatterContainerFront.addChild(sprite4) app.scatterContainerFront.addChild(sprite4)
// Add the king to ScatterContainer two // sprite5
let sprite5 = PIXI.Sprite.from('../examples/front__1_dpi1200.png') //--------------------
let sprite5 = sprites.get('../examples/front__1_dpi1200.png')
sprite5.interactive = true sprite5.interactive = true
let scatter5 = new DisplayObjectScatter(sprite5, this.renderer, { let scatter5 = new DisplayObjectScatter(sprite5, app.renderer, {
x: 1220, x: 1220,
y: 20, y: 20,
startScale: 0.0625 * startScale, startScale: 0.0625 * startScale,
minScale: 0.01, minScale: 0.01,
maxScale: 5.0 maxScale: 5.0
}) })
this.scatterContainerFront.addChild(sprite5) app.scatterContainerFront.addChild(sprite5)
return this
}
}
const scatterApp = new ScatterApp({ // renderTexture
view: canvas2, //--------------------
roundPixels: true, sprites.forEach(value => {
resolution: 2
}) const matrix = new PIXI.Matrix()
.setup() matrix.translate(-value.x, -value.y)
.run()
const texture = PIXI.RenderTexture.create({ width: value.width, height: value.height, resolution: 2 })
app.renderer.render(value, texture, true, matrix)
const sprite = new PIXI.Sprite(texture)
sprite.interactive = true
new DisplayObjectScatter(sprite, app.renderer, {
x: value.x,
y: 400,
minScale: 0.01,
maxScale: 5.0
})
app.scatterContainerFront.addChild(sprite)
})
},
{ resolutionDependent: false }
)
</script> </script>
</body> </body>
</html> </html>