1"use strict";(self.webpackChunkpixi_docusaurus=self.webpackChunkpixi_docusaurus||[]).push([["2738"],{13949(e,t,n){n.r(t),n.d(t,{metadata:()=>r,default:()=>m,frontMatter:()=>l,contentTitle:()=>d,toc:()=>c,assets:()=>u});var r=JSON.parse('{"id":"playground/index","title":"index","description":"","source":"@site/docs/playground/index.md","sourceDirName":"playground","slug":"/playground/","permalink":"/8.x/playground/","draft":false,"unlisted":false,"editUrl":null,"tags":[],"version":"current","frontMatter":{"hide_title":true,"pagination_next":null,"pagination_prev":null,"custom_edit_url":null}}'),a=n(74848),i=n(28453),o=n(80553),s=n(28103);let l={hide_title:!0,pagination_next:null,pagination_prev:null,custom_edit_url:null},d,u={},c=[];function p(e){return(0,a.jsx)(o.A,{pixiVersion:s})}function m(e={}){let{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,a.jsx)(t,{...e,children:(0,a.jsx)(p,{...e})}):p(e)}},60714(e,t,n){n.d(t,{K:()=>h});var r=n(74848),a=n(96540);let i={colors:{surface1:"#242426",surface2:"#444950",surface3:"#44475a",clickable:"#fff",base:"#f8f8f2",disabled:"#6272a4",hover:"#f8f8f2",accent:"#e91e63",error:"#f8f8f2",errorSurface:"#44475a"},syntax:{plain:"#f8f8f2",comment:{color:"#6272a4",fontStyle:"italic"},keyword:"#ff79c6",tag:"#ff79c6",punctuation:"#ff79c6",definition:"#f8f8f2",property:"#50fa7b",static:"#bd93f9",string:"#f1fa8c"},font:{body:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',mono:'"Fira Mono", "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace',size:"13px",lineHeight:"20px"}},o=async e=>{let t=`pixi-definitions-${e}`,n=JSON.parse(localStorage.getItem(t))||null;if(!n)try{let n=await fetch(`https://cdn.jsdelivr.net/npm/pixi.js@${e}/dist/pixi.js.d.ts`),r=await n.text();if(r.startsWith("// Generated by dts-bundle-generator"))return localStorage.setItem(t,JSON.stringify(r)),r;return null}catch(e){return console.error("Failed to fetch pixi.js types:",e),null}return n};var s=n(56963),l=n(83941),d=n(14518);function u({fontSize:e=12,style:t,pixiVersion:n,handleEditorCodeChanged:i}){var c;let{code:p,updateCode:m}=(0,s.Pe)(),{sandpack:x}=(0,s.ny)(),f=function(){let[e,t]=(0,a.useState)(null),n=(0,a.useRef)(!0),r=(0,a.useRef)(null);return(0,a.useEffect)(()=>{let e=d.wG.__getMonacoInstance();if(e)return void t(e);if(!r.current){d.wG.config({"vs/nls":{availableLanguages:{}}});try{r.current=d.wG.init(),r.current.then(e=>{n.current&&t(e)}).catch(e=>{n.current&&"cancelation"!==e.type&&console.error("Monaco initialization error:",e)})}catch(e){console.error("Failed to initialize Monaco:",e)}}return()=>{n.current=!1}},[]),e}(),h=(c=x.activeFile,(0,a.useMemo)(()=>{let e,t;return"js"===(t=(e=c.split("."))[e.length-1])?"javascript":"ts"===t?"typescript":"vert"===t||"frag"===t?"glsl":t},[c])),{colorMode:g}=(0,l.G)();return((e,t="latest")=>{(0,a.useEffect)(()=>{let n=async e=>{let n=await o(t),r=`declare module 'pixi.js' { ${n} }`,a=` 2 declare module '*.wgsl' { 3 const shader: 'string'; 4 export default shader; 5 } 6 7 declare module '*.vert' { 8 const shader: 'string'; 9 export default shader; 10 } 11 12 declare module '*.frag' { 13 const shader: 'string'; 14 export default shader; 15 }`;e.languages.typescript.typescriptDefaults.addExtraLib(r,"file:///node_modules/pixi.js/index.d.ts"),e.languages.typescript.javascriptDefaults.addExtraLib(r,"file:///node_modules/pixi.js/index.d.ts"),e.languages.typescript.typescriptDefaults.addExtraLib(a),e.languages.typescript.javascriptDefaults.addExtraLib(a),function(e){let{languages:t}=e,n="glsl";t.register({id:n,extensions:[".frag",".vert"]}),t.setLanguageConfiguration(n,{comments:{lineComment:"//",blockComment:["/*","*/"]},brackets:[["{","}"],["[","]"],["(",")"]],autoClosingPairs:[{open:"{",close:"}"},{open:"[",close:"]"},{open:"(",close:")"},{open:'"',close:'"',notIn:["string"]},{open:"'",close:"'",notIn:["string"]}],surroundingPairs:[{open:"{",close:"}"},{open:"[",close:"]"},{open:"(",close:")"},{open:'"',close:'"'},{open:"'",close:"'"}]}),t.setMonarchTokensProvider(n,{tokenPostfix:".glsl",defaultToken:"invalid",directives:["#","#define","#undef","#if","#ifdef","#ifndef","#else","#elif","#endif","#error","#pragma","#extension","#version","#line"],macros:["__L
15INE__","__FILE__","__VERSION__"],storage:["in","out","uniform","layout","attribute","varying","precision","highp","mediump","lowp"],types:["void","bool","int","uint","float","double","vec2","vec3","vec4","ivec2","ivec3","ivec4","bvec2","bvec3","bvec4","uvec2","uvec3","uvec4","dvec2","dvec3","dvec4","mat2","mat3","mat4","mat2x2","mat2x3","mat2x4","mat3x2","mat3x3","mat3x4","mat4x2","mat4x3","mat4x4","dmat2","dmat3","dmat4","dmat2x2","dmat2x3","dmat2x4","dmat3x2","dmat3x3","dmat3x4","dmat4x2","dmat4x3","dmat4x4","sampler1D","texture1D","image1D","sampler1DShadow","sampler1DArray","texture1DArray","image1DArray","sampler1DArrayShadow","sampler2D","texture2D","image2D","sampler2DShadow","sampler2DArray","texture2DArray","image2DArray","sampler2DArrayShadow","sampler2DMS","texture2DMS","image2DMS","sampler2DMSArray","texture2DMSArray","image2DMSArray","sampler2DRect","texture2DRect","image2DRect","sampler2DRectShadow","sampler3D","texture3D","image3D","samplerCube","textureCube","imageCube","samplerCubeShadow","samplerCubeArray","textureCubeArray","imageCubeArray","samplerCubeArrayShadow","samplerBuffer","textureBuffer","imageBuffer","subpassInput","subpassInputMS","isampler1D","itexture1D","iimage1D","isampler1DArray","itexture1DArray","iimage1DArray","isampler2D","itexture2D","iimage2D","isampler2DArray","itexture2DArray","iimage2DArray","isampler2DMS","itexture2DMS","iimage2DMS","isampler2DMSArray","itexture2DMSArray","iimage2DMSArray","isampler2DRect","itexture2DRect","iimage2DRect","isampler3D","itexture3D","iimage3D","isamplerCube","itextureCube","iimageCube","isamplerCubeArray","itextureCubeArray","iimageCubeArray","isamplerBuffer","itextureBuffer","iimageBuffer","isubpassInput","isubpassInputMS","usampler1D","utexture1D","uimage1D","usampler1DArray","utexture1DArray","uimage1DArray","usampler2D","utexture2D","uimage2D","usampler2DArray","utexture2DArray","uimage2DArray","usampler2DMS","utexture2DMS","uimage2DMS","usampler2DMSArray","utexture2DMSArray","uimage2DMSArray","usampler2DRect","utexture2DRect","uimage2DRect","usampler3D","utexture3D","uimage3D","usamplerCube","utextureCube","uimageCube","usamplerCubeArray","utextureCubeArray","uimageCubeArray","usamplerBuffer","utextureBuffer","uimageBuffer","atomic_uint","usubpassInput","usubpassInputMS","sampler","samplerShadow"],operators:["*","+","-","/","~","!","%","<<",">>","<",">","<=",">=","==","!=","&","^","|","&&","^^","||","=","+=","-=","*=","/=","%=","<<=",">>=","&=","^=","|="],builtin_vars:["gl_VertexID","gl_InstanceID","gl_VertexIndex","gl_InstanceIndex","gl_DrawID","gl_BaseVertex","gl_BaseInstance","gl_Position","gl_PointSize","gl_ClipDistance","gl_CullDistance","gl_Color","gl_SecondaryColor","gl_Normal","gl_Vertex","gl_MultiTexCoord0","gl_MultiTexCoord1","gl_MultiTexCoord2","gl_MultiTexCoord3","gl_MultiTexCoord4","gl_MultiTexCoord5","gl_MultiTexCoord6","gl_MultiTexCoord7","gl_FogCoord"],constants:["gl_MaxVertexAttribs","gl_MaxVertexUniformVectors","gl_MaxVertexUniformComponents","gl_MaxVertexOutputComponents"],intsuffix:"[uU]?",floatsuffix:"([fF]|(fl|FL))?",tokenizer:{root:[[/\/\/.*$/,"comment.line"],[/\/\*/,"comment.block","@comment"],[/#[a-z]*/,{cases:{"@directives":"keyword.control.preprocessor","@default":"invalid"}}],["GL_ES","meta.preprocessor"],[/__[A-Z_]+__/,{cases:{"@macros":"meta.preprocessor","@default":"invalid"}}],[/[{}()\[\]]/,"@brackets"],[/(true|false)/,"constant"],[/[\=\+\-\*\/\>\<\&\|\%\!\^]+/,{cases:{"@operators":"operator","@default":"invalid"}}],[/[a-zA-Z][a-zA-Z0-9_]*(?=\()/,"entity.name.function"],[/[a-zA-Z][a-zA-Z0-9_]*/,{cases:{"@storage":"storage.type","@types":"entity.name.type","@builtin_vars":"keyword","@default":"variable.name"}}],[/\d*\d+[eE]([\-+]?\d+)?(@floatsuffix)/,"number.float"],[/\d*\.\d+([eE][\-+]?\d+)?(@floatsuffix)/,"number.float"],[/0[xX][0-9a-fA-F](@intsuffix)/,"number.hex"],[/0[0-7](@intsuffix)/,"number.octal"],[/\d+(@intsuffix)/,"number"],[/[;,.]/,"delimiter"]],comment:[["\\*/","comment.block","@pop"],[".*","comment.block"]]}})}(e)};e&&n(e)},[e,t])})(f,n),(0,r.jsxs)(s.aN,{style:{height:"100%",margin:0,...t},children:[(0,r.jsx)(s.fQ,{}),(0,r.jsx)("div",{style:{flex:1,paddingTop:8,background:"dark"===g?"#1e1e1e":"#FFFFFE"},children:(0,r.jsx)(d.KE,{width:"100%",height:"100%",language:h,theme:"dark"===g?"vs-dark":"light",defaultValue:p,onChange:e=>{m(e||""),i?.(e)},options:{minimap:{enabled:!1},scrollBeyondLastLine:!1,wordWrap:"on",automaticLayout:!0,fontSize:e}},x.activeFile)})]})}let c=({onClick:e})=>(0,r.jsx)(s.Gb,{style:{position:"relative"},onClick:e,children:(0,r.jsx)(s.D0,{})}),p=({onSelectionChange:e,defaultSelection:t="both"})=>{let[n,i]=(0,a.useState)(t),{colorMode:o}=(0,l.G)(),s=t=>{i(t),e(t)},d={height:"100%",width:"max-content",padding:"0 16px",display:"flex",alignItems:"center",justifyContent:"center",cursor:"pointer",color:"dark"===o?"#F6F8FA":"#2E3138",border:"none"},u="dark"===o?"#22232A":"#e2e2e2";return(0,r.jsxs)("div",{style:{height:32,width:"100%",overflow:"hidden",backgroundColor:"dark"===o?"#2E3138":"#F6F8FA",display:"flex",justifyContent:"right",borderBottomLeftRadius:4,borderBottomRightRadius:4},children:[(0,r.jsx)("button",{onClick:()=>s("editor"),style:{backgroundColor:"editor"===n?u:"transparent",...d},children:"Editor"}),(0,r.jsx)("button",{onClick:()=>s("preview"),style:{backgroundColor:"preview"===n?u:"transparent",...d},children:"Preview"}),(0,r.jsx)("button",{onClick:()=>s("both"),style:{backgroundColor:"both"===n?u:"transparent",...d},children:"Both"})]})};function m(e){let{viewType:t,showConsole:n,fontSize:i,pixiVersion:o}=e,[l,d]=(0,a.useState)(n),[m,x]=(0,a.useState)(t),f=(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(c,{onClick:()=>d(e=>!e)})});return(0,r.jsxs)("div",{style:{height:"100%",width:"100%",display:"flex",flexDirection:"column"},children:[(0,r.jsxs)(s.am,{style:{height:"100%",overflow:"hidden",borderBottomLeftRadius:0,borderBottomRightRadius:0,flexWrap:"nowrap"},children:[(0,r.jsx)(u,{fontSize:i,style:{flexGrow:+("preview"!==m),flexShrink:+("preview"!==m),flexBasis:"editor"===m?"100%":0,width:"100%",overflow:"hidden"},pixiVersion:o,handleEditorCodeChanged:e.handleEditorCodeChanged}),(0,r.jsxs)(s.aN,{style:{height:"100%",width:"100%"},children:[(0,r.jsx)(s.G5,{style:{flexGrow:100*("editor"!==m),flexShrink:100*("editor"!==m),flexBasis:"editor"!==m?"100%":0,overflow:"hidden"},showOpenInCodeSandbox:!1,actionsChildren:f}),l&&(0,r.jsx)("div",{style:{flexGrow:35*!!l,flexShrink:35*!!l,flexBasis:l?"35%":0,width:"100%",overflow:"hidden"},children:(0,r.jsx)(s.X2,{showHeader:!1})})]})]}),(0,r.jsx)(p,{onSelectionChange:e=>{x(e)},defaultSelection:m})]})}var x=n(59047),f=n(9526);function h({viewType:e="both",showConsole:t=!1,width:n="100%",height:o="100%",dependencies:d={"pixi.js":"latest"},files:u={"index.js":"// Your code here"},fontSize:c=12,handleEditorCodeChanged:p}){let{colorMode:g}=(0,l.G)(),y={...u};delete y["index.js"];let[b]=(0,a.useState)({"/index.html":{code:'<!doctype html>\n<html>\n <head>\n <title>PixiJS Playground</title>\n <meta charset="UTF-8" />\n <link rel="stylesheet" href="./styles.css" />\n </head>\n <body>\n <script src="index.js"><\/script>\n </body>\n</html>\n',hidden:!0},"/styles.css":{code:"body {\n margin: 0;\n overflow: hidden;\n}\n",hidden:!0},"sandbox.config.json":{code:'{"infiniteLoopProtection": false}',hidden:!0},"index.ts":{code:"",hidden:!0,active:!1},"index.js":{code:u["index.js"]??"// Your code here",hidden:!1,active:!0},...y});return(0,r.jsx)(f.A,{children:()=>(0,r.jsx)(s.l5,{template:"vanilla-ts",theme:"dark"===g?i:x.al,files:b,customSetup:{dependencies:d,entry:"index.html"},style:{height:o,width:n,margin:"0 auto",maxWidth:"100%"},options:{recompileDelay:500},children:(0,r.jsx)(m,{handleEditorCodeChanged:p,viewType:e,showConsole:t,fontSize:c,pixiVersion:d["pixi.js"]})})})}},13665(e,t,n){n.d(t,{Sx:()=>a,TY:()=>i});var r=n(96540);let a=({urlState:e,setURLState:t,pixiVersion:n})=>{let a=n.versionLabel,i=!!e,{indexCode:o}=(0,r.useMemo)(()=>e?{indexCode:e}:{indexCode:"v7.x"===a?"import * as PIXI from 'pixi.js';\n\nconst app = new PIXI.Application({ background: '#1099bb', resizeTo: window });\n\ndocument.body.appendChild(app.view);\n\nconst container = new PIXI.Container();\n\napp.stage.addChild(container);\n\n// Create a new texture\nconst texture = PIXI.Texture.from('https://pixijs.com/assets/bunny.png');\n\n// Create a 5x5 grid of bunnies\nfor (let i = 0; i < 25;
15 i++) {\n const bunny = new PIXI.Sprite(texture);\n\n bunny.anchor.set(0.5);\n bunny.x = (i % 5) * 40;\n bunny.y = Math.floor(i / 5) * 40;\n container.addChild(bunny);\n}\n\n// Move container to the center\ncontainer.x = app.screen.width / 2;\ncontainer.y = app.screen.height / 2;\n\n// Center bunny sprite in local container coordinates\ncontainer.pivot.x = container.width / 2;\ncontainer.pivot.y = container.height / 2;\n\n// Listen for animate update\napp.ticker.add((delta) => {\n // rotate the container!\n // use delta to create frame-independent transform\n container.rotation -= 0.01 * delta;\n});\n":"import { Application, Assets, Container, Sprite } from 'pixi.js';\n\n(async () => {\n // Create a new application\n const app = new Application();\n\n // Initialize the application\n await app.init({ background: '#1099bb', resizeTo: window });\n\n // Append the application canvas to the document body\n document.body.appendChild(app.canvas);\n\n // Create and add a container to the stage\n const container = new Container();\n\n app.stage.addChild(container);\n\n // Load the bunny texture\n const texture = await Assets.load('https://pixijs.com/assets/bunny.png');\n\n // Create a 5x5 grid of bunnies in the container\n for (let i = 0; i < 25; i++) {\n const bunny = new Sprite(texture);\n\n bunny.x = (i % 5) * 40;\n bunny.y = Math.floor(i / 5) * 40;\n container.addChild(bunny);\n }\n\n // Move the container to the center\n container.x = app.screen.width / 2;\n container.y = app.screen.height / 2;\n\n // Center the bunny sprites in local container coordinates\n container.pivot.x = container.width / 2;\n container.pivot.y = container.height / 2;\n\n // Listen for animate update\n app.ticker.add((time) => {\n // Continuously rotate the container!\n // * use delta to create frame-independent transform *\n container.rotation -= 0.01 * time.deltaTime;\n });\n})();\n"},[a,e]);return{indexCode:o,handleEditorCodeChanged:(0,r.useCallback)(e=>{e&&t({state:e},!i)},[i,t])}};function i(e){let t="string"!=typeof e;return{indexCode:t?e.index:e,extraFiles:t?Object.fromEntries(Object.entries(e).filter(([e])=>"index"!==e)):void 0}}},80553(e,t,n){n.d(t,{A:()=>y});var r=n(74848),a=n(60714),i=n(78570);function o(e){return(0,i.zW)("example",!0),(0,r.jsx)(a.K,{height:"calc(100%)",fontSize:14,...e})}var s=n(9526),l=n(13665),d=n(17057),u=n(51647),c=n(60333),p=n(96540),m=n(56347);let x=(0,d.A)(u.A,function(e){return btoa(JSON.stringify(e))}),f=(0,d.A)(u.A,function(e){try{return JSON.parse(atob(e))}catch{return}}),h=(0,c.A)({state:x}),g=(0,c.A)({state:f});function y({pixiVersion:e}){var t;let n,a,i,d,[u,c]=(t=e=>{let{state:t}=e;return{state:t??void 0}},n=(0,m.W6)(),a=(0,p.useMemo)(()=>g(Array.from(new URLSearchParams(n.location.search).entries()).reduce((e,[t,n])=>({...e,[t]:n}),{})),[g,n.location.search]),i=(0,p.useRef)(t(a)),[d=(0,p.useMemo)(()=>({...i.current,...a}),[a]),(e,t=!0,r=!1)=>{let a=new URLSearchParams(Object.entries(h(Object.entries("function"==typeof e?e(d):{...d,...e}).reduce((e,[t,n])=>n===i.current[t]?e:{...e,[t]:n},{})))),o={pathname:location.pathname,search:a.toString()};r?t?n.push(o):n.replace(o):t?history.pushState(o,"",`${o.pathname}?${a.toString()}`):history.replaceState(o,"",`${o.pathname}?${a.toString()}`)}]),{state:x}=u,{indexCode:f,handleEditorCodeChanged:b}=(0,l.Sx)({urlState:x,setURLState:c,pixiVersion:e});return(0,r.jsx)("div",{className:"wrapper_GThw",children:(0,r.jsx)(s.A,{children:()=>(0,r.jsx)(o,{files:{"index.js":f},dependencies:{"pixi.js":e.version},handleEditorCodeChanged:b})})})}},78570(e,t,n){n.d(t,{qn:()=>i,xi:()=>o,zW:()=>a});var r=n(96540);let a=(e,t=!0)=>{(0,r.useEffect)(()=>{let n=document.querySelector("main > .container");if(null!==n&&t)return n.classList.add(e),()=>{n.classList.remove(e)}},[e,t])},i=(e,t=!0)=>{(0,r.useEffect)(()=>{let n=document.querySelector(".container > .row");if(null!==n&&t)return n.classList.add(e),()=>{n.classList.remove(e)}},[e,t])},o=(e,t,n=!0)=>{(0,r.useEffect)(()=>{let r=document.querySelector(e);if(null!==r&&n)return r.classList.add(t),()=>{r.classList.remove(t)}},[e,t,n])}},28103(e){e.exports=JSON.parse('{"versionLabel":"v8.x","version":"8.21.0","releaseNotes":"https://github.com/pixijs/pixijs/releases/tag/v8.21.0","build":"https://pixijs.download/v8.21.0/pixi.min.js","docs":"https://pixijs.download/v8.21.0/docs/index.html","npm":"8.21.0","prerelease":false,"latest":true}')}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.