pixi-viewport
A highly configurable viewport/2D camera designed to work with pixi.js.
Features include dragging, pinch-to-zoom, mouse wheel zooming, decelerated dragging, follow target, snap to point, snap to zoom, clamping, bouncing on edges, and move on mouse edges. See live example to try out all of these features.
Rationale
I wanted to improve my work on yy-viewport with a complete rewrite of a viewport/2D camera for use with pixi.js. I added options that I need in my games, including edges that bounce, deceleration, and highly configurable options to tweak the feel of the viewport.
Simple Example
const Viewport = const container = const viewport = container screenWidth: windowinnerWidth screenHeight: windowinnerHeight worldWidth: 1000 worldHeight: 1000 // activate plugins with the following plugins viewport // starts an automatic update loop for animations related to the viewport viewport start
Live Example
https://davidfig.github.io/pixi-viewport/
Installation
npm i pixi-viewport
API Reference
/** * @param * @param * @param * @param * @param * @param * @param * @param * @param * @param * @param * @param * * @emits click({screen: {x, y}, world: {x, y}, viewport}) emitted when viewport is clicked * @emits drag-start({screen: {x, y}, world: {x, y}, viewport}) emitted when a drag starts * @emits drag-end({screen: {x, y}, world: {x, y}, viewport}) emitted when a drag ends * @emits pinch-start(viewport) emitted when a pinch starts * @emits pinch-end(viewport) emitted when a pinch ends * @emits snap-start(viewport) emitted each time a snap animation starts * @emits snap-end(viewport) emitted each time snap reaches its target * @emits snap-zoom-start(viewport) emitted each time a snap-zoom animation starts * @emits snap-zoom-end(viewport) emitted each time snap-zoom reaches its target * @emits bounce-start-x(viewport) emitted when a bounce on the x-axis starts * @emits bounce.end-x(viewport) emitted when a bounce on the x-axis ends * @emits bounce-start-y(viewport) emitted when a bounce on the y-axis starts * @emits bounce-end-y(viewport) emitted when a bounce on the y-axis ends * @emits wheel({wheel: {dx, dy, dz}, viewport}) * @emits wheel-scroll(viewport) * @emits mouse-edge-start(Viewport) emitted when mouse-edge starts * @emits mouse-edge-end(Viewport) emitted when mouse-edge ends */ /** * start requestAnimationFrame() loop to handle animations; alternatively, call update() manually on each frame * @inherited from yy-loop */ // start() /** * update loop -- may be called manually or use start/stop() for Viewport to handle updates * @inherited from yy-loop */ // update() /** * stop loop * @inherited from yy-loop */ // stop() /** * use this to set screen and world sizes--needed for pinch/wheel/clamp/bounce * @param * @param * @param * @param */ resize(screenWidth, screenHeight, worldWidth, worldHeight) /** * @type */ get screenWidth() /** * @type */ get screenHeight() /** * @type */ get worldWidth() /** * @type */ get worldHeight() /** * change coordinates from screen to world * @param * @param * @returns */ toWorld() /** * change coordinates from world to screen * @param * @param * @returns */ toScreen() /** * @type */ get worldScreenWidth() /** * @type */ get worldScreenHeight() /** * @type */ get screenWorldWidth() /** * @type */ get screenWorldHeight() /** * get center of screen in world coordinates * @type {{x: number, y: number}} */ get center() /** * move center of viewport to point * @param * @param * @return */ moveCenter(/*x, y | PIXI.Point*/) /** * top-left corner * @type {{x: number, y: number} */ get corner() /** * move viewport's top-left corner; also clamps and resets decelerate and bounce (as needed) * @param * @param * @return */ moveCorner(/*x, y | point*/) /** * change zoom so the width fits in the viewport * @param * @param * @return */ fitWidth(width, center) /** * change zoom so the height fits in the viewport * @param * @param * @return */ fitHeight(height, center) /** * change zoom so it fits the entire world in the viewport * @param * @return */ fitWorld(center) /** * change zoom so it fits the entire world in the viewport * @param * @return */ fit(center) /** * zoom viewport by a certain percent (in both x and y direction) * @param * @param * @return */ zoomPercent(percent, center) /** * zoom viewport by increasing/decreasing width by a certain number of pixels * @param * @param * @return */ zoom(change, center) /** * @param * @param * @param * @param * @param * @param * @param * @param */ snapZoom(options) /** * world coordinates of the right edge of the screen * @type */ get right() /** * world coordinates of the left edge of the screen * @type */ get left() /** * world coordinates of the top edge of the screen * @type */ get top() /** * world coordinates of the bottom edge of the screen * @type */ get bottom() /** * determines whether the viewport is dirty (i.e., needs to be renderered to the screen because of a change) * @type */ get dirty() /** * removes installed plugin * @param */ removePlugin(type) /** * pause plugin * @param */ pausePlugin(type) /** * resume plugin * @param */ resumePlugin(type) /** * enable one-finger touch to drag * @param * @param * @param * @param * @param */ drag(options) /** * enable clamp to boundaries of world * NOTE: screenWidth, screenHeight, worldWidth, and worldHeight needs to be set for this to work properly * @param * @param * @param * @return */ clamp(options) /** * decelerate after a move * @param * @param * @param * @param * @return */ decelerate(options) /** * bounce on borders * NOTE: screenWidth, screenHeight, worldWidth, and worldHeight needs to be set for this to work properly * @param * @param * @param * @param * @param * @param * @return */ bounce(options) /** * enable pinch to zoom and two-finger touch to drag * NOTE: screenWidth, screenHeight, worldWidth, and worldHeight needs to be set for this to work properly * @param * @param * @param * @return */ pinch(options) /** * snap to a point * @param * @param * @param * @param * @param * @param * @param * @param * @param * @return */ snap(x, y, options) /** * follow a target * @param * @param * @param * @param * @return */ follow(target, options) /** * zoom using mouse wheel * @param * @param * @param * @param * @return */ wheel(options) /** * enable clamping of zoom to constraints * NOTE: screenWidth, screenHeight, worldWidth, and worldHeight needs to be set for this to work properly * @param * @param * @param * @param * @param * @return */ clampZoom(options) /** * Scroll viewport when mouse hovers near one of the edges or radius-distance from center of screen. * @param * @param * @param * @param * @param * @param * @param * @param * @param * @param * @param */ mouseEdges(options)
license
MIT License
(c) 2017 YOPEY YOPEY LLC by David Figatner