npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

deltaframe-extra

v1.0.1

Published

An animation and game loop manager with extra features.

Downloads

4

Readme

NPM version Known Vulnerabilities npm NPM downloads Gitter

Note: This is deltaframe-extra, which is essentially just deltaframe with extra features. The two packages were split up so that deltaframe could remain simple and fast and people who wanted extra features could use this package.

Installation

To install this module through npm, simply use the following command:

$ npm install deltaframe-extra

and to use it, you can import it as an ES6 module:

// Webpack
import Deltaframe from 'deltaframe-extra';

// Browser
import Deltaframe from './node_modules/deltaframe/deltaframe-extra.js';

or you can use it as a script:

<script type="module" src="https://unpkg.com/deltaframe-extra@latest/deltaframe-extra.js">

Initialization

After installing Deltaframe, it can be initialized like so:

const deltaframe = new Deltaframe();

Deltaframe also accepts an options object at initialization with the following options available:

| param | type | description | default | |--------------------|---------|------------------------------------------------------------------------------------------------------------------------------------------|----------| | minFps | number | The minimum number of frames per second to run deltaframe at. If frames per second drop below this, deltaframe will attempt to restart. | 5 | | targetFps | number | The number of frames per second that deltaframe should achieve. | 60 | | maxRestartAttempts | number | The number of times deltaframe will attempt to restart before stopping entirely. | Infinity | | runTime | number | Specify a value in milliseconds to have Deltaframe automatically stop after the specified amount of time has passed. | Infinity | | forceSetTimeout | boolean | Indicates whether setTimeout should be used instead of requestAnimationFrame even if requestAnimation is supported by the user's browser | false |

So an example of initializating Deltaframe with options is:

const options = {
  minFps: 40,
  maxRestartAttempts: 10
};

const deltaframe = new Deltaframe(options);

From here you can use any of the conversion features available.

API

Deltaframe all revolves around a function you pass to it and this function should contain your drawing code.

For example, we'll take a simple game loop that moves a circle.

Traditionally, with requestAnimationFrame it would be accomplished like so:

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

let x = canvas.width / 2;
let y = canvas.height - 30;

function drawCircle() {
  ctx.beginPath();
  ctx.arc(x, y - 30, 10, 0, Math.PI * 2);
  ctx.fillStyle = '#0095DD';
  ctx.fill();
  ctx.closePath();
}

function draw(time) {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  drawCircle();

  x += 2;
  y += -2;

  requestAnimationFrame(draw);
}

requestAnimationFrame(draw);

This example uses drawCircle to just draw a circle centered horizontally and near the bottom of the canvas and then it uses requestAnimationFrame recursively to keep the loop going and it makes the ball go diagonally.

To change this so that it uses deltaframe instead, use the following:

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

let x = canvas.width / 2;
let y = canvas.height - 30;

function drawCircle() {
  ctx.beginPath();
  ctx.arc(x, y - 30, 10, 0, Math.PI * 2);
  ctx.fillStyle = '#0095DD';
  ctx.fill();
  ctx.closePath();
}

function draw(time, delta, deltaAverage) {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  drawCircle();

  x += 2;
  y += -2;
}

deltaframe.start(draw);

The biggest difference here is removing all calls to requestAnimationFrame and just using deltaframe.start(draw) instead. You'll also notice now that the draw function now accepts two more parameters because deltaframe returns three values which can be used inside of your drawing function. The time parameter is the same as it is in the first example, its the DOMHighResTimestamp as returned from requestAnimationFrame or (window.performance.now() in the case of setTimeout). The delta parameter is the change in time from the last frame to this frame and deltaAverage is the mean of the most recent 10 delta values. These values can all be used inside of the draw function however you deem fit.

start

The start method takes a function and begins running the deltaframe loop on it.

| param | type | description | default | |-------|----------|-----------------------------------------|---------| | fn | Function | The function to call on a drawing loop. | |

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

let x = canvas.width / 2;
let y = canvas.height - 30;

function drawCircle() {
  ctx.beginPath();
  ctx.arc(x, y - 30, 10, 0, Math.PI * 2);
  ctx.fillStyle = '#0095DD';
  ctx.fill();
  ctx.closePath();
}

function draw(time, delta, deltaAverage) {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  drawCircle();

  x += 2;
  y += -2;
}

deltaframe.start(draw);

pause

The pause method temprarily stops the deltaframe loop. This should only be used if you plan on resuming it at some point and not just stopping entirely.

Note that deltaframe automatically pauses when the user switches tabs.

// Start the drawing loop.
deltaframe.start(draw);

setTimeout(() => {
  // After one second the drawing loop will pause and the game will look 'frozen'.
  deltaframe.pause();
}, 1000);

resume

The resume method resumes the deltaframe loop after a paused state. Everything will be where it was before it was paused so it will seem like it was never even paused.

Note that deltaframe automatically resumes from being paused when the user switches back to the tab containing deltaframe.

// Start the drawing loop.
deltaframe.start(draw);

setTimeout(() => {
  // After one second the drawing loop will pause and the game will look 'frozen'.
  deltaframe.pause();

  setTimeout(() => {
    // After two seconds resume the drawing loop like it was never even paused.
    deltaframe.resume();
  }, 2000);
}, 1000);

stop

The stop method stops the game and resets all deltaframe values back to their original values.

Note that this should only be used when you are done with the animation or drawing. In order to start the loop again you have to call start and provide the drawing function.

// Start the drawing loop.
deltaframe.start(draw);

// If some imaginary condition is met, stop deltaframe from running any more.
if (someConditionThatEndsTheAnimation) {
  deltaframe.stop();
}

Tasks

Tasks are functions that can be assigned to run one or more times on an interval.

Note: Tasks are not guaranteed to run at the exact time you wish them to. For example, if you have a task that runs every second, you cannot expect it to run at 1000ms, 2000ms, 3000ms on the dot because the timing is decided by requestAnimationFrame. The task will run at the closest possible time to the expected time.

addTask

| param | type | description | default | |--------------------|----------|-------------------------------------------------------------------------------------------|----------| | name | string | The name of the task to add. | | | fn | Function | The function to call when this task is run. | | | options | Object | | | | options.interval | number | Specifies the time in between runs of this task. | 1000 | | options.delay | number | An initial delay before running this task for the first time. | 0 | | options.timesToRun | number | Specify this to have the task be destroyed after being run the specified amount of times. | Infinity |

example:

const task = () => { return 'hello world!'; }

// Running a task every 1 second:
deltaframe.tasks.addTask('test', task, { interval: 1000 });

// Running a task every 1 second but waiting 2.5 seconds before the first run.
deltaframe.tasks.addTask('test', task, { interval: 1000, delay: 2500 });

// Running a task every 1 second but only twice after which it gets removed automatically.
deltaframe.tasks.addTask('test', task, { interval: 1000, timesToRun: 2 });

removeTask

| param | type | description | default | |--------------------|----------|-------------------------------------------------------------------------------------------|----------| | name | string | The name of the task to remove. | |

const task = () => { return 'hello world!'; }

deltaframe.tasks.addTask('test', task, { interval: 1000 });

deltaframe.tasks.removeTask('test');

Tests

The tests for Deltaframe are browser based so to run them you will first need to start the local testing server like so:

$ npm run test

then you will need to navigate to https://localhost/test/index.html in your browser to run all of the available tests for Deltaframe.

License

MIT