From 0543746f47ad00eefa08cf857617cc9965e5cfb4 Mon Sep 17 00:00:00 2001 From: Zyie Date: Tue, 3 Sep 2024 08:56:59 +0000 Subject: [PATCH] Deploy website - based on 972ce84a46485d09836e9a5e50fc5e8e84f772f8 --- 404.html | 2 +- assets/js/{7bd36867.6c3de056.js => 7bd36867.d36eee0a.js} | 2 +- .../js/{runtime~main.6d7533d9.js => runtime~main.04e7a1d5.js} | 2 +- docs/guide/configuration/index.html | 2 +- docs/guide/getting-started/cli/index.html | 2 +- docs/guide/getting-started/github-action/index.html | 2 +- docs/guide/getting-started/installation/index.html | 2 +- docs/guide/getting-started/pixi/index.html | 2 +- docs/guide/getting-started/programmatic/index.html | 2 +- docs/guide/getting-started/vite/index.html | 2 +- docs/guide/pipes/cache-buster/index.html | 2 +- docs/guide/pipes/compress/index.html | 2 +- docs/guide/pipes/ffmpeg/index.html | 2 +- docs/guide/pipes/json/index.html | 2 +- docs/guide/pipes/manifest/index.html | 2 +- docs/guide/pipes/mipmap/index.html | 2 +- docs/guide/pipes/overview/index.html | 2 +- docs/guide/pipes/spine/index.html | 2 +- docs/guide/pipes/texture-packer/index.html | 4 ++-- docs/guide/pipes/webfont/index.html | 2 +- index.html | 2 +- 21 files changed, 22 insertions(+), 22 deletions(-) rename assets/js/{7bd36867.6c3de056.js => 7bd36867.d36eee0a.js} (73%) rename assets/js/{runtime~main.6d7533d9.js => runtime~main.04e7a1d5.js} (98%) diff --git a/404.html b/404.html index 838591c..c575b27 100644 --- a/404.html +++ b/404.html @@ -4,7 +4,7 @@ Page Not Found | PixiJS AssetPack - + diff --git a/assets/js/7bd36867.6c3de056.js b/assets/js/7bd36867.d36eee0a.js similarity index 73% rename from assets/js/7bd36867.6c3de056.js rename to assets/js/7bd36867.d36eee0a.js index 639575d..45b1c40 100644 --- a/assets/js/7bd36867.6c3de056.js +++ b/assets/js/7bd36867.d36eee0a.js @@ -1 +1 @@ -"use strict";(self.webpackChunk_assetpack_docs=self.webpackChunk_assetpack_docs||[]).push([[996],{5393:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>c,contentTitle:()=>l,default:()=>x,frontMatter:()=>d,metadata:()=>o,toc:()=>a});var r=s(1085),i=s(1184),n=s(4944);const d={sidebar_position:7},l="TexturePacker",o={id:"guide/pipes/texture-packer",title:"TexturePacker",description:"AssetPack plugin for generating texture atlases using sharp.",source:"@site/docs/guide/pipes/texture-packer.mdx",sourceDirName:"guide/pipes",slug:"/guide/pipes/texture-packer",permalink:"/assetpack/docs/guide/pipes/texture-packer",draft:!1,unlisted:!1,editUrl:"https://github.com/pixijs/assetpack/tree/main/packages/docs/docs/guide/pipes/texture-packer.mdx",tags:[],version:"current",sidebarPosition:7,frontMatter:{sidebar_position:7},sidebar:"guide",previous:{title:"Spine",permalink:"/assetpack/docs/guide/pipes/spine"},next:{title:"Webfonts",permalink:"/assetpack/docs/guide/pipes/webfont"}},c={},a=[{value:"Example",id:"example",level:2},{value:"API",id:"api",level:2},{value:"Tags",id:"tags",level:2},{value:"Texture Packer Compress",id:"texture-packer-compress",level:2},{value:"Example",id:"example-1",level:3},{value:"API",id:"api-1",level:3},{value:"Tags",id:"tags-1",level:3}];function h(e){const t={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",hr:"hr",p:"p",pre:"pre",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h1,{id:"texturepacker",children:"TexturePacker"}),"\n",(0,r.jsx)(t.p,{children:"AssetPack plugin for generating texture atlases using sharp."}),"\n",(0,r.jsxs)(t.p,{children:["If you are using the ",(0,r.jsx)(t.a,{href:"/docs/guide/pipes/mipmap",children:"mipmap"})," plugin you will want to pass the same options to the ",(0,r.jsx)(t.code,{children:"texturePacker"})," plugin as you are to the ",(0,r.jsx)(t.code,{children:"mipmap"})," plugin."]}),"\n",(0,r.jsx)(t.admonition,{type:"info",children:(0,r.jsx)(t.p,{children:"This plugin is designed to work with the spritesheet format PixiJS uses.\nIf you are using a different library you may need to convert the output."})}),"\n",(0,r.jsx)(t.h2,{id:"example",children:"Example"}),"\n",(0,r.jsx)(n.qH,{image:"texture-packer/tps-mip"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:'import { texturePacker } from "@assetpack/core/texture-packer";\n\nexport default {\n ...\n pipes: [\n ...\n texturePacker({\n texturePacker: {\n padding: 2,\n nameStyle: "relative",\n removeFileExtension: false,\n },\n resolutionOptions: {\n template: "@%%x",\n resolutions: { default: 1, low: 0.5 },\n fixedResolution: "default",\n maximumTextureSize: 4096,\n },\n })\n ]\n};\n'})}),"\n",(0,r.jsx)(t.h2,{id:"api",children:"API"}),"\n",(0,r.jsxs)(t.table,{children:[(0,r.jsx)(t.thead,{children:(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.th,{children:"Option"}),(0,r.jsx)(t.th,{children:"Type"}),(0,r.jsx)(t.th,{children:"Description"})]})}),(0,r.jsxs)(t.tbody,{children:[(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"texturePacker"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"object"})}),(0,r.jsx)(t.td,{children:"Options for generating texture atlases."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"texturePacker.textureFormat"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"png|jpg"})}),(0,r.jsxs)(t.td,{children:["The format of the texture atlas file.",(0,r.jsx)("br",{}),"Defaults to ",(0,r.jsx)(t.code,{children:"png"}),"."]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"texturePacker.padding"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"number"})}),(0,r.jsxs)(t.td,{children:["The padding between sprites in the texture atlas.",(0,r.jsx)("br",{}),"Defaults to ",(0,r.jsx)(t.code,{children:"2"}),"."]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"texturePacker.fixedSize"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"boolean"})}),(0,r.jsxs)(t.td,{children:["Whether the texture atlas should be a fixed size.",(0,r.jsx)("br",{}),"Defaults to ",(0,r.jsx)(t.code,{children:"false"}),"."]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"texturePacker.powerOfTwo"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"boolean"})}),(0,r.jsxs)(t.td,{children:["Whether the texture atlas should be a power of two.",(0,r.jsx)("br",{}),"Defaults to ",(0,r.jsx)(t.code,{children:"false"}),"."]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"texturePacker.width"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"number"})}),(0,r.jsxs)(t.td,{children:["The width of the texture atlas.",(0,r.jsx)("br",{}),"Defaults to ",(0,r.jsx)(t.code,{children:"1024"}),"."]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"texturePacker.height"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"number"})}),(0,r.jsxs)(t.td,{children:["The height of the texture atlas.",(0,r.jsx)("br",{}),"Defaults to ",(0,r.jsx)(t.code,{children:"1024"}),"."]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"texturePacker.allowTrim"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"boolean"})}),(0,r.jsxs)(t.td,{children:["Whether the texture atlas should allow trimming.",(0,r.jsx)("br",{}),"Defaults to ",(0,r.jsx)(t.code,{children:"true"}),"."]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"texturePacker.allowRotation"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"boolean"})}),(0,r.jsxs)(t.td,{children:["Whether the texture atlas should allow rotation.",(0,r.jsx)("br",{}),"Defaults to ",(0,r.jsx)(t.code,{children:"true"}),"."]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"texturePacker.alphaThreshold"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"number"})}),(0,r.jsxs)(t.td,{children:["The alpha threshold for the texture atlas.",(0,r.jsx)("br",{}),"Defaults to ",(0,r.jsx)(t.code,{children:"0.1"}),"."]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"texturePacker.scale"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"number"})}),(0,r.jsxs)(t.td,{children:["The scale of the texture atlas.",(0,r.jsx)("br",{}),"Defaults to ",(0,r.jsx)(t.code,{children:"1"}),"."]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"texturePacker.resolution"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"number"})}),(0,r.jsxs)(t.td,{children:["The resolution of the texture atlas.",(0,r.jsx)("br",{}),"Defaults to ",(0,r.jsx)(t.code,{children:"1"}),"."]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"texturePacker.nameStyle"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"short|relative"})}),(0,r.jsxs)(t.td,{children:["The name style of the texture atlas.",(0,r.jsx)("br",{}),"Defaults to ",(0,r.jsx)(t.code,{children:"relative"}),"."]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"texturePacker.removeFileExtension"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"boolean"})}),(0,r.jsxs)(t.td,{children:["Whether the file extension should be removed.",(0,r.jsx)("br",{}),"Defaults to ",(0,r.jsx)(t.code,{children:"false"}),"."]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{}),(0,r.jsx)(t.td,{}),(0,r.jsx)(t.td,{})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"resolutionOptions"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"object"})}),(0,r.jsx)(t.td,{children:"Options for generating resolutions."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"resolutionOptions.template"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"string"})}),(0,r.jsxs)(t.td,{children:["A template for denoting the resolution of the images.",(0,r.jsx)("br",{}),"Defaults to ",(0,r.jsx)(t.code,{children:"@%%x"}),"."]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"resolutionOptions.resolutions"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"object"})}),(0,r.jsxs)(t.td,{children:["An object containing the resolutions that the images will be resized to.",(0,r.jsx)("br",{}),"Defaults to ",(0,r.jsx)(t.code,{children:"{ default: 1, low: 0.5 }"}),"."]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"resolutionOptions.fixedResolution"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"string"})}),(0,r.jsxs)(t.td,{children:["A resolution used if the fix tag is applied. Resolution must match one found in resolutions.",(0,r.jsx)("br",{}),"Defaults to ",(0,r.jsx)(t.code,{children:"default"}),"."]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"resolutionOptions.maximumTextureSize"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"number"})}),(0,r.jsxs)(t.td,{children:["The maximum size a sprite sheet can be before its split out.",(0,r.jsx)("br",{}),"Defaults to ",(0,r.jsx)(t.code,{children:"4096"}),"."]})]})]})]}),"\n",(0,r.jsx)(t.h2,{id:"tags",children:"Tags"}),"\n",(0,r.jsxs)(t.table,{children:[(0,r.jsx)(t.thead,{children:(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.th,{children:"Tag"}),(0,r.jsx)(t.th,{children:"Folder/File"}),(0,r.jsx)(t.th,{children:"Description"})]})}),(0,r.jsxs)(t.tbody,{children:[(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"tps"})}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"folder"})}),(0,r.jsx)(t.td,{children:"If present the folder will be processed by Texture Packer."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"jpg"})}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"folder"})}),(0,r.jsx)(t.td,{children:"If present the spritesheet will be saved as a jpg."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"fix"})}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"folder"})}),(0,r.jsx)(t.td,{children:"If present the spritesheet will be fixed to a specific resolution."})]})]})]}),"\n",(0,r.jsx)(t.hr,{}),"\n",(0,r.jsx)(t.h2,{id:"texture-packer-compress",children:"Texture Packer Compress"}),"\n",(0,r.jsxs)(t.p,{children:["To compress the texture atlases you can use the ",(0,r.jsx)(t.code,{children:"texturePackerCompress"})," plugin. This plugin uses the Sharp library to compress images into different formats, such as JPEG, PNG, WebP, and AVIF. This helps reduce file sizes while maintaining image quality, ensuring faster load times and better performance."]}),"\n",(0,r.jsx)(t.h3,{id:"example-1",children:"Example"}),"\n",(0,r.jsx)(n.qH,{image:"texture-packer/tps-compress"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:'import { compress } from "@assetpack/core/image";\nimport { compress } from "@assetpack/core/texture-packer";\n\n// these options are the default values, all options shown here are optional\nconst options = {\n jpg: {},\n png: { quality: 90 },\n webp: { quality: 80, alphaQuality: 80, },\n avif: false,\n};\n\nexport default {\n ...\n pipes: [\n ...\n compress(options),\n texturePackerCompress(options),\n ]\n};\n'})}),"\n",(0,r.jsx)(t.h3,{id:"api-1",children:"API"}),"\n",(0,r.jsxs)(t.p,{children:["See ",(0,r.jsx)(t.a,{href:"/docs/guide/pipes/compress",children:"Compression API"})," for more information."]}),"\n",(0,r.jsxs)(t.p,{children:["You will want to make sure you are passing the same options to the ",(0,r.jsx)(t.code,{children:"compress"})," plugin as you are to the ",(0,r.jsx)(t.code,{children:"texturePackerCompress"})," plugin."]}),"\n",(0,r.jsx)(t.h3,{id:"tags-1",children:"Tags"}),"\n",(0,r.jsxs)(t.table,{children:[(0,r.jsx)(t.thead,{children:(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.th,{children:"Tag"}),(0,r.jsx)(t.th,{children:"Folder/File"}),(0,r.jsx)(t.th,{children:"Description"})]})}),(0,r.jsx)(t.tbody,{children:(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"nc"})}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"folder"})}),(0,r.jsx)(t.td,{children:"If present the atlas will not be compressed."})]})})]})]})}function x(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(h,{...e})}):h(e)}},4944:(e,t,s)=>{s.d(t,{qH:()=>l});var r=s(4041),i=s(1085);const n=e=>{let{toggleImage:t,showImage1:s}=e;return(0,i.jsx)("div",{style:{width:"100%"},children:(0,i.jsxs)("div",{style:{display:"flex",justifyContent:"center",alignItems:"center",width:"100%",height:"100%",padding:"10px"},children:[(0,i.jsx)("p",{style:{margin:"0 10px"},children:s?"Original":"Processed"}),(0,i.jsx)("div",{onClick:t,style:{position:"relative",width:"60px",height:"30px",backgroundColor:"hsl(225 6% 13%)",borderRadius:"15px",cursor:"pointer",transition:"background-color 0.3s",border:"2px solid #696969"},children:(0,i.jsx)("div",{style:{position:"absolute",top:"3px",left:s?"5px":"32px",width:"20px",height:"20px",backgroundColor:s?"var(--ifm-color-secondary)":"var(--ifm-color-primary)",borderRadius:"50%",transition:"left 0.3s"}})})]})})},d=e=>{let{image:t,primaryBoxShadow:s}=e;return(0,i.jsx)("div",{style:{width:"100%",height:"100%",margin:"0 auto",display:"flex",justifyContent:"center",alignItems:"center",position:"absolute"},children:(0,i.jsx)("img",{src:t,alt:"Input Image",style:{maxWidth:"100%",maxHeight:"100%",objectFit:"contain",borderRadius:"12px",boxShadow:s?"0 0 20px hsla(340, 70%, 44%, 0.5)":"0 0 20px hsla(192, 84%, 40%, 0.5)"}})})},l=e=>{let{image:t,height:s}=e;const[l,o]=(0,r.useState)(!0);s??=350;const c=`/assetpack/screenshots/${t}.png`,a=`/assetpack/screenshots/${t}-pro.png`;return(0,i.jsxs)("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",width:"100%",paddingBottom:"24px"},children:[(0,i.jsx)(n,{toggleImage:()=>{o(!l)},showImage1:l}),(0,i.jsxs)("div",{style:{position:"relative",pointerEvents:"none",width:"100%",height:s},children:[(0,i.jsx)("div",{style:{transition:"opacity 0.5s ease-in-out",opacity:l?1:0,position:"absolute",width:"100%",height:"100%"},children:(0,i.jsx)(d,{image:c,primaryBoxShadow:!1})}),(0,i.jsx)("div",{style:{transition:"opacity 0.5s ease-in-out",opacity:l?0:1,position:"absolute",width:"100%",height:"100%"},children:(0,i.jsx)(d,{image:a,primaryBoxShadow:!0})})]})]})}},1184:(e,t,s)=>{s.d(t,{R:()=>d,x:()=>l});var r=s(4041);const i={},n=r.createContext(i);function d(e){const t=r.useContext(n);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:d(e.components),r.createElement(n.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunk_assetpack_docs=self.webpackChunk_assetpack_docs||[]).push([[996],{5393:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>c,contentTitle:()=>l,default:()=>x,frontMatter:()=>d,metadata:()=>o,toc:()=>a});var r=s(1085),i=s(1184),n=s(4944);const d={sidebar_position:7},l="TexturePacker",o={id:"guide/pipes/texture-packer",title:"TexturePacker",description:"AssetPack plugin for generating texture atlases using sharp.",source:"@site/docs/guide/pipes/texture-packer.mdx",sourceDirName:"guide/pipes",slug:"/guide/pipes/texture-packer",permalink:"/assetpack/docs/guide/pipes/texture-packer",draft:!1,unlisted:!1,editUrl:"https://github.com/pixijs/assetpack/tree/main/packages/docs/docs/guide/pipes/texture-packer.mdx",tags:[],version:"current",sidebarPosition:7,frontMatter:{sidebar_position:7},sidebar:"guide",previous:{title:"Spine",permalink:"/assetpack/docs/guide/pipes/spine"},next:{title:"Webfonts",permalink:"/assetpack/docs/guide/pipes/webfont"}},c={},a=[{value:"Example",id:"example",level:2},{value:"API",id:"api",level:2},{value:"Tags",id:"tags",level:2},{value:"Texture Packer Compress",id:"texture-packer-compress",level:2},{value:"Example",id:"example-1",level:3},{value:"API",id:"api-1",level:3},{value:"Tags",id:"tags-1",level:3}];function h(e){const t={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",hr:"hr",p:"p",pre:"pre",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h1,{id:"texturepacker",children:"TexturePacker"}),"\n",(0,r.jsx)(t.p,{children:"AssetPack plugin for generating texture atlases using sharp."}),"\n",(0,r.jsxs)(t.p,{children:["If you are using the ",(0,r.jsx)(t.a,{href:"/docs/guide/pipes/mipmap",children:"mipmap"})," plugin you will want to pass the same options to the ",(0,r.jsx)(t.code,{children:"texturePacker"})," plugin as you are to the ",(0,r.jsx)(t.code,{children:"mipmap"})," plugin."]}),"\n",(0,r.jsx)(t.admonition,{type:"info",children:(0,r.jsx)(t.p,{children:"This plugin is designed to work with the spritesheet format PixiJS uses.\nIf you are using a different library you may need to convert the output."})}),"\n",(0,r.jsx)(t.h2,{id:"example",children:"Example"}),"\n",(0,r.jsx)(n.qH,{image:"texture-packer/tps-mip"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:'import { texturePacker } from "@assetpack/core/texture-packer";\n\nexport default {\n ...\n pipes: [\n ...\n texturePacker({\n texturePacker: {\n padding: 2,\n nameStyle: "relative",\n removeFileExtension: false,\n },\n resolutionOptions: {\n template: "@%%x",\n resolutions: { default: 1, low: 0.5 },\n fixedResolution: "default",\n maximumTextureSize: 4096,\n },\n })\n ]\n};\n'})}),"\n",(0,r.jsx)(t.h2,{id:"api",children:"API"}),"\n",(0,r.jsxs)(t.table,{children:[(0,r.jsx)(t.thead,{children:(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.th,{children:"Option"}),(0,r.jsx)(t.th,{children:"Type"}),(0,r.jsx)(t.th,{children:"Description"})]})}),(0,r.jsxs)(t.tbody,{children:[(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"texturePacker"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"object"})}),(0,r.jsx)(t.td,{children:"Options for generating texture atlases."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"texturePacker.textureFormat"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"png|jpg"})}),(0,r.jsxs)(t.td,{children:["The format of the texture atlas file.",(0,r.jsx)("br",{}),"Defaults to ",(0,r.jsx)(t.code,{children:"png"}),"."]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"texturePacker.padding"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"number"})}),(0,r.jsxs)(t.td,{children:["The padding between sprites in the texture atlas.",(0,r.jsx)("br",{}),"Defaults to ",(0,r.jsx)(t.code,{children:"2"}),"."]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"texturePacker.fixedSize"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"boolean"})}),(0,r.jsxs)(t.td,{children:["Whether the texture atlas should be a fixed size.",(0,r.jsx)("br",{}),"Defaults to ",(0,r.jsx)(t.code,{children:"false"}),"."]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"texturePacker.powerOfTwo"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"boolean"})}),(0,r.jsxs)(t.td,{children:["Whether the texture atlas should be a power of two.",(0,r.jsx)("br",{}),"Defaults to ",(0,r.jsx)(t.code,{children:"false"}),"."]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"texturePacker.width"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"number"})}),(0,r.jsxs)(t.td,{children:["The width of the texture atlas.",(0,r.jsx)("br",{}),"Defaults to ",(0,r.jsx)(t.code,{children:"1024"}),"."]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"texturePacker.height"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"number"})}),(0,r.jsxs)(t.td,{children:["The height of the texture atlas.",(0,r.jsx)("br",{}),"Defaults to ",(0,r.jsx)(t.code,{children:"1024"}),"."]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"texturePacker.allowTrim"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"boolean"})}),(0,r.jsxs)(t.td,{children:["Whether the texture atlas should allow trimming.",(0,r.jsx)("br",{}),"Defaults to ",(0,r.jsx)(t.code,{children:"true"}),"."]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"texturePacker.allowRotation"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"boolean"})}),(0,r.jsxs)(t.td,{children:["Whether the texture atlas should allow rotation.",(0,r.jsx)("br",{}),"Defaults to ",(0,r.jsx)(t.code,{children:"true"}),"."]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"texturePacker.alphaThreshold"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"number"})}),(0,r.jsxs)(t.td,{children:["The alpha threshold for the texture atlas.",(0,r.jsx)("br",{}),"Defaults to ",(0,r.jsx)(t.code,{children:"0.1"}),"."]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"texturePacker.scale"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"number"})}),(0,r.jsxs)(t.td,{children:["The scale of the texture atlas.",(0,r.jsx)("br",{}),"Defaults to ",(0,r.jsx)(t.code,{children:"1"}),"."]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"texturePacker.resolution"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"number"})}),(0,r.jsxs)(t.td,{children:["The resolution of the texture atlas.",(0,r.jsx)("br",{}),"Defaults to ",(0,r.jsx)(t.code,{children:"1"}),"."]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"texturePacker.nameStyle"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"short|relative"})}),(0,r.jsxs)(t.td,{children:["The name style of the texture atlas.",(0,r.jsx)("br",{}),"Defaults to ",(0,r.jsx)(t.code,{children:"relative"}),"."]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"texturePacker.removeFileExtension"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"boolean"})}),(0,r.jsxs)(t.td,{children:["Whether the file extension should be removed.",(0,r.jsx)("br",{}),"Defaults to ",(0,r.jsx)(t.code,{children:"false"}),"."]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{}),(0,r.jsx)(t.td,{}),(0,r.jsx)(t.td,{})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"resolutionOptions"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"object"})}),(0,r.jsx)(t.td,{children:"Options for generating resolutions."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"resolutionOptions.template"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"string"})}),(0,r.jsxs)(t.td,{children:["A template for denoting the resolution of the images.",(0,r.jsx)("br",{}),"Defaults to ",(0,r.jsx)(t.code,{children:"@%%x"}),"."]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"resolutionOptions.resolutions"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"object"})}),(0,r.jsxs)(t.td,{children:["An object containing the resolutions that the images will be resized to.",(0,r.jsx)("br",{}),"Defaults to ",(0,r.jsx)(t.code,{children:"{ default: 1, low: 0.5 }"}),"."]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"resolutionOptions.fixedResolution"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"string"})}),(0,r.jsxs)(t.td,{children:["A resolution used if the fix tag is applied. Resolution must match one found in resolutions.",(0,r.jsx)("br",{}),"Defaults to ",(0,r.jsx)(t.code,{children:"default"}),"."]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:"resolutionOptions.maximumTextureSize"}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"number"})}),(0,r.jsxs)(t.td,{children:["The maximum size a sprite sheet can be before its split out.",(0,r.jsx)("br",{}),"Defaults to ",(0,r.jsx)(t.code,{children:"4096"}),"."]})]})]})]}),"\n",(0,r.jsx)(t.h2,{id:"tags",children:"Tags"}),"\n",(0,r.jsxs)(t.table,{children:[(0,r.jsx)(t.thead,{children:(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.th,{children:"Tag"}),(0,r.jsx)(t.th,{children:"Folder/File"}),(0,r.jsx)(t.th,{children:"Description"})]})}),(0,r.jsxs)(t.tbody,{children:[(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"tps"})}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"folder"})}),(0,r.jsx)(t.td,{children:"If present the folder will be processed by Texture Packer."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"jpg"})}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"folder"})}),(0,r.jsx)(t.td,{children:"If present the spritesheet will be saved as a jpg."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"fix"})}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"folder"})}),(0,r.jsx)(t.td,{children:"If present the spritesheet will be fixed to a specific resolution."})]})]})]}),"\n",(0,r.jsx)(t.hr,{}),"\n",(0,r.jsx)(t.h2,{id:"texture-packer-compress",children:"Texture Packer Compress"}),"\n",(0,r.jsxs)(t.p,{children:["To compress the texture atlases you can use the ",(0,r.jsx)(t.code,{children:"texturePackerCompress"})," plugin. This plugin uses the Sharp library to compress images into different formats, such as JPEG, PNG, WebP, and AVIF. This helps reduce file sizes while maintaining image quality, ensuring faster load times and better performance."]}),"\n",(0,r.jsx)(t.h3,{id:"example-1",children:"Example"}),"\n",(0,r.jsx)(n.qH,{image:"texture-packer/tps-compress"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:'import { compress } from "@assetpack/core/image";\nimport { texturePackerCompress } from "@assetpack/core/texture-packer";\n\n// these options are the default values, all options shown here are optional\nconst options = {\n jpg: {},\n png: { quality: 90 },\n webp: { quality: 80, alphaQuality: 80, },\n avif: false,\n};\n\nexport default {\n ...\n pipes: [\n ...\n compress(options),\n texturePackerCompress(options),\n ]\n};\n'})}),"\n",(0,r.jsx)(t.h3,{id:"api-1",children:"API"}),"\n",(0,r.jsxs)(t.p,{children:["See ",(0,r.jsx)(t.a,{href:"/docs/guide/pipes/compress",children:"Compression API"})," for more information."]}),"\n",(0,r.jsxs)(t.p,{children:["You will want to make sure you are passing the same options to the ",(0,r.jsx)(t.code,{children:"compress"})," plugin as you are to the ",(0,r.jsx)(t.code,{children:"texturePackerCompress"})," plugin."]}),"\n",(0,r.jsx)(t.h3,{id:"tags-1",children:"Tags"}),"\n",(0,r.jsxs)(t.table,{children:[(0,r.jsx)(t.thead,{children:(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.th,{children:"Tag"}),(0,r.jsx)(t.th,{children:"Folder/File"}),(0,r.jsx)(t.th,{children:"Description"})]})}),(0,r.jsx)(t.tbody,{children:(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"nc"})}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"folder"})}),(0,r.jsx)(t.td,{children:"If present the atlas will not be compressed."})]})})]})]})}function x(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(h,{...e})}):h(e)}},4944:(e,t,s)=>{s.d(t,{qH:()=>l});var r=s(4041),i=s(1085);const n=e=>{let{toggleImage:t,showImage1:s}=e;return(0,i.jsx)("div",{style:{width:"100%"},children:(0,i.jsxs)("div",{style:{display:"flex",justifyContent:"center",alignItems:"center",width:"100%",height:"100%",padding:"10px"},children:[(0,i.jsx)("p",{style:{margin:"0 10px"},children:s?"Original":"Processed"}),(0,i.jsx)("div",{onClick:t,style:{position:"relative",width:"60px",height:"30px",backgroundColor:"hsl(225 6% 13%)",borderRadius:"15px",cursor:"pointer",transition:"background-color 0.3s",border:"2px solid #696969"},children:(0,i.jsx)("div",{style:{position:"absolute",top:"3px",left:s?"5px":"32px",width:"20px",height:"20px",backgroundColor:s?"var(--ifm-color-secondary)":"var(--ifm-color-primary)",borderRadius:"50%",transition:"left 0.3s"}})})]})})},d=e=>{let{image:t,primaryBoxShadow:s}=e;return(0,i.jsx)("div",{style:{width:"100%",height:"100%",margin:"0 auto",display:"flex",justifyContent:"center",alignItems:"center",position:"absolute"},children:(0,i.jsx)("img",{src:t,alt:"Input Image",style:{maxWidth:"100%",maxHeight:"100%",objectFit:"contain",borderRadius:"12px",boxShadow:s?"0 0 20px hsla(340, 70%, 44%, 0.5)":"0 0 20px hsla(192, 84%, 40%, 0.5)"}})})},l=e=>{let{image:t,height:s}=e;const[l,o]=(0,r.useState)(!0);s??=350;const c=`/assetpack/screenshots/${t}.png`,a=`/assetpack/screenshots/${t}-pro.png`;return(0,i.jsxs)("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",width:"100%",paddingBottom:"24px"},children:[(0,i.jsx)(n,{toggleImage:()=>{o(!l)},showImage1:l}),(0,i.jsxs)("div",{style:{position:"relative",pointerEvents:"none",width:"100%",height:s},children:[(0,i.jsx)("div",{style:{transition:"opacity 0.5s ease-in-out",opacity:l?1:0,position:"absolute",width:"100%",height:"100%"},children:(0,i.jsx)(d,{image:c,primaryBoxShadow:!1})}),(0,i.jsx)("div",{style:{transition:"opacity 0.5s ease-in-out",opacity:l?0:1,position:"absolute",width:"100%",height:"100%"},children:(0,i.jsx)(d,{image:a,primaryBoxShadow:!0})})]})]})}},1184:(e,t,s)=>{s.d(t,{R:()=>d,x:()=>l});var r=s(4041);const i={},n=r.createContext(i);function d(e){const t=r.useContext(n);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:d(e.components),r.createElement(n.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/runtime~main.6d7533d9.js b/assets/js/runtime~main.04e7a1d5.js similarity index 98% rename from assets/js/runtime~main.6d7533d9.js rename to assets/js/runtime~main.04e7a1d5.js index 600b6bd..8b0ae4b 100644 --- a/assets/js/runtime~main.6d7533d9.js +++ b/assets/js/runtime~main.04e7a1d5.js @@ -1 +1 @@ -(()=>{"use strict";var e,a,t,r,o,c={},f={};function d(e){var a=f[e];if(void 0!==a)return a.exports;var t=f[e]={id:e,loaded:!1,exports:{}};return c[e].call(t.exports,t,t.exports,d),t.loaded=!0,t.exports}d.m=c,d.c=f,e=[],d.O=(a,t,r,o)=>{if(!t){var c=1/0;for(b=0;b=o)&&Object.keys(d.O).every((e=>d.O[e](t[n])))?t.splice(n--,1):(f=!1,o0&&e[b-1][2]>o;b--)e[b]=e[b-1];e[b]=[t,r,o]},d.n=e=>{var a=e&&e.__esModule?()=>e.default:()=>e;return d.d(a,{a:a}),a},t=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,d.t=function(e,r){if(1&r&&(e=this(e)),8&r)return e;if("object"==typeof e&&e){if(4&r&&e.__esModule)return e;if(16&r&&"function"==typeof e.then)return e}var o=Object.create(null);d.r(o);var c={};a=a||[null,t({}),t([]),t(t)];for(var f=2&r&&e;"object"==typeof f&&!~a.indexOf(f);f=t(f))Object.getOwnPropertyNames(f).forEach((a=>c[a]=()=>e[a]));return c.default=()=>e,d.d(o,c),o},d.d=(e,a)=>{for(var t in a)d.o(a,t)&&!d.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:a[t]})},d.f={},d.e=e=>Promise.all(Object.keys(d.f).reduce(((a,t)=>(d.f[t](e,a),a)),[])),d.u=e=>"assets/js/"+({32:"20afc2dc",48:"a94703ab",52:"630ae0ca",57:"fda6100f",66:"7cda97f4",98:"a7bd4aaa",102:"4adb629a",209:"d1b06a5a",235:"a7456010",265:"266fa2e8",305:"70ec74b8",325:"b74b7fc7",401:"17896441",434:"834155da",467:"f48ae691",493:"8a2dc6a5",583:"1df93b7f",647:"5e95c892",656:"db621ceb",680:"f8149d38",718:"89fdc11e",723:"389bb716",742:"aba21aa0",791:"d2935333",996:"7bd36867"}[e]||e)+"."+{32:"7fc1dd3d",48:"3258a9f4",52:"171f8d46",57:"78e4e7fa",66:"9bb8ba65",98:"01747834",102:"0fad12cb",104:"951359f6",209:"3cc6f8be",235:"0ad34696",265:"e7354db6",305:"7dad4e33",325:"487a2f30",401:"fd7f1573",434:"82080812",467:"3966cef5",493:"132a5a2a",583:"6f34c7d3",647:"e8071e30",656:"eda47758",680:"4327dd45",718:"10465cd6",723:"be20734f",742:"611c27b4",791:"4a5cbbca",996:"6c3de056"}[e]+".js",d.miniCssF=e=>{},d.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),d.o=(e,a)=>Object.prototype.hasOwnProperty.call(e,a),r={},o="@assetpack/docs:",d.l=(e,a,t,c)=>{if(r[e])r[e].push(a);else{var f,n;if(void 0!==t)for(var i=document.getElementsByTagName("script"),b=0;b{f.onerror=f.onload=null,clearTimeout(l);var o=r[e];if(delete r[e],f.parentNode&&f.parentNode.removeChild(f),o&&o.forEach((e=>e(t))),a)return a(t)},l=setTimeout(u.bind(null,void 0,{type:"timeout",target:f}),12e4);f.onerror=u.bind(null,f.onerror),f.onload=u.bind(null,f.onload),n&&document.head.appendChild(f)}},d.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},d.p="/assetpack/",d.gca=function(e){return e={17896441:"401","20afc2dc":"32",a94703ab:"48","630ae0ca":"52",fda6100f:"57","7cda97f4":"66",a7bd4aaa:"98","4adb629a":"102",d1b06a5a:"209",a7456010:"235","266fa2e8":"265","70ec74b8":"305",b74b7fc7:"325","834155da":"434",f48ae691:"467","8a2dc6a5":"493","1df93b7f":"583","5e95c892":"647",db621ceb:"656",f8149d38:"680","89fdc11e":"718","389bb716":"723",aba21aa0:"742",d2935333:"791","7bd36867":"996"}[e]||e,d.p+d.u(e)},(()=>{var e={354:0,869:0};d.f.j=(a,t)=>{var r=d.o(e,a)?e[a]:void 0;if(0!==r)if(r)t.push(r[2]);else if(/^(354|869)$/.test(a))e[a]=0;else{var o=new Promise(((t,o)=>r=e[a]=[t,o]));t.push(r[2]=o);var c=d.p+d.u(a),f=new Error;d.l(c,(t=>{if(d.o(e,a)&&(0!==(r=e[a])&&(e[a]=void 0),r)){var o=t&&("load"===t.type?"missing":t.type),c=t&&t.target&&t.target.src;f.message="Loading chunk "+a+" failed.\n("+o+": "+c+")",f.name="ChunkLoadError",f.type=o,f.request=c,r[1](f)}}),"chunk-"+a,a)}},d.O.j=a=>0===e[a];var a=(a,t)=>{var r,o,c=t[0],f=t[1],n=t[2],i=0;if(c.some((a=>0!==e[a]))){for(r in f)d.o(f,r)&&(d.m[r]=f[r]);if(n)var b=n(d)}for(a&&a(t);i{"use strict";var e,a,t,r,o,c={},f={};function d(e){var a=f[e];if(void 0!==a)return a.exports;var t=f[e]={id:e,loaded:!1,exports:{}};return c[e].call(t.exports,t,t.exports,d),t.loaded=!0,t.exports}d.m=c,d.c=f,e=[],d.O=(a,t,r,o)=>{if(!t){var c=1/0;for(b=0;b=o)&&Object.keys(d.O).every((e=>d.O[e](t[n])))?t.splice(n--,1):(f=!1,o0&&e[b-1][2]>o;b--)e[b]=e[b-1];e[b]=[t,r,o]},d.n=e=>{var a=e&&e.__esModule?()=>e.default:()=>e;return d.d(a,{a:a}),a},t=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,d.t=function(e,r){if(1&r&&(e=this(e)),8&r)return e;if("object"==typeof e&&e){if(4&r&&e.__esModule)return e;if(16&r&&"function"==typeof e.then)return e}var o=Object.create(null);d.r(o);var c={};a=a||[null,t({}),t([]),t(t)];for(var f=2&r&&e;"object"==typeof f&&!~a.indexOf(f);f=t(f))Object.getOwnPropertyNames(f).forEach((a=>c[a]=()=>e[a]));return c.default=()=>e,d.d(o,c),o},d.d=(e,a)=>{for(var t in a)d.o(a,t)&&!d.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:a[t]})},d.f={},d.e=e=>Promise.all(Object.keys(d.f).reduce(((a,t)=>(d.f[t](e,a),a)),[])),d.u=e=>"assets/js/"+({32:"20afc2dc",48:"a94703ab",52:"630ae0ca",57:"fda6100f",66:"7cda97f4",98:"a7bd4aaa",102:"4adb629a",209:"d1b06a5a",235:"a7456010",265:"266fa2e8",305:"70ec74b8",325:"b74b7fc7",401:"17896441",434:"834155da",467:"f48ae691",493:"8a2dc6a5",583:"1df93b7f",647:"5e95c892",656:"db621ceb",680:"f8149d38",718:"89fdc11e",723:"389bb716",742:"aba21aa0",791:"d2935333",996:"7bd36867"}[e]||e)+"."+{32:"7fc1dd3d",48:"3258a9f4",52:"171f8d46",57:"78e4e7fa",66:"9bb8ba65",98:"01747834",102:"0fad12cb",104:"951359f6",209:"3cc6f8be",235:"0ad34696",265:"e7354db6",305:"7dad4e33",325:"487a2f30",401:"fd7f1573",434:"82080812",467:"3966cef5",493:"132a5a2a",583:"6f34c7d3",647:"e8071e30",656:"eda47758",680:"4327dd45",718:"10465cd6",723:"be20734f",742:"611c27b4",791:"4a5cbbca",996:"d36eee0a"}[e]+".js",d.miniCssF=e=>{},d.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),d.o=(e,a)=>Object.prototype.hasOwnProperty.call(e,a),r={},o="@assetpack/docs:",d.l=(e,a,t,c)=>{if(r[e])r[e].push(a);else{var f,n;if(void 0!==t)for(var i=document.getElementsByTagName("script"),b=0;b{f.onerror=f.onload=null,clearTimeout(l);var o=r[e];if(delete r[e],f.parentNode&&f.parentNode.removeChild(f),o&&o.forEach((e=>e(t))),a)return a(t)},l=setTimeout(u.bind(null,void 0,{type:"timeout",target:f}),12e4);f.onerror=u.bind(null,f.onerror),f.onload=u.bind(null,f.onload),n&&document.head.appendChild(f)}},d.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},d.p="/assetpack/",d.gca=function(e){return e={17896441:"401","20afc2dc":"32",a94703ab:"48","630ae0ca":"52",fda6100f:"57","7cda97f4":"66",a7bd4aaa:"98","4adb629a":"102",d1b06a5a:"209",a7456010:"235","266fa2e8":"265","70ec74b8":"305",b74b7fc7:"325","834155da":"434",f48ae691:"467","8a2dc6a5":"493","1df93b7f":"583","5e95c892":"647",db621ceb:"656",f8149d38:"680","89fdc11e":"718","389bb716":"723",aba21aa0:"742",d2935333:"791","7bd36867":"996"}[e]||e,d.p+d.u(e)},(()=>{var e={354:0,869:0};d.f.j=(a,t)=>{var r=d.o(e,a)?e[a]:void 0;if(0!==r)if(r)t.push(r[2]);else if(/^(354|869)$/.test(a))e[a]=0;else{var o=new Promise(((t,o)=>r=e[a]=[t,o]));t.push(r[2]=o);var c=d.p+d.u(a),f=new Error;d.l(c,(t=>{if(d.o(e,a)&&(0!==(r=e[a])&&(e[a]=void 0),r)){var o=t&&("load"===t.type?"missing":t.type),c=t&&t.target&&t.target.src;f.message="Loading chunk "+a+" failed.\n("+o+": "+c+")",f.name="ChunkLoadError",f.type=o,f.request=c,r[1](f)}}),"chunk-"+a,a)}},d.O.j=a=>0===e[a];var a=(a,t)=>{var r,o,c=t[0],f=t[1],n=t[2],i=0;if(c.some((a=>0!==e[a]))){for(r in f)d.o(f,r)&&(d.m[r]=f[r]);if(n)var b=n(d)}for(a&&a(t);i API Reference | PixiJS AssetPack - + diff --git a/docs/guide/getting-started/cli/index.html b/docs/guide/getting-started/cli/index.html index 290c203..2bee2f5 100644 --- a/docs/guide/getting-started/cli/index.html +++ b/docs/guide/getting-started/cli/index.html @@ -4,7 +4,7 @@ CLI | PixiJS AssetPack - + diff --git a/docs/guide/getting-started/github-action/index.html b/docs/guide/getting-started/github-action/index.html index c42a117..304bf5b 100644 --- a/docs/guide/getting-started/github-action/index.html +++ b/docs/guide/getting-started/github-action/index.html @@ -4,7 +4,7 @@ Github Action | PixiJS AssetPack - + diff --git a/docs/guide/getting-started/installation/index.html b/docs/guide/getting-started/installation/index.html index 4ee3d43..68d2ced 100644 --- a/docs/guide/getting-started/installation/index.html +++ b/docs/guide/getting-started/installation/index.html @@ -4,7 +4,7 @@ Installation | PixiJS AssetPack - + diff --git a/docs/guide/getting-started/pixi/index.html b/docs/guide/getting-started/pixi/index.html index 4d04b85..70265b7 100644 --- a/docs/guide/getting-started/pixi/index.html +++ b/docs/guide/getting-started/pixi/index.html @@ -4,7 +4,7 @@ Pixi | PixiJS AssetPack - + diff --git a/docs/guide/getting-started/programmatic/index.html b/docs/guide/getting-started/programmatic/index.html index b035cfb..fcc5006 100644 --- a/docs/guide/getting-started/programmatic/index.html +++ b/docs/guide/getting-started/programmatic/index.html @@ -4,7 +4,7 @@ Programmatic | PixiJS AssetPack - + diff --git a/docs/guide/getting-started/vite/index.html b/docs/guide/getting-started/vite/index.html index f0f8167..d5b57cf 100644 --- a/docs/guide/getting-started/vite/index.html +++ b/docs/guide/getting-started/vite/index.html @@ -4,7 +4,7 @@ Vite | PixiJS AssetPack - + diff --git a/docs/guide/pipes/cache-buster/index.html b/docs/guide/pipes/cache-buster/index.html index 8f485bf..408652d 100644 --- a/docs/guide/pipes/cache-buster/index.html +++ b/docs/guide/pipes/cache-buster/index.html @@ -4,7 +4,7 @@ Cache Buster | PixiJS AssetPack - + diff --git a/docs/guide/pipes/compress/index.html b/docs/guide/pipes/compress/index.html index e00babe..065d7b0 100644 --- a/docs/guide/pipes/compress/index.html +++ b/docs/guide/pipes/compress/index.html @@ -4,7 +4,7 @@ Compression | PixiJS AssetPack - + diff --git a/docs/guide/pipes/ffmpeg/index.html b/docs/guide/pipes/ffmpeg/index.html index f867da1..476d698 100644 --- a/docs/guide/pipes/ffmpeg/index.html +++ b/docs/guide/pipes/ffmpeg/index.html @@ -4,7 +4,7 @@ Audio & FFmpeg | PixiJS AssetPack - + diff --git a/docs/guide/pipes/json/index.html b/docs/guide/pipes/json/index.html index f258d1c..6514abe 100644 --- a/docs/guide/pipes/json/index.html +++ b/docs/guide/pipes/json/index.html @@ -4,7 +4,7 @@ JSON | PixiJS AssetPack - + diff --git a/docs/guide/pipes/manifest/index.html b/docs/guide/pipes/manifest/index.html index d1afa6e..b9a7b5c 100644 --- a/docs/guide/pipes/manifest/index.html +++ b/docs/guide/pipes/manifest/index.html @@ -4,7 +4,7 @@ Manifest | PixiJS AssetPack - + diff --git a/docs/guide/pipes/mipmap/index.html b/docs/guide/pipes/mipmap/index.html index 272b85c..ba39764 100644 --- a/docs/guide/pipes/mipmap/index.html +++ b/docs/guide/pipes/mipmap/index.html @@ -4,7 +4,7 @@ Mipmaps | PixiJS AssetPack - + diff --git a/docs/guide/pipes/overview/index.html b/docs/guide/pipes/overview/index.html index 62e4b9f..f65fb3e 100644 --- a/docs/guide/pipes/overview/index.html +++ b/docs/guide/pipes/overview/index.html @@ -4,7 +4,7 @@ Overview | PixiJS AssetPack - + diff --git a/docs/guide/pipes/spine/index.html b/docs/guide/pipes/spine/index.html index f9e1c90..3b13da7 100644 --- a/docs/guide/pipes/spine/index.html +++ b/docs/guide/pipes/spine/index.html @@ -4,7 +4,7 @@ Spine | PixiJS AssetPack - + diff --git a/docs/guide/pipes/texture-packer/index.html b/docs/guide/pipes/texture-packer/index.html index b3dd796..cb9ca18 100644 --- a/docs/guide/pipes/texture-packer/index.html +++ b/docs/guide/pipes/texture-packer/index.html @@ -4,7 +4,7 @@ TexturePacker | PixiJS AssetPack - + @@ -25,7 +25,7 @@

Text

To compress the texture atlases you can use the texturePackerCompress plugin. This plugin uses the Sharp library to compress images into different formats, such as JPEG, PNG, WebP, and AVIF. This helps reduce file sizes while maintaining image quality, ensuring faster load times and better performance.

Example​

Original

Input Image
Input Image
-
import { compress } from "@assetpack/core/image";
import { compress } from "@assetpack/core/texture-packer";

// these options are the default values, all options shown here are optional
const options = {
  jpg: {},
  png: { quality: 90 },
  webp: { quality: 80, alphaQuality: 80, },
  avif: false,
};

export default {
  ...
  pipes: [
    ...
    compress(options),
    texturePackerCompress(options),
  ]
};
+
import { compress } from "@assetpack/core/image";
import { texturePackerCompress } from "@assetpack/core/texture-packer";

// these options are the default values, all options shown here are optional
const options = {
  jpg: {},
  png: { quality: 90 },
  webp: { quality: 80, alphaQuality: 80, },
  avif: false,
};

export default {
  ...
  pipes: [
    ...
    compress(options),
    texturePackerCompress(options),
  ]
};

API​

See Compression API for more information.

You will want to make sure you are passing the same options to the compress plugin as you are to the texturePackerCompress plugin.

diff --git a/docs/guide/pipes/webfont/index.html b/docs/guide/pipes/webfont/index.html index a369d3e..c90db2b 100644 --- a/docs/guide/pipes/webfont/index.html +++ b/docs/guide/pipes/webfont/index.html @@ -4,7 +4,7 @@ Webfonts | PixiJS AssetPack - + diff --git a/index.html b/index.html index 5b96247..40aa3b8 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ PixiJS AssetPack | PixiJS AssetPack - +