Jump to content

Simple lines with Pixi.js


Recommended Posts

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!

Link to comment
Share on other sites

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();

// 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().

Link to comment
Share on other sites

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) {
        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.lineStyle(s, c);
        this.moveTo(points[0], points[1]);
        this.lineTo(points[2], points[3]);

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

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


Link to comment
Share on other sites

  • 3 years later...

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


Link to comment
Share on other sites

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 by ivan.popelyshev
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...