(window.webpackJsonp=window.webpackJsonp||[]).push([[7],{54:function(e,t,i){"use strict";i.r(t),i.d(t,"frontMatter",(function(){return b})),i.d(t,"metadata",(function(){return r})),i.d(t,"rightToc",(function(){return u})),i.d(t,"default",(function(){return m}));var a=i(2),n=i(6),l=(i(0),i(131)),c=i(132),o=i(133),s=i.n(o),b={title:"PixiJS Positioning"},r={unversionedId:"tutorials/pixi_positions",id:"tutorials/pixi_positions",isDocsHomePage:!1,title:"PixiJS Positioning",description:"Attributes",source:"@site/docs\\tutorials\\pixi_positions.md",slug:"/tutorials/pixi_positions",permalink:"/docs/tutorials/pixi_positions",version:"current",sidebar:"docs",previous:{title:"PixiJS Introduction",permalink:"/docs/tutorials/pixi_intro"},next:{title:"ThreeJS Introduction",permalink:"/docs/tutorials/three_intro"}},u=[{value:"Attributes",id:"attributes",children:[]},{value:"Examples",id:"examples",children:[]}],p={rightToc:u};function m(e){var t=e.components,i=Object(n.a)(e,["components"]);return Object(l.b)("wrapper",Object(a.a)({},p,i,{components:t,mdxType:"MDXLayout"}),Object(l.b)("h3",{id:"attributes"},"Attributes"),Object(l.b)("ul",null,Object(l.b)("li",{parentName:"ul"},"position, rotation, scale, pivot, anchor"),Object(l.b)("li",{parentName:"ul"},Object(l.b)("inlineCode",{parentName:"li"},"rotation")," - Z-rotation in radians"),Object(l.b)("li",{parentName:"ul"},Object(l.b)("inlineCode",{parentName:"li"},"pivot")," - origin of the object in px",Object(l.b)("ul",{parentName:"li"},Object(l.b)("li",{parentName:"ul"},"rotation is always measured around the origin"),Object(l.b)("li",{parentName:"ul"},"scale doesn't affect the pivot"))),Object(l.b)("li",{parentName:"ul"},Object(l.b)("inlineCode",{parentName:"li"},"anchor")," - relative origin of the object (only for Sprites)"),Object(l.b)("li",{parentName:"ul"},Object(l.b)("inlineCode",{parentName:"li"},"stage")," - root element of the scene graph"),Object(l.b)("li",{parentName:"ul"},Object(l.b)("inlineCode",{parentName:"li"},"getBounds()")," - retrieves the bounds of an object, can be used to check where the object is"),Object(l.b)("li",{parentName:"ul"},Object(l.b)("inlineCode",{parentName:"li"},"toGlobal()")," - calculates the global position"),Object(l.b)("li",{parentName:"ul"},Object(l.b)("inlineCode",{parentName:"li"},"toLocal()")," - calculates the local position relative to another point")),Object(l.b)("div",{className:"admonition admonition-note alert alert--secondary"},Object(l.b)("div",Object(a.a)({parentName:"div"},{className:"admonition-heading"}),Object(l.b)("h5",{parentName:"div"},Object(l.b)("span",Object(a.a)({parentName:"h5"},{className:"admonition-icon"}),Object(l.b)("svg",Object(a.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"}),Object(l.b)("path",Object(a.a)({parentName:"svg"},{fillRule:"evenodd",d:"M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"})))),"note")),Object(l.b)("div",Object(a.a)({parentName:"div"},{className:"admonition-content"}),Object(l.b)("p",{parentName:"div"},"the scale of the parent affects the units of its children"))),Object(l.b)("h3",{id:"examples"},"Examples"),Object(l.b)("ul",null,Object(l.b)("li",{parentName:"ul"},Object(l.b)("strong",{parentName:"li"},"positioning of a single element"))),Object(l.b)("div",{className:s.a.figure},Object(l.b)("img",{className:s.a.fill,src:Object(c.a)("img/docs/tutorials/02-pixi/pos_single_1.svg")})),Object(l.b)("hr",null),Object(l.b)("ul",null,Object(l.b)("li",{parentName:"ul"},Object(l.b)("strong",{parentName:"li"},"rotation is around the origin/pivot, which is by default in the top-left corner"))),Object(l.b)("div",{className:s.a.figure},Object(l.b)("img",{className:s.a.fill,src:Object(c.a)("img/docs/tutorials/02-pixi/pos_single_rot_1.svg")})),Object(l.b)("hr",null),Object(l.b)("ul",null,Object(l.b)("li",{parentName:"ul"},Object(l.b)("strong",{parentName:"li"},"pivot also affects the offset of the location of the object"))),Object(l.b)("div",{className:s.a.figure},Object(l.b)("img",{className:s.a.fill,src:Object(c.a)("img/docs/tutorials/02-pixi/pos_single_2.svg")})),Object(l.b)("hr",null),Object(l.b)("ul",null,Object(l.b)("li",{parentName:"ul"},Object(l.b)("strong",{parentName:"li"},"having the pivot in the center, we can rotate the object around its center"))),Object(l.b)("div",{className:s.a.figure},Object(l.b)("img",{className:s.a.fill,src:Object(c.a)("img/docs/tutorials/02-pixi/pos_single_rot_2.svg")})),Object(l.b)("hr",null),Object(l.b)("ul",null,Object(l.b)("li",{parentName:"ul"},Object(l.b)("strong",{parentName:"li"},"the scale of parent objects affects the units of their children"))),Object(l.b)("div",{className:s.a.figure},Object(l.b)("img",{className:s.a.fill,src:Object(c.a)("img/docs/tutorials/02-pixi/pos_multi_1.svg")})),Object(l.b)("hr",null),Object(l.b)("ul",null,Object(l.b)("li",{parentName:"ul"},Object(l.b)("strong",{parentName:"li"},"same values, yet the squares are independent"))),Object(l.b)("div",{className:s.a.figure},Object(l.b)("img",{className:s.a.fill,src:Object(c.a)("img/docs/tutorials/02-pixi/pos_multi_2.svg")})),Object(l.b)("hr",null),Object(l.b)("ul",null,Object(l.b)("li",{parentName:"ul"},Object(l.b)("strong",{parentName:"li"},"the green and the blue square are children of the red square"))),Object(l.b)("div",{className:s.a.figure},Object(l.b)("img",{className:s.a.fill,src:Object(c.a)("img/docs/tutorials/02-pixi/pos_multi_3.svg")})))}m.isMDXComponent=!0}}]);