Pixi.js deltaTime vs Classic deltaTime

8Observer8 · June 10, 2022

Hello,

I need deltaTime for Planck.js (Box2D). But I do not understand what does the Pixi.js "delta" mean?

app.ticker.add(delta => gameLoop(delta));

function animationLoop(delta)
{
    console.log("delta = " + delta);
}

It prints: "delta = 0.99..." I read the documentation but I do not understand how to get the real deltaTime that equals to ~0.016.

My temporary solution is:

let lastTime = Date.now();
let currentTime, deltaTime;

app.ticker.add(() => animationLoop());

function animationLoop()
{
    currentTime = Date.now();
    deltaTime = (currentTime - lastTime) / 1000;
    lastTime = currentTime;
    console.log("deltaTime = " + deltaTime);
}

ivan.popelyshev · June 10, 2022

TARGET_FPS = 60 or so, means 1/60 of second is a frame = 16ms

delta is 1 if frame is perfect, means delta=1 if target is 60.

Why do it like that? easy. suppose you have code "sprite.x += 5" and it works. Want to add delta? fine, here it is: "sprite.x += 5 * delta"

8Observer8 · June 10, 2022

39 minutes ago, ivan.popelyshev said:

Want to add delta? fine, here it is: "sprite.x += 5 * delta"

I want to use Planck.js (Box2D) for moving, jumping, collision detections and so on. This physics engine requires the deltaTime for updating:

const worldScale = 30;
const gravity = planck.Vec2(0, 10);
const world = planck.World(gravity);

/* ... */

function animationLoop()
{
    currentTime = Date.now();
    deltaTime = (currentTime - lastTime) / 1000;
    lastTime = currentTime;

    world.step(deltaTime);
    world.clearForces();

    gr.position.set(body.getPosition().x, body.getPosition().y);
}

How to use "delta" in Pixi.js way? I need to get deltaTime = ~0.016 and pass it to world.step()

Edited June 10, 2022 by 8Observer8

8Observer8 · June 10, 2022

It is strange a little. When I set a gravity to 3 the ball moves with this speed:

PixijsAndPlanckjs_speed_3.gif.5344601235508e53839b651167a7806a.gif

But when I set a gravity to 300 the ball moves with the same speed:

PixijsAndPlanckjs_speed_300.gif.94e9cf0c5e0ed560a33438d662829b35.gif

Playground: https://plnkr.co/edit/tywckAnKsl3g7CdY?preview

Source:

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>
</head>

<body>
    <script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>

    <script type="importmap">
        {
            "imports": {
                "pixi.js": "https://cdn.skypack.dev/[email protected]",
                "planck-js": "https://cdn.skypack.dev/[email protected]"
            }
        }
    </script>

    <script type="module" src="js/main.js"></script>
</body>

</html>

main.js

import * as PIXI from "pixi.js";
import * as planck from "planck-js";

const worldScale = 30;
const gravity = planck.Vec2(0, 300);
const world = planck.World(gravity);

const radius = 30;
const shape = planck.Circle(radius / worldScale);
const body = world.createBody();
body.setDynamic();
const fixtureDef = { shape: shape };
body.createFixture(fixtureDef);

const app = new PIXI.Application({
    width: 400,
    height: 400,
    backgroundColor: 0x2c3e50
});
document.body.appendChild(app.view);

const gr = new PIXI.Graphics();
gr.beginFill(0xffffff);
gr.drawCircle(30, 30, 30);
gr.endFill();
app.stage.addChild(gr);

// let lastTime = Date.now();
// let currentTime, deltaTime;

app.ticker.add(delta => animationLoop(delta));

function animationLoop(delta)
{
    // currentTime = Date.now();
    // deltaTime = (currentTime - lastTime) / 1000;
    // lastTime = currentTime;

    world.step(delta);
    world.clearForces();

    gr.position.set(body.getPosition().x, body.getPosition().y);
}

8Observer8 · June 10, 2022

When I use my own deltaTime I have the same speed as above:

import * as PIXI from "pixi.js";
import * as planck from "planck-js";

const worldScale = 30;
const gravity = planck.Vec2(0, 300);
const world = planck.World(gravity);

const radius = 30;
const shape = planck.Circle(radius / worldScale);
const body = world.createBody();
body.setDynamic();
const fixtureDef = { shape: shape };
body.createFixture(fixtureDef);

const app = new PIXI.Application({
    width: 400,
    height: 400,
    backgroundColor: 0x2c3e50
});
document.body.appendChild(app.view);

const gr = new PIXI.Graphics();
gr.beginFill(0xffffff);
gr.drawCircle(30, 30, 30);
gr.endFill();
app.stage.addChild(gr);

let lastTime = Date.now();
let currentTime, deltaTime;

app.ticker.add(() => animationLoop());

function animationLoop()
{
    currentTime = Date.now();
    deltaTime = (currentTime - lastTime) / 1000;
    lastTime = currentTime;

    world.step(deltaTime);
    world.clearForces();

    gr.position.set(body.getPosition().x, body.getPosition().y);

    // console.log("deltaTime = " + deltaTime);
    // gr.x = (gr.x + 5 * delta) % (app.view.width + 20);
}

Sign In

Pixi.js deltaTime vs Classic deltaTime

Recommended Posts

8Observer8

Link to comment

Share on other sites

ivan.popelyshev

Link to comment

Share on other sites

8Observer8

Link to comment

Share on other sites

8Observer8

Link to comment

Share on other sites

8Observer8

Link to comment

Share on other sites

Join the conversation

Recently Browsing 0 members

Browse

Activity