pixi-fps-counter

Pixi JS FPS Counter

This counter works well with Pixi JS v.7. PixiFpsCounter class extends basic PixiJS Container class. Thus, it has all the properties that Container class has. E.g., you can alter its alpha, position properties the same way you do with your DisplayObjects.

Table of Contents

• Installation
• Usage
• Usage with options

Installation

npm install pixi-fps-counter

Usage

The only required argument you should pass to PixiFpsCounter constructor is a Ticker:

import { PixiFpsCounter } from 'pixi-fps-counter';

const counter = new PixiFpsCounter(pixiApp.ticker);
pixiApp.stage.addChild(counter);

Usage with options

Pass options object as a second argument if you need to adjust some additional parameters.

import { TextStyle } from '@pixi/text';
import { PixiFpsCounter, FpsCounterOptions } from 'pixi-fps-counter';

const options: FpsCounterOptions = {
  backgroundColor: 0x9f3a0d,
  backgroundPadding: 7,
  dragParent: pixiApp.stage,
  textStyle: new TextStyle({
    fill: '#fff7db',
    fontSize: 48,
    fontWeight: 'bolder',
    strokeThickness: 9,
  }),
  updateCoefficient: 10,
};
const counter = new PixiFpsCounter(pixiApp.ticker, options);
pixiApp.stage.addChild(counter);

Here's the table with possible options:

Parameter	Type	Default Value	Comment
backgroundColor	number	0x000000
backgroundPadding	number	10	Background padding value in pixels
dragParent	DisplayObject	undefined	A PixiJS DisplayObject inside which it would be possible to drag and drop the counter. If this parameter is passed PixiFpsCounter initiates Drag And Drop functionality.
textStyle	TextStyle	Observe the table below	A PixiJS TextStyle instance.
updateCoefficient	number	50	The value that represents the frequency of counter update

textStyle default values are :

Parameter	Default Value
fill	'#00ff00'
fontSize	24
fontWeight	'bold'
strokeThickness	1