https://github.com/h0rn0chse/spritebuilder

Save your sprites as a spritesheet
https://github.com/h0rn0chse/spritebuilder

blocksize dnd game-development gamedev github-pages muuri sprite sprites spritesheet tileset tileset-editor

Last synced: 19 days ago
JSON representation

Save your sprites as a spritesheet

• Host: GitHub
• URL: https://github.com/h0rn0chse/spritebuilder
• Owner: H0rn0chse
• License: gpl-3.0
• Created: 2021-02-05T20:05:56.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2022-11-18T22:39:10.000Z (about 2 years ago)
• Last Synced: 2024-11-18T17:36:35.535Z (3 months ago)
• Topics: blocksize, dnd, game-development, gamedev, github-pages, muuri, sprite, sprites, spritesheet, tileset, tileset-editor
• Language: JavaScript
• Homepage: https://h0rn0chse.github.io/SpriteBuilder/
• Size: 1.25 MB
• Stars: 2
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


# SpriteBuilder

[SpriteBuilder](https://h0rn0chse.github.io/SpriteBuilder/) is a tool to combine single sprites into spritesheets. The images are only saved within the browser cache. This tool optimzed for the godot plugin [Godot Atlasica](https://github.com/AnJ95/godot-atlasica). You can create and manage your spritesheets in SpriteBuilder and import the result into the plugin.

* [How To Basics](#how-to-basics)

* [Libraries](#libraries)

* [Controls](#controls)

* [Limitations](#limitations)

* [FAQ](#faq)






## How To Basics

 * Adjust your block size

 * Reset the grid

 * Ensure the grid is big enough

 * Drop your images into the area

 * Save as spritesheet

## Libraries

 * Grid: [github.com/haltu/muuri](https://github.com/haltu/muuri)

 * Drag: [github.com/anvaka/panzoom](https://github.com/anvaka/panzoom)

 * CSS: [github.com/franciscop/picnic](https://github.com/franciscop/picnic)

 * Icons: [github.com/feathericons/feather](https://github.com/feathericons/feather)

 * Zip: [github.com/Stuk/jszip](https://github.com/Stuk/jszip)

 * Github Corners [github.com/YunYouJun/wc-github-corners](https://github.com/YunYouJun/wc-github-corners)

## Controls

 * Move Grid: Ctrl + Drag / Shift + Drag

 * Open Inspector: Double Click on Sprite

 * Close Inspector: Esc

## Limitations

You might experience some performance issues with extra large grids (>3000 items).

## FAQ

**How do I change the blocksize?**


Press the reset button. But keep in mind that the grid will be rebuilt and all your progress will be lost!

**Where is the sprite aligned in case is is smaller than the blocksize**


Top left corner.

**What is the best workflow for arranging sprites of different sizes**


Add all sprites to the grid. Start with the biggest sprites on the top and arrange the line by line from top to bottom.