pixi-viewport. Check it out!
While this API does work and I used it in a few of my games, I also wrote and now useviewport.js
a 2D camera (viewport) designed to work with PIXI.js
Code Example
// create a renderer
renderer = new Renderer({color: 'rgba(0, 0, 0, 0.25)'});
// create the viewport
var viewport = new Viewport(renderer, 1000, 1000);
// move the center
viewport.moveTo(500, 500);
// zoom in
viewport.zoom(500);
Installation
npm install yy-viewport
Example
https://davidfig.github.io/viewport/
see also
- https://davidfig.github.io/debug/
- https://davidfig.github.io/update/
- https://davidfig.github.io/animate/
- https://davidfig.github.io/renderer/
API Reference
Viewport
creates a zoomable and moveable window into a scene renderer is of type github.com/davidfig/renderer stage is optional and taken from renderer if not specified
Kind: global class
- Viewport
- new Viewport(renderer, width, height, stage)
- .view(width, height, [center])
- .resize()
- .move(deltaX, deltaY)
- .moveTo(x, y)
- .moveTopLeft(x, y)
- .zoom(zoomDelta, [center])
- .zoomPinch(x, y, amount, min, max, [center])
- .zoomTo(zoomX, zoomY, [center])
- .zoomToFit(width, height, [center])
- .zoomPercent(percent, [center])
- .fitX()
- .fitY()
- .fit()
- .heightTo(height)
- .toWorldFromScreen(x, y) ⇒
object
- .toScreenFromWorld(world) ⇒
object
- .toScreenSize(original) ⇒
- .toWorldSize(original) ⇒
number
- .screenHeightInWorld() ⇒
number
- .screenWidthInWorld() ⇒
number
- .screenXtoY(x) ⇒
number
- .screenYtoX(y) ⇒
number
- .scaleGet() ⇒
number
new Viewport(renderer, width, height, stage)
Param | Type | Description |
---|---|---|
renderer | Renderer |
from yy-renderer |
width | number |
|
height | number |
|
stage | PIXI.Container |
viewport.view(width, height, [center])
Change view window for viewport
Kind: instance method of Viewport
Param | Type |
---|---|
width | number |
height | number |
[center] | PIXI.Point |
viewport.resize()
resizes view based on renderer.width
Kind: instance method of Viewport
viewport.move(deltaX, deltaY)
moves the viewport using a delta (not absolute)
Kind: instance method of Viewport
Param | Type |
---|---|
deltaX | number |
deltaY | number |
viewport.moveTo(x, y)
moves the center of the viewport to a specific coordinate
Kind: instance method of Viewport
Param | Type |
---|---|
x | number | PIXI.Point |
y | number |
viewport.moveTopLeft(x, y)
moves the top-left of the viewport to a specific coordinate
Kind: instance method of Viewport
Param | Type |
---|---|
x | number |
y | number |
viewport.zoom(zoomDelta, [center])
changes zoom by zoomDelta; height is changed based on aspect ratio
Kind: instance method of Viewport
Param | Type |
---|---|
zoomDelta | number |
[center] | PIXI.Point |
viewport.zoomPinch(x, y, amount, min, max, [center])
pinch to zoom
Kind: instance method of Viewport
Param | Type | Description |
---|---|---|
x | number |
in screen coordinates |
y | number |
in screen coordinates |
amount | number |
|
min | number |
world coordinate |
max | number |
in world coordinates |
[center] | PIXI.Point |
viewport.zoomTo(zoomX, zoomY, [center])
zooms to a specific value
Kind: instance method of Viewport
Param | Type | Description |
---|---|---|
zoomX | number |
if === 0 then zoomY is used |
zoomY | number |
only used if zoomX is set to 0 |
[center] | PIXI.Point |
viewport.zoomToFit(width, height, [center])
Kind: instance method of Viewport
Param | Type |
---|---|
width | number |
height | number |
[center] | PIXI.Point |
viewport.zoomPercent(percent, [center])
zoom by a percentage of the current zoom
Kind: instance method of Viewport
Param | Type |
---|---|
percent | number |
[center] | PIXI.Point |
viewport.fitX()
fit entire stage _width on screen
Kind: instance method of Viewport
viewport.fitY()
fit entire stage _height on screen
Kind: instance method of Viewport
viewport.fit()
fit entire stage on screen
Kind: instance method of Viewport
viewport.heightTo(height)
change _height of view area
Kind: instance method of Viewport
Param | Type |
---|---|
height | width |
object
viewport.toWorldFromScreen(x, y) ⇒ transform a world coordinate to a screen coordinate
Kind: instance method of Viewport
Returns: object
- x, y
Param | Type |
---|---|
x | number | PIXI.Point |
y | number |
object
viewport.toScreenFromWorld(world) ⇒ transform a world coordinate to a screen coordinate
Kind: instance method of Viewport
Returns: object
- x, y
Param | Type |
---|---|
world | PIXI.Point |
viewport.toScreenSize(original) ⇒
Transform a number from view size to screen size
Kind: instance method of Viewport
Returns: number
Param | Type |
---|---|
original | number |
number
viewport.toWorldSize(original) ⇒ Transform a number from screen size to view size
Kind: instance method of Viewport
Param | Type |
---|---|
original | number |
number
viewport.screenHeightInWorld() ⇒ Kind: instance method of Viewport
Returns: number
- screen _height in the world coordinate system
number
viewport.screenWidthInWorld() ⇒ Kind: instance method of Viewport
Returns: number
- screen _width in the world coordinate system
number
viewport.screenXtoY(x) ⇒ converts an x value to a y value in the screen coordinates
Kind: instance method of Viewport
Param | Type |
---|---|
x | number |
number
viewport.screenYtoX(y) ⇒ converts a y value to an x value in the screen coordinates
Kind: instance method of Viewport
Param | Type |
---|---|
y | number |
number
viewport.scaleGet() ⇒ Kind: instance method of Viewport
Returns: number
- scale
Copyright (c) 2016 YOPEY YOPEY LLC - MIT License - Documented by jsdoc-to-markdown