pixi-viewport and PIXI.Renderer

.draw() .pinch() didn't working

by Balázs Baumgartner

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.3.3/pixi.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/viewport.min.js"></script>

JavaScript

let colors = [0xCD5C5C, 0x228B22, 0x00FFFF, 0xFF0000, 0x00FF00, 0x0000FF, 0x4F02FF, 0x022B00, 0x2F8BB2, 0xBB8BFF];
let binsize = 10;
let binmargin = 1;
let xitems = 200;
let yitems = 50;

const renderer = PIXI.autoDetectRenderer({ width: 800, height: 600, transparent: true, clearBeforeRender: false });
document.body.appendChild(renderer.view);

const viewport = new Viewport.Viewport({
    screenWidth: 800,
    screenHeight: 600,
    worldWidth: xitems * (binsize + binmargin),
    worldHeight: 5 + yitems * (binsize + binmargin)
})

viewport
    .drag()
    .pinch()
    .wheel()
    .decelerate()
    .clampZoom({ minScale: 0.5, maxScale: 3 })
    
const graphics = new PIXI.Graphics();
let y = 5;
for (let k = 0; k < yitems; k++) {
	let x = 0;
	for (let i = 0; i < xitems; i++) {
		graphics.beginFill(colors[getRandomInt(9)]);
		x = x + binsize + binmargin;
		graphics.drawRect(x, y, binsize, binsize);
		graphics.endFill();
	}	
	y = y + binsize + binmargin;
}

viewport.addChild(graphics);

PIXI.Ticker.shared.add(delta => ticker(delta));

var x = 0;
var t = 1;
function ticker(delta) {
    renderer.render(viewport);
    // if (x > 500) t = !t;
    // if (x < 0) t = !t;
    // x += t ? 1 : -1;

    const graphics = new PIXI.Graphics();
    graphics.beginFill(0xFF0000);
   	graphics.drawRect(x, 125, 50, 50);
    graphics.endFill();
    renderer.render(graphics);
}

function getRandomInt(max) {
    return Math.floor(Math.random() * Math.floor(max));
}