Sign in to follow this  
TufanMeric

How to center PIXI.Graphics?

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?

Share this post


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

Share this post


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

 

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.

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...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.