https://pixijs.com/assets/js/2841f289.a1db11d9.js

1"use strict";(self.webpackChunkpixi_docusaurus=self.webpackChunkpixi_docusaurus||[]).push([["6426"],{21158(e,s,t){t.r(s),t.d(s,{assets:()=>l,contentTitle:()=>r,default:()=>p,frontMatter:()=>o,metadata:()=>i,toc:()=>c});var i=t(92515),n=t(74848),a=t(28453);let o={title:"AssetPack 1.0.0 Release!",description:"AssetPack 1.0.0 is here! \u{1F389}",slug:"assetpack-1.0.0",authors:"zyie",tags:["PixiJS","AssetPack","Web","Games","Spine","Optimisation","Asset Management"],hide_table_of_contents:!0,keywords:["PixiJS","Spine","JavaScript","game development","web development","asset management","loading"]},r,l={authorsImageUrls:[void 0]},c=[{value:"What is AssetPack?",id:"what-is-assetpack",level:2},{value:"Key Features of AssetPack",id:"key-features-of-assetpack",level:3},{value:"Caching & CI",id:"caching--ci",level:4},{value:"Performance",id:"performance",level:4},{value:"Watch Mode",id:"watch-mode",level:4},{value:"Tag System",id:"tag-system",level:4},{value:"How to use AssetPack",id:"how-to-use-assetpack",level:2},{value:"Installation",id:"installation",level:3},{value:"Setup",id:"setup",level:3},{value:"Open Source Games",id:"open-source-games",level:3},{value:"Conclusion",id:"conclusion",level:2},{value:"\u{1F310} Stay Connected",id:"-stay-connected",level:2}];function d(e){let s={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",h4:"h4",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,a.R)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(s.p,{children:["Today we are very excited to announce ",(0,n.jsx)(s.a,{href:"https://pixijs.io/assetpack",children:"AssetPack"})," 1.0, an asset management and optimization tool for web developers."]}),"\n",(0,n.jsx)(s.p,{children:"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."}),"\n",(0,n.jsx)(s.h2,{id:"what-is-assetpack",children:"What is AssetPack?"}),"\n",(0,n.jsx)(s.p,{children:"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."}),"\n",(0,n.jsx)("div",{style:{display:"flex",justifyContent:"center",alignItems:"center",paddingBottom:"24px"},children:(0,n.jsx)("img",{src:"/images/blog/assetpack-screenshot.png",alt:"AssetPack screenshot"})}),"\n",(0,n.jsx)(s.p,{children:"AssetPack comes out of the box with the following plugins:"}),"\n",(0,n.jsxs)(s.ul,{children:["\n",(0,n.jsxs)(s.li,{children:[(0,n.jsx)(s.strong,{children:"Cache Busting"}),": Automatically appends a unique hash to asset URLs to ensure that clients always load the latest version of the asset."]}),"\n",(0,n.jsxs)(s.li,{children:[(0,n.jsx)(s.strong,{children:"Compression"}),": Compresses images using sharp, allowing for the creation of webp/avif images and compressing png/jpg to reduce file sizes."]}),"\n",(0,n.jsxs)(s.li,{children:[(0,n.jsx)(s.strong,{children:"TexturePacker"}),": Automatically generates spritesheets from images."]}),"\n",(0,n.jsxs)(s.li,{children:[(0,n.jsx)(s.strong,{children:"Mipmap"}),": Generates mipmaps for textures to improve rendering performance e.g. 2x, 1x, 0.5x, etc."]}),"\n",(0,n.jsxs)(s.li,{children:[(0,n.jsx)(s.strong,{children:"Spine"}),": Optimizes Spine animations by creating mipmaps for ",(0,n.jsx)(s.code,{children:".atlas"})," files."]}),"\n",(0,n.jsxs)(s.li,{children:[(0,n.jsx)(s.strong,{children:"Audio/FFmpeg"}),": Converts audio files to the desired format and bitrate using FFmpeg."]}),"\n",(0,n.jsxs)(s.li,{children:[(0,n.jsx)(s.strong,{children:"JSON"}),": Minifies JSON files to reduce their size."]}),"\n",(0,n.jsxs)(s.li,{children:[(0,n.jsx)(s.strong,{children:"Webfont"}),": Converts all fonts files to WOFF2 format, and plugins for SDF and MSDF font generation"]}),"\n",(0,n.jsxs)(s.li,{children:[(0,n.jsx)(s.strong,{children:"Manifest"}),": Generates a manifest file containing all asset URLs for easy loading. This can be used with PixiJS's ",(0,n.jsx)(s.code,{children:"Assets"})," loader"]}),"\n"]}),"\n",(0,n.jsx)(s.p,{children:"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."}),"\n",(0,n.jsx)(s.h3,{id:"key-features-of-assetpack",children:"Key Features of AssetPack"}),"\n",(0,n.jsx)(s.h4,{id:"caching--ci",children:"Caching & CI"}),"\n",(0,n.jsx)(s.p,{children:"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."}),"\n",(0,n.jsxs)(s.p,{children:["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 ",(0,n.jsx)(s.a,{href:"https://pixijs.io/assetpack/docs/guide/getting-started/github-action/",children:"here"})," for more information."]}),"\n",(0,n.jsx)(s.h4,{id:"performance",children:"Performance"}),"\n",(0,n.jsx)(s.p,{children:"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 efficie

1ntly."}),"\n",(0,n.jsx)(s.h4,{id:"watch-mode",children:"Watch Mode"}),"\n",(0,n.jsx)(s.p,{children:"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."}),"\n",(0,n.jsx)(s.h4,{id:"tag-system",children:"Tag System"}),"\n",(0,n.jsxs)(s.p,{children:["AssetPack's tag-powered system makes asset management intuitive and flexible. By simply adding tags to folders or files (e.g., ",(0,n.jsx)(s.code,{children:"{tps}"})," to create a sprite sheet), you can easily apply specific processing rules. This feature simplifies complex asset workflows and enhances customization."]}),"\n",(0,n.jsx)("div",{style:{display:"flex",justifyContent:"center",alignItems:"center",paddingBottom:"24px"},children:(0,n.jsx)("img",{src:"/images/blog/assetpack-screenshot-tags.png",alt:"AssetPack screenshot"})}),"\n",(0,n.jsx)(s.h2,{id:"how-to-use-assetpack",children:"How to use AssetPack"}),"\n",(0,n.jsx)(s.h3,{id:"installation",children:"Installation"}),"\n",(0,n.jsxs)(s.p,{children:["To install AssetPack, you need to install the ",(0,n.jsx)(s.code,{children:"@assetpack/core"})," package."]}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{className:"language-bash",children:"npm install --save-dev @assetpack/core\n"})}),"\n",(0,n.jsx)(s.admonition,{title:"COMPATIBILITY NOTE",type:"info",children:(0,n.jsxs)(s.p,{children:["AssetPack requires ",(0,n.jsx)(s.a,{href:"https://nodejs.org/en/",children:"Node.js"})," version 20+, please upgrade if your package manager warns about it."]})}),"\n",(0,n.jsx)(s.h3,{id:"setup",children:"Setup"}),"\n",(0,n.jsx)(s.p,{children:"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."}),"\n",(0,n.jsxs)(s.p,{children:["First create a ",(0,n.jsx)(s.code,{children:".assetpack.js"})," file in the root of your project. This file should export an object with the following properties:"]}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{className:"language-js",children:"// .assetpack.js\nimport { pixiPipes } from '@assetpack/core';\n\nexport default {\n  entry: './raw-assets',\n  output: './public/assets',\n  pipes: [\n    /* If you are using AssetPack with PixiJS, you can use the `pixiPipes` function\n     * to add a pre-configured set of plugins, with an opinionated\n     * set of defaults for PixiJS.\n     */\n    ...pixiPipes(),\n  ],\n};\n"})}),"\n",(0,n.jsxs)(s.p,{children:["To see the full list of configuration options, see the ",(0,n.jsx)(s.a,{href:"https://pixijs.io/assetpack/docs/guide/configuration/",children:"API Reference"})," page."]}),"\n",(0,n.jsx)(s.p,{children:"Then to run AssetPack, you can use the CLI, run programmatically, or use a build tool like Vite."}),"\n",(0,n.jsxs)(s.ul,{children:["\n",(0,n.jsx)(s.li,{children:(0,n.jsx)(s.a,{href:"https://pixijs.io/assetpack/docs/guide/getting-started/cli",children:"CLI"})}),"\n",(0,n.jsx)(s.li,{children:(0,n.jsx)(s.a,{href:"https://pixijs.io/assetpack/docs/guide/getting-started/programmatic",children:"Programmatic"})}),"\n",(0,n.jsx)(s.li,{children:(0,n.jsx)(s.a,{href:"https://pixijs.io/assetpack/docs/guide/getting-started/vite",children:"Vite"})}),"\n"]}),"\n",(0,n.jsxs)(s.p,{children:["AssetPack has a number of built-in plugins for you to use, to see the full list of plugins, see the ",(0,n.jsx)(s.a,{href:"https://pixijs.io/assetpack/docs/guide/pipes/overview",children:"Plugins"})," page."]}),"\n",(0,n.jsx)(s.h3,{id:"open-source-games",children:"Open Source Games"}),"\n",(0,n.jsxs)(s.p,{children:["AssetPack is already in use in our open source games repo. Check out the ",(0,n.jsx)(s.a,{href:"https://pixijs.io/assetpack/examples",children:"games"})," leveraging AssetPack for asset management. These examples showcase the power and flexibility of AssetPack in real-world scenarios."]}),"\n",(0,n.jsx)(s.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,n.jsx)(s.p,{children:"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 y

1our projects, and we look forward to seeing what you create with it!"}),"\n",(0,n.jsx)(s.p,{children:"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."}),"\n",(0,n.jsx)(s.h2,{id:"-stay-connected",children:"\u{1F310} Stay Connected"}),"\n",(0,n.jsxs)(s.p,{children:["Follow ",(0,n.jsx)(s.a,{href:"https://twitter.com/_Zyie_",children:"Zyie"})," and ",(0,n.jsx)(s.a,{href:"https://bsky.app/profile/pixijs.com",children:"PixiJS"})," on social media for the latest updates. Join our vibrant community on ",(0,n.jsx)(s.a,{href:"https://discord.gg/nrnDP9wtyX",children:"Discord"})," for real-time discussions and support."]})]})}function p(e={}){let{wrapper:s}={...(0,a.R)(),...e.components};return s?(0,n.jsx)(s,{...e,children:(0,n.jsx)(d,{...e})}):d(e)}},28453(e,s,t){t.d(s,{R:()=>o,x:()=>r});var i=t(96540);let n={},a=i.createContext(n);function o(e){let s=i.useContext(a);return i.useMemo(function(){return"function"==typeof e?e(s):{...s,...e}},[s,e])}function r(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:o(e.components),i.createElement(a.Provider,{value:s},e.children)}},92515(e){e.exports=JSON.parse('{"permalink":"/blog/assetpack-1.0.0","source":"@site/blog/2024-07-18-assetpack-1.0.0.md","title":"AssetPack 1.0.0 Release!","description":"AssetPack 1.0.0 is here! \u{1F389}","date":"2024-07-18T00:00:00.000Z","tags":[{"inline":true,"label":"PixiJS","permalink":"/blog/tags/pixi-js"},{"inline":true,"label":"AssetPack","permalink":"/blog/tags/asset-pack"},{"inline":true,"label":"Web","permalink":"/blog/tags/web"},{"inline":true,"label":"Games","permalink":"/blog/tags/games"},{"inline":true,"label":"Spine","permalink":"/blog/tags/spine"},{"inline":true,"label":"Optimisation","permalink":"/blog/tags/optimisation"},{"inline":true,"label":"Asset Management","permalink":"/blog/tags/asset-management"}],"readingTime":5.1,"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":"AssetPack 1.0.0 Release!","description":"AssetPack 1.0.0 is here! \u{1F389}","slug":"assetpack-1.0.0","authors":"zyie","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"]},"unlisted":false,"prevItem":{"title":"ParticleContainer - The New Speed Demon in PixiJS v8","permalink":"/blog/particlecontainer-v8"},"nextItem":{"title":"PixiJS Joins the Spine 4.2 Physics Revolution! \u{1F680}","permalink":"/blog/pixi-js-hearts-spine"}}')}}]);