{"_rev":"4-71b0aafce381b61d8ad5849061a725d9","time":{"created":"2024-03-25T07:22:04.696Z","0.0.1":"2024-03-24T08:13:54.507Z","modified":"2024-03-25T07:22:05.466Z","0.0.2":"2024-03-25T07:22:04.917Z"},"_id":"@daumoe/sprite-png-plugin","name":"@daumoe/sprite-png-plugin","dist-tags":{"latest":"0.0.2"},"versions":{"0.0.2":{"name":"@daumoe/sprite-png-plugin","version":"0.0.2","description":"sprite png creator","main":"index.js","keywords":["sprite","png","image","lightningjs"],"author":{"name":"daumoe"},"license":"MIT","dependencies":{"spritesmith":"^3.3.1","vinyl":"^2.1.0","webpack":"^5.90.3","webpack-virtual-modules":"^0.6.1"},"directories":{"example":"example"},"repository":{"type":"git","url":"git+https://github.com/DauMoe/sprite-png-plugin.git"},"bugs":{"url":"https://github.com/DauMoe/sprite-png-plugin/issues"},"homepage":"https://github.com/DauMoe/sprite-png-plugin#readme","gitHead":"0bc60e456292ebe86ab905e200cfe7427783bfe2","_id":"@daumoe/sprite-png-plugin@0.0.2","_nodeVersion":"16.18.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-xu3U9+sq06fkRxuV435uHwEtwdoq9G+zVXYVQ5rOXW0Am4uBO9arKcH47SiOt1ZOQRCMNsSVn4vxnIVVtEtX+g==","shasum":"e1d4f77a4c9aceccb95979ef2a0f054874c65755","tarball":"https://registry.npmjs.org/@daumoe/sprite-png-plugin/-/sprite-png-plugin-0.0.2.tgz","fileCount":4,"unpackedSize":9199,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBoBXL4/IiFYwaXVt4zg4RbU8o1sE0U5Ej6iPOlt0ih0AiBBb1LA3NKJrNOES9Wf1YtXqVvugbsOa6tKdt1Za6GuqA=="}]},"_npmUser":{"name":"daumoe","email":"lehuyhoang1111999@gmail.com"},"maintainers":[{"name":"daumoe","email":"lehuyhoang1111999@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/sprite-png-plugin_0.0.2_1711351324784_0.7547100846249268"},"_hasShrinkwrap":false}},"maintainers":[{"name":"daumoe","email":"lehuyhoang1111999@gmail.com"}],"description":"sprite png creator","homepage":"https://github.com/DauMoe/sprite-png-plugin#readme","keywords":["sprite","png","image","lightningjs"],"repository":{"type":"git","url":"git+https://github.com/DauMoe/sprite-png-plugin.git"},"author":{"name":"daumoe"},"bugs":{"url":"https://github.com/DauMoe/sprite-png-plugin/issues"},"license":"MIT","readme":"# Sprite PNG plugin\r\nWebpack plugin uses [Spritesmith](https://github.com/twolfson/spritesmith) to helping create PNG sprite image and coordinate mapping file (`manifest.json`)\r\n## Usage:\r\n- Make sure [ImageMagick](https://imagemagick.org/) is installed on your device and add it to PATH. Because `Spritesmith` works on top of it  \r\n- Make sure your assets is actual `png` image. You can use online converter tool (JPG -> PNG, JPEG -> PNG, SVG -> PNG, ...). And DO NOT change file extension directly (I do it and got error `Invalid signature`)  \r\n- The manifest path should be relative path from current webpack config container directory  \r\n- Manifest file will be generated automatically. You must remember exactly where it is. Help you a lot to import it into code base  \r\n  \r\n## Options:  \r\n| Option               | Type                    | Required | Default             | Description                                                  |\r\n|----------------------|-------------------------|----------|---------------------|--------------------------------------------------------------|\r\n| **outputPath**       | `string`                | No       | Webpack output path | Your output build path. Default will get from webpack output |\r\n| **includes**         | `RegExp` &#124; `Array` | No       | `undefined`         | Reg to filter the images for sprite                          |\r\n| **manifestFileName** | `string`                | No       | `manifest.json`     | Coordinate file name (path name is accepted)                 |\r\n  \r\n## Manifest content format\r\n```yaml\r\n{\r\n  \"width\": <number>,\r\n  \"height\": <number>,\r\n  \"frames\": {\r\n    [image_1_name]: {\r\n      \"width\": <number>,\r\n      \"height\": <number>,\r\n      \"x\": <number>\r\n      \"y\": <number>\r\n    },\r\n    [image_2_name]: {\r\n      ...so_on\r\n    },\r\n    ...\r\n  }\r\n}\r\n```\r\n- **width**: sprite sheet width\r\n- **height**: sprite sheet height\r\n- **frames**: contain each images coordinate (x, y, w, h)\r\n  \r\n## Example\r\n**Folder structure**  \r\n```\r\n├── code_base/\r\n│   └── src/\r\n│       ├── index.js\r\n│       └── assets/\r\n│           ├── image_1.png\r\n│           ├── image_2.png\r\n│           └── ...\r\n└── webpack.config.js\r\n```\r\n\r\n**main.js**\r\n```js\r\nimport React from \"react\";\r\n...\r\nimport * as mappingData from \"./assets/manifest.json\"; // no need to create this file. Just remember the path\r\n\r\nreturn (\r\n  <YourComponent>\r\n)\r\n```\r\n\r\n**webpack.config.js**\r\n```js\r\nconst SpritePNG = require(\"sprite-png-plugin\");\r\n...\r\nconst spriter = new SpritePNG({\r\n  manifestFileName: \"./src/assets/manifest.json\" // Path to generate manifest file\r\n});\r\n\r\n...\r\nmodule.exports = {\r\n  ...,\r\n  module: {\r\n    ...,\r\n    rules: [\r\n      ...,\r\n      {\r\n        test: /\\.png$/,\r\n        type: 'asset/resource'\r\n      },\r\n      ...\r\n    ],\r\n    plugins: [\r\n      ...,\r\n      spriter,\r\n      ...\r\n    ],\r\n    ...\r\n  }\r\n}\r\n```\r\n  \r\n## Inspiration by:\r\n- [image-sprite-webpack-plugin](https://github.com/naver/image-sprite-webpack-plugin)\r\n- [webpack-virtual-modules](https://github.com/sysgears/webpack-virtual-modules)","readmeFilename":"README.md"}