import {Viewport} from 'penvas/src/viewport.js'

public class | source

Viewport

Extends:

EventEmitter → Model → Viewport

Create a new Viewport

Example:

const app = new Application({ width: 200, height: 200 });
const player = new Sprite(...);
const world = new Container(...);
const viewport = new Viewport(0, 0, app.canvas, 1, 1, app.width / 2, app.height / 2);

viewport.follow(player, world);
viewport.drawImage(world);

Constructor Summary

Public Constructor
public	constructor(x: number, y: number, canvas: CanvasRenderingContext2D, scaleX: number, scaleY: number, deadZoneX: number, deadZoneY: number)

Member Summary

Public Members
public	canvas: CanvasRenderingContext2D
public	ctx: *
public	deadZoneX: number
public	deadZoneY: number
public	scaleX: number
public	scaleY: number
public	x: *
public	y: *

Method Summary

Public Methods
public	drawImage(source: Drawer, x: number, y: number, width: number, height: number) Drawn image from source into canvas with viewport
public	follow(target: Object, world: Object) Viewport follow target into world

Inherited Summary

From class EventEmitter
protected	registered: Array List of registers
public	dispatch(event: String, args: mixed) Dispatch event
public	on(event: String, callback: function, context: mixed) Listen event

From class Model
public static	deserialize(data: Object): Model
public get	hitbox: Object: {"x": , "y": , "width": , "height": , "radius": *}
public set	hitbox(hitbox: Object): *
public get	x: number: *
public set	x: *
public get	y: number: *
public set	y: *
public	collision: boolean
public	height: number
public	parent: {}
public	width: number
public	render(ctx: RenderingContext, drawer: Drawer)
public	serialize(): Object
public	step(dt: number)

Public Constructors

public constructor(x: number, y: number, canvas: CanvasRenderingContext2D, scaleX: number, scaleY: number, deadZoneX: number, deadZoneY: number) source

Override:

Model#constructor

Params:

Name	Type	Attribute	Description
x	number		x position of viewport into world
y	number		y position of viewport into world
canvas	CanvasRenderingContext2D		canvas where to draw image
scaleX	number	optional default: 1
scaleY	number	optional default: 1
deadZoneX	number	optional default: 0	x position of dead zone (where viewport move when following target)
deadZoneY	number	optional default: 0	y position of dead zone (where viewport move when following target)

Public Members

public canvas: CanvasRenderingContext2D source

public ctx: * source

public deadZoneX: number source

public deadZoneY: number source

public scaleX: number source

public scaleY: number source

public x: * source

Override:

Model#x

public y: * source

Override:

Model#y

Public Methods

public drawImage(source: Drawer, x: number, y: number, width: number, height: number) source

Drawn image from source into canvas with viewport

Params:

Name	Type	Attribute	Description
source	Drawer
x	number	optional default: 0
y	number	optional default: 0
width	number	optional default: null
height	number	optional default: null

public follow(target: Object, world: Object) source

Viewport follow target into world

Params:

Name	Type	Attribute	Description
target	Object
world	Object