diff --git a/package.json b/package.json index c263ae6..056375f 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,7 @@ }, "lint-staged": { "*.{ts,js,mjs}": [ - "eslint --cache --fix --max-warnings 0" + "eslint --fix --max-warnings 0" ] }, "devDependencies": { diff --git a/packages/assetpack/src/manifest/pixiManifest.ts b/packages/assetpack/src/manifest/pixiManifest.ts index 18047db..93298de 100644 --- a/packages/assetpack/src/manifest/pixiManifest.ts +++ b/packages/assetpack/src/manifest/pixiManifest.ts @@ -137,8 +137,6 @@ function collectAssets( if (nonIgnored.length === 0) return; - if (nonIgnored.length === 0) return; - bundleAssets.push({ alias: getShortNames(stripTags(path.relative(entryPath, asset.path)), options), src: nonIgnored @@ -172,5 +170,11 @@ function getShortNames(name: string, options: PixiManifestOptions) createShortcuts && trimExtensions && allNames.push(path.trimExt(path.basename(name))); /* eslint-enable @typescript-eslint/no-unused-expressions */ + // remove duplicates + const uniqueNames = new Set(allNames); + + allNames.length = 0; + uniqueNames.forEach((name) => allNames.push(name)); + return allNames; } diff --git a/packages/assetpack/src/pixi/index.ts b/packages/assetpack/src/pixi/index.ts index 826af19..4fc9e4f 100644 --- a/packages/assetpack/src/pixi/index.ts +++ b/packages/assetpack/src/pixi/index.ts @@ -81,15 +81,15 @@ export function pixiPipes(config: PixiAssetPack) mipmap({ resolutions: apConfig.resolutions as Record, }), + spineAtlasMipmap({ + resolutions: apConfig.resolutions as Record, + }), ] as AssetPipe[]; if (apConfig.compression !== false) { pipes.push( compress(apConfig.compression), - spineAtlasMipmap({ - resolutions: apConfig.resolutions as Record, - }), spineAtlasCompress(apConfig.compression), texturePackerCompress(apConfig.compression), ); diff --git a/packages/assetpack/src/texture-packer/packer/createJsons.ts b/packages/assetpack/src/texture-packer/packer/createJsons.ts index 3c4f83f..8c8144c 100644 --- a/packages/assetpack/src/texture-packer/packer/createJsons.ts +++ b/packages/assetpack/src/texture-packer/packer/createJsons.ts @@ -61,17 +61,6 @@ export function createJsons( }; } - const name = createName(options.textureName, i, bins.length !== 1, options.resolution, options.textureFormat); - - let multiPack: string[] | null = null; - - if (bins.length > 1 && i === 0) - { - const binsWithoutFirst = bins.slice(1); - - multiPack = binsWithoutFirst.map((_, i) => name.replace('-0', `-${i + 1}`).replace('.png', `.json`)); - } - json.meta = { app: 'http://github.com/pixijs/assetpack', version: '1.0', diff --git a/packages/docs/docs/guide/configuration.md b/packages/docs/docs/guide/configuration.md index 32a35fc..52ece5f 100644 --- a/packages/docs/docs/guide/configuration.md +++ b/packages/docs/docs/guide/configuration.md @@ -1,18 +1,80 @@ --- -sidebar_position: 1 +sidebar_position: 0 --- -# Configuration +# API Reference AssetPack uses a config file to define what assets you want to optimise and how you want to optimise them. The config file is a JavaScript file that exports an object with the following properties: -- `entry`: The directory where your raw assets are located. -- `output`: The directory where you want your optimised assets to be outputted to. -- `plugins`: An object containing the plugins you want to use. The key is the name of the plugin, and the value is the plugin itself. -- `ignore`: an optional array of ignore patterns. Any file path matching the patterns will not be processed by assetpack -- `cache`: an optional boolean to enable or disable caching. Defaults to true. -- `logLevel`: an optional string to set the log level. Defaults to 'info'. -- `files`: an optional object to override the settings and tags of any assets. See [Config Overrides](#config-overrides) for more details. +### entry + +| Type | Default | Required | +| -------- | ------- | -------- | +| `string` | | Yes | + +The directory where your raw assets are located. + +### output + +| Type | Default | Required | +| -------- | ------- | -------- | +| `string` | | Yes | + +The directory where you want your optimised assets to be outputted to. + +### ignore + +| Type | Default | Required | +| ---------- | ------- | -------- | +| `string[]` | | No | + +An optional array of ignore patterns. Any file path matching the patterns will not be processed by assetpack. + +### cache + +| Type | Default | Required | +| --------- | ------- | -------- | +| `boolean` | `true` | No | + +An optional boolean to enable or disable caching. + +### cacheLocation + +| Type | Default | Required | +| -------- | -------------- | -------- | +| `string` | `'.assetpack'` | No | + +An optional string to set the location of the cache. + +### logLevel + +| Type | Default | Required | +| -------- | -------- | -------- | +| `string` | `'info'` | No | + +An optional string to set the log level. + +### pipes + +| Type | Default | Required | +| -------- | ------- | -------- | +| `Pipe[]` | | No | + +An array of pipes to use. For examples of pipes, see [Pipes](/docs/guide/pipes/overview#concepts). + +### assetSettings + +| Type | Default | Required | +| ---------------- | ------- | -------- | +| `AssetSetting[]` | | No | + +| Property | Type | Default | Required | +| -------- | -------- | ------- | -------- | +| files | `string` | | Yes | +| settings | `object` | | No | +| metaData | `object` | | No | + +An optional array of asset settings. This allows you to set specific settings for individual assets. #### Example @@ -20,8 +82,28 @@ AssetPack uses a config file to define what assets you want to optimise and how // .assetpack.js export default { - entry: "./raw-assets", - output: "./public", - plugins: {}, + entry: './raw-assets', + output: './public', + ignore: ['**/*.html'], + cache: true, + cacheLocation: '.assetpack', + logLevel: 'info', + pipes: [ + // Pipes go here + ], + assetSettings: [ + { + files: ['**/*.png'], + settings: { + compress: { + jpg: true, + png: true, + // all png files will be compressed to avif format but not webp + webp: false, + avif: true, + }, + }, + }, + ], }; ``` diff --git a/packages/docs/docs/guide/faq.md b/packages/docs/docs/guide/faq.md deleted file mode 100644 index 5f72e6f..0000000 --- a/packages/docs/docs/guide/faq.md +++ /dev/null @@ -1,64 +0,0 @@ ---- -sidebar_position: 3 ---- - -# F.A.Q - -## The PixiJS Devtools don't show up - -Here are some troubleshooting steps to help you if you don't the PixiJS devtools in your browser: - -* Check if the extension is installed and enabled: - - Open the Chrome extensions page by typing `chrome://extensions` in the address bar. Make sure the PixiJS Devtools extension is installed and enabled. - If it's not installed, please read the [installation guide](/docs/guide/installation). - -* Try closing the devtools pane, refreshing the page and opening the devtools pane again**. -* Try restarting the browser or the computer. -* If you have multiple pages with the PixiJS Devtools open, try closing all of them and opening a new one. -* If you have multiple versions of the devtools installed, it's recommended to disable/remove the others. n -* Look for errors in the browser Console. - - If you see any errors, please report them in the [GitHub issues](https://github.com/pixijs/devtools/issues). - ---- - -## Scene isn't updating in the Devtools - -If the scene isn't updating in the devtools, try the following steps: - -* Close the devtools pane. -* Refresh the page. -* Open the devtools pane again. - -If the scene still isn't updating, try looking for errors in the console: - -* Open the browser console, you can do this by pressing `ESC` -* Look for errors in the devtools Console. - You can open the devtools console by right-clicking on the devtools pane and selecting "Inspect". - - -
- How to open the devtools console - Right click on the devtools pane and select Inspect -
- - - -If you see any errors, please report them in the [GitHub issues](https://github.com/pixijs/devtools/issues). - ---- - -## Property is not displayed - -If a property is not displayed in the devtools, it might be because the property is not set on the object. - -For example, the `filterArea` property is not displayed in the devtool until it's set on the object in your code. -To get the property to display, you can set it on the object like this: - -```js -const sprite = new Sprite(texture); -sprite.filterArea = new Rectangle(0, 0, 100, 100); -``` - -If you think a property should be displayed, please report it in the [GitHub issues](https://github.com/pixijs/devtools/issues). diff --git a/packages/docs/docs/guide/getting-started/cli.md b/packages/docs/docs/guide/getting-started/cli.md index 893f025..6e02af0 100644 --- a/packages/docs/docs/guide/getting-started/cli.md +++ b/packages/docs/docs/guide/getting-started/cli.md @@ -26,5 +26,5 @@ This will run AssetPack before your build command, and will optimise your assets ## Configuration -- `-c`: The location of the config file to use. Defaults to `.assetpack.js`. +- `-c`: The location of the config file to use. Defaults to `.assetpack.js`. To see a full list of configuration options, see the [API Reference](/docs/guide/configuration). - `-w`: Watch the assets directory for changes and re-run AssetPack when changes are detected. diff --git a/packages/docs/docs/guide/getting-started/github-action.md b/packages/docs/docs/guide/getting-started/github-action.md new file mode 100644 index 0000000..cbdbe69 --- /dev/null +++ b/packages/docs/docs/guide/getting-started/github-action.md @@ -0,0 +1,68 @@ +--- +sidebar_position: 4 +title: Github Action +--- + +# Github Action + +:::info +You must enable `cache` in your assetpack configuration to use this feature. + +See [API Reference](/docs/guide/configuration#cache) for more information. +::: + +AssetPack can be used with GitHub Actions to automate the asset optimisation process and cache the result, improving build times. This guide will show you how to set up a GitHub Action to run AssetPack on your repository. + +## Setup + +To set up a GitHub Action for AssetPack, you need to create a new workflow file in your repository. Create a new file in the `.github/workflows` directory with the following content: + +:::note +This example assumes that your raw assets are located in a directory called `raw-assets` and that you have a `build` script in your `package.json` file that runs AssetPack. + +You may need to adjust the paths and commands to match your project structure. +::: + +```yaml +name: AssetPack + +on: [push] + +jobs: + build: + runs-on: ubuntu-latest + + steps: + - uses: actions/checkout@v4 + + - name: Setup Node.js + uses: actions/setup-node@v4 + with: + node-version: '20' + + - name: Install dependencies + run: npm ci + + # Cache assets! + - name: Generate hash from file names + id: hash-names + run: echo "NAMES_HASH=$(find ./raw-assets -type f | sort | md5sum | cut -d' ' -f1)" >> $GITHUB_ENV + + - name: Cache .assetpack directory + id: cache-directory + uses: actions/cache@v4 + with: + path: | + .assetpack + raw-assets + key: ${{ runner.os }}-cache-23-04-24-${{ hashFiles('**/package-lock.json') }}-${{ hashFiles('raw-assets/**/*') }}-${{ env.NAMES_HASH }} + restore-keys: | + ${{ runner.os }}-cache-23-04-24-${{ hashFiles('**/package-lock.json') }} + # End Cache assets! + + # Now do your build + - name: Build + run: npm run build +``` + + diff --git a/packages/docs/docs/guide/getting-started/pixi.md b/packages/docs/docs/guide/getting-started/pixi.md index 8878048..d72dc21 100644 --- a/packages/docs/docs/guide/getting-started/pixi.md +++ b/packages/docs/docs/guide/getting-started/pixi.md @@ -3,28 +3,46 @@ sidebar_position: 1 title: Pixi --- -# CLI - -The AssetPack CLI is a command line interface that allows you to run AssetPack from the command line. - -## Usage - -To use the AssetPack CLI, you need call the `assetpack` command with the following options: - -```json -{ - "scripts": { - "prebuild": "assetpack", - "build": "your-build-command", - "watch:assetpack": "assetpack -w", - "watch": "npm run watch:assetpack & your-watch-command" - } -} +# PixiJS Setup + +While AssetPack can be used with any rendering engine, we have provided an opinionated setup for PixiJS. This setup is not required, but it can help you get started quickly. + +This setup also abstracts away some of the more complex features of AssetPack, to ensure that all options are passed to the plugins correctly, and plugins are set up in the correct order. + +## API + +| Option | Type | Description | +| ------------- | ---------------------------- | ------------------------------------------------------------------------------------------------ | +| cacheBust | `boolean` | Whether to append a cache-busting query string to the asset URLs. Defaults to `true` | +| resolutions | `Record` | A map of resolution names to scaling factors. Defaults to `{ default: 1, low: 0.5 }` | +| compression | `CompressOptions` \| `false` | Options for compressing the output files. Defaults to `{ jpg: true, png: true, webp: true }` | +| texturePacker | `TexturePackerOptions` | Options for generating texture atlases. Defaults to `{{ texturePacker: { nameStyle: 'short' }}}` | +| audio | `Partial` | Options for compressing audio files. Defaults to `{}` | +| manifest | `PixiManifestOptions` | Options for generating a PixiJS manifest file. Defaults to `{ createShortcuts: true }` | + +- [CompressOptions](/docs/guide/pipes/compress#api) +- [TexturePackerOptions](/docs/guide/pipes/texture-packer#api) +- [PixiManifestOptions](/docs/guide/pipes/manifest#api) +- [Resolutions](/docs/guide/pipes/mipmap#api) + +## Example + +Please refer to the [API Reference](/docs/guide/configuration) for the full list of options. + +```js +import { pixiPipes } from "assetpack"; + +export default { + ... + pipes: [ + ...pixiPipes({ + cacheBust: true, + resolutions: { default: 1, low: 0.5 }, + compression: { jpg: true, png: true, webp: true }, + texturePacker: { nameStyle: "short" }, + audio: {}, + manifest: { createShortcuts: true }, + }), + ], +}; ``` - -This will run AssetPack before your build command, and will optimise your assets before they are built. - -## Configuration - -- `-c`: The location of the config file to use. Defaults to `.assetpack.js`. -- `-w`: Watch the assets directory for changes and re-run AssetPack when changes are detected. diff --git a/packages/docs/docs/guide/getting-started/programmatic.md b/packages/docs/docs/guide/getting-started/programmatic.md index 8cdfb7f..a3c6b94 100644 --- a/packages/docs/docs/guide/getting-started/programmatic.md +++ b/packages/docs/docs/guide/getting-started/programmatic.md @@ -7,6 +7,8 @@ title: Programmatic AssetPack can be run programmatically, allowing you to run AssetPack from your own scripts. +To see a full list of configuration options, see the [API Reference](/docs/guide/configuration). + ## Usage To use AssetPack programmatically, you need to import the `assetpack` function from the `assetpack` package, and call it with the following options: diff --git a/packages/docs/docs/guide/getting-started/vite.md b/packages/docs/docs/guide/getting-started/vite.md index 60c495f..ca550bd 100644 --- a/packages/docs/docs/guide/getting-started/vite.md +++ b/packages/docs/docs/guide/getting-started/vite.md @@ -7,6 +7,8 @@ title: Vite Below is an example of how to use AssetPack with Vite. +To see a full list of configuration options, see the [API Reference](/docs/guide/configuration). + ```ts // vite.config.mts import { defineConfig, type Plugin, type ResolvedConfig } from 'vite'; diff --git a/packages/docs/docs/guide/pipes/_category_.yml b/packages/docs/docs/guide/pipes/_category_.yml index b74091a..cdf596e 100644 --- a/packages/docs/docs/guide/pipes/_category_.yml +++ b/packages/docs/docs/guide/pipes/_category_.yml @@ -1,3 +1,3 @@ -label: Optimisations +label: Plugins position: 2 collapsed: false diff --git a/packages/docs/docs/guide/pipes/cache-buster.mdx b/packages/docs/docs/guide/pipes/cache-buster.mdx index eb0fd34..e4037b9 100644 --- a/packages/docs/docs/guide/pipes/cache-buster.mdx +++ b/packages/docs/docs/guide/pipes/cache-buster.mdx @@ -1,5 +1,5 @@ --- -sidebar_position: 2 +sidebar_position: 1 --- import { ImageToggle } from '@site/src/components/ImageToggle'; diff --git a/packages/docs/docs/guide/pipes/compress.mdx b/packages/docs/docs/guide/pipes/compress.mdx new file mode 100644 index 0000000..33a45b5 --- /dev/null +++ b/packages/docs/docs/guide/pipes/compress.mdx @@ -0,0 +1,48 @@ +--- +sidebar_position: 4 +--- +import { ImageToggle } from '@site/src/components/ImageToggle'; + +# Compression + +The compress 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. + +## API + +| Option | Type | Description | +| ------ | ----------------- | -------------------------------------------------------------------------------------------------------------------- | +| jpg | `object \| false` | Any settings supported by [sharp jpeg](https://sharp.pixelplumbing.com/api-output#jpeg). | +| png | `object \| false` | Any settings supported by [sharp png](https://sharp.pixelplumbing.com/api-output#png). | +| webp | `object \| false` | Any settings supported by [sharp webp](https://sharp.pixelplumbing.com/api-output#webp). | +| avif | `object \| false` | Any settings supported by [sharp avif](https://sharp.pixelplumbing.com/api-output#avif).
Defaults to `false`. | + +## Example + + + +```js +import { compress } from "assetpack"; + +export default { + ... + pipes: [ + ... + // these options are the default values, all options shown here are optional + compress({ + jpg: {}, + png: { quality: 90 }, + webp: { quality: 80, alphaQuality: 80, }, + avif: false, + }), + ] +}; +``` + +## Tags + +| Tag | Folder/File | Description | +| ---- | ----------- | ----------------------------------------------- | +| `nc` | `both` | If present the image(s) will not be compressed. | + +### Example + diff --git a/packages/docs/docs/guide/pipes/ffmpeg.mdx b/packages/docs/docs/guide/pipes/ffmpeg.mdx index b6d7ace..23ed3e1 100644 --- a/packages/docs/docs/guide/pipes/ffmpeg.mdx +++ b/packages/docs/docs/guide/pipes/ffmpeg.mdx @@ -34,13 +34,13 @@ The `ffmpeg` plugin exposes the full FFmpeg API, allowing for the conversion of ## API -The plugin takes an input array of file extensions and produces an output based on the options. - -- `inputs`: An array of file extensions to be processed. -- `outputs`: An array of objects containing the output formats and options for each format. - - `formats`: An array of file extensions to be output. - - `recompress`: A boolean value indicating whether the input file should be compressed if the output format is the same as the input format. - - `options`: An object containing the FFmpeg options for the output file. +| Option | Type | Description | +| ------------------ | ----------- | ---------------------------------------------------------------------------------------------------------------------------- | +| inputs | `string[]` | An array of file extensions to be processed. | +| outputs | `object[]` | An array of objects containing the output formats and options for each format. | +| outputs.formats | `string[]` | An array of file extensions to be output. | +| outputs.recompress | `boolean` | A boolean value indicating whether the input file should be compressed if the output format is the same as the input format. | +| outputs.options | `object` | An object containing the FFmpeg options for the output file. | ### Example diff --git a/packages/docs/docs/guide/pipes/image.md b/packages/docs/docs/guide/pipes/image.md deleted file mode 100644 index 9b38dfb..0000000 --- a/packages/docs/docs/guide/pipes/image.md +++ /dev/null @@ -1,46 +0,0 @@ ---- -sidebar_position: 2 ---- - -# Image - -AssetPack plugin for compressing and mipmapping images into different formats. - -## Installation - -```sh -npm install --save-dev @assetpack/plugin-image -``` - -## Basic Usage - -```js -import { compress, mipmap } from "@assetpack/plugin-image"; - -export default { - ... - plugins: { - ... - mipmap: mipmap(), - compress: compress(), - }, -}; -``` - -## Options - -### compress - -- `tags` - An object containing the tags to use for the plugin. Defaults to `{ nc: "nc" }`. - - `nc` - The tag used to denote that the image should not be compressed. Can be placed on a folder or file. -- jpg: Any settings supported by [sharp](https://sharp.pixelplumbing.com/api-output#jpeg) -- png: Any settings supported by [sharp](https://sharp.pixelplumbing.com/api-output#png) -- webp: Any settings supported by [sharp](https://sharp.pixelplumbing.com/api-output#webp) -- avif: Any settings supported by [sharp](https://sharp.pixelplumbing.com/api-output#avif) - -### mipmap - -- `template`: A template for denoting the resolution of the images. Defaults to `@%%x`. Note you must use `%%` to denote the resolution. -- `resolutions`: An object containing the resolutions that the images will be resized to. Defaults to `{ default: 1, low: 0.5 }`. -- `fixedResolution`: A resolution used if the fix tag is applied e.g. `path/to/image{fix}.png` or `path/to{fix}`. Resolution must match one found in resolutions. Defaults to `default`. -- `tags` - An object containing the tags to use for the plugin. Defaults to `{ fix: "fix" }`. diff --git a/packages/docs/docs/guide/pipes/json.md b/packages/docs/docs/guide/pipes/json.md index d0d52d6..4d0f052 100644 --- a/packages/docs/docs/guide/pipes/json.md +++ b/packages/docs/docs/guide/pipes/json.md @@ -1,27 +1,30 @@ --- -sidebar_position: 2 +sidebar_position: 3 --- # JSON -AssetPack plugin for minifying JSON files. +AssetPack plugin for minifying JSON files. This plugin simplifies JSON files by removing whitespace, reducing file size and improving load times. -## Installation +## API +N/A for this plugin. -```sh -npm install --save-dev @assetpack/plugin-json -``` +## Example -## Usage +TODO: add ToggleImage example ```js -import { json } from "@assetpack/plugin-json"; +import { json } from "assetpack"; export default { ... - plugins: { + pipes: { ... - json: json(), + json(), }, }; ``` + +## Tags + +N/A for this plugin. diff --git a/packages/docs/docs/guide/pipes/manifest.md b/packages/docs/docs/guide/pipes/manifest.md deleted file mode 100644 index 4d02e4e..0000000 --- a/packages/docs/docs/guide/pipes/manifest.md +++ /dev/null @@ -1,66 +0,0 @@ ---- -sidebar_position: 2 ---- - -# Manifest - -This plugin generates a manifest file so you can easily load your assets in the browser. - -Right now it only supports generating a PixiJS manifest file for its `Assets` loader. See [here](https://pixijs.io/guides/basics/assets.html) for more information. - -## Installation - -```bash -npm install @assetpack/plugin-manifest -``` - -## Usage - -```js -import { pixiManifest } from "@assetpack/plugin-manifest"; - -export default { - ... - plugins: { - ... - manifest: pixiManifest(), - }, -}; -``` - -In order to generate new bundle entries in the manifest file, you must use the `{m}` tag on a folder: - -```bash - -```bash -raw-assets -├── preload{m} -│ └── loader.jpg -└── game{m} - ├── char.png - └── pikc.png -``` - -This will generate two bundles called `preload` and `game` in the manifest file. - -## Options - -- `output` - The path to the manifest file. Defaults to the output folder defined in your config. -- `createShortcuts` - Whether to create shortcuts for each bundle. Defaults to `false`. If enabled the manifest will try to create the shortest path for an asset. e.g. -```json -{ - "alias": ["game/char.png", "game.png"], - "src": ["game/char.png"] -} -``` -- `trimExtensions` - Whether to trim the extensions from the asset names. Defaults to `false`. If enabled the manifest will try to create the shortest path for an asset. e.g. -```json -{ - "alias": ["game/char.png", "game/char"], - "src": ["game/char.png"] -} -``` -- `defaultParser` - The default parser to use on a transformed asset -- `parsers` - An array of manifest parsers to use. -- `tags` - An object containing the tags to use for the plugin. Defaults to `{ m: "m" }`. - - `m` - The tag to use for generating a bundle entry in the manifest file. diff --git a/packages/docs/docs/guide/pipes/manifest.mdx b/packages/docs/docs/guide/pipes/manifest.mdx new file mode 100644 index 0000000..30fb6a2 --- /dev/null +++ b/packages/docs/docs/guide/pipes/manifest.mdx @@ -0,0 +1,79 @@ +--- +sidebar_position: 5 +--- + +# Manifest + +This plugin generates a manifest file so you can easily load your assets in the browser. The manifest file contains a list of all the assets in your project, including their paths and aliases. + +The plugin also allows you to create bundles of assets by using tags in your folder structure. This is useful for grouping assets together, such as images for a specific scene or level. + +We believe this plugin is a must-have for any PixiJS project, as it simplifies the process of loading assets and helps you manage your project more efficiently. + +## API + +| Option | Type | Description | +| --------------- | --------- | ---------------------------------------------------------------------------------------------- | +| output | `string` | The path to the manifest file.
Defaults to the output folder defined in your config. | +| createShortcuts | `boolean` | Whether to create the shortest possible alias for an asset.
Defaults to `false`. | +| trimExtensions | `boolean` | Whether to trim the extensions from the asset aliases.
Defaults to `false`. | +| includeMetaData | `boolean` | Whether to include the tags the asset has used in the manifest file.
Defaults to `true`. | + +## Example + +
+ Tags Example +
+ +```js +import { pixiManifest } from "assetpack"; + +export default { + ... + pipes: { + ... + // These options are the default values, all options shown here are optional + // This should be the last pipe in the list + pixiManifest({ + output: "manifest.json", + createShortcuts: false, + trimExtensions: false, + includeMetaData: true, + }) + }, +}; +``` + +## Tags + +| Tag | Folder/File | Description | +| --------- | ----------- | ----------------------------------------------- | +| `m` | `folder` | Generates a bundle entry in the manifest file. | +| `mIgnore` | `both` | Ignores the folder/file from the manifest file. | + + +--- + +## Usage with Spine plugin + +When using the [Spine plugins](/docs/guide/pipes/spine), you should use the `spineAtlasManifestMod` plugin to augment the manifest file with the spine atlas files. This ensures that the spine atlas files are included in the manifest. + +```js +import { pixiManifest, spineAtlasManifestMod } from "assetpack"; + +export default { + ... + pipes: [ + ... + pixiManifest(), + spineAtlasManifestMod(), + ] +}; +``` diff --git a/packages/docs/docs/guide/pipes/mipmap.mdx b/packages/docs/docs/guide/pipes/mipmap.mdx new file mode 100644 index 0000000..f7c17d1 --- /dev/null +++ b/packages/docs/docs/guide/pipes/mipmap.mdx @@ -0,0 +1,70 @@ +--- +sidebar_position: 4 +--- + +import { ImageToggle } from '@site/src/components/ImageToggle'; + +# Mipmaps + +The mipmap plugin generates mipmaps for images, creating multiple resolutions of the same image. This is particularly useful for optimizing graphics in web games, where different resolutions are needed for various screen sizes and device capabilities. + +:::info +When generating multiple resolutions, the plugin assumes that the original image is at the highest resolution. The plugin will then generate lower-resolution versions of the image based on the specified template and resolutions. +::: + +## API + +| Option | Type | Description | +| --------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------- | +| template | `string` | A template for denoting the resolution of the images.
Defaults to `@%%x`. | +| resolutions | `object` | An object containing the resolutions that the images will be resized to.
Defaults to `{ default: 1, low: 0.5 }`. | +| fixedResolution | `string` | A resolution used if the fix tag is applied e.g.
Resolution must match one found in resolutions.
Defaults to `default`. | + +## Example + + + +```js +import { mipmap } from "assetpack"; + +export default { + ... + pipes: [ + ... + // these options are the default values, all options shown here are optional + mipmap({ + template: "@%%x", + resolutions: { default: 1, low: 0.5 }, // { high: 2, default: 1, low: 0.5 } + fixedResolution: "default", + }), + ] +}; +``` + +## Example: custom resolution + + + +```js +import { mipmap } from "assetpack"; + +export default { + ... + pipes: [ + ... + mipmap({ + resolutions: { high: 2, default: 1, low: 0.5 }, + }), + ] +}; +``` + +## Tags + +| Tag | Folder/File | Description | +| ----- | ----------- | -------------------------------------------------------------------------------------- | +| `fix` | `both` | If present the `fixedResolution` will be used. No other resolutions will be generated. | + +### Example: fixed resolution + + diff --git a/packages/docs/docs/guide/pipes/overview.mdx b/packages/docs/docs/guide/pipes/overview.mdx index ae787ba..c702dd8 100644 --- a/packages/docs/docs/guide/pipes/overview.mdx +++ b/packages/docs/docs/guide/pipes/overview.mdx @@ -1,89 +1,61 @@ --- -sidebar_position: 2 +sidebar_position: 0 title: Overview --- -import React, { useState, useEffect } from 'react'; - -export const Toggle = ({ toggleImage, showImage1 }) => { - return ( -
-
-

{showImage1 ? 'Original' : 'Processed'}

-
-
-
-
-
- ); -}; - -export const ImageToggle = ({ image }) => { - const [showImage1, setShowImage1] = useState(true); - - const toggleImage = () => { - setShowImage1(!showImage1); - }; - const height = 600; - const image1 = `/assetpack/screenshots/${image}`; - const image2 = `/assetpack/screenshots/processed-${image}`; - - return ( -
- -
-
- Image 1 -
-
- Image 2 -
-
-
- ) -}; - +import { Image } from '@site/src/components/ImageToggle'; # Overview - +AssetPack provides a wide range of plugins for processing and optimizing assets. +These plugins can be combined to create a custom pipeline that meets the specific needs of your project. + +:::note +The order of the plugins in the pipe is important, as each plugin processes the asset in sequence +::: + +## Plugins + +- [Cache Buster](/docs/guide/pipes/cache-buster): Adds hashes to file names to ensure that assets are correctly updated when they change. +- [Audio](/docs/guide/pipes/audio): Converts and compresses audio files using FFmpeg. +- [FFmpeg](/docs/guide/pipes/audio): Converts files to any other file type using the FFmpeg API. +- [Compression](/docs/guide/pipes/compress): Compresses images into different formats. +- [Mipmaps](/docs/guide/pipes/mipmap): Generates mipmaps for images. +- [JSON](/docs/guide/pipes/json): Minifies JSON files. +- [Manifest](/docs/guide/pipes/manifest): Generates a PixiJS manifest file containing the paths of all processed assets. +- [Spine](/docs/guide/pipes/spine): Compresses and mipmap Spine atlas files. +- [Texture Packer](/docs/guide/pipes/texture-packer): Generate spritesheets from individual images and compress/mipmap +- [Webfont](/docs/guide/pipes/webfont): Converts font files into `woff2`/`sdf`/`msdf` formats. + +## Tags + +Tags are fundamental to AssetPack. They are used to let a plugin know which assets to process. Tags are added to folder/file names and are used to filter assets in the plugin. + +For example, the [manifest plugin](/docs/guide/pipes/manifest) uses two different tags: `{m}` and `{mIgnore}`. +The `{m}` tag generates a bundle entry in the manifest file, while the `{mIgnore}` tag ignores the folder/file from the manifest file. + +Each plugin has its own set of tags, so be sure to check the documentation for the plugin you are using. + +
+ Tags Example +
+ + + +### Built-in Tags + +- `{copy}`: The tags forces an asset to be copied to the output directory, without any processing. +- `{ignore}`: The tag ensures that the asset is not processed by AssetPack and is not copied to the output directory. + +### Other Tag Examples +- You can also add multiple tags to a single asset, like this `asset{tag1}{tag2}`. +- Tags can have data appended to them, like this `asset{tag1:myData}`. +- Tags can have multiple data values, like this `asset{tag1:100,200}`. diff --git a/packages/docs/docs/guide/pipes/spine.md b/packages/docs/docs/guide/pipes/spine.md deleted file mode 100644 index 309f65f..0000000 --- a/packages/docs/docs/guide/pipes/spine.md +++ /dev/null @@ -1,9 +0,0 @@ ---- -sidebar_position: 2 ---- - -# Spine - -AssetPack plugin for transforming spine files. Predominantly working with atlas files. - -When using when compressing or resizing images, the atlas files need to be aware of these changes diff --git a/packages/docs/docs/guide/pipes/spine.mdx b/packages/docs/docs/guide/pipes/spine.mdx new file mode 100644 index 0000000..3cc34f1 --- /dev/null +++ b/packages/docs/docs/guide/pipes/spine.mdx @@ -0,0 +1,126 @@ +--- +sidebar_position: 6 +--- +import { ImageToggle } from '@site/src/components/ImageToggle'; + +# Spine + +AssetPack provides several plugins for transforming spine files that utilise `atlas/png` format + +## Spine Atlas Compress + +The `spineAtlasCompress` 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. + +This plugin should be used in conjunction with the [compress](/docs/guide/pipes/compress) plugin to ensure that the atlas file is compressed as well as the images. + +### API + +See [Compression API](/docs/guide/pipes/compress) for more information. + +You will want to make sure you are passing the same options to the `compress` plugin as you are to the `spineAtlasCompress` plugin. + +### Example + + + +```js +import { compress, spineAtlasCompress } from "assetpack"; + +// 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), + spineAtlasCompress(options), + ] +}; +``` + +### Tags + +| Tag | Folder/File | Description | +| ---- | ----------- | ----------------------------------------------- | +| `nc` | `both` | If present the atlas will not be compressed. | + +--- + +## Spine Atlas Mipmap + +The `spineAtlasMipmap` plugin generates mipmaps for images, creating multiple resolutions of the same image. This is particularly useful for optimizing graphics in web games, where different resolutions are needed for various screen sizes and device capabilities. + +This plugin should be used in conjunction with the [mipmap](/docs/guide/pipes/mipmap) plugin to ensure that the atlas file is mipped as well as the images. + +### API + +See [Mipmaps API](/docs/guide/pipes/mipmap) for more information. + +You will want to make sure you are passing the same options to the `mipmap` plugin as you are to the `spineAtlasMipmap` plugin. + +### Example + + + +```js +import { mipmap, spineAtlasMipmap } from "assetpack"; + +// these options are the default values, all options shown here are optional +const options = { + template: "@%%x", + resolutions: { default: 1, low: 0.5 }, + fixedResolution: "default", +}; + +export default { + ... + pipes: [ + ... + mipmap(options), + spineAtlasMipmap(options), + ] +}; +``` + +### Tags + +| Tag | Folder/File | Description | +| ----- | ------ | -------------------------------------------------------------------------------------- | +| `fix` | `both` | If present the `fixedResolution` will be used. No other resolutions will be generated. | + +--- + +## Spine Atlas Manifest Mod + +The `spineAtlasManifestMod` plugin augments the manifest file generated by the [manifest](/docs/guide/pipes/manifest) plugin to include the spine atlas files. + +This plugin should be used in conjunction with the [manifest](/docs/guide/pipes/manifest) plugin to ensure that the spine atlas files are included in the manifest. + +### API + +N/A for this plugin. + +### Example + +```js +import { pixiManifest, spineAtlasManifestMod } from "assetpack"; + +export default { + ... + pipes: [ + ... + pixiManifest(), + spineAtlasManifestMod(), + ] +}; +``` + +### Tags + +N/A for this plugin. diff --git a/packages/docs/docs/guide/pipes/texture-packer.md b/packages/docs/docs/guide/pipes/texture-packer.md deleted file mode 100644 index 7482521..0000000 --- a/packages/docs/docs/guide/pipes/texture-packer.md +++ /dev/null @@ -1,79 +0,0 @@ ---- -sidebar_position: 2 ---- - -# TexturePacker - -AssetPack plugin for generating texture atlases using Texture Packer - -## Installation - -```sh -npm install --save-dev @assetpack/plugin-texture-packer -``` - -## Basic Usage - -```js -import { texturePacker } from "@assetpack/plugin-texture-packer"; -// or use the pixi specific plugin -// import { pixiTexturePacker } from "@assetpack/plugin-texture-packer"; - -export default { - ... - plugins: { - ... - texturePacker: texturePacker(), - }, -}; -``` - -This plugin requires the `{tps}` tag to be placed on a folder: - -```bash -raw-assets -├── game{tps} - ├── char.png - └── pickup.png -``` - -images can be nested in subfolders: - -```bash -raw-assets -├── game{tps} - ├── char.png - ├── pickup.png - └── ui - └── button.png -``` - -## Options - -- `texturePacker`: Any option that can be passed to [Texture Packer](https://github.com/odrick/free-tex-packer-core#available-options) can be passed here. -- `resolutionOptions`: Options for generating resolutions - - `template`: A template for denoting the resolution of the images. Defaults to `@%%x`. Note you must use `%%` to denote the resolution. - - `resolutions`: An object containing the resolutions that the images will be resized to. Defaults to `{ default: 1, low: 0.5 }`. - - `fixedResolution`: A resolution used if the fix tag is applied e.g. `path/to/spritesheet{tps}{fix}` or `path/to/spritesheet{tps}{fix}`. Resolution must match one found in resolutions. Defaults to `default`. - - `maximumTextureSize`: The maximum size a sprite sheet can be before its split out. Defaults to `4096`. This is the equivalent of setting `width: 4096, height: 4096` in Texture Packer. -- `tags` - An object containing the tags to use for the plugin. Defaults to `{ tps: "tps", fix: "fix", jpg: "jpg" }`. - - `tps`: The tag used to denote a folder that should be processed by Texture Packer. - - `fix`: The tag used to denote that the spritesheet should be fixed to a specific resolution. - - `jpg`: The tag used to denote the spritesheet should be saved as a jpg. - -## Pixi Specific - -If you are generating multiple resolutions of a spritesheet right now Pixi does not know how to handle this. To get around this you will need to add a `ResolveParser` like so: - -```ts -import { settings, extensions, resolveTextureUrl, ResolveURLParser, ExtensionType } from 'pixi.js'; - -export const resolveJsonUrl = { - extension: ExtensionType.ResolveParser, - test: (value: string): boolean => - settings.RETINA_PREFIX.test(value) && value.endsWith('.json'), - parse: resolveTextureUrl.parse, -} as ResolveURLParser; - -extensions.add(resolveJsonUrl); -``` diff --git a/packages/docs/docs/guide/pipes/texture-packer.mdx b/packages/docs/docs/guide/pipes/texture-packer.mdx new file mode 100644 index 0000000..8d56424 --- /dev/null +++ b/packages/docs/docs/guide/pipes/texture-packer.mdx @@ -0,0 +1,120 @@ +--- +sidebar_position: 7 +--- + +import { ImageToggle } from '@site/src/components/ImageToggle'; + +# TexturePacker + +AssetPack plugin for generating texture atlases using sharp. + +If you are using the [mipmap](/docs/guide/pipes/mipmap) plugin you will want to pass the same options to the `texturePacker` plugin as you are to the `mipmap` plugin. + +:::info +This plugin is designed to work with the spritesheet format PixiJS uses. +If you are using a different library you may need to convert the output. +::: + +## API + +| Option | Type | Description | +| ------------------------------------ | ----------------- | ------------------------------------------------------------------------------------------------------------------------ | +| texturePacker | `object` | Options for generating texture atlases. | +| texturePacker.textureFormat | `png\|jpg` | The format of the texture atlas file.
Defaults to `png`. | +| texturePacker.padding | `number` | The padding between sprites in the texture atlas.
Defaults to `2`. | +| texturePacker.fixedSize | `boolean` | Whether the texture atlas should be a fixed size.
Defaults to `false`. | +| texturePacker.powerOfTwo | `boolean` | Whether the texture atlas should be a power of two.
Defaults to `false`. | +| texturePacker.width | `number` | The width of the texture atlas.
Defaults to `1024`. | +| texturePacker.height | `number` | The height of the texture atlas.
Defaults to `1024`. | +| texturePacker.allowTrim | `boolean` | Whether the texture atlas should allow trimming.
Defaults to `true`. | +| texturePacker.allowRotation | `boolean` | Whether the texture atlas should allow rotation.
Defaults to `true`. | +| texturePacker.alphaThreshold | `number` | The alpha threshold for the texture atlas.
Defaults to `0.1`. | +| texturePacker.scale | `number` | The scale of the texture atlas.
Defaults to `1`. | +| texturePacker.resolution | `number` | The resolution of the texture atlas.
Defaults to `1`. | +| texturePacker.nameStyle | `short\|relative` | The name style of the texture atlas.
Defaults to `relative`. | +| texturePacker.removeFileExtension | `boolean` | Whether the file extension should be removed.
Defaults to `false`. | +| | | | +| resolutionOptions | `object` | Options for generating resolutions. | +| resolutionOptions.template | `string` | A template for denoting the resolution of the images.
Defaults to `@%%x`. | +| resolutionOptions.resolutions | `object` | An object containing the resolutions that the images will be resized to.
Defaults to `{ default: 1, low: 0.5 }`. | +| resolutionOptions.fixedResolution | `string` | A resolution used if the fix tag is applied. Resolution must match one found in resolutions.
Defaults to `default`. | +| resolutionOptions.maximumTextureSize | `number` | The maximum size a sprite sheet can be before its split out.
Defaults to `4096`. | + +## Example + + + +```js +import { texturePacker } from "assetpack"; + +export default { + ... + pipes: [ + ... + texturePacker({ + texturePacker: { + padding: 2, + nameStyle: "relative", + removeFileExtension: false, + }, + resolutionOptions: { + template: "@%%x", + resolutions: { default: 1, low: 0.5 }, + fixedResolution: "default", + maximumTextureSize: 4096, + }, + }) + ] +}; +``` + +## Tags + +| Tag | Folder/File | Description | +| ----- | ----------- | ------------------------------------------------------------------ | +| `tps` | `folder` | If present the folder will be processed by Texture Packer. | +| `jpg` | `folder` | If present the spritesheet will be saved as a jpg. | +| `fix` | `folder` | If present the spritesheet will be fixed to a specific resolution. | + +--- + +## Texture Packer Compress + +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. + +### API + +See [Compression API](/docs/guide/pipes/compress) 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. + +### Example + + + +```js +import { compress, texturePackerCompress } from "assetpack"; + +// 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), + ] +}; +``` + +### Tags + +| Tag | Folder/File | Description | +| ---- | ----------- | -------------------------------------------- | +| `nc` | `folder` | If present the atlas will not be compressed. | diff --git a/packages/docs/docs/guide/pipes/webfont.md b/packages/docs/docs/guide/pipes/webfont.md deleted file mode 100644 index 0edd119..0000000 --- a/packages/docs/docs/guide/pipes/webfont.md +++ /dev/null @@ -1,80 +0,0 @@ ---- -sidebar_position: 2 ---- - -# Webfont - -AssetPack plugin for generating woff2 fonts from ttf, otf, woff, and svg files. - -## Installation - -```sh -npm install --save-dev @assetpack/plugin-webfont -``` - -## Basic Usage - -```js -import { webfont } from "@assetpack/plugin-webfont"; - -export default { - ... - plugins: { - ... - webfont: webfont(), - sdfFont: sdfFont(), - msdfFont: msdfFont(), - }, -}; -``` - -### webfont - -This plugin requires the `{wf}` tag to be placed on a folder or file: - -```bash -raw-assets -├── game{wf} -│ ├── svgFont.svg -│ └── ttfFont.ttf -└── other - └── otfFont{wf}.otf -``` - -#### Options - -- `tags` - An object containing the tags to use for the plugin. Defaults to `{ font: "wf" }`. - -### sdf + msdf - -These plugins requires the `{sdf}` or `{msdf}` tag to be placed on a folder or file: - -```bash -raw-assets -├── game{sdf} -│ └── sdfFont.ttf -└── other - └── msdfFont{msdf}.tff -``` - -These plugins only work with `ttf` files. - -#### Options - -- `tags` - An object containing the tags to use for the plugin. Defaults to `{ font: "wf" }`. -- `font` - An object containing options to customise the font generation. - - `filename` (String): filename of both font file and font atlas. If omited, font face name is used. **Required** if font is provided as a Buffer. - - `charset` (String|Array): the characters to include in the bitmap font. Defaults to all ASCII printable characters. - - `fontSize` (Number): the font size at which to generate the distance field. Defaults to `42` - - `textureSize` (Array[2]): the dimensions of an output texture sheet, normally power-of-2 for GPU usage. Both dimensions default to `[512, 512]` - - `texturePadding` (Number): pixels between each glyph in the texture. Defaults to `2` - - `border` (Number): space between glyphs textures & edge. Defaults to `0` - - `distanceRange` (Number): the width of the range around the shape between the minimum and maximum representable signed distance in pixels, defaults to `3` - - `roundDecimal` (Number): rounded digits of the output font metics. For `xml` output, `roundDecimal: 0` recommended. - - `vector` (Boolean): output a SVG Vector file for debugging. Defauts to `false` - - `smart-size` (Boolean): shrink atlas to the smallest possible square. Default: `false` - - `pot` (Boolean): output atlas size shall be power of 2. Default: `false` - - `square` (Boolean): output atlas size shall be square. Default: `false` - - `rot` (Boolean): allow 90-degree rotation while packing. Default: `false` - - `rtl` (Boolean): use RTL(Arabic/Persian) characters fix. Default: `false` - diff --git a/packages/docs/docs/guide/pipes/webfont.mdx b/packages/docs/docs/guide/pipes/webfont.mdx new file mode 100644 index 0000000..a15ca8d --- /dev/null +++ b/packages/docs/docs/guide/pipes/webfont.mdx @@ -0,0 +1,91 @@ +--- +sidebar_position: 8 +--- + +import { ImageToggle } from '@site/src/components/ImageToggle'; + +# Webfonts + +AssetPack provides a couple of plugins generating `woff2`/`sdf`/`msdf` fonts from `ttf`, `otf`, `woff`, and `svg` files. + +## Webfont + +This plugin generates `woff2` fonts from `ttf`, `otf`, `woff`, and `svg` files. + +### API + +N/A for this plugin. + +### Example + + + +```js +import { webfont } from "assetpack"; + +export default { + ... + pipes: [ + ... + webfont(), + ], +}; +``` + +### Tags + +| Tag | Folder/File | Description | +| ---- | ----------- | -------------------------------------------------------------- | +| `wf` | `both` | If present the file(s) will be converted to a webfont (woff2). | + +--- + +## SDF + MSDF + +These plugins generate signed distance field (SDF) and multi-channel signed distance field (MSDF) fonts from `ttf` files. + +### API + +| Option | Type | Description | +| ------------------- | --------------------------- | --------------------------------------------------------------------------------------------------------------------------- | +| font | `object` | An object containing options to customise the font generation. See below for available options. | +| font.outputType | `'xml' \| 'json'` | Type of output font file. Can be `xml` for a BMFont standard .fnt file.
Defaults to `'xml' \| 'json'` | +| font.charset | `string \| string[]` | The characters to include in the bitmap font. | +| font.fontSize | `number` | The font size at which to generate the distance field.
Defaults to `42` | +| font.textureSize | `[number, number]` | The dimensions of an output texture sheet, normally power-of-2 for GPU usage.
Defaults to `[512, 512]` | +| font.texturePadding | `number` | Pixels between each glyph in the texture.
Defaults to `2` | +| font.border | `number` | Space between glyph textures and edge.
Defaults to `0` | +| font.fieldType | `'msdf' \| 'sdf' \| 'psdf'` | What kind of distance field to generate. Can be `msdf`, `sdf`, or `psdf`.
Defaults to `'msdf'` | +| font.distanceRange | `number` | The width of the range around the shape between the minimum and maximum representable signed distance.
Defaults to `3` | +| font.roundDecimal | `number` | Rounded digits of the output font metrics. For `xml` output, `roundDecimal: 0` recommended. | +| font.vector | `boolean` | Output an SVG Vector file for debugging.
Defaults to `false` | +| font\['smart-size'\] | `boolean` | Shrink atlas to the smallest possible square.
Defaults to `false` | +| font.pot | `boolean` | Output atlas size shall be power of 2.
Defaults to `false` | +| font.square | `boolean` | Output atlas size shall be square.
Defaults to `false | +| font.rot | `boolean` | Allow 90-degree rotation while packing.
Defaults to `false` | +| font.rtl | `boolean` | Use RTL (Arabic/Persian) characters fix.
Defaults to `false` | + + +### Example + + + +```js +import { sdf, msdf } from "assetpack"; + +export default { + ... + pipes: [ + ... + sdf(), + msdf(), + ], +}; +``` + +### Tags + +| Tag | Folder/File | Description | +| ------ | ----------- | -------------------------------------------------------------- | +| `sdf` | `both` | If present the file(s) will be converted to a SDF font. | +| `msdf` | `both` | If present the file(s) will be converted to a MSDF font. | diff --git a/packages/docs/docs/plugin/getting-started.md b/packages/docs/docs/plugin/getting-started.md deleted file mode 100644 index 0ad924e..0000000 --- a/packages/docs/docs/plugin/getting-started.md +++ /dev/null @@ -1,13 +0,0 @@ ---- -sidebar_position: 0 ---- - -# Getting Started - -This guide will help you create your own extensions for the devtools. - -:::warning -The devtools are still in development and the API may change in the future. - -We are also still improving the documentation and adding more examples. -::: diff --git a/packages/docs/docusaurus.config.ts b/packages/docs/docusaurus.config.ts index 4aadd1d..716a281 100644 --- a/packages/docs/docusaurus.config.ts +++ b/packages/docs/docusaurus.config.ts @@ -74,12 +74,6 @@ const config: Config = { position: 'left', label: 'Guide', }, - { - type: 'docSidebar', - sidebarId: 'plugin', - position: 'left', - label: 'Plugins', - }, { href: 'https://opencollective.com/pixijs', className: 'header-link header-open-col-link', diff --git a/packages/docs/sidebars.ts b/packages/docs/sidebars.ts index 54fbb8f..0495c95 100644 --- a/packages/docs/sidebars.ts +++ b/packages/docs/sidebars.ts @@ -13,7 +13,6 @@ import type { SidebarsConfig } from '@docusaurus/plugin-content-docs'; const sidebars: SidebarsConfig = { // By default, Docusaurus generates a sidebar from the docs folder structure guide: [{ type: 'autogenerated', dirName: 'guide' }], - plugin: [{ type: 'autogenerated', dirName: 'plugin' }], // But you can create a sidebar manually /* diff --git a/packages/docs/src/components/ImageToggle.tsx b/packages/docs/src/components/ImageToggle.tsx index e61b2af..d27359a 100644 --- a/packages/docs/src/components/ImageToggle.tsx +++ b/packages/docs/src/components/ImageToggle.tsx @@ -1,11 +1,16 @@ import { useState } from 'react'; -export const Toggle = ({ toggleImage, showImage1 }) => ( +type ToggleProps = { + toggleImage: () => void; + showImage1: boolean; +}; + +export const Toggle = ({ toggleImage, showImage1 }: ToggleProps) => (
(
); -export const ImageToggle = ({ image, height }) => +export const Image = ({ image, primaryBoxShadow }: { image: string; primaryBoxShadow: boolean }) => ( +
+ Input Image +
+); + +export const ImageToggle = ({ image, height }: { image: string; height: number }) => { const [showImage1, setShowImage1] = useState(true); @@ -52,7 +83,7 @@ export const ImageToggle = ({ image, height }) => setShowImage1(!showImage1); }; - height ??= 600; + height ??= 350; const image1 = `/assetpack/screenshots/${image}.png`; const image2 = `/assetpack/screenshots/${image}-pro.png`; @@ -63,7 +94,7 @@ export const ImageToggle = ({ image, height }) => flexDirection: 'column', alignItems: 'center', width: '100%', - paddingBottom: '20px', + paddingBottom: '24px', }} > @@ -77,28 +108,7 @@ export const ImageToggle = ({ image, height }) => height: '100%', }} > -
- Input Image -
+
height: '100%', }} > -
- Processed Image -
+
diff --git a/packages/docs/static/screenshots/compress/compress-off-pro.png b/packages/docs/static/screenshots/compress/compress-off-pro.png new file mode 100644 index 0000000..a36cca6 Binary files /dev/null and b/packages/docs/static/screenshots/compress/compress-off-pro.png differ diff --git a/packages/docs/static/screenshots/compress/compress-off.png b/packages/docs/static/screenshots/compress/compress-off.png new file mode 100644 index 0000000..73de7d9 Binary files /dev/null and b/packages/docs/static/screenshots/compress/compress-off.png differ diff --git a/packages/docs/static/screenshots/compress/compress-pro.png b/packages/docs/static/screenshots/compress/compress-pro.png new file mode 100644 index 0000000..45776b1 Binary files /dev/null and b/packages/docs/static/screenshots/compress/compress-pro.png differ diff --git a/packages/docs/static/screenshots/compress/compress.png b/packages/docs/static/screenshots/compress/compress.png new file mode 100644 index 0000000..d3196cf Binary files /dev/null and b/packages/docs/static/screenshots/compress/compress.png differ diff --git a/packages/docs/static/screenshots/manifest/manifest-tags.png b/packages/docs/static/screenshots/manifest/manifest-tags.png new file mode 100644 index 0000000..72b5abd Binary files /dev/null and b/packages/docs/static/screenshots/manifest/manifest-tags.png differ diff --git a/packages/docs/static/screenshots/mipmap/mipmap-custom-pro.png b/packages/docs/static/screenshots/mipmap/mipmap-custom-pro.png new file mode 100644 index 0000000..96beeec Binary files /dev/null and b/packages/docs/static/screenshots/mipmap/mipmap-custom-pro.png differ diff --git a/packages/docs/static/screenshots/mipmap/mipmap-custom.png b/packages/docs/static/screenshots/mipmap/mipmap-custom.png new file mode 100644 index 0000000..387986f Binary files /dev/null and b/packages/docs/static/screenshots/mipmap/mipmap-custom.png differ diff --git a/packages/docs/static/screenshots/mipmap/mipmap-fixed-pro.png b/packages/docs/static/screenshots/mipmap/mipmap-fixed-pro.png new file mode 100644 index 0000000..0363af7 Binary files /dev/null and b/packages/docs/static/screenshots/mipmap/mipmap-fixed-pro.png differ diff --git a/packages/docs/static/screenshots/mipmap/mipmap-fixed.png b/packages/docs/static/screenshots/mipmap/mipmap-fixed.png new file mode 100644 index 0000000..f60341f Binary files /dev/null and b/packages/docs/static/screenshots/mipmap/mipmap-fixed.png differ diff --git a/packages/docs/static/screenshots/mipmap/mipmap-pro.png b/packages/docs/static/screenshots/mipmap/mipmap-pro.png new file mode 100644 index 0000000..ff9e454 Binary files /dev/null and b/packages/docs/static/screenshots/mipmap/mipmap-pro.png differ diff --git a/packages/docs/static/screenshots/mipmap/mipmap.png b/packages/docs/static/screenshots/mipmap/mipmap.png new file mode 100644 index 0000000..e285c03 Binary files /dev/null and b/packages/docs/static/screenshots/mipmap/mipmap.png differ diff --git a/packages/docs/static/screenshots/spine/spine-atlas-compress-pro.png b/packages/docs/static/screenshots/spine/spine-atlas-compress-pro.png new file mode 100644 index 0000000..e22e994 Binary files /dev/null and b/packages/docs/static/screenshots/spine/spine-atlas-compress-pro.png differ diff --git a/packages/docs/static/screenshots/spine/spine-atlas-compress.png b/packages/docs/static/screenshots/spine/spine-atlas-compress.png new file mode 100644 index 0000000..9826a2a Binary files /dev/null and b/packages/docs/static/screenshots/spine/spine-atlas-compress.png differ diff --git a/packages/docs/static/screenshots/spine/spine-atlas-mip-pro.png b/packages/docs/static/screenshots/spine/spine-atlas-mip-pro.png new file mode 100644 index 0000000..01c0075 Binary files /dev/null and b/packages/docs/static/screenshots/spine/spine-atlas-mip-pro.png differ diff --git a/packages/docs/static/screenshots/spine/spine-atlas-mip.png b/packages/docs/static/screenshots/spine/spine-atlas-mip.png new file mode 100644 index 0000000..391ed63 Binary files /dev/null and b/packages/docs/static/screenshots/spine/spine-atlas-mip.png differ diff --git a/packages/docs/static/screenshots/processed-tags-all.png b/packages/docs/static/screenshots/tags-all-pro.png similarity index 100% rename from packages/docs/static/screenshots/processed-tags-all.png rename to packages/docs/static/screenshots/tags-all-pro.png diff --git a/packages/docs/static/screenshots/tags-example.png b/packages/docs/static/screenshots/tags-example.png new file mode 100644 index 0000000..b310341 Binary files /dev/null and b/packages/docs/static/screenshots/tags-example.png differ diff --git a/packages/docs/static/screenshots/texture-packer/tps-compress-pro.png b/packages/docs/static/screenshots/texture-packer/tps-compress-pro.png new file mode 100644 index 0000000..05ba001 Binary files /dev/null and b/packages/docs/static/screenshots/texture-packer/tps-compress-pro.png differ diff --git a/packages/docs/static/screenshots/texture-packer/tps-compress.png b/packages/docs/static/screenshots/texture-packer/tps-compress.png new file mode 100644 index 0000000..c3c9354 Binary files /dev/null and b/packages/docs/static/screenshots/texture-packer/tps-compress.png differ diff --git a/packages/docs/static/screenshots/texture-packer/tps-mip-pro.png b/packages/docs/static/screenshots/texture-packer/tps-mip-pro.png new file mode 100644 index 0000000..ed43a70 Binary files /dev/null and b/packages/docs/static/screenshots/texture-packer/tps-mip-pro.png differ diff --git a/packages/docs/static/screenshots/texture-packer/tps-mip.png b/packages/docs/static/screenshots/texture-packer/tps-mip.png new file mode 100644 index 0000000..c3c9354 Binary files /dev/null and b/packages/docs/static/screenshots/texture-packer/tps-mip.png differ diff --git a/packages/docs/static/screenshots/webfonts/webfont-pro.png b/packages/docs/static/screenshots/webfonts/webfont-pro.png new file mode 100644 index 0000000..a67f6a0 Binary files /dev/null and b/packages/docs/static/screenshots/webfonts/webfont-pro.png differ diff --git a/packages/docs/static/screenshots/webfonts/webfont-sdf-pro.png b/packages/docs/static/screenshots/webfonts/webfont-sdf-pro.png new file mode 100644 index 0000000..e54f1df Binary files /dev/null and b/packages/docs/static/screenshots/webfonts/webfont-sdf-pro.png differ diff --git a/packages/docs/static/screenshots/webfonts/webfont-sdf.png b/packages/docs/static/screenshots/webfonts/webfont-sdf.png new file mode 100644 index 0000000..e9fdb18 Binary files /dev/null and b/packages/docs/static/screenshots/webfonts/webfont-sdf.png differ diff --git a/packages/docs/static/screenshots/webfonts/webfont.png b/packages/docs/static/screenshots/webfonts/webfont.png new file mode 100644 index 0000000..d1f53a7 Binary files /dev/null and b/packages/docs/static/screenshots/webfonts/webfont.png differ diff --git a/packages/docs/tsconfig.json b/packages/docs/tsconfig.json index d250afa..953c5fe 100644 --- a/packages/docs/tsconfig.json +++ b/packages/docs/tsconfig.json @@ -1,6 +1,19 @@ { "extends": "@docusaurus/tsconfig", "compilerOptions": { - "baseUrl": "." + "allowSyntheticDefaultImports": true, + "baseUrl": "./", + "esModuleInterop": true, + "jsx": "react-jsx", + "lib": ["ESNext", "dom"], + "module": "commonjs", + "moduleResolution": "node", + "noUnusedLocals": true, + "noUnusedParameters": true, + "pretty": true, + "resolveJsonModule": true, + "sourceMap": true, + "strict": true, + "target": "ESNext" } }