When I drag on an empty stage, it moves fine.
But when I do this on my children, it gets annoying.
import { Application, Sprite, Texture } from 'pixijs';
import { Viewport } from 'pixi-viewport'
const app = new Application({
backgroundAlpha: 1,
width: innerWidth, height: innerHeight,
antialias: true,
})
document.body.appendChild(app.view)
const stage = new Viewport({
screenWidth: window.innerWidth,
screenHeight: window.innerHeight,
worldHeight: 1000,
worldWidth: 1000,
})
app.stage.addChild(stage)
stage.drag().pinch().wheel().decelerate().setZoom(0.5).clampZoom({ maxScale: 2, minScale: 0.3 }).interactiveChildren = true
for (let x = 0; x < 25; x++) {
for (let y = 0; y < 25; y++) {
Spawn(x, y)
}
}
function Spawn(x, y) {
const box = Sprite.from(Texture.WHITE)
box.position.set(x * Texture.WHITE.width, y * Texture.WHITE.height)
box.scale.set(0.90)
box.on('click', () => console.log('box clicked!'))
box.interactive = true
stage.addChild(box)
}
I want to move on the boxes and click on them as well.