https://pixijs.com/assets/js/957563b3.e6c06aed.js

1"use strict";(self.webpackChunkpixi_docusaurus=self.webpackChunkpixi_docusaurus||[]).push([["2938"],{13959(e,i,n){n.r(i),n.d(i,{metadata:()=>s,default:()=>h,frontMatter:()=>o,contentTitle:()=>d,toc:()=>l,assets:()=>a});var s=JSON.parse('{"id":"guides/migrations/v7","title":"v7 Migration Guide","description":"First and foremost, PixiJS v7 is a modernization release that reflects changes in the ecosystem since PixiJS was first published over six years ago. Browsers have gotten better, but PixiJS hasn\'t really taken advantage of some of the new features like fetch, Workers, modern JavaScript language syntax. This release keeps intact much of the high-level DisplayObjects (e.g., Sprite, Graphics, Mesh, etc). Aside from a few things, this release should be medium to low impact for most users.","source":"@site/versioned_docs/version-7.x/guides/migrations/v7.md","sourceDirName":"guides/migrations","slug":"/guides/migrations/v7","permalink":"/7.x/guides/migrations/v7","draft":false,"unlisted":false,"editUrl":"https://github.com/pixijs/pixijs.com/tree/main/versioned_docs/version-7.x/guides/migrations/v7.md","tags":[],"version":"7.x","frontMatter":{},"sidebar":"guidesSidebar","previous":{"title":"Upgrading PixiJS","permalink":"/7.x/guides/migrations/upgrading"},"next":{"title":"v6 Migration Guide","permalink":"/7.x/guides/migrations/v6"}}'),t=n(74848),r=n(28453);let o={},d="v7 Migration Guide",a={},l=[{value:"\u{1F44B} Dropping Internet Explorer",id:"-dropping-internet-explorer",level:2},{value:"\u{1F5D1}\uFE0F Remove Polyfills",id:"\uFE0F-remove-polyfills",level:2},{value:"\u{1F4AC} Output ES2020 (modules) and ES2017 (browser)",id:"-output-es2020-modules-and-es2017-browser",level:2},{value:"\u{1F42D} Replaces InteractionManager with EventSystem",id:"-replaces-interactionmanager-with-eventsystem",level:2},{value:"\u{1F4E6} Replaces Loader with Assets",id:"-replaces-loader-with-assets",level:2},{value:"\u{1F91D} Abandon the use of peerDependencies",id:"-abandon-the-use-of-peerdependencies",level:2},{value:"\u{1F442} Other Changes",id:"-other-changes",level:2},{value:"Exports from <code>@pixi/core</code>",id:"exports-from-pixicore",level:3},{value:"Extract and Prepare Systems",id:"extract-and-prepare-systems",level:3},{value:"Extensions Self-Install",id:"extensions-self-install",level:3},{value:"Using hitTest with Events",id:"using-hittest-with-events",level:3},{value:"New Async Extract Methods",id:"new-async-extract-methods",level:3},{value:"Interactive Move Events",id:"interactive-move-events",level:3},{value:"Interactive Property Handlers are Removed",id:"interactive-property-handlers-are-removed",level:3},{value:"Property <code>buttonMode</code> has been removed",id:"property-buttonmode-has-been-removed",level:3},{value:"\u261D\uFE0F Suggestions for Upgrading",id:"\uFE0F-suggestions-for-upgrading",level:2},{value:"\u{1F3D7}\uFE0F Plugin Supported",id:"\uFE0F-plugin-supported",level:2}];function c(e){let i={a:"a",code:"code",del:"del",em:"em",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,r.R)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(i.header,{children:(0,t.jsx)(i.h1,{id:"v7-migration-guide",children:"v7 Migration Guide"})}),"\n",(0,t.jsxs)(i.p,{children:["First and foremost, PixiJS v7 is a modernization release that reflects changes in the ecosystem since PixiJS was first published over six years ago. Browsers have gotten better, but PixiJS hasn't really taken advantage of some of the new features like ",(0,t.jsx)(i.code,{children:"fetch"}),", ",(0,t.jsx)(i.code,{children:"Workers"}),", modern JavaScript language syntax. This release keeps intact much of the high-level DisplayObjects (e.g., Sprite, Graphics, Mesh, etc). Aside from a few things, this release should be medium to low impact for most users."]}),"\n",(0,t.jsx)(i.h2,{id:"-dropping-internet-explorer",children:"\u{1F44B} Dropping Internet Explorer"}),"\n",(0,t.jsxs)(i.p,{children:["Microsoft officially ended support for IE, so we decided to follow. It simplified many of our modernizations since IE was an outliner from Safari/Chrome/Firefox/Edge and mobile browsers. If you need support for IE, please consider using ",(0,t.jsx)(i.a,{href:"https://babeljs.io/",children:"Babel"})," or some other trans-piling tool."]}),"\n",(0,t.jsx)(i.h2,{id:"\uFE0F-remove-polyfills",children:"\u{1F5D1}\uFE0F Remove Polyfills"}),"\n",(0,t.jsxs)(i.p,{children:["We removed the bundled polyfills such as ",(0,t.jsx)(i.co

1de,{children:"requestAnimationFrame"})," and ",(0,t.jsx)(i.code,{children:"Promise"}),". These things are widely available in browsers now. If projects require them, developers should include the polyfills they need for backward-compatibility."]}),"\n",(0,t.jsx)(i.h2,{id:"-output-es2020-modules-and-es2017-browser",children:"\u{1F4AC} Output ES2020 (modules) and ES2017 (browser)"}),"\n",(0,t.jsxs)(i.p,{children:["PixiJS historically only published ES5 (no classes!). A new output standard allows us to use ES2017 features that previously we couldn't use (e.g., ",(0,t.jsx)(i.code,{children:"String.prototype.startsWith"}),", ",(0,t.jsx)(i.code,{children:"Array.prototype.contains"}),", etc). Not only does it make the code more readable, but the output looks nicer as well. For modules we are outputting ES2020, which contains syntax like nullish coalescing (",(0,t.jsx)(i.code,{children:"??"}),"). If your project needs to have backward compatibility, you can use ",(0,t.jsx)(i.a,{href:"https://babeljs.io/",children:"Babel"})," to transpile or polyfill."]}),"\n",(0,t.jsx)(i.h2,{id:"-replaces-interactionmanager-with-eventsystem",children:"\u{1F42D} Replaces InteractionManager with EventSystem"}),"\n",(0,t.jsxs)(i.p,{children:["InteractionManager was getting complex and difficult to maintain. Few core team members understood the code. We decided to move to FederatedEvents, which is concise, better aligned with the DOM, and supports things like bubbling. The good news, is you shouldn't have to change code, as it is largely a drop-in replacement. We added ",(0,t.jsx)(i.code,{children:"addEventListener"})," and ",(0,t.jsx)(i.code,{children:"removeEventListener"})," APIs to DisplayObject which have the same DOM signature and can be used instead of ",(0,t.jsx)(i.code,{children:"on"})," and ",(0,t.jsx)(i.code,{children:"off"}),"."]}),"\n",(0,t.jsx)(i.h2,{id:"-replaces-loader-with-assets",children:"\u{1F4E6} Replaces Loader with Assets"}),"\n",(0,t.jsxs)(i.p,{children:["Similarly, we've been wanting to remove the Loader be

1cause of its legacy approach (e.g., XMLHttpRequest). This was forked from ",(0,t.jsx)(i.a,{href:"https://github.com/englercj/resource-loader",children:"resource-loader"})," that has been with PixiJS for a long time. The original design inspiration for Loader was driven largely by Flash/AS3, which now seem dated. There were a few things we wanted out of a new iteration: static loading, loading with Workers, background loading, Promise-based, fewer layers of caching. Here's a quick example of how this will change:"]}),"\n",(0,t.jsx)(i.pre,{children:(0,t.jsx)(i.code,{className:"language-js",children:"import { Loader, Sprite } from 'pixi.js';\n\nconst loader = new Loader();\nloader.add('background', 'path/to/assets/background.jpg');\nloader.load((loader, resources) => {\n  const image = Sprite.from(resources.background.texture);\n});\n"})}),"\n",(0,t.jsx)(i.p,{children:"Now becomes:"}),"\n",(0,t.jsx)(i.pre,{children:(0,t.jsx)(i.code,{className:"language-js",children:"import { Assets, Sprite } from 'pixi.js';\n\nconst texture = await Assets.load('path/to/assets/background.jpg');\nconst image = Sprite.from(texture);\n"})}),"\n",(0,t.jsx)(i.h2,{id:"-abandon-the-use-of-peerdependencies",children:"\u{1F91D} Abandon the use of peerDependencies"}),"\n",(0,t.jsxs)(i.p,{children:[(0,t.jsxs)(i.del,{children:["PixiJS heavily uses ",(0,t.jsx)(i.code,{children:"peerDependencies"})," in the ",(0,t.jsx)(i.strong,{children:"package.json"})," within each package. This design choice has plagued Pixi with many issues. It's a breaking change to remove, so now was a good time. We have decided to completely remove ",(0,t.jsx)(i.code,{children:"peerDependencies"}),", instead opting for ",(0,t.jsx)(i.em,{children:"nothing"}),". This should make installing and upgrading ",(0,t.jsx)(i.code,{children:"pixi.js"})," much easier. We are working on updating ",(0,t.jsx)(i.a,{href:"https://pixijs.io/customize",children:"our tooling"})," for composing a custom version with packages."]})," ",(0,t.jsx)(i.strong,{children:"Edit: As of 7.2.0, we have reverted this change to keep compatibility with some module-based CDNs."})]}),"\n",(0,t.jsx)(i.h2,{id:"-other-changes",children:"\u{1F442} Other Changes"}),"\n",(0,t.jsxs)(i.ul,{children:["\n",(0,t.jsxs)(i.li,{children:["Browser builds have been removed for all packages, with the exception of ",(0,t.jsx)(i.code,{children:"pixi.js"})," and ",(0,t.jsx)(i.code,{children:"pixi.js-legacy"}),"."]}),"\n",(0,t.jsxs)(i.li,{children:["Removes ",(0,t.jsx)(i.code,{children:"Graphics.nextRoundedRectBehavior"})," this is now the default behavior"]}),"\n",(0,t.jsxs)(i.li,{children:["Removes ",(0,t.jsx)(i.code,{children:"Text.nextLineHeightBehavior"})," this is now the default behavior"]}),"\n",(0,t.jsxs)(i.li,{children:[(0,t.jsx)(i.code,{children:"AbstractBatchRenderer"})," and ",(0,t.jsx)(i.code,{children:"BatchPluginFactory"})," has been removed. Either extends ",(0,t.jsx)(i.code,{children:"BatchRenderer"})," or use ",(0,t.jsx)(i.code,{children:"setShaderGenerator"})," on the default BatchRenderer, (e.g., ",(0,t.jsx)(i.code,{children:"renderer.plugins.batch"}),")"]}),"\n",(0,t.jsxs)(i.li,{children:["BatchRenderer is installed by default in ",(0,t.jsx)(i.code,{children:"@pixi/core"}),", no need to ",(0,t.jsx)(i.code,{children:"Renderer.registerPlugin('batch', BatchRenderer)"})," anymore"]}),"\n"]}),"\n",(0,t.jsxs)(i.h3,{id:"exports-from-pixicore",children:["Exports from ",(0,t.jsx)(i.code,{children:"@pixi/core"})]}),"\n",(0,t.jsxs)(i.p,{children:["The ",(0,t.jsx)(i.code,{children:"@pixi/core"})," package now depends and re-exports the following packages."]}),"\n",(0,t.jsxs)(i.ul,{children:["\n",(0,t.jsx)(i.li,{children:(0,t.jsx)(i.code,{children:"@pixi/math"})}),"\n",(0,t.jsx)(i.li,{children:(0,t.jsx)(i.code,{children:"@pixi/contants"})}),"\n",(0,t.jsx)(i.li,{children:(0,t.jsx)(i.code,{children:"@pixi/utils"})}),"\n",(0,t.jsx)(i.li,{children:(0,t.jsx)(i.code,{children:"@pixi/runner"})}),"\n",(0,t.jsx)(i.li,{children:(0,t.jsx)(i.code,{children:"@pixi/settings"})}),"\n",(0,t.jsx)(i.li,{children:(0,t.jsx)(i.code,{children:"@pixi/ticker"})}),"\n"]}),"\n",(0,t.jsxs)(i.p,{children:["While some packages will still work when installed directly, others will not, since by installing them alongside ",(0,t.jsx)(i.co

1de,{children:"@pixi/core"})," you will be effectively importing two copies of the same code.\xa0\nThis will lead to errors where changing settings from ",(0,t.jsx)(i.code,{children:"@pixi/settings"})," doesn't do anything since ",(0,t.jsx)(i.code,{children:"@pixi/core"})," has its own version of that package.\nIt is recommended that you uninstall these from your project and use ",(0,t.jsx)(i.code,{children:"@pixi/core"})," instead."]}),"\n",(0,t.jsx)(i.pre,{children:(0,t.jsx)(i.code,{className:"language-js",children:"import { Rectangle } from '@pixi/math';\nimport { settings } from '@pixi/settings';\nimport { ALPHA_MODES } from '@pixi/constants';\nimport { string2hex } from '@pixi/utils';\n"})}),"\n",(0,t.jsx)(i.p,{children:"Now becomes:"}),"\n",(0,t.jsx)(i.pre,{children:(0,t.jsx)(i.code,{className:"language-js",children:"import { Rectangle, settings, ALPHA_MODES, utils } from '@pixi/core';\n\nconst { string2hex } = utils;\n"})}),"\n",(0,t.jsx)(i.h3,{id:"extract-and-prepare-systems",children:"Extract and Prepare Systems"}),"\n",(0,t.jsx)(i.p,{children:'Extract and prepare plugins have been converted to Renderer "systems".'}),"\n",(0,t.jsx)(i.pre,{children:(0,t.jsx)(i.code,{className:"language-js",children:"renderer.plugins.extract;\nrenderer.plugins.prepare;\n"})}),"\n",(0,t.jsx)(i.p,{children:"Now becomes:"}),"\n",(0,t.jsx)(i.pre,{children:(0,t.jsx)(i.code,{className:"language-js",children:"renderer.extract;\nrenderer.prepare;\n"})}),"\n",(0,t.jsx)(i.h3,{id:"extensions-self-install",children:"Extensions Self-Install"}),"\n",(0,t.jsx)(i.p,{children:"Extensions now install themselves, so you should only need to import the class in order to use. For example, in v6:"}),"\n",(0,t.jsx)(i.pre,{children:(0,t.jsx)(i.code,{className:"language-js",children:"import { AccessibilityManager } from '@pixi/accessibility';\nimport { extensions } from '@pixi/core';\nextensions.add(AccessibilityManager);\n"})}),"\n",(0,t.jsx)(i.p,{children:"Now becomes:"}),"\n",(0,t.jsx)(i.pre,{children:(0,t.jsx)(i.code,{className:"language-js",children:"import '@pixi/accessibility';\n"})}),"\n",(0,t.jsx)(i.h3,{id:"using-hittest-with-events",children:"Using hitTest with Events"}),"\n",(0,t.jsx)(i.p,{children:"With the new events system, one of the common APIs that changed is `hitTest."}),"\n",(0,t.jsx)(i.pre,{children:(0,t.jsx)(i.code,{className:"language-js",children:"import { Application } from 'pixi.js';\n\nconst app = new Application();\napp.renderer.plugins.interaction.hitTest({ x, y });\n"})}),"\n",(0,t.jsx)(i.p,{children:"Now becomes:"}),"\n",(0,t.jsx)(i.pre,{children:(0,t.jsx)(i.code,{className:"language-js",children:"import { Application, EventBoundary } from 'pixi.js';\n\nconst app = new Application();\nconst boundary = new EventBoundary(app.stage);\nboundary.hitTest(x, y);\n"})}),"\n",(0,t.jsx)(i.h3,{id:"new-async-extract-methods",children:"New Async Extract Methods"}),"\n",(0,t.jsx)(i.p,{children:"The following methods are now async and return a Promise."}),"\n",(0,t.jsxs)(i.ul,{children:["\n",(0,t.jsx)(i.li,{children:(0,t.jsx)(i.code,{children:"CanvasExtract.base64()"})}),"\n",(0,t.jsx)(i.li,{children:(0,t.jsx)(i.code,{children:"CanvasExtract.image()"})}),"\n",(0,t.jsx)(i.li,{children:(0,t.jsx)(i.code,{children:"Extract.base64()"})}),"\n",(0,t.jsx)(i.li,{children:(0,t.jsx)(i.code,{children:"Extract.image()"})}),"\n"]}),"\n",(0,t.jsx)(i.pre,{children:(0,t.jsx)(i.code,{className:"language-js",children:"import { Application, EventBoundary } from 'pixi.js';\n\nconst app = new Application();\nconst dataUri = app.renderer.extract.base64();\n"})}),"\n",(0,t.jsx)(i.p,{children:"Now becomes:"}),"\n",(0,t.jsx)(i.pre,{children:(0,t.jsx)(i.code,{className:"language-js",children:"import { Application, EventBoundary } from 'pixi.js';\n\nconst app = new Application();\nconst dataUri = await app.renderer.extract.base64();\n"})}),"\n",(0,t.jsx)(i.h3,{id:"interactive-move-events",children:"Interactive Move Events"}),"\n",(0,t.jsxs)(i.p,{children:["Interaction events in PixiJS now behave like the DOM in v7. This was intentional to align around behavior that would be familiar with developers, but obviously impacts the behavior with ",(0,t.jsx)(i.co

1de,{children:"pointermove"}),", ",(0,t.jsx)(i.code,{children:"mousemove"}),", and ",(0,t.jsx)(i.code,{children:"touchmove"}),"."]}),"\n",(0,t.jsxs)(i.p,{children:["Like the DOM, move events are now ",(0,t.jsx)(i.em,{children:"local"}),". This means that if you are outside the bounds of the object, you will not receive a move event. Generally, you should consider adding move events to the stage or parent instead of the DisplayObject itself."]}),"\n",(0,t.jsxs)(i.p,{children:["Working example: ",(0,t.jsx)(i.a,{href:"https://jsfiddle.net/bigtimebuddy/spnv4wm6/",children:"https://jsfiddle.net/bigtimebuddy/spnv4wm6/"})]}),"\n",(0,t.jsx)(i.h3,{id:"interactive-property-handlers-are-removed",children:"Interactive Property Handlers are Removed"}),"\n",(0,t.jsx)(i.p,{children:"Property-based handlers were removed from events. This was a feature of the old InteractionManager. For instance:"}),"\n",(0,t.jsx)(i.pre,{children:(0,t.jsx)(i.code,{className:"language-js",children:"sprite.pointertap = () => {\n  // handler the pointertap\n};\n"})}),"\n",(0,t.jsx)(i.p,{children:"Now becomes:"}),"\n",(0,t.jsx)(i.pre,{children:(0,t.jsx)(i.code,{className:"language-js",children:"sprite.on('pointertap', () => {\n  // handler the pointertap\n});\n"})}),"\n",(0,t.jsxs)(i.h3,{id:"property-buttonmode-has-been-removed",children:["Property ",(0,t.jsx)(i.code,{children:"buttonMode"})," has been removed"]}),"\n",(0,t.jsxs)(i.p,{children:["The property ",(0,t.jsx)(i.code,{children:"buttonMode"})," was a convenience for toggling the ",(0,t.jsx)(i.code,{children:"cursor"})," property between ",(0,t.jsx)(i.code,{children:"pointer"})," and ",(0,t.jsx)(i.code,{children:"null"}),". It has now been removed."]}),"\n",(0,t.jsx)(i.pre,{children:(0,t.jsx)(i.code,{className:"language-js",children:"sprite.buttonMode = true;\n"})}),"\n",(0,t.jsx)(i.p,{children:"Now becomes:"}),"\n",(0,t.jsx)(i.pre,{children:(0,t.jsx)(i.code,{className:"language-js",children:"sprite.cursor = 'pointer';\n"})}),"\n",(0,t.jsxs)(i.p,{children:["If you would like to re-add this functionality, you can ",(0,t.jsx)(i.a,{href:"https://jsfiddle.net/bigtimebuddy/ygka52dr/",children:"patch DisplayObject's prototype"}),":"]}),"\n",(0,t.jsx)(i.pre,{children:(0,t.jsx)(i.code,{className:"language-js",children:"import { DisplayObject } from 'pixi.js';\n\nObject.defineProperty(DisplayObject.prototype, 'buttonMode', {\n  get() {\n    return this.cursor === 'pointer';\n  },\n  set(value) {\n    this.cursor = value ? 'pointer' : null;\n  },\n});\n"})}),"\n",(0,t.jsx)(i.h2,{id:"\uFE0F-suggestions-for-upgrading",children:"\u261D\uFE0F Suggestions for Upgrading"}),"\n",(0,t.jsx)(i.p,{children:"If you're planning on transitioning your code from v6, it would be helpful to implement some of the more dramatic changes in v6 first before upgrading to v7:"}),"\n",(0,t.jsxs)(i.ul,{children:["\n",(0,t.jsx)(i.li,{children:"Update to the latest v6.5.x"}),"\n",(0,t.jsxs)(i.li,{children:[(0,t.jsx)(i.a,{href:"https://codesandbox.io/s/pixijs-uninstall-interaction-ke6u3q",children:"Switch to the Events package"})," by installing ",(0,t.jsx)(i.code,{children:"@pixi/events"})," and swapping InteractionManager."]}),"\n"]}),"\n",(0,t.jsx)(i.pre,{children:(0,t.jsx)(i.code,{className:"language-js",children:"import { InteractionManager, extensions, Application } from 'pixi.js';\nimport { EventSystem } from '@pixi/events';\n\n// Uninstall interaction\nextensions.remove(InteractionManager);\n\n// Create the renderer or application\nconst app = new Application();\n\n// Install events\napp.renderer.addSystem(EventSystem, 'events');\n"})}),"\n",(0,t.jsxs)(i.ul,{children:["\n",(0,t.jsxs)(i.li,{children:["Switch to the Assets package by installing ",(0,t.jsx)(i.code,{children:"@pixi/assets"})," and swapping for Loader. For more information on implementing Assets, see ",(0,t.jsx)(i.a,{href:"/7.x/guides/components/assets",children:"this guide"}),"."]}),"\n",(0,t.jsxs)(i.li,{children:["Set ",(0,t.jsx)(i.code,{children:"Graphics.nextRoundedRectBehavior = true"}),", this uses arcs for corner radius instead of bezier curves."]}

1),"\n",(0,t.jsxs)(i.li,{children:["Set ",(0,t.jsx)(i.code,{children:"Text.nextLineHeightBehavior = true"}),", this defaults to the DOM-like behavior for line height."]}),"\n"]}),"\n",(0,t.jsx)(i.h2,{id:"\uFE0F-plugin-supported",children:"\u{1F3D7}\uFE0F Plugin Supported"}),"\n",(0,t.jsxs)(i.table,{children:[(0,t.jsx)(i.thead,{children:(0,t.jsxs)(i.tr,{children:[(0,t.jsx)(i.th,{children:"Plugin"}),(0,t.jsx)(i.th,{children:"Compatible"}),(0,t.jsx)(i.th,{children:"Plugin Version Supported"})]})}),(0,t.jsxs)(i.tbody,{children:[(0,t.jsxs)(i.tr,{children:[(0,t.jsx)(i.td,{children:(0,t.jsx)(i.a,{href:"https://github.com/pixijs/sound",children:"PixiJS Sound"})}),(0,t.jsx)(i.td,{children:"\u2705"}),(0,t.jsx)(i.td,{children:"v5.0.0+"})]}),(0,t.jsxs)(i.tr,{children:[(0,t.jsx)(i.td,{children:(0,t.jsx)(i.a,{href:"https://github.com/pixijs/html-text",children:"PixiJS HTMLText"})}),(0,t.jsx)(i.td,{children:"\u2705"}),(0,t.jsx)(i.td,{children:"v3.0.0+"})]}),(0,t.jsxs)(i.tr,{children:[(0,t.jsx)(i.td,{children:(0,t.jsx)(i.a,{href:"https://github.com/pixijs/filters",children:"PixiJS Filters"})}),(0,t.jsx)(i.td,{children:"\u2705"}),(0,t.jsx)(i.td,{children:"v5.0.0+"})]}),(0,t.jsxs)(i.tr,{children:[(0,t.jsx)(i.td,{children:(0,t.jsx)(i.a,{href:"https://github.com/pixijs/gif",children:"PixiJS GIF"})}),(0,t.jsx)(i.td,{children:"\u2705"}),(0,t.jsx)(i.td,{children:"v2.0.0+"})]}),(0,t.jsxs)(i.tr,{children:[(0,t.jsx)(i.td,{children:(0,t.jsx)(i.a,{href:"https://github.com/pixijs/spine",children:"PixiJS Spine"})}),(0,t.jsx)(i.td,{children:"\u2705"}),(0,t.jsx)(i.td,{children:"v4.0.0+"})]}),(0,t.jsxs)(i.tr,{children:[(0,t.jsx)(i.td,{children:(0,t.jsx)(i.a,{href:"https://github.com/pixijs/particle-emitter",children:"PixiJS Particle Emitter"})}),(0,t.jsx)(i.td,{children:"\u2705"}),(0,t.jsx)(i.td,{children:"v5.0.8+"})]}),(0,t.jsxs)(i.tr,{children:[(0,t.jsx)(i.td,{children:(0,t.jsx)(i.a,{href:"https://github.com/pixijs/animate",children:"PixiJS Animate"})}),(0,t.jsx)(i.td,{children:"\u274C"}),(0,t.jsx)(i.td,{})]}),(0,t.jsxs)(i.tr,{children:[(0,t.jsx)(i.td,{children:(0,t.jsx)(i.a,{href:"https://github.com/pixijs/layers",children:"PixiJS Layers"})}),(0,t.jsx)(i.td,{children:"\u2705"}),(0,t.jsx)(i.td,{children:"v2.0.0+"})]}),(0,t.jsxs)(i.tr,{children:[(0,t.jsx)(i.td,{children:(0,t.jsx)(i.a,{href:"https://github.com/pixijs/lights",children:"PixiJS Lights"})}),(0,t.jsx)(i.td,{children:"\u2705"}),(0,t.jsx)(i.td,{children:"v4.0.0+"})]}),(0,t.jsxs)(i.tr,{children:[(0,t.jsx)(i.td,{children:(0,t.jsx)(i.a,{href:"https://github.com/pixijs/graphics-smooth",children:"PixiJS Graphics Smooth"})}),(0,t.jsx)(i.td,{children:"\u2705"}),(0,t.jsx)(i.td,{children:"v1.0.0+"})]}),(0,t.jsxs)(i.tr,{children:[(0,t.jsx)(i.td,{children:(0,t.jsx)(i.a,{href:"https://github.com/pixijs/tilemap",children:"PixiJS Tilemap"})}),(0,t.jsx)(i.td,{children:"\u274C"}),(0,t.jsx)(i.td,{})]})]})]})]})}function h(e={}){let{wrapper:i}={...(0,r.R)(),...e.components};return i?(0,t.jsx)(i,{...e,children:(0,t.jsx)(c,{...e})}):c(e)}},28453(e,i,n){n.d(i,{R:()=>o,x:()=>d});var s=n(96540);let t={},r=s.createContext(t);function o(e){let i=s.useContext(r);return s.useMemo(function(){return"function"==typeof e?e(i):{...i,...e}},[i,e])}function d(e){let i;return i=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:o(e.components),s.createElement(r.Provider,{value:i},e.children)}}}]);