import {Application} from 'penvas/src/application.js'

public class | source

Application

Extends:

Drawer → Application

Create a new application

Example:

let app = new Application({ container: document.getElementById('my-canvas'), width: 500, height: 300 });

Constructor Summary

Public Constructor
public	constructor(options: Object)

Member Summary

Public Members
public	background: hex Canvas background color
public	canvas: HTMLCanvasElement
public	context: CanvasRenderingContext2D
public	ctx: CanvasRenderingContext2D
public	currentLayer: Object Current layer rendered
public	height: number Canvas height (default window height)
public	io: io
public	layers: Array<Object> List of layers
public	loader: loader
public	mouse: mouse
public	options: Object Object of options
public	ticker: Ticker
public	width: number Canvas width (default window width)

Method Summary

Public Methods
public	addLayer(layer: Object, name: String) Add layer to application
public	changeLayer(name: String) Switch the current layer

Protected Methods
protected	ready() Start timer and called application ready function
protected	render(dt: number) Callback called at every frame to render models
protected	step(dt: number) Callback called at every frame to calculate models x,y positions

Inherited Summary

From class Drawer
public	ctx: CanvasRenderingContext2D
public	clearLayer() Reset canvas zone
public	debug(models: Array<Model> \| Model) Add models to debug
public	drawCircle(x: number, y: number, radius: number, size: number, color: string, start: number, end: number) Draw a circle
public	drawFillCircle(x: number, y: number, radius: number, color: string, lineSize: number, lineColor: string, start: number, end: number) Draw a fill circle
public	drawFillRect(x: number, y: number, width: number, height: number, color: string, lineSize: number, lineColor: string) Draw a fill rectangle
public	drawImage(source: *, x: number, y: number, width: number, height: number, destinationX: number, destinationY: number, destinationWidth: number, destinationHeight: number) Draw images
public	drawLine(x: number, y: number, destX: number, destY: number, size: number, color: string) Draw a line
public	drawModel(model: Model): Drawer Draw model
public	drawRect(x: number, y: number, width: number, height: number, size: number, color: string) Draw a rectangle
public	drawText(text: string, x: number, y: number, size: string, font: string, color: string, style: string, align: string, baseline: string): Object Draw a text
public	restore(): Drawer Restore last saved context
public	rotateModel(model: Model, deg: float, pivotX: number, pivotY: number): Drawer Rotate model
public	save(): Drawer Save context

Public Constructors

public constructor(options: Object) source

Override:

Drawer#constructor

Params:

Name	Type	Attribute	Description
options	Object	optional
options.container	HTMLElement	optional	HTML container (default: body element)
options.width	number	optional	canvas width (default: window width)
options.height	number	optional	canvas height (default: window height)
options.background	string	optional default: #ffffff	canvas background (default: 0xffffff)
options.create	function	optional	called to load assets
options.render	function	optional	called at every frame
options.ready	function	optional	called when application is ready (need to use loader)

Example:

const app = new Application({
  width: 500,
  height: 500,
  container: document.getElementById('my-canvas'),

  create: function() {
      loader.add('images/player-sprite.png', 'player');
  },

  ready: function() {
      this.addLayer(layer, 'home');
  }
});

Public Members

public background: hex source

Canvas background color

public canvas: HTMLCanvasElement source

public context: CanvasRenderingContext2D source

public ctx: CanvasRenderingContext2D source

Override:

Drawer#ctx

public currentLayer: Object source

Current layer rendered

public height: number source

Canvas height (default window height)

public io: io source

public layers: Array<Object> source

List of layers

public loader: loader source

public mouse: mouse source

public options: Object source

Object of options

public ticker: Ticker source

public width: number source

Canvas width (default window width)

Public Methods

public addLayer(layer: Object, name: String) source

Add layer to application

Params:

Name	Type	Attribute	Description
layer	Object
layer.create	function		called to create models
layer.step	function		called at every frame
layer.render	function		called at every frame
name	String

Example:

const layer = {
  create: function() {
      this.player = new Model(this.width / 2, this.height / 2, 100, 100);
  },

  step: function() {
      this.player.x += 1;
      if (this.player.x > this.width) {
         this.player.x = -100;
      }
  },

  render: function() {
      this.clearLayer();
      this.drawRect(this.player.x, this.player.y, this.player.width, this.player.height);
  }
};

app.addLayer('scene1', layer);

public changeLayer(name: String) source

Switch the current layer

Params:

Name	Type	Attribute	Description
name	String

Protected Methods

protected ready() source

Start timer and called application ready function

protected render(dt: number) source

Callback called at every frame to render models

Params:

Name	Type	Attribute	Description
dt	number		Delta between two frames

protected step(dt: number) source

Callback called at every frame to calculate models x,y positions

Params:

Name	Type	Attribute	Description
dt	number		Delta between two frames