Simple lines with Pixi.js

[Gustavgb]

Hi there folks!

It's been a while since I posted something in here, glad to be back!

I have a fair amount of experience in game development using JS Canvas, but recently I decided I had move on - so I went with Pixi.

I figured out the basics of how to add sprites, do filters and such, but I just can't seem to figure out how to do simple lines and then manipulate them afterwards. What I mean is something like this: https://jsfiddle.net/gustavgb/anxcjfof/5/

I noticed that PIXI.Graphics has an object attached to it called "graphicsData" in which I can find the points that make up the line - great - but when changing the value of these variables, nothing happens to the appearance of my line.

I'd appreciate any help, as I'm quite new to Pixi

Thank you!

[themoonrat]

After modifying the myLine.graphicsData 

Try doing

myLine.dirty++

[Sambrosia]

PIXI.Graphics is somewhat similar to the context2d canvas API.

// Create a new Graphics object and add it to the scene
let myGraph = new PIXI.Graphics();
someContainer.addChild(myGraph);

// Move it to the beginning of the line
myGraph.position.set(startPoint.x, startPoint.y);

// Draw the line (endPoint should be relative to myGraph's position)
myGraph.lineStyle(thickness, 0xffffff)
       .moveTo(0, 0)
       .lineTo(endPoint.x, endPoint.y);

That will create a Graphics object and draw a line to it. If you want to re-draw the line, you'd need to call myGraph.clear() to erase the previous line, and then call the commands to draw your new line.

You could continue to chain more draw methods to get a more complex result. Note that some of PIXI.Graphic's methods require that you use beginFill() and endFill().

[Gustavgb]

Thanks for the quick response, ended up with something like this (which means @Sambrosia was right):

class Line extends PIXI.Graphics {
    constructor(points, lineSize, lineColor) {
        super();
        
        var s = this.lineWidth = lineSize || 5;
        var c = this.lineColor = lineColor || "0x000000";
        
        this.points = points;

        this.lineStyle(s, c)

        this.moveTo(points[0], points[1]);
        this.lineTo(points[2], points[3]);
    }
    
    updatePoints(p) {
        
        var points = this.points = p.map((val, index) => val || this.points[index]);
        
        var s = this.lineWidth, c = this.lineColor;
        
        this.clear();
        this.lineStyle(s, c);
        this.moveTo(points[0], points[1]);
        this.lineTo(points[2], points[3]);
    }
}

var line = new Line([200, 150, 0, 0]);
rootStage.addChild(line);

window.addEventListener("mousemove", e => line.updatePoints([null, null, e.clientX, e.clientY]), false);

 

[vladggg]

Hello there, hope someone here can help me  i am doing a project with PIXI (love it) and i need to draw Lines on a "map".

I used @Gustavgb `s Line class and only added a alpha filter. Each Line is in ti`s own container with it`s 4 points and some other variables i need
I am using this in an angular project to handle architecture and data management (a bit overkill but it is working just fine).

Now everything is working great until i add the lines to the stage, i added just 10 lines and the FPS dropped from 60 to 30 (i load an average of 130 lines and i get 9 fps) and i can`t seem to figure out why the big impact on FPS, i am doing some calculations to figure out where to draw the white line but other than that i am not doing anything special i attached the component here maybe i`m not doing something ok there. 

If i am doing things wrong can anyone point me in the right direction? Thank you for the help

wall.component.ts

[ivan.popelyshev]

Learn how filters actually work - they process everything inside a bounding box, use extra framebuffer, extra drawcall on shader (usually expensive, alphafilter isnt one) 

So alphaFilter on line is actually alphafilter on a big rectangle, not rotated, sides are parallel to screen. 10 times drawing big objects on screen.. ugh.. just imagie those rects and how many times each pixel was drawn.

Edited May 16, 2020 by ivan.popelyshev

[vladggg]

Thank you for the info and the quick response  i think in this case i can use something else, but even without any filters applied, i get around 20 FPS with all the lines.
Maybe implementing a culling algorithm can help at least for the lines?

Any other pointers are welcomed.

[vladggg]

Hello so as a update i did some optimizations:

- i apply filter only when needed
- in some cases i was setting visibility of a Line, but i saw a increase when using the renderable property instead
- i changed the way the hitBox is generated, i applied a polygon to the line as it`s hitArea and then i could make the graphic interactive and with this i don`t need to add another Graphic
- will implement culling for the Lines(maybe on other elements) to further reduce the load (not yet implemented) 

By doing this i got up to 50 FPS.

[ivan.popelyshev]

is there any problem with "line.alpha" property?

yes, strokes in graphics arent interactive, better to use hitArea with it. However, if you already have that hitArea, why not just use drawPolygon() for it instead of drawing a line?

Edited May 18, 2020 by ivan.popelyshev