viewport.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 |

viewport.toWorldFromScreen(x, y) ⇒ object

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 |

viewport.toScreenFromWorld(world) ⇒ object

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 |

viewport.toWorldSize(original) ⇒ number

Transform a number from screen size to view size

Kind: instance method of Viewport

| Param | Type | | --- | --- | | original | number |

viewport.screenHeightInWorld() ⇒ number

Kind: instance method of Viewport
Returns: number - screen _height in the world coordinate system

viewport.screenWidthInWorld() ⇒ number

Kind: instance method of Viewport
Returns: number - screen _width in the world coordinate system

viewport.screenXtoY(x) ⇒ number

converts an x value to a y value in the screen coordinates

Kind: instance method of Viewport

| Param | Type | | --- | --- | | x | number |

viewport.screenYtoX(y) ⇒ number

converts a y value to an x value in the screen coordinates

Kind: instance method of Viewport

| Param | Type | | --- | --- | | y | number |

viewport.scaleGet() ⇒ number

Kind: instance method of Viewport
Returns: number - scale

Copyright (c) 2016 YOPEY YOPEY LLC - MIT License - Documented by jsdoc-to-markdown