-
Notifications
You must be signed in to change notification settings - Fork 38
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: pixi 8.6.0 blog & embedded examples (#141)
- Loading branch information
Showing
19 changed files
with
363 additions
and
50 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,163 @@ | ||
| --- | ||
| title: PixiJS Update - Survey & v8.6.0 | ||
| description: A look at the recent updates and improvements in PixiJS. | ||
| slug: better-docs-v8 | ||
| authors: | ||
| - name: Zyie | ||
| title: PixiJS Admin | ||
| url: https://github.com/zyie | ||
| image_url: https://github.com/zyie.png | ||
| tags: [PixiJS, Updates, Improvements] | ||
| hide_table_of_contents: true | ||
| keywords: ['PixiJS', 'Updates', 'Improvements', 'QoL'] | ||
| --- | ||
| import Example from '@site/src/components/Example/index'; | ||
| import version from '@site/docs/pixi-version.json'; | ||
|
|
||
|
|
||
| Thank you to everyone who participated in our survey! One thing came through loud and clear: **better documentation is a top priority for the PixiJS community**. We’ve taken your feedback to heart, and work is already underway to make significant improvements. | ||
|
|
||
| This post is part of our commitment to better communication. We’ll share how we’re tackling documentation updates and shine a light on some of the great features and improvements we’ve introduced since PixiJS v8 that might have flown under the radar! | ||
|
|
||
| <!--truncate--> | ||
|
|
||
| ## 📖 Improving Documentation | ||
| Documentation is critical for a library like PixiJS, and we recognize there’s room for growth. Below is a list of the changes we’re making to improve the documentation: | ||
|
|
||
| - **More Examples**: | ||
| - Adding more examples for both beginners and experienced developers to learn from to the website. | ||
| - Add example/guide for each feature we introduce on release, to help you understand how to use it right away. | ||
| - **Updated Guides**: | ||
| - Overhaul our current set of guides to better reflect the current state of PixiJS. | ||
| - Add more guides to cover the basics of PixiJS | ||
| - **Starter Templates**: | ||
| - Create a set of starter templates to help you get up and running quickly. These templates will be available through an `npm create` command. | ||
| - **API Doc Improvements**: | ||
| - Improve documentation of types. | ||
| - Include inline examples and explanations. | ||
| - Ensure all public API's are written from the perspective of the user, not the developer. | ||
| - Look into providing a toggle for exposing internal API's, with the default being to hide them. This will help reduce the noise in the API docs for most users while stil giving plugin developers access to the internals. | ||
| - **Migration Guide**: | ||
| - Improving the migration guide to help you upgrade your codebase to the latest version of PixiJS. | ||
| - Explore backporting more deprecations where possible to help you upgrade your codebase more easily. | ||
|
|
||
| These changes will take time, but they are high on our priority list. If you have any suggestions or feedback, please let us know on [Bluesky](https://bsky.app/profile/pixijs.com) or [Discord](https://discord.gg/nrnDP9wtyX). | ||
|
|
||
| ## ✨ What’s New? | ||
| We’ve been hard at work delivering new features and improvements, but let’s be honest—we haven’t done the best job announcing them. Here’s a quick rundown of the highlights from our recent releases. | ||
|
|
||
| :::info NOTE | ||
| We will be bringing out more detailed guides/examples on all of these features as well, this is just the start! | ||
| ::: | ||
|
|
||
| ### v8.6.0 | ||
| - **cacheAsTexture**: Containers now have a `cacheAsTexture()` function. It behaves similarly to `cacheAsBitmap` from v7 and will render the container to a texture instead of rendering the container itself. | ||
|
|
||
| This can be great for performance if the container is static, as instead of rendering all the children etc., it will just render a single texture. | ||
| As well as this the process of caching is also relatively low cost, with the trade-off being memory usage as the use of a texture does increase memory (for the texture itself). | ||
|
|
||
| :::info Guide | ||
| We have a full guide on this feature [here](/8.x/guides/advanced/cache-as-texture). | ||
| ::: | ||
| <Example id="basic.cacheAsTexture" pixiVersion={version} mode={"embedded"}/> | ||
| - **pixelLine**: The `pixelLine` property is a neat feature of the PixiJS Graphics API that allows you to create lines that remain 1 pixel thick, regardless of scaling or zoom level. This feature is especially useful for achieving crisp, pixel-perfect visuals, particularly in retro-style or grid-based games, technical drawing, or UI rendering. | ||
|
|
||
| :::info Guide | ||
| We have a full guide on this feature [here](/8.x/guides/components/graphics-pixel-line). | ||
| ::: | ||
| <Example id="graphics.pixelLine" pixiVersion={version} mode={"embedded"}/> | ||
|
|
||
| - **New Global Methods**: We have added three new functions to Container to make it easier to work with global transforms / tints / alphas. | ||
|
|
||
| - **getGlobalTransform** | ||
| ```ts | ||
| const skipUpdate = false; | ||
| const outMatrix = new Matrix(); | ||
|
|
||
| // writes and returns outMatrix; | ||
| const globalTransform = container.getGlobalTransform(outMatrix, skipUpdate); | ||
| ``` | ||
| - **getGlobalTint** | ||
| ```ts | ||
| const skipUpdate = false; | ||
| // returns rgb color | ||
| const globalTint = container.getGlobalTint(skipUpdate); | ||
| ``` | ||
| - **getGlobalAlpha** | ||
| ```ts | ||
| const skipUpdate = false; | ||
| // returns alpha as number; | ||
| const globalAlpha = container.getGlobalAlpha(skipUpdate); | ||
| ``` | ||
|
|
||
| :::info INFO | ||
| if `skipUpdate` is true - it will be faster but may be outdated - uses the last rendered data | ||
|
|
||
| if `skipUpdate` is false - it will be 100% accurate but slower - recalculates transform chain | ||
| ::: | ||
| ### v8.5.0 | ||
| - **ParticleContainer**: Faster than ever, optimized for rendering a million particles effortlessly. | ||
|
|
||
| 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. | ||
|
|
||
| :::info Blog | ||
| We have a blog post on this feature [here](/blog/particlecontainer-v8). | ||
| ::: | ||
| <Example id="basic.particleContainer" pixiVersion={version} mode={"embedded"}/> | ||
|
|
||
|
|
||
| - **Inverse Masking**: | ||
| You can now use `element.setMask({ mask, inverse: true })` to create an inverse mask effect. This is great for creating cut-out effects or other creative visuals. | ||
| <Example id="masks.inverseMask" pixiVersion={version} mode={"embedded"}/> | ||
|
|
||
| ### v8.4.0 | ||
| - **Multiview**: Support for renderering the same context to multiple canvases. Eliminating the need for multiple PixiJS instances and duplicating resources. | ||
| Simply add `await app.init({ multiView: true})` and when rendering, pass in the target canvas to render to. `renderer.render({ container, target: canvasOnDom1 })` | ||
|
|
||
| :::tip EXPERIMENTAL | ||
| This feature is still experimental and currently interaction only works on the first canvas. | ||
| ::: | ||
|
|
||
| ### v8.3.0 | ||
| - **PerspectiveMesh**: A new mesh type that allows you to create 3D perspective effect | ||
| <Example id="meshAndShaders.perspectiveMesh" pixiVersion={version} mode={"embedded"}/> | ||
|
|
||
| ### v8.2.0 | ||
| - **Container Reparenting**: You can now reparent a container to another container without it looking visually different with two new methods `reparentChild(child)` and `reparentChildAt(child, 1)`. | ||
|
|
||
| Usually when you move a child from one container to another, it will visually jump to the new container. This is because the child's transform is relative to the parent container. With these new methods, the child will keep its position and scale relative to the new parent container. | ||
|
|
||
| ```ts | ||
| const container1 = new Container(); | ||
| const container2 = new Container(); | ||
| const sprite = new Sprite(); | ||
| container1.scale = 5; | ||
| container1.addChild(sprite); | ||
| // visually the sprite will remain in the same position and scale | ||
| // despite container1 and container2 having different scales. | ||
| container2.reparentChild(sprite); | ||
| ``` | ||
|
|
||
| ### v8.1.0 | ||
| - **Generic Typing for Container**: You can now specify the type of children that a container can have. e.g. | ||
| ```typescript | ||
| const container = new Container<Sprite>(); | ||
| container.addChild(new Sprite()); | ||
| container.addChild(new Graphics()); // This will throw a type error | ||
| ``` | ||
| - **DTS Bundles**: We now provide a single TypeScript definition file with all pixi exports under the `PIXI` namespace, similar to the defintion file we generated in v6. This can be useful for users that are using PixiJS in a non-module environment, and need to include the definition file manually. | ||
|
|
||
| This file can be found on all of our releases on Github in the "Assets" section, or through `https://pixijs.download/vX.X.X/pixi.d.ts`. | ||
|
|
||
| ## 🗣️ Looking Ahead | ||
| We’re committed to addressing the feedback you’ve shared and continuing to improve PixiJS. In addition to better documentation, you can expect more regular updates to keep you informed about what’s new. | ||
|
|
||
| Your input is vital to PixiJS’s success, and we encourage you to share your thoughts through Bluesky, Github, and the Discord channel. Thanks for your continued support as we work to make PixiJS better for everyone. | ||
|
|
||
| The PixiJS Team | ||
|
|
||
| ## 🌐 Stay Connected | ||
|
|
||
| Follow [Zyie](https://bsky.app/profile/zyie.bsky.social) and [PixiJS](https://bsky.app/profile/pixijs.com) on social media for the latest updates. Join our vibrant community on [Discord](https://discord.gg/nrnDP9wtyX) for real-time discussions and support. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,10 +1,10 @@ | ||
| { | ||
| "versionLabel": "v8.x", | ||
| "version": "8.6.0", | ||
| "releaseNotes": "https://github.com/pixijs/pixijs/releases/tag/v8.6.0", | ||
| "build": "https://pixijs.download/v8.6.0/pixi.min.js", | ||
| "docs": "https://pixijs.download/v8.6.0/docs/index.html", | ||
| "npm": "8.6.0", | ||
| "version": "8.6.2", | ||
| "releaseNotes": "https://github.com/pixijs/pixijs/releases/tag/v8.6.2", | ||
| "build": "https://pixijs.download/v8.6.2/pixi.min.js", | ||
| "docs": "https://pixijs.download/v8.6.2/docs/index.html", | ||
| "npm": "8.6.2", | ||
| "prerelease": false, | ||
| "latest": true | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -15,3 +15,9 @@ | |
| } | ||
| } | ||
| } | ||
|
|
||
| .embedded { | ||
| width: 700px; | ||
| margin: 0 auto; | ||
| height: 400px; | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.