KamiFightingSpirit Posted February 3, 2020 Share Posted February 3, 2020 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: app.ticker.add(animate); let delta = 0; function animate() { delta += 0.1; container.rotation += 0.01; } ivan.popelyshev 1 Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted February 3, 2020 Share Posted February 3, 2020 You have to imagine the following: Take "position" point on screen. Now take "pivot" in container. Now, PIN THEM TO EACH OTHER. That's how it works Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted February 3, 2020 Share Posted February 3, 2020 Another example: You want character to appear in the center of screen. center of screen is position=(screen.width/2, screen.height/2) character is inside world container, in coords (cX,cY) Then you make "world.position = screen/2; world.pivot = (cX, cY)" Welcome to the forums! Quote Link to comment Share on other sites More sharing options...
KamiFightingSpirit Posted February 3, 2020 Author Share Posted February 3, 2020 (edited) 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. <html> <head> <style> body { margin: 0; } canvas { display: block; background: blue; } </style> </head> <body> <canvas id="mycanvas"></canvas> <script src="pixi.js"></script> <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; app.stage.addChild(container); addGraphics(); //DRAW THE STARS 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.beginFill(0x00ff00); graphic.drawCircle(0, 0, radius); container.addChild(graphic); graphicArr.push(graphic); } } app.ticker.add(animate); function animate() { container.rotation += 0.01; } </script> </body> </html> Edited February 3, 2020 by KamiFightingSpirit Additional question Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted February 3, 2020 Share Posted February 3, 2020 (edited) 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 February 3, 2020 by ivan.popelyshev KamiFightingSpirit 1 Quote Link to comment Share on other sites More sharing options...
KamiFightingSpirit Posted February 3, 2020 Author Share Posted February 3, 2020 Thanks! That worked, filling my container before trying to pivot it. Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted February 3, 2020 Share Posted February 3, 2020 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.