1"use strict";(self.webpackChunkpixi_docusaurus=self.webpackChunkpixi_docusaurus||[]).push([["3695"],{59047(e,t,n){n.d(t,{al:()=>o});var o={colors:{surface1:"#ffffff",surface2:"#F3F3F3",surface3:"#f5f5f5",clickable:"#959da5",base:"#24292e",disabled:"#d1d4d8",hover:"#24292e",accent:"#24292e"},syntax:{keyword:"#d73a49",property:"#005cc5",plain:"#24292e",static:"#032f62",string:"#032f62",definition:"#6f42c1",punctuation:"#24292e",tag:"#22863a",comment:{color:"#6a737d",fontStyle:"normal"}},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"}}},32535(e,t,n){n.r(t),n.d(t,{metadata:()=>o,default:()=>p,frontMatter:()=>s,contentTitle:()=>l,toc:()=>c,assets:()=>d});var o=n(40850),i=n(74848),r=n(28453),a=n(95593);let s={title:"PixiJS Update - v8.10.0",description:"A look at the 8.10.0 release of PixiJS.",slug:"8.10.0",authors:"zyie",tags:["PixiJS","Updates","Documentation"],hide_table_of_contents:!0,keywords:["PixiJS","Updates","Documentation","Text Features"]},l,d={authorsImageUrls:[void 0]},c=[{value:"Documentation Overhaul",id:"documentation-overhaul",level:2},{value:"New Website Documentation",id:"new-website-documentation",level:3},{value:"Enhanced API Documentation",id:"enhanced-api-documentation",level:3},{value:"Public vs Internal APIs",id:"public-vs-internal-apis",level:3},{value:"New Features \u{1F389}",id:"new-features-",level:2},{value:"Baked Text Filters",id:"baked-text-filters",level:3},{value:"Text Trimming",id:"text-trimming",level:3},{value:"Texture Scale Modes",id:"texture-scale-modes",level:3},{value:"Highlights from v8.9.0 and v8.8.0",id:"highlights-from-v890-and-v880",level:2},{value:"DOM Container",id:"dom-container",level:3},{value:"NineSlice Sprite Anchor",id:"nineslice-sprite-anchor",level:3},{value:"Looking Ahead",id:"looking-ahead",level:2}];function u(e){let t={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",img:"img",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,r.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.p,{children:"PixiJS v8.10.0 introduces a major overhaul of our documentation along with several updates that enhance text rendering and developer control. Here's what's new:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Complete Documentation Overhaul"}),": Improved guides, API docs, and better organization"]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Text Trimming"}),": Optimize text rendering with automatic whitespace trimming"]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Text Filters"}),": Apply filters directly in text style configuration"]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Adjustable TextureStyle For Text"}),": Fine-tune how a text's texture is rendered with new texture style options"]}),"\n"]}),"\n","\n",(0,i.jsx)(t.h2,{id:"documentation-overhaul",children:"Documentation Overhaul"}),"\n",(0,i.jsx)(t.p,{children:"With this release, we are making a significant investment in our documentation to make PixiJS more accessible and easier to use for both new and experienced developers."}),"\n",(0,i.jsx)(t.p,{children:"This change is driven by the survey results we gathered last year, which highlighted the need for clearer, more organized documentation. We want to ensure that developers can quickly find the information they need, whether they are just starting out or looking to deepen their understanding of PixiJS. With that in mind, we have completely revamped our documentation structure and content."}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"/8.x/guides/getting-started/intro",children:"New Guides"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://pixijs.download/release/docs/index.html",children:"New API Documentation"})}),"\n"]}),"\n",(0,i.jsx)(t.admonition,{title:"Note",type:"info",children:(0,i.jsx)(t.p,{children:"As with any major change, there are areas that need refinement. We welcome your feedback as we continue to improve the documentation."})}),"\n",(0,i.jsx)(t.h3,{id:"new-website-documentation",children:"New Website Documentation"}),"\n",(0,i.jsxs)(t.p,{children:["We've expanded and restructured our ",(0,i.jsx)(t.a,{href:"/8.x/guides/getting-started/intro",children:"guides"})," to now cover all core areas of PixiJS with improved getting started. The goal is to provide clearer entry points for new users and more comprehensive resources for experienced developers."]}),"\n",(0,i.jsx)(t.h3,{id:"enhanced-api-documentation",children:"Enhanced API Documentation"}),"\n",(0,i.jsxs)(t.p,{children:["We've transitioned from WebDoc to ",(0,i.jsx)(t.strong,{children:"TypeDoc"})," for our API generation. This change brings improved support for Type
1Script and allows us to provide more detailed and accurate information throughout the documentation."]}),"\n",(0,i.jsxs)(t.p,{children:["Alongside this technical shift, we've also rethought how the ",(0,i.jsx)(t.a,{href:"https://pixijs.download/release/docs/index.html",children:"API Documentation"})," is organized. Rather than presenting everything in a single, monolithic reference, we've categorized the APIs into two sections: ",(0,i.jsx)(t.strong,{children:"Standard"})," and ",(0,i.jsx)(t.strong,{children:"Advanced"}),"."]}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Standard"})," APIs cover the most commonly used features\u2014these are the essentials for building most PixiJS applications."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Advanced"})," APIs include more complex or specialized tools that are valuable for specific use cases, but not necessary for all users."]}),"\n"]}),"\n",(0,i.jsx)(t.p,{children:"This new structure is designed to reduce cognitive load for newcomers. Developers can focus on the most relevant APIs without being overwhelmed by the full scope of the library."}),"\n",(0,i.jsxs)(t.p,{children:["For those who need access to more advanced features, there's a simple toggle in the top-right corner of the API documentation labeled ",(0,i.jsx)(t.strong,{children:'"Advanced"'}),". Enabling it reveals the full API surface when needed."]}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{alt:"API Documentation Screenshot",src:n(92746).A+"",width:"1549",height:"235"})}),"\n",(0,i.jsxs)(t.p,{children:["We've also taken this opportunity to improve the clarity of the documentation itself. For each ",(0,i.jsx)(t.strong,{children:"Standard"})," API, we aim to provide:"]}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"A clear explanation of its purpose"}),"\n",(0,i.jsx)(t.li,{children:"Practical usage examples"}),"\n",(0,i.jsx)(t.li,{children:"Links to related APIs for easier exploration"}),"\n"]}),"\n",(0,i.jsx)(t.p,{children:"These improvements are intended to help developers better understand how to use PixiJS effectively\u2014whether they're just getting started or looking to dig deeper."}),"\n",(0,i.jsx)(t.h3,{id:"public-vs-internal-apis",children:"Public vs Internal APIs"}),"\n",(0,i.jsx)(t.p,{children:"To help define a clearer boundary between what developers should rely on and what is meant for internal use, we've audited the entire codebase and marked APIs accordingly. Internal methods are now excluded from the API docs. This makes the public API surface more stable and reduces the risk of unintentional dependency on internal behaviors."}),"\n",(0,i.jsx)(t.h2,{id:"new-features-",children:"New Features \u{1F389}"}),"\n",(0,i.jsx)(t.p,{children:"Now that we've covered the documentation overhaul, let's dive into the new features introduced in PixiJS v8.10.0:"}),"\n",(0,i.jsx)(t.h3,{id:"baked-text-filters",children:"Baked Text Filters"}),"\n",(0,i.jsx)(t.p,{children:"Text filters can now be applied at creation time, baking the effect directly into the texture. This avoids runtime filter costs and allows more expressive styles, such as outlines and drop shadows, without performance penalties."}),"\n",(0,i.jsxs)(t.p,{children:["To use this feature, you can now specify filters directly in the ",(0,i.jsx)(t.code,{children:"TextStyle"})," configuration:"]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-js",children:"const style = new TextStyle({\n fontFamily: 'Arial',\n fontSize: 36,\n fill: '#ffffff',\n filters: [new BlurFilter()],\n});\nconst text = new PIXI.Text({ text: 'Hello, PixiJS!', style });\n"})}),"\n",(0,i.jsx)(a._,{files:{"index.js":"// description: Example of using baked in filters on a Text object to create a cartoon-style text effect.\nimport { Application, Assets, Text } from 'pixi.js';\nimport { CartoonTextFilter } from './CartoonTextFilter';\n\n(async () => {\n const app = new Application();\n\n await app.init({\n resizeTo: window,\n backgroundColor: '#1099bb',\n autoDensity: true,\n antialias: true,\n });\n document.body.appendChild(app.canvas);\n\n await Assets.load('https://pixijs.com/assets/webfont-loader/Grandstander-ExtraBold.ttf');\n\n const filter = new CartoonTextFilter({\n thickness: 7,\n });\n\n const text = new Text({\n text: 'Hello World!',\n style: {\
1n fontFamily: 'Grandstander ExtraBold',\n fontSize: 70,\n fill: 0xffffff,\n padding: 0,\n filters: [filter],\n fontWeight: '800',\n },\n x: app.screen.width / 2,\n y: app.screen.height / 2,\n anchor: 0.5,\n });\n\n app.stage.addChild(text);\n})();\n","CartoonTextFilter.js":"import { Color, Filter, GlProgram, GpuProgram, UniformGroup } from 'pixi.js';\nimport fragment from './cartoonText.frag?raw';\nimport vertex from './cartoonText.vert?raw';\nimport source from './cartoonText.wgsl?raw';\n\nconst defaultOptions = {\n thickness: 1,\n borderColor: 0xffffff,\n topColor: 0xed427c,\n bottomColor: 0xe91e63,\n};\n\n/**\n * CartoonTextFilter creates a cartoon-style text effect with outlines, shadows, and gradients.\n *\n * @example\n * ```js\n * import { CartoonTextFilter } from './CartoonTextFilter';\n *\n * const cartoonFilter = new CartoonTextFilter({\n * thickness: 2.0,\n * borderColor: 0x000000,\n * topColor: 0xFFFFFF,\n * bottomColor: 0x888888\n * });\n * text.filters = [cartoonFilter];\n * ```\n */\nexport class CartoonTextFilter extends Filter {\n constructor(options) {\n const { thickness, borderColor, topColor, bottomColor } = { ...defaultOptions, ...options };\n\n const gpuProgram = GpuProgram.from({\n vertex: {\n source,\n entryPoint: 'mainVertex',\n },\n fragment: {\n source,\n entryPoint: 'mainFragment',\n },\n });\n\n const glProgram = GlProgram.from({\n vertex,\n fragment,\n name: 'cartoon-text-filter',\n });\n\n super({\n gpuProgram,\n glProgram,\n padding: thickness * 2.1,\n resources: {\n cartoonTextUniforms: new UniformGroup({\n uThickness: { value: thickness, type: 'f32' },\n uBorderColor: { value: new Color(borderColor), type: 'vec3<f32>' },\n uTopColor: { value: new Color(topColor), type: 'vec3<f32>' },\n uBottomColor: { value: new Color(bottomColor), type: 'vec3<f32>' },\n }),\n },\n });\n }\n\n /**\n * The thickness of the outline effect.\n * @default 2.0\n */\n get thickness() {\n const uniforms = this.resources.cartoonTextUniforms.uniforms;\n\n return uniforms.uThickness;\n }\n\n set thickness(value) {\n const uniforms = this.resources.cartoonTextUniforms.uniforms;\n\n uniforms.uThickness = value;\n }\n}\n","cartoonText.vert":"in vec2 aPosition;\nout vec2 vTextureCoord;\nout vec2 vOut;\n\nuniform vec4 uInputSize;\nuniform vec4 uOutputFrame;\nuniform vec4 uOutputTexture;\nvec4 filterVertexPosition( void ) {\n vec2 position = aPosition * uOutputFrame.zw + uOutputFrame.xy;\n position.x = position.x * (2.0 / uOutputTexture.x) - 1.0;\n position.y = position.y * (2.0*uOutputTexture.z / uOutputTexture.y) - uOutputTexture.z;\n return vec4(position, 0.0, 1.0);\n}\nvec2 filterTextureCoord( void ) {\n return aPosition * (uOutputFrame.zw * uInputSize.zw);\n}\nvoid main(void) {\n gl_Position = filterVertexPosition();\n vTextureCoord = filterTextureCoord();\n vOut = aPosition;\n}\n","cartoonText.frag":"precision highp float;\nin vec2 vTextureCoord;\nout vec4 finalColor;\n\nuniform sampler2D uTexture;\nuniform float uThickness;\nuniform vec3 uBorderColor;\nuniform vec3 uTopColor;\nuniform vec3 uBottomColor;\n\nin vec2 vOut;\n\nuniform vec4 uInputClamp;\nuniform vec4 uInputSize;\n\nconst float DOUBLE_PI = 6.28318530718; // 2 * PI\nconst float ANGLE_STEP = 0.0628319;\n\nfloat outlineMaxAlphaAtPos(vec2 pos) {\n vec2 thickness = vec2(uThickness) / uInputSize.xy;\n float maxAlpha = 0.0;\n\n for (float angle = 0.0; angle <= DOUBLE_PI; angle += ANGLE_STEP) {\n vec2 displacedPos = pos + thickness * vec2(cos(angle), sin(angle));\n vec4 displacedColor = texture(uTexture, clamp(displacedPos, uInputClamp.xy, uInputClamp.zw));\n maxAlpha = max(maxAlpha, displacedColor.a);\n }\n\n return maxAlpha;\n}\n\nvoid main(void) {\n vec4 contentColor = texture(uTexture, vTextureCoord);\n vec2 thickness = uThickness / uInputSize.xy;\n vec2 offset = vec2(0.0, thickness.y * 0.6);\n\n float outlineAlpha = outlineMaxAlphaAtPos(vTextureCoord) * (1.0 - contentColor.a);\n vec4 outlineColor = vec4(uBorderColor * outlineAlpha, outlineAlpha);\n\n float outlineBaseAlpha = outlineMaxAlphaAtPos(vTextureCoord - offset);\n vec4 outlineBaseColor = vec4(mix(uBorderColor, vec3(0.0), 0.35) * outlineBaseAlpha, outlineBaseAlpha);\n outlineBaseColor *= (1.0 - outlineAlpha) * (1.0 - contentColor.a);\n\n float outlineDropShadowAlpha = outlineMaxAlphaAtPos(vTextureCoord - (offset * 2.0));\n vec4 outlineDropShadowColor = vec4(vec3(0.0) * outlineDropShadowAlpha, outlineDropShadowAlpha) * 0.3;\n outlineDropShadowColor *= (1.0 - outlineAlpha) * (1.0 - contentColor.a);\n\n vec4 innerShadowAlpha = texture(uTexture, vTextureCoord + vec2(0.0, -thickness.y * 0.35));\n innerShadowAlpha.a = (1.0 - innerShadowAlpha.a) * contentColor.a;\n vec4 innerShadowColor = vec4(vec3(0.0) * innerShadowAlpha.a, innerShadowAlpha.a) * 0.3;\n\n float curveAmount = -0.05;\n float horizonY = 0.54 + curveAmount * sin(vOut.x * 3.14159);\n float gradientStart = horizonY - 0.005;\n float gradientEnd = horizonY + 0.005;\n float gradientRatio = smoothstep(gradientStart, gradientEnd, vOut.y);\n\n vec4 gradientColor = mix(vec4(uTopColor, 1.0), vec4(uBottomColor, 1.0), gradientRatio);\n gradientColor *= contentColor.a;\n\n finalColor = mix(gradientColor, innerShadowColor, innerShadowColor.a) + outlineColor + outlineBaseColor + outlineDropShadowColor;\n}\n","cartoonText.wgsl":"struct GlobalFilterUniforms {\n uInputSize:vec4<f32>,\n uInputPixel:vec4<f32>,\n uInputClamp:vec4<f32>,\n uOutputFrame:vec4<f32>,\n uGlobalFrame:vec4<f32>,\n uOutputTexture:vec4<f32>,\n};\n\nstruct CartoonTextUniforms {\n uThickness:f32,\n uBorderColor:vec3<f32>,\n uTopColor:vec3<f32>,\n uBottomColor:vec3<f32>,\n};\n\n@group(0) @binding(0) var<uniform> gfu: GlobalFilterUniforms;\n@group(0) @binding(1) var uTexture: texture_2d<f32>;\n@group(0) @binding(2) var uSampler : sampler;\n\n@group(1) @binding(0) var<uniform> cartoonTextUniforms : CartoonTextUniforms;\n\nstruct VSOutput {\n @builtin(position) position: vec4<f32>,\n @location(0) uv : vec2<f32>,\n @location(1) vOut : vec2<f32>,\n};\n\nfn filterVertexPosition(aPosition:vec2<f32>) -> vec4<f32>\n{\n var position = aPosition * gfu.uOutputFrame.zw + gfu.uOutputFrame.xy;\n\n position.x = position.x * (2.0 / gfu.uOutputTexture.x) - 1.0;\n position.y = position.y * (2.0*gfu.uOutputTexture.z / gfu.uOutputTexture.y) - gfu.uOutputTexture.z;\n\n return vec4(position, 0.0, 1.0);\n}\n\nfn filterTextureCoord( aPosition:vec2<f32> ) -> vec2<f32>\n{\n return aPosition * (gfu.uOutputFrame.zw * gfu.uInputSize.zw);\n}\n\n@vertex\nfn mainVertex(\n @location(0) aPosition : vec2<f32>, \n) -> VSOutput {\n return VSOutput(\n filterVertexPosition(aPosition),\n filterTextureCoord(aPosition),\n aPosition,\n );\n}\n\nconst DOUBLE_PI: f32 = 6.28318530718; // 2 * PI\nconst ANGLE_STEP: f32 = 0.0628319;\n\nfn outlineMaxAlphaAtPos(pos: vec2<f32>) -> f32 {\n let thickness = vec2<f32>(cartoonTextUniforms.uThickness) / gfu.uInputSize.xy;\n var maxAlpha: f32 = 0.0;\n\n for (var angle: f32 = 0.0; angle <= DOUBLE_PI; angle += ANGLE_STEP) {\n let displacedPos = pos + thickness * vec2<f32>(cos(angle), sin(angle));\n let displacedColor = textureSample(uTexture, uSampler, clamp(displacedPos, gfu.uInputClamp.xy, gfu.uInputClamp.zw));\n maxAlpha = max(maxAlpha, displacedColor.a);\n }\n\n return maxAlpha;\n}\n\n@fragment\nfn mainFragment(\n @location(0) uv: vec2<f32>,\n @location(1) vOut: vec2<f32>,\n) -> @location(0) vec4<f32>
1 {\n\n let contentColor = textureSample(uTexture, uSampler, uv);\n let thickness = cartoonTextUniforms.uThickness / gfu.uInputSize.xy;\n let offset = vec2<f32>(0.0, thickness.y * 0.6);\n\n let outlineAlpha = outlineMaxAlphaAtPos(uv) * (1.0 - contentColor.a);\n let outlineColor = vec4<f32>(cartoonTextUniforms.uBorderColor * outlineAlpha, outlineAlpha);\n\n let outlineBaseAlpha = outlineMaxAlphaAtPos(uv - offset);\n var outlineBaseColor = vec4<f32>(mix(cartoonTextUniforms.uBorderColor, vec3<f32>(0.0), 0.35) * outlineBaseAlpha, outlineBaseAlpha);\n outlineBaseColor *= (1.0 - outlineAlpha) * (1.0 - contentColor.a);\n\n let outlineDropShadowAlpha = outlineMaxAlphaAtPos(uv - (offset * 2.0));\n var outlineDropShadowColor = vec4<f32>(vec3<f32>(0.0) * outlineDropShadowAlpha, outlineDropShadowAlpha) * 0.3;\n outlineDropShadowColor *= (1.0 - outlineAlpha) * (1.0 - contentColor.a);\n\n let innerShadowAlpha = textureSample(uTexture, uSampler, uv + vec2<f32>(0.0, -thickness.y * 0.35));\n let innerShadowAlphaValue = (1.0 - innerShadowAlpha.a) * contentColor.a;\n let innerShadowColor = vec4<f32>(vec3<f32>(0.0) * innerShadowAlphaValue, innerShadowAlphaValue) * 0.3;\n\n let curveAmount: f32 = -0.05;\n let horizonY = 0.54 + curveAmount * sin(vOut.x * 3.14159);\n let gradientStart = horizonY - 0.005;\n let gradientEnd = horizonY + 0.005;\n let gradientRatio = smoothstep(gradientStart, gradientEnd, vOut.y);\n\n var gradientColor = mix(vec4<f32>(cartoonTextUniforms.uTopColor, 1.0), vec4<f32>(cartoonTextUniforms.uBottomColor, 1.0), gradientRatio);\n gradientColor *= contentColor.a;\n\n return mix(gradientColor, innerShadowColor, innerShadowColor.a) + outlineColor + outlineBaseColor + outlineDropShadowColor;\n} "}}),"\n",(0,i.jsxs)(t.p,{children:["Additionally, a new ",(0,i.jsx)(t.code,{children:"generateFilteredTexture"})," method has been added to ",(0,i.jsx)(t.code,{children:"filterSystem"}),":"]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",children:"const blurFilter = new BlurFilter();\nconst filteredTexture = renderer.filters.generateFilteredTexture({\n texture,\n filters: [blurFilter],\n});\n"})}),"\n",(0,i.jsx)(t.h3,{id:"text-trimming",children:"Text Trimming"}),"\n",(0,i.jsx)(t.p,{children:"Automatically remove unnecessary whitespace around text."}),"\n",(0,i.jsx)(t.admonition,{title:"PERFORMANCE WARNING",type:"warning",children:(0,i.jsxs)(t.p,{children:["This is a costly operation as it requires scanning pixel alpha values.\nAvoid using ",(0,i.jsx)(t.code,{children:"trim: true"})," for dynamic text, as it could significantly impact performance."]})}),"\n",(0,i.jsxs)(t.p,{children:["To enable text trimming, simply set the ",(0,i.jsx)(t.code,{children:"trim"})," property in the ",(0,i.jsx)(t.code,{children:"TextStyle"}),":"]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-js",children:"const style = new TextStyle({\n fontFamily: 'Arial',\n fontSize: 36,\n fill: '#ffffff',\n trim: true, // Enable text trimming\n});\nconst text = new Text({ text: ' Hello, PixiJS! ', style });\n"})}),"\n",(0,i.jsx)(a._,{files:{"index.js":"// description: This example demonstrates the difference between trimmed and untrimmed text using the trim option.\nimport { Application, Graphics, Text } 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 const text = new Text({\n text: 'UNTRIMMED TEXT',\n style: {\n fontFamily: 'Arial',\n fontSize: 60,\n fill: 'white',\n },\n anchor: 0.5,\n position: { x: window.innerWidth / 2, y: window.innerHeight / 2 - 50 },\n });\n\n app.stage.addChild(text);\n\n const text2 = new Text({\n text: 'TRIMMED TEXT',\n style: {\n fontFamily: 'Arial',\n fontSize: 60,\n fill: 'white',\n trim: true, // Enable text trimming\n },\n anchor: 0.5,\n position: { x: window.innerWidth / 2, y: window.innerHeight / 2 + text.height + 10 },\n });\n\n app.stage.addChild(text2);\n\n const tb = text.getBounds();\n const textRect = new Graphics();\n\n textRect.rect(tb.x, tb.y, tb.width, tb.height);
1\n textRect.stroke({ width: 2, color: '#FFD600' });\n app.stage.addChild(textRect);\n\n const tb2 = text2.getBounds();\n const textRect2 = new Graphics();\n\n textRect2.rect(tb2.x, tb2.y, tb2.width, tb2.height);\n textRect2.stroke({ width: 2, color: '#FFD600' });\n app.stage.addChild(textRect2);\n})();\n"}}),"\n",(0,i.jsx)(t.p,{children:"This method applies one or more filters to a texture and returns a new, filtered result."}),"\n",(0,i.jsx)(t.h3,{id:"texture-scale-modes",children:"Texture Scale Modes"}),"\n",(0,i.jsx)(t.p,{children:"You can now explicitly set texture filtering for text, useful when rendering pixel fonts or when you need control over how the texture is sampled."}),"\n",(0,i.jsxs)(t.p,{children:["To adjust the texture scale mode, use the ",(0,i.jsx)(t.code,{children:"textureStyle"})," property in the ",(0,i.jsx)(t.code,{children:"TextStyle"}),":"]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-js",children:"const style = new TextStyle({\n fontFamily: 'Arial',\n fontSize: 36,\n fill: '#ffffff',\n textureStyle: {\n scaleMode: 'nearest', // Set the texture scale mode\n },\n});\nconst text = new Text({ text: 'Hello, PixiJS!', style });\n"})}),"\n",(0,i.jsx)(a._,{files:{"index.js":"// description: This example demonstrates how to create and display bitmap text and regular text with different texture scaling modes through TextureStyle.\nimport { Application, Assets, BitmapFont, BitmapText, Text } 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 await Assets.load('https://pixijs.com/assets/webfont-loader/PixelifySans.ttf');\n\n BitmapFont.install({\n name: 'Custom',\n style: {\n fontFamily: 'PixelifySans',\n fontSize: 140,\n fill: '#ffffff',\n },\n chars: [\n ['a', 'z'],\n ['A', 'Z'],\n ['0', '9'],\n ],\n resolution: 2,\n padding: 4,\n textureStyle: {\n scaleMode: 'nearest',\n },\n });\n\n const text = new BitmapText({\n text: 'Nearest',\n style: {\n fontFamily: 'Custom',\n fontSize: 70,\n fill: 'white',\n align: 'center',\n },\n scale: 2,\n anchor: 0.5,\n position: { x: window.innerWidth / 2, y: window.innerHeight / 2 - 75 },\n });\n\n const text2 = new Text({\n text: 'Linear',\n style: {\n fontFamily: 'PixelifySans',\n fontSize: 70,\n fill: 'white',\n align: 'center',\n },\n scale: 2,\n textureStyle: {\n scaleMode: 'linear',\n },\n anchor: 0.5,\n position: { x: window.innerWidth / 2, y: window.innerHeight / 2 + 75 },\n });\n\n app.stage.addChild(text, text2);\n})();\n"}}),"\n",(0,i.jsx)(t.h2,{id:"highlights-from-v890-and-v880",children:"Highlights from v8.9.0 and v8.8.0"}),"\n",(0,i.jsx)(t.p,{children:"We missed highlighting the previous two releases, so here are some key features from v8.9.0 and v8.8.0:"}),"\n",(0,i.jsx)(t.h3,{id:"dom-container",children:"DOM Container"}),"\n",(0,i.jsxs)(t.p,{children:["The ",(0,i.jsx)(t.code,{children:"DOMContainer"})," lets developers transform and animate DOM elements in sync with PixiJS scenes. This is useful for overlaying native inputs, textareas, or other HTML controls while retaining control over their positioning and rotation."]}),"\n",(0,i.jsx)(a._,{files:{"index.js":"// description: This example demonstrates how to integrate a DOM element into a PixiJS application using DOMContainer\nimport { Application, DOMContainer } from 'pixi.js';\n\n(async () => {\n const app = new Application();\n\n await app.init({ backgroundColor: 0x1099bb, resizeTo: window });\n document.body.appendChild(app.canvas);\n document.body.style = 'margin: 0; overflow: hidden';
1\n\n // Create a DOM element\n const element = document.createElement('textarea');\n\n element.value = 'Type here...';\n\n // Create a DOM container\n const domContainer = new DOMContainer({\n element,\n x: app.screen.width / 2,\n y: app.screen.height / 2,\n anchor: 0.5,\n });\n\n // Add it to your scene\n app.stage.addChild(domContainer);\n\n app.ticker.add(() => {\n // Rotate the DOM container\n domContainer.rotation += 0.01;\n });\n})();\n"}}),"\n",(0,i.jsx)(t.h3,{id:"nineslice-sprite-anchor",children:"NineSlice Sprite Anchor"}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"NineSliceSprite"})," now supports the ",(0,i.jsx)(t.code,{children:"anchor"})," property, allowing rotation and scaling behaviors to work as they do for other sprites."]}),"\n",(0,i.jsx)(a._,{files:{"index.js":"// description: This example demonstrates how to create and display a NineSliceSprite with a centered anchor point and rotation.\nimport { Application, Assets, NineSliceSprite } 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 // Load the bunny texture\n const texture = await Assets.load('https://pixijs.com/assets/nine-slice/panel-031.png');\n\n // Create a NineSliceSprite\n const bunny = new NineSliceSprite({\n texture,\n leftWidth: 30, // Width of the left edge\n rightWidth: 30, // Width of the right edge\n topHeight: 30, // Height of the top edge\n bottomHeight: 30, // Height of the bottom edge\n\n anchor: 0.5, // Center the sprite's anchor point\n\n x: app.screen.width / 2, // Move the sprite to the center of the screen\n y: app.screen.height / 2,\n });\n\n bunny.width = app.screen.width / 2; // Set the width of the sprite\n bunny.height = app.screen.height / 2; // Set the height of the sprite\n\n app.stage.addChild(bunny);\n\n app.ticker.add(() => {\n bunny.rotation += 0.01; // Rotate the sprite over time from the center\n });\n})();\n"}}),"\n",(0,i.jsx)(t.h2,{id:"looking-ahead",children:"Looking Ahead"}),"\n",(0,i.jsx)(t.p,{children:"Starting with v8.10.0, we're moving to a monthly release cadence for PixiJS. This will allow us to ship improvements, bug fixes, and new features more predictably and keep the project evolving at a steady pace."}),"\n",(0,i.jsx)(t.p,{children:"While the size and scope of each release may vary, the goal is to provide incremental updates that are easier to adopt and integrate into projects."}),"\n",(0,i.jsxs)(t.p,{children:["You can review the complete changelog ",(0,i.jsx)(t.a,{href:"https://github.com/pixijs/pixijs/releases/tag/v8.10.0",children:"here"}),", or join the discussion on ",(0,i.jsx)(t.a,{href:"https://discord.gg/QrnxmQUPGV",children:"Discord"})," or ",(0,i.jsx)(t.a,{href:"https://github.com/pixijs/pixijs/discussions/new/choose",children:"GitHub"}),"."]}),"\n",(0,i.jsx)(t.p,{children:"Thank you for using PixiJS, and we look forward to seeing what you create with these new features!"})]})}function p(e={}){let{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(u,{...e})}):u(e)}},92746(e,t,n){n.d(t,{A:()=>o});let o=n.p+"assets/images/typedoc-advanced-a102a629a39f8549797a1b026ba8d767.png"},60714(e,t,n){n.d(t,{K:()=>f});var o=n(74848),i=n(96540);let r={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"}},a=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`),o=await n.text();if(o.startsWith("// Generated by dts-bundle-generator"))return localStorage.setItem(t,JSON.stringify(o)),o;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 c({fontSize:e=12,style:t,pixiVersion:n,handleEditorCodeChanged:r}){var u;let{code:p,updateCode:h}=(0,s.Pe)(),{sandpack:x}=(0,s.ny)(),m=function(){let[e,t]=(0,i.useState)(null),n=(0,i.useRef)(!0),o=(0,i.useRef)(null);return(0,i.useEffect)(()=>{let e=d.wG.__getMonacoInstance();if(e)return void t(e);if(!o.current){d.wG.config({"vs/nls":{availableLanguages:{}}});try{o.current=d.wG.init(),o.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}(),f=(u=x.activeFile,(0,i.useMemo)(()=>{let e,t;return"js"===(t=(e=u.split("."))[e.length-1])?"javascript":"ts"===t?"typescript":"vert"===t||"frag"===t?"glsl":t},[u])),{colorMode:g}=(0,l.G)();return((e,t="latest")=>{(0,i.useEffect)(()=>{let n=async e=>{let n=await a(t),o=`declare module 'pixi.js' { ${n} }`,i=` 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 }`;
15e.languages.typescript.typescriptDefaults.addExtraLib(o,"file:///node_modules/pixi.js/index.d.ts"),e.languages.typescript.javascriptDefaults.addExtraLib(o,"file:///node_modules/pixi.js/index.d.ts"),e.languages.typescript.typescriptDefaults.addExtraLib(i),e.languages.typescript.javascriptDefaults.addExtraLib(i),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:["__LINE__","__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"}}
15],[/[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])})(m,n),(0,o.jsxs)(s.aN,{style:{height:"100%",margin:0,...t},children:[(0,o.jsx)(s.fQ,{}),(0,o.jsx)("div",{style:{flex:1,paddingTop:8,background:"dark"===g?"#1e1e1e":"#FFFFFE"},children:(0,o.jsx)(d.KE,{width:"100%",height:"100%",language:f,theme:"dark"===g?"vs-dark":"light",defaultValue:p,onChange:e=>{h(e||""),r?.(e)},options:{minimap:{enabled:!1},scrollBeyondLastLine:!1,wordWrap:"on",automaticLayout:!0,fontSize:e}},x.activeFile)})]})}let u=({onClick:e})=>(0,o.jsx)(s.Gb,{style:{position:"relative"},onClick:e,children:(0,o.jsx)(s.D0,{})}),p=({onSelectionChange:e,defaultSelection:t="both"})=>{let[n,r]=(0,i.useState)(t),{colorMode:a}=(0,l.G)(),s=t=>{r(t),e(t)},d={height:"100%",width:"max-content",padding:"0 16px",display:"flex",alignItems:"center",justifyContent:"center",cursor:"pointer",color:"dark"===a?"#F6F8FA":"#2E3138",border:"none"},c="dark"===a?"#22232A":"#e2e2e2";return(0,o.jsxs)("div",{style:{height:32,width:"100%",overflow:"hidden",backgroundColor:"dark"===a?"#2E3138":"#F6F8FA",display:"flex",justifyContent:"right",borderBottomLeftRadius:4,borderBottomRightRadius:4},children:[(0,o.jsx)("button",{onClick:()=>s("editor"),style:{backgroundColor:"editor"===n?c:"transparent",...d},children:"Editor"}),(0,o.jsx)("button",{onClick:()=>s("preview"),style:{backgroundColor:"preview"===n?c:"transparent",...d},children:"Preview"}),(0,o.jsx)("button",{onClick:()=>s("both"),style:{backgroundColor:"both"===n?c:"transparent",...d},children:"Both"})]})};function h(e){let{viewType:t,showConsole:n,fontSize:r,pixiVersion:a}=e,[l,d]=(0,i.useState)(n),[h,x]=(0,i.useState)(t),m=(0,o.jsx)(o.Fragment,{children:(0,o.jsx)(u,{onClick:()=>d(e=>!e)})});return(0,o.jsxs)("div",{style:{height:"100%",width:"100%",display:"flex",flexDirection:"column"},children:[(0,o.jsxs)(s.am,{style:{height:"100%",overflow:"hidden",borderBottomLeftRadius:0,borderBottomRightRadius:0,flexWrap:"nowrap"},children:[(0,o.jsx)(c,{fontSize:r,style:{flexGrow:+("preview"!==h),flexShrink:+("preview"!==h),flexBasis:"editor"===h?"100%":0,width:"100%",overflow:"hidden"},pixiVersion:a,handleEditorCodeChanged:e.handleEditorCodeChanged}),(0,o.jsxs)(s.aN,{style:{height:"100%",width:"100%"},children:[(0,o.jsx)(s.G5,{style:{flexGrow:100*("editor"!==h),flexShrink:100*("editor"!==h),flexBasis:"editor"!==h?"100%":0,overflow:"hidden"},showOpenInCodeSandbox:!1,actionsChildren:m}),l&&(0,o.jsx)("div",{style:{flexGrow:35*!!l,flexShrink:35*!!l,flexBasis:l?"35%":0,width:"100%",overflow:"hidden"},children:(0,o.jsx)(s.X2,{showHeader:!1})})]})]}),(0,o.jsx)(p,{onSelectionChange:e=>{x(e)},defaultSelection:h})]})}var x=n(59047),m=n(9526);function f({viewType:e="both",showConsole:t=!1,width:n="100%",height:a="100%",dependencies:d={"pixi.js":"latest"},files:c={"index.js":"// Your code here"},fontSize:u=12,handleEditorCodeChanged:p}){let{colorMode:g}=(0,l.G)(),v={...c};delete v["index.js"];let[y]=(0,i.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:c["index.js"]??"// Your code here",hidden:!1,active:!0},...v});return(0,o.jsx)(m.A,{children:()=>(0,o.jsx)(s.l5,{template:"vanilla-ts",theme:"dark"===g?r:x.al,files:y,customSetup:{dependencies:d,entry:"index.html"},style:{height:a,width:n,margin:"0 auto",maxWidth:"100%"},options:{recompileDelay:500},children:(0,o.jsx)(h,{handleEditorCodeChanged:p,viewType:e,showConsole:t,fontSize:u,pixiVersion:d["pixi.js"]})})})}},95593(e,t,n){n.d(t,{_:()=>r});var o=n(74848),i=n(60714);
15function r(e){return(0,o.jsx)(i.K,{height:400,width:700,viewType:"preview",...e})}},28453(e,t,n){n.d(t,{R:()=>a,x:()=>s});var o=n(96540);let i={},r=o.createContext(i);function a(e){let t=o.useContext(r);return o.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:a(e.components),o.createElement(r.Provider,{value:t},e.children)}},40850(e){e.exports=JSON.parse('{"permalink":"/blog/8.10.0","source":"@site/blog/2025-06-05-pixi-v8.10.0.mdx","title":"PixiJS Update - v8.10.0","description":"A look at the 8.10.0 release of PixiJS.","date":"2025-06-05T00:00:00.000Z","tags":[{"inline":true,"label":"PixiJS","permalink":"/blog/tags/pixi-js"},{"inline":true,"label":"Updates","permalink":"/blog/tags/updates"},{"inline":true,"label":"Documentation","permalink":"/blog/tags/documentation"}],"readingTime":5.61,"hasTruncateMarker":true,"authors":[{"name":"Zyie","title":"PixiJS Admin","url":"https://github.com/zyie","socials":{"github":"https://github.com/zyie","x":"https://x.com/_Zyie_","bluesky":"https://bsky.app/profile/zyie.bsky.social"},"imageURL":"https://github.com/zyie.png","key":"zyie","page":null}],"frontMatter":{"title":"PixiJS Update - v8.10.0","description":"A look at the 8.10.0 release of PixiJS.","slug":"8.10.0","authors":"zyie","tags":["PixiJS","Updates","Documentation"],"hide_table_of_contents":true,"keywords":["PixiJS","Updates","Documentation","Text Features"]},"unlisted":false,"prevItem":{"title":"PixiJS Update - v8.11.0","permalink":"/blog/8.11.0"},"nextItem":{"title":"PixiJS Layout v3 is here! \u{1F389}","permalink":"/blog/layout-v3"}}')}}]);
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.