https://github.com/bigasdev/webpack-aseprite
Tool to help with rendering sprites from aseprite on webpack
https://github.com/bigasdev/webpack-aseprite
aseprite aseprite-export pixelart sprite-atlas sprite-parser sprite-sheet sprites spritesheet webdevelopment webpack
Last synced: 26 days ago
JSON representation
Tool to help with rendering sprites from aseprite on webpack
- Host: GitHub
- URL: https://github.com/bigasdev/webpack-aseprite
- Owner: bigasdev
- License: gpl-3.0
- Created: 2022-09-20T17:32:09.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-09-21T13:43:10.000Z (over 3 years ago)
- Last Synced: 2024-12-29T07:43:23.417Z (over 1 year ago)
- Topics: aseprite, aseprite-export, pixelart, sprite-atlas, sprite-parser, sprite-sheet, sprites, spritesheet, webdevelopment, webpack
- Language: JavaScript
- Homepage:
- Size: 17.6 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## 📚 About
🚀 Lightweight and easy to use importer to work on webpack using aseprite assets.
## 💾 Installation
Simply add the [asset](src/assets.js) file to your source folder and import it on your webpack index.
## 🔎 Features
- Its just one file
- Can load and handle multiple atlas files
- Edit all your sprites names directly on aseprite
## 💻 Usage
Use the export feature on aseprite (Ctrl+E) to export your atlas.png with the json in your project folder
```js
//Import the assets.js
import { asepriteConfig } from './assets.js';
//Import the files in your index
import atlasImg from '../assets/img/testAtlas.png';
import atlasJson from '../assets/atlas-sources/atlas.json';
//Then simply use the asepriteConfig to initialize all your atlas data
asepriteConfig([atlasImg], [atlasJson]);
//You can then start calling the createAsset function in any script you want
import { createAsset } from './assets';
createAsset({atlas:"Atlas Number", name:"Sprite Name", size:"Sprite Size", x:"X Position", y:"Y Position"}, "Your canvas context", Callback(Info, Image));
```
## 📌 License
This project is under the GPL-3.0 License. Take a look at the [LICENSE](LICENSE) file for more details.