Lines not being drawn with lineTo

[vrelisean]

I've been creating a game with Pixi.js v4.5.5 (from 25 Aug 2017), and decided to upgrade to the latest version, v6.1.3 (13 Sep 2021). After doing so, a part of my code related to drawing a line every second behind a moving object (a trail, if you will) stopped working as it did before. I'm unsure what would cause this, because the source code of moveTo and lineTo remained the same in v6.1.3. The lines are no longer drawn at all.

Here's the source code, and explanation below:

PIXI.Loader.shared.load(setup);

let someObject = null;
let trail = null;
let trailCounter = 0;

function setup() {
  someObject = new PIXI.Sprite(...);
  someObject.position.set(app.renderer.view.width / 2, app.renderer.view.height / 2); // move to middle of screen
                               
  trail = new PIXI.Graphics();
  trail.moveTo(someObject.x, someObject.y); 
  
  app.ticker.add(delta => renderLoop(delta));
}

function renderLoop(delta) {
  moveSomeObject();
  
  trailCounter++;
  if (trailCounter > 60) {   
    console.log('before:' + trail.currentPath.points); // #1
    trail
      .lineStyle(1, 0xFFFFFF, 1)
      .lineTo(someObject.x, someObject.y);
    console.log('after:' + trail.currentPath.points); // #2
    
    trailCounter = 0;
  }
}

As simple as it is: I create someObject (Sprite), set its position to middle of screen, and it moves on every renderLoop() call. I also create the trail (Graphics) which is moved to someObjects position, and on every renderLoop() call I call lineStyle() and lineTo() to move the trail to current someObject's position.

This code worked fine in older Pixi.js version, what changed for it to no longer work?

I tried debugging the currentPath, and here are the results:

• in v4.5.5, #1 tells me that currentPath contains two coordinates (four numbers), and #2 tells me that currentPath.points is empty
• in v6.1.3, #1 tells me that currentPath is empty, and #2 tells me that currentPath.points contains only one coordinate (someObject.x and someObject.y)

Obviously something was changed in the new Pixi.js version, but I cannot figure out what, and how to adjust my code. Any help would be appreciated!

 

Extra info that might be helpful:
After adding lineTo() in the setup() after moveTo(), the lines are created but always from (0,0) to (someObject.x, someObject.y). I also had to remove the #1 console.log because currentPoints is null at the time (?), but #2 displays 2 coordinates, first is (0,0) and second is someObject's x and y. Confusing much?!

[ivan.popelyshev]

separating moveTo() and lineTo() by rendercalls is undefined behaviour for pixi. we had to add several "finishPoly()" in places to "finalize" current path and thus the thing you used could be broken. Please store data for the next "moveTo" somewhere else, not in currentPath.

Alternatively, you can defined proper Graphics behaviour for us, how that thing should work

1. if path is not finished but its time to render(), getBounds() or something like that
2. if moveTo() was long long ago before those operations

that way we can discuss the standard, fix it, make official unit tests for it, e.t.c.

Edited October 8, 2021 by ivan.popelyshev

[vrelisean]

3 hours ago, ivan.popelyshev said:

separating moveTo() and lineTo() by rendercalls is undefined behaviour for pixi. we had to add several "finishPoly()" in places to "finalize" current path and thus the thing you used could be broken. Please store data for the next "moveTo" somewhere else, not in currentPath.

Alternatively, you can defined proper Graphics behaviour for us, how that thing should work

1. if path is not finished but its time to render(), getBounds() or something like that
2. if moveTo() was long long ago before those operations

that way we can discuss the standard, fix it, make official unit tests for it, e.t.c.

Success! I've changed my code to the following:
 

...
function setup() {
  ...

  trail = new PIXI.Graphics();
  app.stage.addChild(trail);
  lastPosition.x = someObject.x;
  lastPosition.y = someObject.y;
  
  app.ticker.add(delta => renderLoop(delta));
}

function renderLoop(delta) {
  moveSomeObject();
  
  trailCounter++;
  if (trailCounter > 60) {   
    trail
      .lineStyle(1, 0xFFFFFF, 1)
      .moveTo(lastPosition.x, lastPosition.y)
      .lineTo(someObject.x, someObject.y);

    lastPosition.x = someObject.x;
    lastPosition.y = someObject.y;

    trailCounter = 0;
  }
}

Now it works as it did. It makes more sense this way anyway, so thank you very much!