How to center PIXI.Graphics?

[TufanMeric]

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

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?

[jonforum]

this.body .addChild(this.turret ); ?

 

[TufanMeric]

4 minutes ago, jonforum said:

this.body .addChild(this.turret ); ?

 

I have a container that holds the body and turrets, tried body.addChild but the result was the same.

[ivan.popelyshev]

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.

[TufanMeric]

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;

 

[ivan.popelyshev]

I wish you good luck in understanding how transforms work. Also beware of width/height , those are calculated properties.

[Saiteja]

I need place image object center of the render layout using pixijs plz help me

[Saiteja]

center of the render 2d layout using imaginary line plz help me with this

[Saiteja]

i want to place this type of image in center of the layout in render2D

[ivan.popelyshev]

PixiJS does not have layout, you have to do it yourself. PixiJS display object transform works through position/scale/pivot/rotation. Global position is local pivot. 

point position to screen center, point pivot to your flat center, that's all.

[Saiteja]

I m asking how to center the layout

[Saiteja]

how to set position to the center of any image