diff --git a/blog/2024-03-05-pixi-v8-launches.md b/blog/2024-03-05-pixi-v8-launches.md index 1937192a6..ffeead02b 100644 --- a/blog/2024-03-05-pixi-v8-launches.md +++ b/blog/2024-03-05-pixi-v8-launches.md @@ -14,7 +14,7 @@ keywords: ['PixiJS', 'pixi.js', 'webGL', 'webGPU', 'performance', '2d rendering' Get ready to push the boundaries of what's possible on the web! PixiJS v8 has landed, and it's a game-changer. Celebrating a decade of driving innovation, we've supercharged PixiJS with the latest technological advancements, making it faster, more robust, and ridiculously powerful. From the seamless integration of WebGPU to leveraging modern JavaScript for smoother development, PixiJS v8 is all about empowering you to create jaw-dropping web experiences with ease. It's not just an update; it's the future of 2D web graphics, today. Dive in and let PixiJS v8 elevate your projects to unseen heights. Let's make the web a more beautiful place, one pixi(el) at a time. - + ## 🚀 Revolutionizing Web Graphics: Welcome to PixiJS v8 diff --git a/blog/2024-06-14-pixi-spine.md b/blog/2024-06-14-pixi-spine.md new file mode 100644 index 000000000..574c93844 --- /dev/null +++ b/blog/2024-06-14-pixi-spine.md @@ -0,0 +1,63 @@ +--- +title: PixiJS Joins the Spine 4.2 Physics Revolution! 🚀 +description: Elevate your animations with Spine 1.1.0 and the revolutionary physics features of Spine 4.2, now fully integrated with PixiJS v8. +slug: pixi-js-hearts-spine +authors: + - name: GoodBoyDigital + title: PixiJS Creator + url: https://github.com/GoodBoyDigital + image_url: https://github.com/GoodBoyDigital.png +tags: [PixiJS, Spine, WebGL, WebGPU, Animation] +hide_table_of_contents: true +keywords: ['PixiJS', 'Spine', 'webGL', 'webGPU', '2D animation', 'JavaScript graphics', 'game development'] +--- + +We have exciting news for all animation enthusiasts and game developers! The Spine team has just smashed it out of the park with the release of [Spine 4.2](https://en.esotericsoftware.com/blog/Spine-4.2-The-physics-revolution), which includes some truly great new features. The best part for us PixiJS users? We can start leveraging these remarkable features today in both v7 and v8! + + + +For those unfamiliar, Spine is the standard for creating stunning 2D animations. It offers an intuitive editor and a multitude of runtimes to ensure that your animations can be utilized across various platforms. PixiJS has supported Spine for almost as long as both have existed (around 10 years)! Personally, we have been shipping games with Spine for about that long as well. + +Initially, we maintained our own player. This worked well, but as Spine evolved and new releases were introduced, we had to invest considerable time and energy to modify our custom player. In the past year, the Esoteric team has been managing the v7 version of the player after PixiJS's [elementalcode](https://x.com/miltoncandelero) made the initial implementation on top of their excellent HTML5 runtime. This means that as these incredible updates are released, the PixiJS community can use them almost immediately! + +Here are a few of the exciting new features: + +### 🏋️‍♂️ Physics in Spine + +Spine 4.2 revolutionizes animation with built-in physics, allowing bones to move naturally by simulating real-world physics. This means: +- **Automatic Secondary Motion**: Save time and enhance your animations with automated movement for hair, clothing, and more. + + + +- **Dynamic Movement**: Enjoy fluid and realistic physics that respond to character movements and animations. + + + +### 📎 Attachments + +You can now attach any PixiJS Container to a slot in your animation with a simple-to-use API. + + - `addSlotObject(slotName, object)` + - `removeSlotObject(slotName)` + - `getSlotObject(slotName)` + + + +### 🏎️ v8 Spine Player Beta + +We have not forgotten about v8! Just as we engineered v8 with the goal of being the fastest WebGPU (and WebGL!) renderer available, we applied this same focus to the v8 implementation of Spine. Here are some impressive statistics: + +- **50% Faster**: Enjoy significant performance improvements, making it over 50% faster than the previous v7 version. +- **50% Less Memory**: We've optimized memory usage, reducing it by over 50% compared to the current v7 version. + +We are proud to say that this is one of if not *the* fastest way to render Spine animations on the web 🏆. Get ready to create smooth, high-performance animations with ease. + +We plan on handing this implementation back over to the Spine team once we have dotted all the i's and crossed the t's. The last missing feature is the dark-tint property, which is not currently taken into account when rendering in v8. Other than that, all other features are present. If you are not using dark-tint, then this version will work great on v8; we are already using it in production for our games! + +We included all the examples in the repo for you to play with [here](https://github.com/pixijs/spine-v8/tree/main/examples). + +You can also check out the live v8 examples [here](https://pixijs.io/spine-v8/examples/) + +## 📲 Stay Connected + +Follow [Doormat23](https://twitter.com/Doormat23) and [PixiJS](https://twitter.com/PixiJS) on social media for the latest updates. Join our vibrant community on [Discord](https://discord.gg/nrnDP9wtyX) for real-time discussions and support. diff --git a/blog/2024-07-18-assetpack-1.0.0.md b/blog/2024-07-18-assetpack-1.0.0.md new file mode 100644 index 000000000..f2a6e3850 --- /dev/null +++ b/blog/2024-07-18-assetpack-1.0.0.md @@ -0,0 +1,132 @@ +--- +title: AssetPack 1.0.0 Release! +description: AssetPack 1.0.0 is here! 🎉 +slug: assetpack-1.0.0 +authors: + - name: Zyie + title: PixiJS Co-owner + url: https://github.com/Zyie + image_url: https://github.com/Zyie.png +tags: [PixiJS, AssetPack, Web, Games, Spine, Optimisation, 'Asset Management'] +hide_table_of_contents: true +keywords: ['PixiJS', 'Spine', 'JavaScript', 'game development', 'web development', 'asset management', 'loading'] +--- + +Today we are very excited to announce [AssetPack](https://pixijs.io/assetpack) 1.0, an asset management and optimization tool for web developers. + +In the world of web development, managing and optimizing assets often demands significant manual effort. Developers need to ensure that their images are compressed, their audio files are optimized, their fonts are loaded efficiently, and more. This process can be time-consuming and error-prone, especially when working on large projects with many assets. To address this challenge, AssetPack provides a configurable asset pipeline that automates many of these tasks, making it easier for developers to manage and deploy assets in their projects. + + + +## What is AssetPack? + +AssetPack is a tool designed to streamline the management, optimization, and deployment of assets in web projects. It is framework-agnostic and can be used with any framework you like, such as PixiJS, Three.js, Phaser, and others. AssetPack employs a plugin-based system, allowing you to create your own plugins to customize asset processing according to your needs. + +
+ AssetPack screenshot +
+ +AssetPack comes out of the box with the following plugins: + +- **Cache Busting**: Automatically appends a unique hash to asset URLs to ensure that clients always load the latest version of the asset. +- **Compression**: Compresses images using sharp, allowing for the creation of webp/avif images and compressing png/jpg to reduce file sizes. +- **TexturePacker**: Automatically generates spritesheets from images. +- **Mipmap**: Generates mipmaps for textures to improve rendering performance e.g. 2x, 1x, 0.5x, etc. +- **Spine**: Optimizes Spine animations by creating mipmaps for `.atlas` files. +- **Audio/FFmpeg**: Converts audio files to the desired format and bitrate using FFmpeg. +- **JSON**: Minifies JSON files to reduce their size. +- **Webfont**: Converts all fonts files to WOFF2 format, and plugins for SDF and MSDF font generation +- **Manifest**: Generates a manifest file containing all asset URLs for easy loading. This can be used with PixiJS's `Assets` loader + +The above plugins are just a few examples of what AssetPack can do. You can create your own plugins to extend AssetPack's functionality further. + +### Key Features of AssetPack + +#### Caching & CI + +AssetPack intelligently caches assets, transforming each asset only once. This reduces redundant processing and speeds up build times, ensuring that you always have the latest version of your assets without unnecessary overhead. + +This is perfect for Continuous Integration (CI) environments, AssetPack allows you to commit raw assets to your repository and transform them as part of your build process. This ensures that your assets are always optimized and up-to-date with minimal manual intervention. See the Github Action example [here](https://pixijs.io/assetpack/docs/guide/getting-started/github-action/) for more information. + +#### Performance + +Designed to handle large quantities of assets, AssetPack utilizes the fastest tools available. This ensures that your asset pipeline can keep up with the demands of modern web development, delivering optimized assets quickly and efficiently. + +#### Watch Mode + +With the Watch mode, AssetPack monitors your assets in real-time, updating them as you add or remove files. This live update feature streamlines development, allowing you to see changes immediately without having to manually trigger asset processing. Combined with the caching system, Watch mode ensures that only the necessary assets are transformed, keeping build times to a minimum. + +#### Tag System + +AssetPack's tag-powered system makes asset management intuitive and flexible. By simply adding tags to folders or files (e.g., `{tps}` to create a sprite sheet), you can easily apply specific processing rules. This feature simplifies complex asset workflows and enhances customization. + +
+ AssetPack screenshot +
+ +## How to use AssetPack + +### Installation + +To install AssetPack, you need to install the `@assetpack/core` package. + +```bash +npm install --save-dev @assetpack/core +``` + +:::info COMPATIBILITY NOTE +AssetPack requires [Node.js](https://nodejs.org/en/) version 20+, please upgrade if your package manager warns about it. +::: + +### Setup + +To set up AssetPack, you need to create a configuration file that defines what assets you want to optimise and how you want to optimise them. + +First create a `.assetpack.js` file in the root of your project. This file should export an object with the following properties: + +```js +// .assetpack.js +import { pixiPipes } from '@assetpack/core'; + +export default { + entry: './raw-assets', + output: './public/assets', + pipes: [ + /* If you are using AssetPack with PixiJS, you can use the `pixiPipes` function + * to add a pre-configured set of plugins, with an opinionated + * set of defaults for PixiJS. + */ + ...pixiPipes() + ], +}; +``` + +To see the full list of configuration options, see the [API Reference](https://pixijs.io/assetpack/docs/guide/configuration/) page. + +Then to run AssetPack, you can use the CLI, run programmatically, or use a build tool like Vite. + +- [CLI](https://pixijs.io/assetpack/docs/guide/getting-started/cli) +- [Programmatic](https://pixijs.io/assetpack/docs/guide/getting-started/programmatic) +- [Vite](https://pixijs.io/assetpack/docs/guide/getting-started/vite) + +AssetPack has a number of built-in plugins for you to use, to see the full list of plugins, see the [Plugins](https://pixijs.io/assetpack/docs/guide/pipes/overview) page. + +### Open Source Games + +AssetPack is already in use in our open source games repo. Check out the [games](https://pixijs.io/assetpack/examples) leveraging AssetPack for asset management. These examples showcase the power and flexibility of AssetPack in real-world scenarios. + +## Conclusion + +AssetPack is a powerful tool that can help you manage and optimize assets in your web projects. By automating many of the tasks involved in asset management, AssetPack can save you time and effort, allowing you to focus on building great web experiences. We hope you find AssetPack useful in your projects, and we look forward to seeing what you create with it! + +We are committed to continuously improving AssetPack, and your feedback is invaluable to us. If you encounter any issues or have suggestions for new features, please reach out on our discord or open an issue on our GitHub repository. + +## 🌐 Stay Connected + +Follow [Zyie](https://twitter.com/_Zyie_) and [PixiJS](https://twitter.com/PixiJS) on social media for the latest updates. Join our vibrant community on [Discord](https://discord.gg/nrnDP9wtyX) for real-time discussions and support. diff --git a/blog/2024-10-03-pixi-v8-particle-container.md b/blog/2024-10-03-pixi-v8-particle-container.md new file mode 100644 index 000000000..2d50f6e0b --- /dev/null +++ b/blog/2024-10-03-pixi-v8-particle-container.md @@ -0,0 +1,103 @@ +--- +title: ParticleContainer - The New Speed Demon in PixiJS v8 +description: Introducing the new ParticleContainer in PixiJS v8—faster than ever, optimized for rendering millions of particles effortlessly. +slug: particlecontainer-v8 +authors: + - name: Mat Groves + title: PixiJS + url: https://github.com/GoodboyDigital + image_url: https://github.com/GoodboyDigital.png +tags: [PixiJS, ParticleContainer, WebGL, Games, Performance, Optimization] +hide_table_of_contents: true +keywords: ['PixiJS', 'ParticleContainer', 'game development', 'web graphics', 'optimization', 'WebGL'] +--- + +PixiJS v8 has taken speed to the next level with the release of its new `ParticleContainer`. This new feature brings a jaw-dropping performance boost, capable of rendering 100K+ without breaking a sweat. If you’ve got tons of elements to throw on the screen, you’re in for a treat! + + + +## 🚀 New ParticleContainer Design + +The key difference in PixiJS v8 is that the `ParticleContainer` doesn’t deal with sprites any more, it works with lightweight **particles**. While particles share many properties with sprites (like texture, position, anchor, scale, rotation, alpha and color), they cut out unnecessary overhead. The result is **speed**, pure and simple. + +How fast, you ask? Well, take a look on my machine (Macbook Pro M3): + +- **Sprites + Container**: 200,000 at 60fps. +- **Particles + ParticleContainer**: 1,000,000 at 60fps! + +Yes, that’s a _million_ bunnies on-screen, and honestly the main bottleneck at that point wasn’t even rendering but the logic behind the bouncing movement! Give this a spin and see for yourself: + + + +The key takeaway is that you can now render **huge volumes of elements** absurdly fast, making PixiJS v8 a perfect choice for high-performance games or visually intensive projects. And yes this is faster than the v7 particle container by **over 3x**! + +Please checkout the [migration guide](../8.x/guides/migrations/v8#particlecontainer) for more information on how to migrate your code to the new particle container. + +### Speed Secret: Static vs. Dynamic Properties + +To get the most out of this performance beast, it’s essential to understand **static** vs. **dynamic** properties. PixiJS gives you full control over which properties update every frame (dynamic) and which don’t need constant updates (static). Here’s how they work: + +- **Static properties**: Once set, they stay the same unless explicitly changed. By keeping them static, you reduce computational load, meaning faster rendering. This is your responsibility to update :) +- **Dynamic properties**: These are recalculated and uploaded to the GPU every frame regardless. + +By default, **only the position** is dynamic, but you can configure others if needed. The fewer dynamic properties you have, the faster the rendering will be! + +### PixiJS v8 Particle Container Usage + +Let’s walk through a simple example of how to get started: + +```javascript +import { ParticleContainer, Particle, Texture } from 'pixi.js'; + +// Create a particle container with default options +const container = new ParticleContainer({ + // this is the default, but we show it here for clarity + dynamicProperties: { + position: true, // Allow dynamic position changes (default) + scale: false, // Static scale for extra performance + rotation: false, // Static rotation + color: false // Static color + } +}); + +// Add particles +const texture = Texture.from('path/to/bunny.png'); + +for (let i = 0; i < 100000; ++i) { + let particle = new Particle({ + texture, + x: Math.random() * 800, + y: Math.random() * 600, + }); + + container.addParticle(particle); +} + +// Add container to the Pixi stage +app.stage.addChild(container); +``` + +In this example, we create a `ParticleContainer`, set properties to static where possible, and generate a 100k particles. By using a shared texture (hello, sprite sheets!), we ensure that all particles share the same graphical assets, making rendering even more efficient. + +### Reasons to Use ParticleContainer + +The `ParticleContainer` shines when you need **insane numbers** of visual elements on-screen, especially when you want them moving and interacting in real time. Whether you're building particle effects, swarms of characters, or abstract art installations, PixiJS v8 has you covered. The static vs. dynamic property system gives you granular control over performance, allowing you to fine-tune the balance between flexibility and speed. + +This is basically the fastest we could make it by still keeping allowing for different textures (via sprite sheets) and still empowering devs to manipulate the particles via JS and not having to move the movement to the GPU (which might be faster, but is more complex and less flexible). So even though we are choosing to call them particles, they are more like something in between a traditional particle and a classic sprite. + +This is ideal for projects where frame rate and rendering volume matter—such as games, interactive apps, and high-volume data visualization. By controlling the dynamic properties of your particles, you can optimize your application’s performance to fit your needs. + +### Next Steps + +The new `ParticleContainer` is a game-changer, but there are still some areas for improvement! For one, there is room to optimise further the static uploading of properties (you may notice the example above is slower when adding bunnys - but then speeds up once stable). We plan to expose how the particles are batched so that developers can add / remove attributes from the batch to make it even faster or add more flexibility and customization. But for now, this is a great starting point and we hope you enjoy the new `ParticleContainer`! + +## 🎉 Conclusion + +PixiJS v8’s `ParticleContainer` is a game-changer when it comes to rendering at scale. Its ability to push **millions** of particles at full speed opens up a world of possibilities for game developers, animators, and creative coders. Get in, experiment with the new API, and see just how fast your visuals can fly! + +Ready to give it a spin? Try out the new `ParticleContainer` in PixiJS v8, and push the limits of performance in your projects! + + +## 🌐 Stay Connected + +Follow [Doormat23](https://twitter.com/Doormat23) and [PixiJS](https://twitter.com/PixiJS) on social media for the latest updates. Join our vibrant community on [Discord](https://discord.gg/nrnDP9wtyX) for real-time discussions and support. diff --git a/docs/guides/advanced/render-groups.md b/docs/guides/advanced/render-groups.md index c5a16b62a..9c7ed738c 100644 --- a/docs/guides/advanced/render-groups.md +++ b/docs/guides/advanced/render-groups.md @@ -39,7 +39,7 @@ Check out the [container example] (../../examples/basic/container). ### Best Practices -- **Don't Overuse:** While Render Groups are powerful, using too many can actually degrade performance. The goal is to find a balance that optimizes rendering without overwhelming the system with too many separate groups. Make sure to profile when using them. The majority of the time you won't need do use them at all! +- **Don't Overuse:** While Render Groups are powerful, using too many can actually degrade performance. The goal is to find a balance that optimizes rendering without overwhelming the system with too many separate groups. Make sure to profile when using them. The majority of the time you won't need to use them at all! - **Strategic Grouping:** Consider what parts of your scene change together and which parts remain static. Grouping dynamic elements separately from static elements can lead to performance gains. By understanding and utilizing Render Groups, you can take full advantage of PixiJS's rendering capabilities, making your applications smoother and more efficient. This feature represents a powerful tool in the optimization toolkit offered by PixiJS, enabling developers to create rich, interactive scenes that run smoothly across different devices. diff --git a/docs/guides/basics/scene-graph.md b/docs/guides/basics/scene-graph.md index 2f7003b33..f8d1d8589 100644 --- a/docs/guides/basics/scene-graph.md +++ b/docs/guides/basics/scene-graph.md @@ -27,7 +27,7 @@ document.body.appendChild(app.canvas); // Add a container to center our sprite stack on the page const container = new Container({ x:app.screen.width / 2, - y:app.screen.height / 2; + y:app.screen.height / 2 }); app.stage.addChild(container); diff --git a/docs/guides/components/containers.md b/docs/guides/components/containers.md index 4849a4217..ada3ad61a 100644 --- a/docs/guides/components/containers.md +++ b/docs/guides/components/containers.md @@ -71,7 +71,7 @@ frame.addChild(maskContainer); let text = new Text({ text:'This text will scroll up and be masked, so you can see how masking works. Lorem ipsum and all that.\n\n' + 'You can put anything in the container and it will be masked!', - style{ + style:{ fontSize: 24, fill: 0x1010ff, wordWrap: true, diff --git a/docs/guides/components/graphics.md b/docs/guides/components/graphics.md index 16f8ffc34..0290cf351 100644 --- a/docs/guides/components/graphics.md +++ b/docs/guides/components/graphics.md @@ -144,7 +144,7 @@ Doing so is simple. Create the object, call the various builder functions to ad You can also use a Graphics object as a complex mask. To do so, build your object and primitives as usual. Next create a `Container` object that will contain the masked content, and set its `mask` property to your Graphics object. The children of the container will now be clipped to only show through inside the geometry you've created. This technique works for both WebGL and Canvas-based rendering. -Check out the [masking example code](../../examples/graphics/simple). +Check out the [masking example code](../../examples/masks/graphics). ## Caveats and Gotchas diff --git a/docs/guides/components/interaction.md b/docs/guides/components/interaction.md index 1ff6eeb70..780939928 100644 --- a/docs/guides/components/interaction.md +++ b/docs/guides/components/interaction.md @@ -10,7 +10,7 @@ The new event-based system that replaced `InteractionManager` from v6 has expand |---|---| | `none` | Ignores all interaction events, similar to CSS's `pointer-events: none`, good optimization for non-interactive children | | `passive` | Does not emit events and ignores hit testing on itself but does allow for events and hit testing only its interactive children. This is default eventMode for all containers | -| `auto` | Does not emit events and but is hit tested if parent is interactive. Same as `interactive = false` in v7 | +| `auto` | Does not emit events but is hit tested if parent is interactive. Same as `interactive = false` in v7 | | `static` | Emit events and is hit tested. Same as `interaction = true` in v7, useful for objects like buttons that do not move. | | `dynamic` | Emits events and is hit tested but will also receive mock interaction events fired from a ticker to allow for interaction when the mouse isn't moving. This is useful for elements that are independently moving or animating. | diff --git a/docs/guides/migrations/v7.md b/docs/guides/migrations/v7.md index ec2740cbe..a63713a49 100644 --- a/docs/guides/migrations/v7.md +++ b/docs/guides/migrations/v7.md @@ -8,7 +8,7 @@ Microsoft officially ended support for IE, so we decided to follow. It simplifie ## 🗑️ Remove Polyfills -We removed the bundled polyfills such as `requestAnimationFrame` and `Promise`. These things are widely available in browsers now. If projects require them, developers should include the polyfills they need for backward-compatibility. Please check out [polyfill.io](https://cdn.polyfill.io/v3/url-builder/). +We removed the bundled polyfills such as `requestAnimationFrame` and `Promise`. These things are widely available in browsers now. If projects require them, developers should include the polyfills they need for backward-compatibility. ## 💬 Output ES2020 (modules) and ES2017 (browser) diff --git a/docs/guides/migrations/v8.md b/docs/guides/migrations/v8.md index 11ae909cf..a28bb0b21 100644 --- a/docs/guides/migrations/v8.md +++ b/docs/guides/migrations/v8.md @@ -19,12 +19,7 @@ Before diving into the migration process, let's review the breaking changes intr ### Should I Upgrade? -Generally, the answer is yes! But currently, there may be reasons that suggest it's best not to upgrade just yet. Ask yourself the following questions: - -- **Do I *need* the ParticleContainer?** We have removed this from v8 because, in most cases, a regular container is faster. However, this is not the case when the number of particles begins to exceed the 10,000s range. We do plan on creating a new particle container optimized for this high level of elements. Ideally, we would like to make it even faster and also less memory intensive. Creating 100,000 sprites consumes a lot of memory, and instead, creating a much lighter particle container + particle class would help here. If you need tens of thousands of particles right now and performance is key, then it's best to continue leveraging v7 until we release the new Particle Container. - -- **Do you make use of custom batch renderers?** -The logic for batch rendering has been extensively reworked for speed! Custom batching can be achieved by creating your own batcher, but the ability to build one and slot it into the existing batching architecture has not been directly exposed just yet. If you are making extensive use of custom batchers, there is no high level analogous alternative in v8 just yet. You would need to go a layer deeper. Exposing the ability for custom batching is on our roadmap, and we hope that our new approach will be even easier to use. Watch this space for that update. +Generally, the answer is yes! But currently, there may be reasons that suggest it's best not to upgrade just yet. Ask yourself the following question: - **Does your project leverage existing Pixi libraries that have not yet been migrated to v8?** We are working hard to migrate our key libraries to v8 but did not want this to be a blocker for those who are using pure Pixi. This means some libraries will not have a v8 counterpart just yet. It's best to hold off on migration if this is the case for you. @@ -416,6 +411,77 @@ Filters work almost exactly the same, unless you are constructing a custom one. **old**: [v7 example](https://pixijs.com/7.x/examples/filters-advanced/custom) **new**: [v8 example](https://pixijs.com/8.x/examples/filters-advanced/custom) +If you're using the [community filters](https://github.com/pixijs/filters), note that the `@pixi/filter-*` packages are no-longer maintained for v8, however, you can import directly from the `pixi-filters` package as sub-modules. + +***old** +```ts +import { AdjustmentFilter } from '@pixi/filter-adjustment'; +``` + +***new** +```ts +import { AdjustmentFilter } from 'pixi-filters/adjustment'; +``` + +--- + +### ParticleContainer + +`ParticleContainer` has been reworked in v8 to allow for far more particles than before. There are a few key changes you should be aware of: + +A `ParticleContainer` no longer accepts sprites as its children. Instead, it requires a `Particle` class (or an object that implements the `IParticle` interface), which follows this interface: + +``` +export interface IParticle +{ + x: number; + y: number; + scaleX: number; + scaleY: number; + anchorX: number; + anchorY: number; + rotation: number; + color: number; + texture: Texture; +} +``` + +The reason for this change is that sprites come with many extra properties and events that are generally unnecessary when dealing with large numbers of particles. This approach explicitly removes any ambiguity we had in v7, such as "Why doesn't my sprite work with filters?" or "Why can't I nest children in my sprites?" It’s a bit more predictable. Additionally, due to the lightweight nature of particles, this means we can render far more of them! + +So, no functionality is lost—just an API tweak with a massive performance boost! + +Particles are also not stored in the `children` array of the `ParticleContainer`, as particles are not technically part of the scene graph (for performance reasons). Instead, they are stored in a flat list called `particleChildren`, which is part of the `ParticleContainer` class. You can modify this array directly for extra speed, or you can use the `addParticle` and `removeParticle` methods to manage your particles. + +Another optimization is that `ParticleContainer` does not calculate its own bounds, as doing so would negate the performance gains we've created! Instead, it's up to you to provide a `boundsArea` when initializing the `ParticleContainer`. + +--- + +**OLD** +```ts +const container = new ParticleContainer(); + +for (let i = 0; i < 100000; i++) { + const particle = new Sprite(texture); + container.addChild(particle); +} +``` + +**NEW** +```ts +const container = new ParticleContainer(); + +for (let i = 0; i < 100000; i++) { + const particle = new Particle(texture); + container.addParticle(particle); +} +``` +with a bounds area +```ts +const container = new ParticleContainer({ + boundsArea:new Rectangle(0,0,500,500) +}); +``` + ### Other Breaking Changes - `DisplayObject` has been removed. `Container` is now the base class for all PixiJS objects. @@ -672,8 +738,6 @@ The act of adding and removing the event when a sprite's texture was changed led const bounds = container.getBounds().rectangle; ``` -- `ParticleContainer` has been removed, you should use normal a regular `Container` instead. The performance improvements that `ParticleContainer` provided are no longer necessary due to the new rendering architecture. - ## 3. Deprecated Features Certain features from PixiJS v7 have been deprecated in v8. While they will still work, it's recommended to update your code to use the new alternatives. Refer to the deprecated features section for details on what to replace them with. diff --git a/docs/guides/production/performance-tips.md b/docs/guides/production/performance-tips.md index c37ccd52d..bfe3e5eda 100644 --- a/docs/guides/production/performance-tips.md +++ b/docs/guides/production/performance-tips.md @@ -42,7 +42,7 @@ - Masks can be expensive if too many are used: e.g., 100s of masks will really slow things down - Axis-aligned Rectangle masks are the fastest (as the use scissor rect) - Graphics masks are second fastest (as they use the stencil buffer) -- Sprite masks are the third fastest (they uses filters). They are really expensive. Do not use too many in your scene! +- Sprite masks are the third fastest (they use filters). They are really expensive. Do not use too many in your scene! ### Filters diff --git a/docs/pixi-version.json b/docs/pixi-version.json index 2a199a177..46c3ad0bd 100644 --- a/docs/pixi-version.json +++ b/docs/pixi-version.json @@ -1,10 +1,10 @@ { "versionLabel": "v8.x", - "version": "8.1.5", - "releaseNotes": "https://github.com/pixijs/pixijs/releases/tag/v8.1.5", - "build": "https://pixijs.download/v8.1.5/pixi.min.js", - "docs": "https://pixijs.download/v8.1.5/docs/index.html", - "npm": "8.1.5", + "version": "8.5.0", + "releaseNotes": "https://github.com/pixijs/pixijs/releases/tag/v8.5.0", + "build": "https://pixijs.download/v8.5.0/pixi.min.js", + "docs": "https://pixijs.download/v8.5.0/docs/index.html", + "npm": "8.5.0", "prerelease": false, "latest": true } \ No newline at end of file diff --git a/docusaurus.config.js b/docusaurus.config.js index 8bad16771..86324872e 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -210,9 +210,13 @@ const config = { value: 'Tools', className: 'nav-section-heading', }, + { + label: 'DevTools', + href: 'https://pixijs.io/devtools/', + }, { label: 'AssetPack', - href: 'https://github.com/pixijs/assetpack', + href: 'https://pixijs.io/assetpack/', }, { label: 'Storybook', @@ -222,10 +226,6 @@ const config = { label: 'Text Style Editor', href: 'https://pixijs.io/pixi-text-style/#', }, - { - label: 'Customise v6', - href: 'https://pixijs.io/customize/', - }, { type: 'html', value: 'Help', diff --git a/pixi-versions.json b/pixi-versions.json index aae2ca6de..412d3536c 100644 --- a/pixi-versions.json +++ b/pixi-versions.json @@ -12,11 +12,11 @@ }, { "versionLabel": "v8.x", - "version": "8.1.5", - "releaseNotes": "https://github.com/pixijs/pixijs/releases/tag/v8.1.5", - "build": "https://pixijs.download/v8.1.5/pixi.min.js", - "docs": "https://pixijs.download/v8.1.5/docs/index.html", - "npm": "8.1.5", + "version": "8.5.0", + "releaseNotes": "https://github.com/pixijs/pixijs/releases/tag/v8.5.0", + "build": "https://pixijs.download/v8.5.0/pixi.min.js", + "docs": "https://pixijs.download/v8.5.0/docs/index.html", + "npm": "8.5.0", "prerelease": false, "latest": true, "isCurrent": true diff --git a/src/components/Homepage/OpenCollective/index.tsx b/src/components/Homepage/OpenCollective/index.tsx index 00750fde6..2ebb5510d 100644 --- a/src/components/Homepage/OpenCollective/index.tsx +++ b/src/components/Homepage/OpenCollective/index.tsx @@ -47,7 +47,7 @@ export default function OpenCollective(): JSX.Element const response = await fetch('https://opencollective.com/pixijs/members/all.json'); const data = (await response.json()) as OpenCollectiveSchema; const sponsorData = data - .filter((member) => member.tier === 'sponsor') + .filter((member) => member.tier === 'sponsor' && member.isActive) .sort((a, b) => b.totalAmountDonated - a.totalAmountDonated) .map((member) => ({ name: member.name, diff --git a/src/tutorials/v8.0.0/spineBoyAdventure/step1/step1-content.md b/src/tutorials/v8.0.0/spineBoyAdventure/step1/step1-content.md index f0bc83302..b63b12370 100644 --- a/src/tutorials/v8.0.0/spineBoyAdventure/step1/step1-content.md +++ b/src/tutorials/v8.0.0/spineBoyAdventure/step1/step1-content.md @@ -36,11 +36,11 @@ Let's then preload all of our required assets upfront which includes: await Assets.load([ { alias: 'spineSkeleton', - src: 'https://pixijs.com/assets/tutorials/spineboy-adventure/spineboy.skel', + src: 'https://raw.githubusercontent.com/pixijs/spine-v8/main/examples/assets/spineboy-pro.skel', }, { alias: 'spineAtlas', - src: 'https://pixijs.com/assets/tutorials/spineboy-adventure/spineboy.atlas', + src: 'https://raw.githubusercontent.com/pixijs/spine-v8/main/examples/assets/spineboy-pma.atlas', }, { alias: 'sky', @@ -61,4 +61,4 @@ await Assets.load([ ]); ``` -Now you are ready to dive straight into the adventure! Proceed to the next exercise using the _Next >_ button below, or feel free to skip to any exercise using the drop-down menu on the top right hand corner of the card. \ No newline at end of file +Now you are ready to dive straight into the adventure! Proceed to the next exercise using the _Next >_ button below, or feel free to skip to any exercise using the drop-down menu on the top right hand corner of the card. diff --git a/static/images/blog/assetpack-screenshot-tags.png b/static/images/blog/assetpack-screenshot-tags.png new file mode 100644 index 000000000..b310341bb Binary files /dev/null and b/static/images/blog/assetpack-screenshot-tags.png differ diff --git a/static/images/blog/assetpack-screenshot.png b/static/images/blog/assetpack-screenshot.png new file mode 100644 index 000000000..94bb15b1d Binary files /dev/null and b/static/images/blog/assetpack-screenshot.png differ diff --git a/versioned_docs/version-7.x/guides/components/graphics.md b/versioned_docs/version-7.x/guides/components/graphics.md index 236e11946..cb17f3b6d 100644 --- a/versioned_docs/version-7.x/guides/components/graphics.md +++ b/versioned_docs/version-7.x/guides/components/graphics.md @@ -83,7 +83,7 @@ Doing so is simple. Create the object, call the various builder functions to ad You can also use a Graphics object as a complex mask. To do so, build your object and primitives as usual. Next create a PIXI.Container object that will contain the masked content, and set its `mask` property to your Graphics object. The children of the container will now be clipped to only show through inside the geometry you've created. This technique works for both WebGL and Canvas-based rendering. -Check out the [masking example code](../../examples/graphics/simple). +Check out the [masking example code](../../examples/masks/graphics). ## Caveats and Gotchas diff --git a/versioned_docs/version-7.x/guides/migrations/v7.md b/versioned_docs/version-7.x/guides/migrations/v7.md index ec2740cbe..a63713a49 100644 --- a/versioned_docs/version-7.x/guides/migrations/v7.md +++ b/versioned_docs/version-7.x/guides/migrations/v7.md @@ -8,7 +8,7 @@ Microsoft officially ended support for IE, so we decided to follow. It simplifie ## 🗑️ Remove Polyfills -We removed the bundled polyfills such as `requestAnimationFrame` and `Promise`. These things are widely available in browsers now. If projects require them, developers should include the polyfills they need for backward-compatibility. Please check out [polyfill.io](https://cdn.polyfill.io/v3/url-builder/). +We removed the bundled polyfills such as `requestAnimationFrame` and `Promise`. These things are widely available in browsers now. If projects require them, developers should include the polyfills they need for backward-compatibility. ## 💬 Output ES2020 (modules) and ES2017 (browser)