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:

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!

Share this post

Link to post
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().

Share this post

Link to post
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 =, 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);


Share this post

Link to post
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.