<!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="canvas" />
<script>
const app = new PIXIApp({
view: canvas,
roundPixels: true,
resolution: 2
})
.setup()
.run()
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
// sprite1
//--------------------
let sprite1 = sprites.get('../examples/front__1_dpi75.png')
sprite1.interactive = true
let scatter1 = new DisplayObjectScatter(sprite1, app.renderer, {
x: 20,
y: 20,
startScale,
minScale: 0.01,
maxScale: 5.0
})
app.scatterContainerBack.addChild(sprite1)
// sprite2
//--------------------
let sprite2 = sprites.get('../examples/front__1_dpi150.png')
sprite2.interactive = true
let scatter2 = new DisplayObjectScatter(sprite2, app.renderer, {
x: 320,
y: 20,
startScale: 0.5 * startScale,
minScale: 0.01,
maxScale: 5.0
})
app.scatterContainerFront.addChild(sprite2)
// sprite3
//--------------------
let sprite3 = sprites.get('../examples/front__1_dpi300.png')
sprite3.interactive = true
let scatter3 = new DisplayObjectScatter(sprite3, app.renderer, {
x: 620,
y: 20,
startScale: 0.25 * startScale,
minScale: 0.01,
maxScale: 5.0
})
app.scatterContainerBack.addChild(sprite3)
// sprite4
//--------------------
let sprite4 = sprites.get('../examples/front__1_dpi600.png')
sprite4.interactive = true
let scatter4 = new DisplayObjectScatter(sprite4, app.renderer, {
x: 920,
y: 20,
startScale: 0.125 * startScale,
minScale: 0.01,
maxScale: 5.0
})
app.scatterContainerFront.addChild(sprite4)
// sprite5
//--------------------
let sprite5 = sprites.get('../examples/front__1_dpi1200.png')
sprite5.interactive = true
let scatter5 = new DisplayObjectScatter(sprite5, app.renderer, {
x: 1220,
y: 20,
startScale: 0.0625 * startScale,
minScale: 0.01,
maxScale: 5.0
})
app.scatterContainerFront.addChild(sprite5)
// 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>