pixi-viewport

A configurable 2D camera for pixi.js v8. Try it in the playground, which shows the code for whatever you set up.

Getting started

import { Application } from 'pixi.js';
import { Viewport } from 'pixi-viewport';

const app = new Application();

await app.init({ resizeTo: window });
document.body.appendChild(app.canvas);

const viewport = new Viewport({
    screenWidth: app.screen.width,
    screenHeight: app.screen.height,
    worldWidth: 2000,
    worldHeight: 2000,
    events: app.renderer.events, // required for input
});

app.stage.addChild(viewport);
viewport.drag().pinch().wheel().decelerate();
Copy

Start with Viewport, then add plugins for the behavior you need:

• drag: pan with mouse, touch, or pen
• pinch: two-finger zoom and pan
• wheel: mouse wheel and trackpad zoom
• decelerate: keep moving after a drag
• clamp: keep the world on screen
• clampZoom: limit how far you can zoom
• bounce: spring back from the edges
• edgeScroll: scroll when the mouse is near an edge
• follow: follow a target
• snap, snapZoom, animate: move or zoom to a position over time

Each plugin's options are in the Plugin options section. Events are listed on Viewport.

Examples

• Playground: every plugin, with presets and live code
• In a scrolling page: embed a viewport without trapping the wheel or swipes
• Overlays: keep HTML panels and pixi lists from zooming the viewport