Skip to content

Javascript performance monitor / game stats library inspired by Unity's graphy

Notifications You must be signed in to change notification settings

ErikSom/gamestats

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

26 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

npm version Follow me on Twitter:Eriks Twitter

gamestats.js

Example

Image of Gamestats

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
  • Extensions (e.g. VRAM stats for PIXI)

Installation

With npm do:

npm install gamestats.js

Usage

var 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 configurations

var 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',
}

var stats = new GameStats(config);

Extensions

It's easy to add extensions to GameStats. To enable an extension use:

var stats = new GameStats();
stats.enableExtension(<name>, [<extension properties>])

** Make sure to put the extension module (e.g. gamestats-pixi.module.js) next to your source file**

Pixi Integration

GameStats supports integration directly with PIXI to display VRAM usage and other helpful information:

Image of PIXI integration

For a live example click here

var stats = new GameStats();
document.body.appendChild( stats.dom );

// enableExtension(<name>, [<reference to PIXI>, <reference to your pixi app>, <options *optional>);
stats.enableExtension('pixi', [PIXI, app]);

// OR addtionally with options
const options = {
	maxMemorySize: 350, // GPU VRAM limit ( the max of the texture memory graph )
	COLOR_MEM_TEXTURE: '#8ddcff', // the display color of the texture memory size in the graph
	COLOR_MEM_BUFFER: '#ffd34d', // the display color of buffer memory size in the graph
}
stats.enableExtension('pixi', [PIXI, app, options]);

See also this code example

Inspiration

Stats.js (mr doob)

Unity Graphy (tayx94)

License

(MIT)

Copyright (c) 2019 Erik Sombroek

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

About

Javascript performance monitor / game stats library inspired by Unity's graphy

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •