Jump to content

Making a Container Rotate Around it's Center


Recommended Posts

Hello All -- Looking forward to learning a lot from the people on these forums! How can I get the following to work?

I am trying to get a container to rotate around it's center, much like is seen here: http://scottmcdonnell.github.io/pixi-examples/index.html?s=basics&f=container-pivot.js&title=Container Pivot

However, I can't seem to figure out the math behind placing the container on the screen and then the amount that you must offset it in order to have the pivot rotate in the center.

My setup is I have a screen with width: 1536 and height: 722

I have a container with width: 384 and height: 361

I have centered the container in the center by using the following:

  container.position.x = 576;
 container.position.y = 180.5;

I tried to then set my pivot with the following:

container.pivot.set(384 / 2, 361 / 2);

My thinking that the local center of the container would be half of its width and half of its height, but then this repositions the container and it is no longer centered. :(

My animate function is as follows FYI:

      let delta = 0;
      function animate() {
        delta += 0.1;
        container.rotation += 0.01;


Link to comment
Share on other sites

Thanks for the reply! I am not fully clear what you mean when you say "world.position = screen/2;"

I am assuming that world === container name? What is screen? 


Also, (cX,Cy) is referring to coordinates within the container itself?

This is my full code: I have been stuck on this for hours so any help is greatly appreciated.

      body {
        margin: 0;
      canvas {
        display: block;
        background: blue;
    <canvas id="mycanvas"></canvas>
    <script src="pixi.js"></script>
      const canvas = document.getElementById("mycanvas");

      const app = new PIXI.Application({
        view: canvas,
        width: window.innerWidth,
        height: window.innerHeight
      let radius = 1;
      let numStars = 3000;
      let graphicArr = [];
      let container = new PIXI.Container();
      container.x = app.screen.width / 2;
      container.y = app.screen.height / 4;
      container.pivot.x = container.width / 2;
      container.pivot.y = container.height / 2;
      function addGraphics() {
        for (let i = 0; i < numStars; i++) {
          let graphic = new PIXI.Graphics();

          graphic.y = (Math.random() * app.renderer.screen.height) / 2;

          graphic.x = (Math.random() * app.renderer.screen.width) / 4;
          graphic.lineStyle(0.1, 0x00ff00);
          graphic.drawCircle(0, 0, radius);

      function animate() {
        container.rotation += 0.01;



Edited by KamiFightingSpirit
Additional question
Link to comment
Share on other sites

IF you just created container, it does have width and height 0, because it doesnt have children.

Width and Height are calculated properties, and yes, our main example gives a bad idea to people. It was the same way in Adobe Flash, and its completely different from you see in web development.

If you dont understand how "pivot","width/height" work, try to make everything without them. consider that graphic coords are relative to center of the screen.

Edited by ivan.popelyshev
Link to comment
Share on other sites

51 minutes ago, KamiFightingSpirit said:

Thanks! That worked, filling my container before trying to pivot it.

Then you should also know that its better to preload all textures, otherwise you dont have exact sizes of sprites, and container size is calculated only by sprite positions, like they are 0-pixels width :) `PIXI.Loader` removes that problem. "Sprite.from("my.png")" size is zero , if "my.png" wasnt preloaded.

Link to comment
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.
  • Create New...