Jump to content

How to center PIXI.Graphics?


TufanMeric
 Share

Recommended Posts

I'm trying to use PIXI.Graphics instead of images for my sprites but i couldn't center the circle (or the rectangles).

    this.body = new PIXI.Graphics();

    this.body.lineStyle(4, 0x000000, 1);
    this.body.beginFill(0xffff00);
    this.body.drawCircle(this.body.width / 2, this.body.height / 2, 36);
    this.body.endFill();

Screenshot_129.png.9106612d20afaa37c50dc1f93487925f.png

I'm using the code below to draw the rectangle

    this.turret = new PIXI.Graphics();

    this.turret.lineStyle(4, 0x000000, 1);
    this.turret.beginFill(0x9b9b9b);
    this.turret.drawRect(0, 40, 18, 32);
    this.turret.endFill();
    this.turret.pivot.x = this.turret.width / 2;
    this.turret.pivot.y = this.turret.height / 2;

As you can see in the image above, rectangle is not in the center of the circle. How can I fix that?

Link to comment
Share on other sites

draw it that way rotation point of both is (0,0)

this.body.drawCircle(this.body.width / 2, this.body.height / 2, 36);

that's fun, trying to get width/height of empty body, you didnt even add a circle there yet :)

Suppose, circle center is at (0,0).

drawRect(0, w, -h, h); will draw rectangle with (0,0) as a center of left side. W is width, H is half-height.

Link to comment
Share on other sites

16 minutes ago, ivan.popelyshev said:

this.body.drawCircle(this.body.width / 2, this.body.height / 2, 36);

that's fun, trying to get width/height of empty body, you didnt even add a circle there yet :)

Oh, right, i completely missed that one. ?

I got it to work doing this:

    this.body = new PIXI.Graphics();

    this.body.lineStyle(4, 0x000000, 1);
    this.body.beginFill(0xffff00);
    this.body.drawCircle(0, 0, 36);
    this.body.endFill();
    this.body.x = this.body.width / 2;
    this.body.y = this.body.height / 2;
    this.body.pivot.x = this.body.width / 2;
    this.body.pivot.y = this.body.height / 2;

Turret:

    this.turret = new PIXI.Graphics();

    this.turret.lineStyle(4, 0x000000, 1);
    this.turret.beginFill(0x9b9b9b);
    this.turret.drawRect(x, y, 18, 40); // turret offset, sent by server
    this.turret.endFill();
    this.turret.x = (this.turret.width - 4) / 8; // I have no idea why i need to divide it by 8 but it works: bullet comes out of the exact center of it, -4 is the stroke size.
    this.turret.pivot.x = this.turret.width / 2;
    this.turret.pivot.y = this.turret.height / 2;

 

Link to comment
Share on other sites

  • 3 years later...

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.

Guest
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.

Loading...
 Share

  • Recently Browsing   0 members

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