Coder Social home page Coder Social logo

gingray / spritesheet-generator Goto Github PK

View Code? Open in Web Editor NEW

This project forked from bogdanrybak/spritesheet-generator

0.0 0.0 0.0 45 KB

Generate sprite sheets directly from Photoshop animation frames - geared towards game dev

License: MIT License

JavaScript 100.00%

spritesheet-generator's Introduction

Description

Spritesheet generator is for those who work with Photoshop's animation functions and want to easily export their animations into a simple spritesheet.

Report issues / feature requests on github or tweet at me

Contributors

  • @SebaschenLiu - thanks for the awesome padding feature and UI enhancements <3

Installation

Download the raw version of the script

Place Spritesheet generator.jsx script into:

  • Windows - C:\Program Files\Adobe\Your photoshop version\Presets\Scripts
  • Mac - Applications > Your photoshop version > Presets > Scripts

Restart Photoshop if it was open.

Usage

The script will now be available under File -> Scripts menu as "Spritesheet Generator".

capture

You can specify the frame range. The columns and rows will be automaticaly calculated - you can change them to suit your needs.

You also have the option to add padding in between frames to avoid bleeding.

Export options:

  • Save as PNG - generates and then saves a PNG24 of the generated sprite sheet along with a _spritesheets.txt file in the same folder
  • Generate document - generate your spritesheet into a new photoshop document with "Document Name" field and cell size as the name i.e. basic_attack_32x32

Sprite sheet data file

_spritesheets.txt will be created / updated everytime you use Save as PNG option and will store sprite sheet information for all generated pngs in the folder it resides. Extra options:

  • Check "Separate Padding Data" to extract more detailed spritesheet information with padding information on each side (by default) The generated _spritesheets.txt format is:

Without Separate Padding Data (default):
spritename,cell width + padding left + padding right,cell height + padding top + padding bottom,number of frames

  for example,   
  basic_attack.png,68,68,4
  basic_attack_1.png,36,36,4
  DustAnimationExample.png,22,10,4

With Separate Padding Data:
spritename,cell width,cell height,padding left,padding top,padding right, padding bottom,number of frames
  
  for example,
  basic_attack.png,64,64,2,2,2,2,4 
  basic_attack_1.png,32,32,2,2,2,2,4
  DustAnimationExample.png,18,6,2,2,2,2,4


each entry uses a new line

This file exists so that you can setup whatever workflow within your game engine or other tools to read and slice your spritesheets.

spritesheet-generator's People

Contributors

bogdanrybak avatar sichenn avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.