Added second resolution test.
This commit is contained in:
parent
72c6abf031
commit
63ebbba42b
@ -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
|
||||
// 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
|
||||
})
|
||||
.setup()
|
||||
.run()
|
||||
|
||||
app.scatterContainerFront.addChild(sprite)
|
||||
})
|
||||
},
|
||||
{ resolutionDependent: false }
|
||||
)
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user