@birbhouse/gamestats

Track performance stats in your game.

Example

For a live example click here

Features

• FPS counter, shows the average / min / max for the visible history
• MS milliseconds that where needed to render the last frame
• Memory usage maximum (reserved) and allocated memory for the context (Chrome only)
• Custom graphs

Installation

With npm do:

npm install @birbhouse/gamestats

Usage

import { GameStats } from '@birbhouse/gamestats'

const stats = new GameStats()

document.body.appendChild( stats.dom )

function animate() {
	stats.begin()
	// game update goes here

	stats.begin('physics')
	// the graph will deterministically assign a color based on the label
	physics()
	stats.end('physics')

	stats.begin('render', '#6cc644')
	// optional second color parameter
	render()
	stats.end('render')

	stats.end()

	requestAnimationFrame( animate )
}

requestAnimationFrame( animate )

See also this code example

Optional configuration

const config = {
	autoPlace:true, /* auto place in the dom */
	targetFPS: 60, /* the target max FPS */
	redrawInterval: 50, /* the interval in MS for redrawing the FPS graph */
	maximumHistory: 100, /* the length of the visual graph history in frames */
	scale: 1.0, /* the scale of the canvas */
	memoryUpdateInterval: 1000, /* the interval for measuring the memory */
	memoryMaxHistory: 60 * 10, /* the max amount of memory measures */

	// Styling props
	FONT_FAMILY: 'Arial',
	COLOR_FPS_BAR: '#34cfa2',
	COLOR_FPS_AVG: '#FFF',
	COLOR_TEXT_LABEL: '#FFF',
	COLOR_TEXT_TO_LOW: '#eee207',
	COLOR_TEXT_BAD: '#d34646',
	COLOR_TEXT_TARGET: '#d249dd',
	COLOR_BG: '#333333',
}

const stats = new GameStats(config);

Prior Art

• gamestats.js was originally written by ErikSom
• Stats.js by mr doob
• Unity Graphy by tayx94