Added second resolution test.

This commit is contained in:
Sebastian Kupke 2022-05-05 12:29:27 +02:00
parent 72c6abf031
commit 63ebbba42b

View File

@ -11,94 +11,123 @@
</head>
<body>
<canvas id="canvas2" class="interactive">Canvas not supported</canvas>
<canvas id="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 })
const app = new PIXIApp({
view: canvas,
roundPixels: true,
resolution: 2
})
.setup()
.run()
// 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)
app.loadSprites(
[
'../examples/front__1_dpi75.png',
'../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
// Add the queen to ScatterContainer one
let sprite1 = PIXI.Sprite.from('../examples/front__1_dpi75.png')
// sprite1
//--------------------
let sprite1 = sprites.get('../examples/front__1_dpi75.png')
sprite1.interactive = true
let scatter1 = new DisplayObjectScatter(sprite1, this.renderer, {
let scatter1 = new DisplayObjectScatter(sprite1, app.renderer, {
x: 20,
y: 20,
startScale,
minScale: 0.01,
maxScale: 5.0
})
this.scatterContainerBack.addChild(sprite1)
app.scatterContainerBack.addChild(sprite1)
// Add the king to ScatterContainer two
let sprite2 = PIXI.Sprite.from('../examples/front__1_dpi150.png')
// sprite2
//--------------------
let sprite2 = sprites.get('../examples/front__1_dpi150.png')
sprite2.interactive = true
let scatter2 = new DisplayObjectScatter(sprite2, this.renderer, {
let scatter2 = new DisplayObjectScatter(sprite2, app.renderer, {
x: 320,
y: 20,
startScale: 0.5 * startScale,
minScale: 0.01,
maxScale: 5.0
})
this.scatterContainerFront.addChild(sprite2)
app.scatterContainerFront.addChild(sprite2)
// Add the queen to ScatterContainer one
let sprite3 = PIXI.Sprite.from('../examples/front__1_dpi300.png')
// sprite3
//--------------------
let sprite3 = sprites.get('../examples/front__1_dpi300.png')
sprite3.interactive = true
let scatter3 = new DisplayObjectScatter(sprite3, this.renderer, {
let scatter3 = new DisplayObjectScatter(sprite3, app.renderer, {
x: 620,
y: 20,
startScale: 0.25 * startScale,
minScale: 0.01,
maxScale: 5.0
})
this.scatterContainerBack.addChild(sprite3)
app.scatterContainerBack.addChild(sprite3)
// Add the king to ScatterContainer two
let sprite4 = PIXI.Sprite.from('../examples/front__1_dpi600.png')
// sprite4
//--------------------
let sprite4 = sprites.get('../examples/front__1_dpi600.png')
sprite4.interactive = true
let scatter4 = new DisplayObjectScatter(sprite4, this.renderer, {
let scatter4 = new DisplayObjectScatter(sprite4, app.renderer, {
x: 920,
y: 20,
startScale: 0.125 * startScale,
minScale: 0.01,
maxScale: 5.0
})
this.scatterContainerFront.addChild(sprite4)
app.scatterContainerFront.addChild(sprite4)
// Add the king to ScatterContainer two
let sprite5 = PIXI.Sprite.from('../examples/front__1_dpi1200.png')
// sprite5
//--------------------
let sprite5 = sprites.get('../examples/front__1_dpi1200.png')
sprite5.interactive = true
let scatter5 = new DisplayObjectScatter(sprite5, this.renderer, {
let scatter5 = new DisplayObjectScatter(sprite5, app.renderer, {
x: 1220,
y: 20,
startScale: 0.0625 * startScale,
minScale: 0.01,
maxScale: 5.0
})
this.scatterContainerFront.addChild(sprite5)
return this
}
}
app.scatterContainerFront.addChild(sprite5)
const scatterApp = new ScatterApp({
view: canvas2,
roundPixels: true,
resolution: 2
})
.setup()
.run()
// renderTexture
//--------------------
sprites.forEach(value => {
const matrix = new PIXI.Matrix()
matrix.translate(-value.x, -value.y)
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>
</body>
</html>