1 | # micro-fps
|
2 |
|
3 | ![Node](https://img.shields.io/node/v/micro-fps.svg?style=flat-square)
|
4 | [![NPM](https://img.shields.io/npm/v/micro-fps.svg?style=flat-square)](https://www.npmjs.com/package/micro-fps)
|
5 | [![Travis](https://img.shields.io/travis/victornpb/micro-fps/master.svg?style=flat-square)](https://travis-ci.org/victornpb/micro-fps)
|
6 | [![David](https://img.shields.io/david/victornpb/micro-fps.svg?style=flat-square)](https://david-dm.org/victornpb/micro-fps)
|
7 | [![Coverage Status](https://img.shields.io/coveralls/victornpb/micro-fps.svg?style=flat-square)](https://coveralls.io/github/victornpb/micro-fps)
|
8 | [![NPM](https://img.shields.io/npm/dt/micro-fps.svg?style=flat-square)](https://www.npmjs.com/package/micro-fps)
|
9 |
|
10 | > A super lightweight fps meter, with near zero overhead
|
11 |
|
12 | *createFpsMeter* is a function factory, it returns a new meter.
|
13 | But why not a class? Last time I checked, accessing instance properties was slower than accessing variables on a near closure.
|
14 |
|
15 | ### Usage
|
16 |
|
17 | JS fiddle Example: https://jsfiddle.net/Victornpb/g8pra2a6/
|
18 |
|
19 | ```js
|
20 | import microFps from 'micro-fps';
|
21 |
|
22 | ```
|
23 |
|
24 | const REFRESH_RATE = 2; //update twice a second
|
25 |
|
26 | const fpsTick = createFpsMeter(info=>{
|
27 | fps_div.innerHTML = info.fps.toFixed(2);
|
28 | console.log(info);
|
29 | }, REFRESH_RATE);
|
30 |
|
31 |
|
32 | Then call the returned function on every frame of your loop
|
33 |
|
34 | //game loop
|
35 | setInterval(function loop(){
|
36 | fpsTick();
|
37 |
|
38 | //do stuff
|
39 |
|
40 | }, 1000/60);
|
41 |
|
42 |
|
43 | Callback info object
|
44 |
|
45 | | property | type | description |
|
46 | |----------|---------|-------------------------------------------------------|
|
47 | | fps | float | The calculated frames per second |
|
48 | | jitter | float | The absolute difference since the last calculated fps |
|
49 | | elapsed | float | Milliseconds ellapsed since the last computation |
|
50 | | frames | integer | Number of frames since the last computation |
|
51 | | trigger | float | Next computation will happen at this amount of frames |
|
52 |
|
53 |
|
54 | ### Installation
|
55 |
|
56 | Install via [yarn](https://github.com/yarnpkg/yarn)
|
57 |
|
58 | yarn add micro-fps (--dev)
|
59 |
|
60 | or npm
|
61 |
|
62 | npm install micro-fps (--save-dev)
|
63 |
|
64 |
|
65 | ### configuration
|
66 |
|
67 | You can pass in extra options as a configuration object (➕ required, ➖ optional, ✏️ default).
|
68 |
|
69 | ```js
|
70 | import microFps from 'micro-fps';
|
71 |
|
72 | ```
|
73 |
|
74 | ➖ **property** ( type ) ` ✏️ default `
|
75 | <br/> 📝 description
|
76 | <br/> ❗️ warning
|
77 | <br/> ℹ️ info
|
78 | <br/> 💡 example
|
79 |
|
80 | ### methods
|
81 |
|
82 | #### #name
|
83 |
|
84 | ```js
|
85 | microFps
|
86 |
|
87 | ```
|
88 |
|
89 | ### Examples
|
90 |
|
91 | See [`example`](example/script.js) folder or the [runkit](https://runkit.com/victornpb/micro-fps) example.
|
92 |
|
93 | ### Builds
|
94 |
|
95 | If you don't use a package manager, you can [access `micro-fps` via unpkg (CDN)](https://unpkg.com/micro-fps/), download the source, or point your package manager to the url.
|
96 |
|
97 | `micro-fps` is compiled as a collection of [CommonJS](http://webpack.github.io/docs/commonjs.html) modules & [ES2015 modules](http://www.2ality.com/2014/0
|
98 | -9/es6-modules-final.html) for bundlers that support the `jsnext:main` or `module` field in package.json (Rollup, Webpack 2)
|
99 |
|
100 | The `micro-fps` package includes precompiled production and development [UMD](https://github.com/umdjs/umd) builds in the [`dist/umd` folder](https://unpkg.com/micro-fps/dist/umd/). They can be used directly without a bundler and are thus compatible with many popular JavaScript module loaders and environments. You can drop a UMD build as a [`<script>` tag](https://unpkg.com/micro-fps) on your page. The UMD builds make `micro-fps` available as a `window.microFps` global variable.
|
101 |
|
102 | ### License
|
103 |
|
104 | The code is available under the [MIT](LICENSE) license.
|
105 |
|
106 | ### Contributing
|
107 |
|
108 | We are open to contributions, see [CONTRIBUTING.md](CONTRIBUTING.md) for more info.
|
109 |
|
110 | ### Misc
|
111 |
|
112 | This module was created using [generator-module-boilerplate](https://github.com/duivvv/generator-module-boilerplate).
|