Trying to rotate objects in Pixi.js v 4.6.2

I'm trying to rotate an object in Pixi.js v 4.6.2 and each time I set the rotation member or call setTransform() the object rotates but also it is moved. I have tried setting the pivot point but that didn't help.

Here is a fiddle

I have tried:

compass.rotation += .5;

and:

compassContainer.setTransform(0, 0, 1, 1,    0.5,    0,0,  00,00 );

and:

compassContainer.rotation += 0.5;

Here is all the code:

var app = new PIXI.Application(400, 400, { antialias: true });
document.body.appendChild(app.view);

// Render the compass
var compassContainer = new PIXI.Container();

var compass = new PIXI.Graphics();

compass.beginFill(0xFF3300);
compass.lineStyle(4, 0xffd900, 1);

compass.lineStyle(0);
compass.beginFill(0xFFFF0B, 0.5);
compass.drawCircle(200, 200, 180);
compass.endFill();

compass.lineStyle(0);
compass.beginFill(0xFFFFFF, 1);
compass.drawCircle(200, 200, 150);
compass.endFill();

compass.lineStyle(4, 0xFF0000, 1);
compass.moveTo(200, 20);
compass.lineTo(200, 40);

compassContainer.addChild(compass);

app.stage.addChild(compassContainer);


// Render the boat
var boat = new PIXI.Graphics();

boat.beginFill(0xFF3300);
boat.lineStyle(4, 0xffd900, 1);

boat.moveTo(200, 100);
boat.lineTo(175, 250);
boat.lineTo(225, 250);
boat.lineTo(200, 100);
boat.endFill();

// Add boat
app.stage.addChild(boat);


// Rotate compass
// compass.rotation += .5;
compassContainer.setTransform(0, 0, 1, 1,    0.5,    0,0,  00,00 );
// compassContainer.rotation = 0;

Solution 1:

I've got a fixed fiddle for you here: https://jsfiddle.net/themoonrat/cfaq34g7/

var app = new PIXI.Application(400, 400, { antialias: true });
document.body.appendChild(app.view);

// Render the compass
var compassContainer = new PIXI.Container();

var compass = new PIXI.Graphics();

compass.beginFill(0xFF3300);
compass.lineStyle(4, 0xffd900, 1);

compass.lineStyle(0);
compass.beginFill(0xFFFF0B, 0.5);
compass.drawCircle(180, 180, 180);
compass.endFill();

compass.lineStyle(0);
compass.beginFill(0xFFFFFF, 1);
compass.drawCircle(180, 180, 150);
compass.endFill();

compass.lineStyle(4, 0xFF0000, 1);
compass.moveTo(180, 20);
compass.lineTo(180, 40);

compassContainer.addChild(compass);

app.stage.addChild(compassContainer);


// Render the boat
var boat = new PIXI.Graphics();

boat.beginFill(0xFF3300);
boat.lineStyle(4, 0xffd900, 1);

boat.moveTo(200, 100);
boat.lineTo(175, 250);
boat.lineTo(225, 250);
boat.lineTo(200, 100);
boat.endFill();

// Add boat
app.stage.addChild(boat);

compassContainer.position.set( 200, 200 );
compassContainer.pivot.x = compassContainer.width / 2;
compassContainer.pivot.y = compassContainer.height / 2;

app.ticker.add(function(delta) {
  // rotate the container!
  // use delta to create frame-independent tranform
  compassContainer.rotation -= 0.01 * delta;
});

Essentially, your positioning of the circle when drawing it, combined with its slightly offset compared to the radius, meant that the centre point was not in the middle of the drawn graphic, and thus the 'wobbling'. In my fiddle, the x and y pos of the drawn circles are now both 180... the same as the radius of the bigger circle

Your first instinct of using pivot was correct, and that fiddle uses that.