{"_id":"@basementuniverse/texture-atlas","_rev":"6-0ff61f0d9ab7d8a441be62af6bf5a52c","name":"@basementuniverse/texture-atlas","dist-tags":{"latest":"1.4.0"},"versions":{"1.0.1":{"name":"@basementuniverse/texture-atlas","version":"1.0.1","author":{"url":"https://gordonlarrigan.com","name":"Gordon Larrigan","email":"gordonlarrigan@gmail.com"},"license":"MIT","_id":"@basementuniverse/texture-atlas@1.0.1","maintainers":[{"name":"basementuniverse","email":"gordonlarrigan@gmail.com"}],"homepage":"https://github.com/basementuniverse/texture-atlas#readme","bugs":{"url":"https://github.com/basementuniverse/texture-atlas/issues"},"dist":{"shasum":"67caabf3372b71e99591bf5a83f063fb646468dd","tarball":"https://registry.npmjs.org/@basementuniverse/texture-atlas/-/texture-atlas-1.0.1.tgz","fileCount":11,"integrity":"sha512-jDPatMFWFy4zHaDD/CquJfNIJu5K+iz1ALRWC78Bj0AgaBg4tBT5bGEaZJ0yFJqlwVfvgMVQRui8wNhDJAYP7g==","signatures":[{"sig":"MEUCID+j/4T6Fyzza03dEy7qxDQMFxQAI7X9vg05TH1Q0OspAiEAgaynRUFX8QDI5C1CNOAuL9VuaaQ8lEUlInRSmCzozLU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":52846},"main":"build/index.js","types":"build/index.d.ts","gitHead":"a53789ddf92b1b7773c2c77552e312e85b13cede","scripts":{"build":"webpack"},"_npmUser":{"name":"basementuniverse","email":"gordonlarrigan@gmail.com"},"repository":{"url":"git+https://github.com/basementuniverse/texture-atlas.git","type":"git"},"_npmVersion":"9.5.1","description":"A component for chopping up images into multiple canvases","directories":{},"_nodeVersion":"18.16.0","_hasShrinkwrap":false,"devDependencies":{"webpack":"^5.3.2","ts-loader":"^8.0.7","typescript":"^4.9.4","@types/node":"^18.11.12","webpack-cli":"^4.1.0","clean-webpack-plugin":"^4.0.0-alpha.0"},"_npmOperationalInternal":{"tmp":"tmp/texture-atlas_1.0.1_1721041336804_0.6971613658304205","host":"s3://npm-registry-packages"}},"1.1.0":{"name":"@basementuniverse/texture-atlas","version":"1.1.0","author":{"url":"https://gordonlarrigan.com","name":"Gordon Larrigan","email":"gordonlarrigan@gmail.com"},"license":"MIT","_id":"@basementuniverse/texture-atlas@1.1.0","maintainers":[{"name":"basementuniverse","email":"gordonlarrigan@gmail.com"}],"homepage":"https://github.com/basementuniverse/texture-atlas#readme","bugs":{"url":"https://github.com/basementuniverse/texture-atlas/issues"},"dist":{"shasum":"9ab1db69b054c75f627e1192aa8abe1324856e5b","tarball":"https://registry.npmjs.org/@basementuniverse/texture-atlas/-/texture-atlas-1.1.0.tgz","fileCount":11,"integrity":"sha512-RjRrBlghDMcGV6aLx7eGM+QVKdlVIX7+IBvQwHKjwH5NFQUfs5E8Lafh++jmiJ3YbwN/CJ8/5ATUVrbI1lC0kw==","signatures":[{"sig":"MEYCIQDpEJk4f6iXSfLtkDrpu77MZNJqnUiB+KR6ESkdMlvT7gIhANSh1Ll5ODlRxb538tDAL27IGpmQRn6fbG60j/vpag0O","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":52784},"main":"build/index.js","types":"build/index.d.ts","gitHead":"7885f86ea07ef7c9c2b5985883eb11985cb3a852","scripts":{"build":"webpack"},"_npmUser":{"name":"basementuniverse","email":"gordonlarrigan@gmail.com"},"repository":{"url":"git+https://github.com/basementuniverse/texture-atlas.git","type":"git"},"_npmVersion":"9.5.1","description":"A component for chopping up images into multiple canvases","directories":{},"_nodeVersion":"18.16.0","_hasShrinkwrap":false,"devDependencies":{"webpack":"^5.3.2","ts-loader":"^8.0.7","typescript":"^4.9.4","@types/node":"^18.11.12","webpack-cli":"^4.1.0","clean-webpack-plugin":"^4.0.0-alpha.0"},"_npmOperationalInternal":{"tmp":"tmp/texture-atlas_1.1.0_1721236012583_0.05770641553623013","host":"s3://npm-registry-packages"}},"1.2.0":{"name":"@basementuniverse/texture-atlas","version":"1.2.0","author":{"url":"https://gordonlarrigan.com","name":"Gordon Larrigan","email":"gordonlarrigan@gmail.com"},"license":"MIT","_id":"@basementuniverse/texture-atlas@1.2.0","maintainers":[{"name":"basementuniverse","email":"gordonlarrigan@gmail.com"}],"homepage":"https://github.com/basementuniverse/texture-atlas#readme","bugs":{"url":"https://github.com/basementuniverse/texture-atlas/issues"},"dist":{"shasum":"433c2165d0d6ec94577f7280d5c619e04ef575a4","tarball":"https://registry.npmjs.org/@basementuniverse/texture-atlas/-/texture-atlas-1.2.0.tgz","fileCount":11,"integrity":"sha512-bjCMupoh/wa6Wj6zkqAiqdiHDGuLXz7yK2dv+Rf0qTVq7ywDYfkvYnvfpREG8xX0Fy2MMxU7cBNv4uz9GwIZeg==","signatures":[{"sig":"MEYCIQD0+x0KpGUADgjS0aTT5iw1Th4JDd9oz3tECiBHMHzfjAIhALIijJWpsrFXNcGLv2KUCJrDmVLUvrdxFcawrvVBgYXr","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":55294},"main":"build/index.js","types":"build/index.d.ts","gitHead":"f05f5f19dca27e5eb8cd5f075625dacb98685ef5","scripts":{"build":"webpack"},"_npmUser":{"name":"basementuniverse","email":"gordonlarrigan@gmail.com"},"repository":{"url":"git+https://github.com/basementuniverse/texture-atlas.git","type":"git"},"_npmVersion":"11.5.1","description":"A component for chopping up images into multiple canvases","directories":{},"_nodeVersion":"24.5.0","_hasShrinkwrap":false,"devDependencies":{"webpack":"^5.3.2","ts-loader":"^8.0.7","typescript":"^4.9.4","@types/node":"^18.11.12","webpack-cli":"^4.1.0","clean-webpack-plugin":"^4.0.0-alpha.0"},"_npmOperationalInternal":{"tmp":"tmp/texture-atlas_1.2.0_1754802108928_0.09304328983560328","host":"s3://npm-registry-packages-npm-production"}},"1.3.0":{"name":"@basementuniverse/texture-atlas","version":"1.3.0","author":{"url":"https://gordonlarrigan.com","name":"Gordon Larrigan","email":"gordonlarrigan@gmail.com"},"license":"MIT","_id":"@basementuniverse/texture-atlas@1.3.0","maintainers":[{"name":"basementuniverse","email":"gordonlarrigan@gmail.com"}],"homepage":"https://github.com/basementuniverse/texture-atlas#readme","bugs":{"url":"https://github.com/basementuniverse/texture-atlas/issues"},"dist":{"shasum":"70ffacf5774f696d8fe574a1ab8c1cd53f942581","tarball":"https://registry.npmjs.org/@basementuniverse/texture-atlas/-/texture-atlas-1.3.0.tgz","fileCount":5,"integrity":"sha512-6qLsERaUK5ptPppgYSP0me0D/tOKi+j2c5cWiGJSc1OGE9GvC/E9w4kYr6nJkVTNg5VQ31qy0dXASXa8VS+hyQ==","signatures":[{"sig":"MEYCIQDsrD0t/7mWcfkSde126NQ7B+dp+8ezXePhK8nQQIddLgIhAIjO73OpF2AVhxHnQ+vJT1gy5x3+tqqh1y0PdCL1foQP","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":23270},"main":"build/index.js","types":"build/index.d.ts","gitHead":"0074e173a37ae43f86da8a0c24bc95aa0fef80ef","scripts":{"build":"webpack"},"_npmUser":{"name":"basementuniverse","email":"gordonlarrigan@gmail.com"},"repository":{"url":"git+https://github.com/basementuniverse/texture-atlas.git","type":"git"},"_npmVersion":"11.5.1","description":"A component for chopping up images into multiple canvases","directories":{},"_nodeVersion":"24.5.0","_hasShrinkwrap":false,"devDependencies":{"webpack":"^5.3.2","ts-loader":"^8.0.7","typescript":"^4.9.4","@types/node":"^18.11.12","webpack-cli":"^4.1.0","clean-webpack-plugin":"^4.0.0-alpha.0"},"_npmOperationalInternal":{"tmp":"tmp/texture-atlas_1.3.0_1754824208859_0.5831574644612196","host":"s3://npm-registry-packages-npm-production"}},"1.3.1":{"name":"@basementuniverse/texture-atlas","version":"1.3.1","author":{"url":"https://gordonlarrigan.com","name":"Gordon Larrigan","email":"gordonlarrigan@gmail.com"},"license":"MIT","_id":"@basementuniverse/texture-atlas@1.3.1","maintainers":[{"name":"basementuniverse","email":"gordonlarrigan@gmail.com"}],"homepage":"https://github.com/basementuniverse/texture-atlas#readme","bugs":{"url":"https://github.com/basementuniverse/texture-atlas/issues"},"dist":{"shasum":"a8af03b4e6ae30611d8725b01bb1bef544ccf5de","tarball":"https://registry.npmjs.org/@basementuniverse/texture-atlas/-/texture-atlas-1.3.1.tgz","fileCount":5,"integrity":"sha512-jPUqt5N0R411VSI0MBYSiWYANOm7+oYnCDgMh+nI+yt20uSK6EG3WtW5m5inpevZyUppezkDcywnjaYn6RBoUg==","signatures":[{"sig":"MEUCIQDfqfr11pIQdLAQexZ+tWfY/7nF41vhMBDBF/KJNaeXdQIgV5yLuQDYSPZXc5tXvsCnsW4ockARKyMrJlhJJOgU8n4=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":23340},"main":"build/index.js","types":"build/index.d.ts","gitHead":"2574c4d3056d0464f5cdc8d73d0e5adb438df342","scripts":{"build":"webpack"},"_npmUser":{"name":"basementuniverse","email":"gordonlarrigan@gmail.com"},"repository":{"url":"git+https://github.com/basementuniverse/texture-atlas.git","type":"git"},"_npmVersion":"11.5.1","description":"A component for chopping up images into multiple canvases","directories":{},"_nodeVersion":"24.5.0","_hasShrinkwrap":false,"devDependencies":{"webpack":"^5.3.2","ts-loader":"^8.0.7","typescript":"^4.9.4","@types/node":"^18.11.12","webpack-cli":"^4.1.0","clean-webpack-plugin":"^4.0.0-alpha.0"},"_npmOperationalInternal":{"tmp":"tmp/texture-atlas_1.3.1_1754825206335_0.8437818392083016","host":"s3://npm-registry-packages-npm-production"}},"1.4.0":{"name":"@basementuniverse/texture-atlas","version":"1.4.0","description":"A component for chopping up images into multiple canvases","author":{"name":"Gordon Larrigan","email":"gordonlarrigan@gmail.com","url":"https://gordonlarrigan.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/basementuniverse/texture-atlas.git"},"main":"build/index.js","types":"build/index.d.ts","scripts":{"build":"webpack --mode production","build:dev":"webpack --mode development","watch":"webpack --watch"},"devDependencies":{"@types/node":"^18.11.12","clean-webpack-plugin":"^4.0.0-alpha.0","ts-loader":"^8.0.7","typescript":"^4.9.4","webpack":"^5.3.2","webpack-cli":"^4.1.0"},"gitHead":"757f4962d3c673f0dd07e3f4f5cf3483d08a72a1","_id":"@basementuniverse/texture-atlas@1.4.0","bugs":{"url":"https://github.com/basementuniverse/texture-atlas/issues"},"homepage":"https://github.com/basementuniverse/texture-atlas#readme","_nodeVersion":"24.12.0","_npmVersion":"11.6.2","dist":{"integrity":"sha512-HfkYWf4CuP/+t4DOuKqdBJkkOA+egRojVFQYwfzrJkJ/DunFAWE/i1mkSGAp17hZJt7A26DnpqeY4FZdhmPbiA==","shasum":"399459b58671a4700ceca313130dbc54fd90ce49","tarball":"https://registry.npmjs.org/@basementuniverse/texture-atlas/-/texture-atlas-1.4.0.tgz","fileCount":5,"unpackedSize":16941,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIEWc7S+udItZhVi6nG28Oc06rkgy4px0Y8i95jYdnDZeAiBW36S9MfI2Mosagt1p0CY5ToaZTOCKhUzjlbwuIErejQ=="}]},"_npmUser":{"name":"basementuniverse","email":"gordonlarrigan@gmail.com"},"directories":{},"maintainers":[{"name":"basementuniverse","email":"gordonlarrigan@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/texture-atlas_1.4.0_1786899368881_0.34577792534744134"},"_hasShrinkwrap":false}},"time":{"created":"2024-07-15T11:02:16.694Z","modified":"2026-08-16T16:56:09.178Z","1.0.1":"2024-07-15T11:02:16.992Z","1.1.0":"2024-07-17T17:06:53.028Z","1.2.0":"2025-08-10T05:01:49.415Z","1.3.0":"2025-08-10T11:10:09.052Z","1.3.1":"2025-08-10T11:26:46.520Z","1.4.0":"2026-08-16T16:56:09.021Z"},"bugs":{"url":"https://github.com/basementuniverse/texture-atlas/issues"},"author":{"name":"Gordon Larrigan","email":"gordonlarrigan@gmail.com","url":"https://gordonlarrigan.com"},"license":"MIT","homepage":"https://github.com/basementuniverse/texture-atlas#readme","repository":{"type":"git","url":"git+https://github.com/basementuniverse/texture-atlas.git"},"description":"A component for chopping up images into multiple canvases","maintainers":[{"name":"basementuniverse","email":"gordonlarrigan@gmail.com"}],"readme":"# Game Component: Texture Atlas\n\nA component for chopping up images into multiple canvases.\n\nAlso provides a content processor wrapper for use with the [Content Manager](https://www.npmjs.com/package/@basementuniverse/content-manager).\n\n## Installation\n\n```bash\nnpm install @basementuniverse/texture-atlas\n```\n\nFor direct browser usage, include the UMD build with a script tag:\n\n```html\n\n```\n\nThe build exposes its exports through the `BasementUniverseTextureAtlas` browser\nnamespace. It does not add each export directly to `window`.\n\n## How to use\n\n\n\n_(Example spritesheet for a character)_\n\nThe function can be called directly:\n\n```ts\nimport { textureAtlas } from '@basementuniverse/texture-atlas';\n\nconst characterSpriteSheet = new Image();\ncharacterSpriteSheet.src = './character-spritesheet.png';\ncharacterSpriteSheet.onload = () => {\n const textureAtlasConfiguration = {\n relative: true,\n width: 5,\n height: 2,\n regions: {\n idle_left: { x: 0, y: 0 },\n idle_right: { x: 0, y: 1 },\n walk_left: { x: 1, y: 0, width: 4 },\n walk_right: { x: 1, y: 1, width: 4 },\n },\n };\n\n const atlas = textureAtlas(\n myImage,\n textureAtlasConfiguration\n );\n // {\n // idle_left: HTMLCanvasElement,\n // idle_right: HTMLCanvasElement,\n // walk_left: HTMLCanvasElement,\n // walk_right: HTMLCanvasElement,\n // }\n};\n```\n\nWhen using the library directly from a browser script, prefix exports with\n`BasementUniverseTextureAtlas`:\n\n```html\n\n\n```\n\nOr as a content processor:\n\n```ts\nimport { textureAtlasContentProcessor } from '@basementuniverse/texture-atlas';\nimport ContentManager from '@basementuniverse/content-manager';\n\nContentManager.initialise({\n processors: {\n textureAtlas: textureAtlasContentProcessor,\n },\n});\n\nContentManager.load([\n {\n name: 'character-spritesheet',\n type: 'image',\n args: ['./character-spritesheet.png'],\n },\n {\n name: 'character-atlas',\n type: 'json',\n args: [\n {\n relative: true,\n width: 5,\n height: 2,\n regions: {\n idle_left: { x: 0, y: 0 },\n idle_right: { x: 0, y: 1 },\n walk_left: { x: 1, y: 0, width: 4 },\n walk_right: { x: 1, y: 1, width: 4 },\n },\n }\n ],\n processors: [\n {\n name: 'textureAtlas',\n args: ['character-spritesheet'],\n },\n ],\n },\n]);\n```\n\nThis should result in the following content items being available:\n\n```ts\nconst characterSpriteSheet = ContentManager.get('character-spritesheet');\n// HTMLImageElement\n\nconst characterAtlasData = ContentManager.get('character-atlas');\n// object\n\n// Note that the content item names for each region prefixed with the atlas name\nconst idleLeft = ContentManager.get('character-atlas_idle_left');\n// HTMLCanvasElement\n\nconst idleRight = ContentManager.get('character-atlas_idle_right');\n// HTMLCanvasElement\n\nconst walkLeft = ContentManager.get('character-atlas_walk_left');\n// HTMLCanvasElement\n\nconst walkRight = ContentManager.get('character-atlas_walk_right');\n// HTMLCanvasElement\n```\n\n## Repeating sections\n\nIf you've got lots of animation frames, it could be tedious to manually define all the regions. In this case, we can use repeating regions.\n\n```ts\nconst textureAtlasOptions = {\n relative: true,\n width: 5,\n height: 2,\n regions: {\n idle_left: { x: 0, y: 0 },\n idle_right: { x: 0, y: 1 },\n walk_left: {\n x: 1,\n y: 0,\n repeat: 4,\n repeatNameFormat: '{name}_{n}',\n },\n walk_right: {\n x: 1,\n y: 1,\n repeat: 4,\n repeatNameFormat: '{name}_{n}',\n },\n },\n};\n\n// ...call textureAtlas or use the content processor on the example image\n\n// {\n// idle_left: HTMLCanvasElement,\n// idle_right: HTMLCanvasElement,\n// walk_left_1: HTMLCanvasElement,\n// walk_left_2: HTMLCanvasElement,\n// walk_left_3: HTMLCanvasElement,\n// walk_left_4: HTMLCanvasElement,\n// walk_right_1: HTMLCanvasElement,\n// walk_right_2: HTMLCanvasElement,\n// walk_right_3: HTMLCanvasElement,\n// walk_right_4: HTMLCanvasElement,\n// }\n```\n\n## Texture Atlas options\n\n```ts\nexport type TextureAtlasOptions = {\n /**\n * In relative mode, the width and height of the texture atlas is\n * measured in cells\n *\n * (i.e. the image will be divided into `width` sections horizontally\n * and `height` sections vertically, with each section representing a\n * cell in the atlas)\n *\n * In non-relative (absolute) mode, the width and height properties\n * represent the size of a cell in the atlas, measured in pixels\n */\n relative: boolean;\n\n /**\n * The width of the texture atlas (measured in cells) or the width of\n * a cell in the atlas (measured in pixels), depending on relative or\n * absolute mode\n */\n width: number;\n\n /**\n * The height of the texture atlas (measured in cells) or the height\n * of a cell in the atlas (measured in pixels), depending on relative\n * or absolute mode\n */\n height: number;\n\n /**\n * A dictionary of regions, where each key is a name for the resulting\n * region's image\n *\n * If using the Content Manager Processor function, the key will be used\n * as the name of each image in the Content Manager\n */\n regions: Record;\n};\n\nexport type TextureAtlasRegion = {\n /**\n * X-offset for this region, measured in cells or pixels, depending on\n * relative or absolute mode\n */\n x: number;\n\n /**\n * Y-offset for this region, measured in cells or pixels, depending on\n * relative or absolute mode\n */\n y: number;\n\n /**\n * Width of this region, measured in cells or pixels, depending on\n * relative or absolute mode\n *\n * If not defined:\n * - in absolute mode use the remaining width of the image\n * - in relative mode this defaults to 1\n */\n width?: number;\n\n /**\n * Height of this region, measured in cells or pixels, depending on\n * relative or absolute mode\n *\n * If not defined:\n * - in absolute mode use the remaining height of the image\n * - in relative mode this defaults to 1\n */\n height?: number;\n\n /**\n * If set to an integer greater than 0, repeat this region multiple times\n *\n * The resulting image names will be postfixed with -{n}\n *\n * (e.g. if the region name is 'test-animation' and repeat is set to 3, we\n * will get 'test-animation-1', 'test-animation-2' and 'test-animation-3'\n * in the result)\n */\n repeat?: number;\n\n /**\n * An optional offset for each repetition's cell\n *\n * If this is omitted, assume the repeat cells are arranged along the\n * positive-x direction and use width as the stride size\n *\n * In absolute mode, this is measured in pixels\n * In relative mode, this is measured in cells\n */\n repeatOffset?: {\n x: number;\n y: number;\n };\n\n /**\n * The name format to use for repeating sections\n *\n * `{name}` will be replaced with the current region's name\n * `{n}` will be replaced with the current repetition's index (1-based)\n *\n * Default is '{name}-{n}'\n */\n repeatNameFormat?: string;\n};\n```\n","readmeFilename":"README.md"}