1"use strict";(self.webpackChunkpixi_docusaurus=self.webpackChunkpixi_docusaurus||[]).push([["1160"],{59542(e,s,n){n.r(s),n.d(s,{metadata:()=>i,default:()=>h,frontMatter:()=>r,contentTitle:()=>d,toc:()=>l,assets:()=>o});var i=JSON.parse('{"id":"guides/components/assets/resolver","title":"Resolver","description":"Learn how to use PixiJS\'s asset resolver for dynamic, multi-format asset loading with platform-aware optimizations.","source":"@site/docs/guides/components/assets/resolver.md","sourceDirName":"guides/components/assets","slug":"/guides/components/assets/resolver","permalink":"/8.x/guides/components/assets/resolver","draft":false,"unlisted":false,"editUrl":"https://github.com/pixijs/pixijs.com/tree/main/docs/guides/components/assets/resolver.md","tags":[],"version":"current","sidebarPosition":0,"frontMatter":{"sidebar_position":0,"description":"Learn how to use PixiJS\'s asset resolver for dynamic, multi-format asset loading with platform-aware optimizations."},"sidebar":"guidesSidebar","previous":{"title":"Assets","permalink":"/8.x/guides/components/assets/"},"next":{"title":"Manifests & Bundles","permalink":"/8.x/guides/components/assets/manifest"}}'),t=n(74848),a=n(28453);let r={sidebar_position:0,description:"Learn how to use PixiJS's asset resolver for dynamic, multi-format asset loading with platform-aware optimizations."},d="Resolver",o={},l=[{value:"Resolver Lifecycle",id:"resolver-lifecycle",level:2},{value:"Using Unresolved Assets",id:"using-unresolved-assets",level:2},{value:"Examples",id:"examples",level:2},{value:"Loading a Single Asset",id:"loading-a-single-asset",level:3},{value:"Loading with Explicit Parser and Loader Options",id:"loading-with-explicit-parser-and-loader-options",level:3},{value:"Using Wildcards for Responsive and Format-Aware Loading",id:"using-wildcards-for-responsive-and-format-aware-loading",level:3},{value:"Related Tools and Features",id:"related-tools-and-features",level:2}];function c(e){let s={a:"a",code:"code",em:"em",h1:"h1",h2:"h2",h3:"h3",header:"header",hr:"hr",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,a.R)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(s.header,{children:(0,t.jsx)(s.h1,{id:"resolver",children:"Resolver"})}),"\n",(0,t.jsxs)(s.p,{children:["In PixiJS, asset management centers around the concept of ",(0,t.jsx)(s.code,{children:"UnresolvedAsset"})," and ",(0,t.jsx)(s.code,{children:"ResolvedAsset"}),". This system is designed to support multi-format assets, conditional loading, and runtime optimization based on platform capabilities (e.g., WebP support, device resolution, or performance constraints)."]}),"\n",(0,t.jsxs)(s.p,{children:["Rather than specifying a fixed URL, developers describe what assets ",(0,t.jsx)(s.em,{children:"could"})," be loaded \u2014 and PixiJS selects the best option dynamically."]}),"\n",(0,t.jsx)(s.h2,{id:"resolver-lifecycle",children:"Resolver Lifecycle"}),"\n",(0,t.jsx)(s.p,{children:"The resolution process involves four key steps:"}),"\n",(0,t.jsxs)(s.ol,{children:["\n",(0,t.jsxs)(s.li,{children:["\n",(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.strong,{children:"UnresolvedAsset Creation"}),"\nAssets defined using a string or object are internally normalized into ",(0,t.jsx)(s.code,{children:"UnresolvedAsset"})," instances. These include metadata such as aliases, wildcard paths, parser hints, and custom data."]}),"\n"]}),"\n",(0,t.jsxs)(s.li,{children:["\n",(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.strong,{children:"Source Expansion"}),"\nThe ",(0,t.jsx)(s.code,{children:"src"})," field of an ",(0,t.jsx)(s.code,{children:"UnresolvedAsset"})," can be a string or array of strings. PixiJS expands any wildcard patterns (e.g. ",(0,t.jsx)(s.code,{children:"myAsset@{1,2}x.{png,webp}"}),") into a list of concrete candidate URLs."]}),"\n"]}),"\n",(0,t.jsxs)(s.li,{children:["\n",(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.strong,{children:"Best-Match Selection"}),"\nPixiJS evaluates all candidate URLs and uses platform-aware heuristics to pick the most suitable source. Factors include supported formats (e.g. WebP vs PNG), device pixel ratio, and custom configuration such as preferred formats."]}),"\n"]}),"\n",(0,t.jsxs)(s.li,{children:["\n",(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.strong,{children:"ResolvedAsset Output"}),"\nThe result is a ",(0,t.jsx)(s.code,{children:"ResolvedAsset"})," containing a specific URL and all required metadata, ready to be passed to the relevant parser and loaded into memory."]}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(s.h2,{id:"using-unresolved-assets",children:"Using Unresolved Assets"}),"\n",(0,t.jsxs)(s.p,{children:["An ",(0,t.jsx)(s.code,{children:"UnresolvedAsset"})," is the primary structure used to define assets in PixiJS. It allows you to specify the source URL(s), alias(es), and any additional data needed for loading. They are more complex, but are also more powerful."]}),"\n",(0,t.jsxs)(s.table,{children:[(0,t.jsx)(s.thead,{children:(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.th,{children:"Field"}),(0,t.jsx)(s.th,{children:"Type"}),(0,t.jsx)(s.th,{children:"Description"})]})}),(0,t.jsxs)(s.tbody,{children:[(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.td,{children:(0,t.jsx)(s.code,{children:"alias"})}),(0,t.jsx)(s.td,{children:(0,t.jsx)(s.code,{children:"string | string[]"})}),(0,t.jsx)(s.td,{children:"One or more aliases used to reference this asset later."})]}),(0,t.jsxs)(s.tr,{children:[(0,t.jsx)(s.td,{children:(0,t.jsx)(s.code,{children:"src"})}),(0,t.jsx)(s.td,{children:(0,t.jsx)(s.code,{children:"string | string[]"})}),(0,t.jsx)(s.td,{children:"Path or paths to one or more asset candidates. Supports wildcards."})]}),(0,t.jsxs)(s.tr,{children:[(0,t.jsxs)(s.td,{children:[(0,t.jsx)(s.code,{children:"loadParser"})," (opt)"]}),(0,t.jsx)(s.td,{children:(0,t.jsx)(s.code,{children:"string"})}),(0,t.jsxs)(s.td,{children:["A specific parser to handle the asset (e.g. ",(0,t.jsx)(s.code,{children:"'loadTextures'"}),", ",(0,t.jsx)(s.code,{children:"'loadJson'"}),")."]})]}),(0,t.jsxs)(s.tr,{children:[(0,t.jsxs)(s.td,{children:[(0,t.jsx)(s.code,{children:"data"})," (opt)"]}),(0,t.jsx)(s.td,{children:(0,t.jsx)(s.code,{children:"any"})}),(0,t.jsx)(s.td,{children:"Extra data to pass into the loader. This varies by parser type."})]})]})]}),"\n",(0,t.jsx)(s.h2,{id:"examples",children:"Examples"}),"\n",(0,t.jsx)(s.h3,{id:"loading-a-single-asset",children:"Loading a Single Asset"}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-ts",children:"import { Assets } from 'pixi.js';\n\nawait Assets.load({\n alias: 'bunny',\n src: 'images/bunny.png',\n});\n"})}),"\n",(0,t.jsx)(s.h3,{id:"loading-with-explicit-parser-and-loader-options",children:"Loading with Explicit Parser and Loader Options"}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-ts",children:"await Assets.load({\n alias: 'bunny',\n src: 'images/bunny.png',\n loadParser: 'loadTextures',\n data: {\n alph
1aMode: 'no-premultiply-alpha',\n },\n});\n"})}),"\n",(0,t.jsx)(s.h3,{id:"using-wildcards-for-responsive-and-format-aware-loading",children:"Using Wildcards for Responsive and Format-Aware Loading"}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-ts",children:"await Assets.load({\n alias: 'bunny',\n src: 'images/bunny@{0.5,1,2}x.{png,webp}',\n});\n"})}),"\n",(0,t.jsx)(s.p,{children:"This pattern expands internally to:"}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-ts",children:"[\n 'images/[email protected]',\n 'images/[email protected]',\n 'images/[email protected]',\n 'images/[email protected]',\n 'images/[email protected]',\n 'images/[email protected]',\n];\n"})}),"\n",(0,t.jsx)(s.p,{children:"PixiJS will select the best match depending on runtime capabilities (e.g. chooses WebP if supported, 2x if on a high-res display)."}),"\n",(0,t.jsx)(s.hr,{}),"\n",(0,t.jsx)(s.h2,{id:"related-tools-and-features",children:"Related Tools and Features"}),"\n",(0,t.jsxs)(s.ul,{children:["\n",(0,t.jsxs)(s.li,{children:[(0,t.jsx)(s.strong,{children:"AssetPack"}),": If you're managing large asset sets, ",(0,t.jsx)(s.a,{href:"https://pixijs.io/assetpack",children:"AssetPack"})," can generate optimized manifests using glob patterns and output ",(0,t.jsx)(s.code,{children:"UnresolvedAsset"})," structures automatically."]}),"\n",(0,t.jsxs)(s.li,{children:[(0,t.jsx)(s.strong,{children:"Asset Manifests & Bundles"}),": Use ",(0,t.jsx)(s.a,{href:"/8.x/guides/components/assets/manifest",children:"manifests and bundles"})," to predefine groups of unresolved assets and load them via ",(0,t.jsx)(s.code,{children:"Assets.loadBundle"}),"."]}),"\n"]})]})}function h(e={}){let{wrapper:s}={...(0,a.R)(),...e.components};return s?(0,t.jsx)(s,{...e,children:(0,t.jsx)(c,{...e})}):c(e)}},28453(e,s,n){n.d(s,{R:()=>r,x:()=>d});var i=n(96540);let t={},a=i.createContext(t);function r(e){let s=i.useContext(a);return i.useMemo(function(){return"function"==typeof e?e(s):{...s,...e}},[s,e])}function d(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:r(e.components),i.createElement(a.Provider,{value:s},e.children)}}}]);
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.