Code Monkey home page Code Monkey logo

spriterot's Introduction

spriterot build workflow

Command line utility to create spritesheets of rotated sprites.

Features

  • By default, generates spritesheets wasting as little space as possible.
  • 4 rendering algorithms: RotSprite, shearing, nearest, linear.
  • Resizes the sprite to make the rotations non-transparent pixels fit just right.
  • Configurable (min, max, clamp, exact value) number of rows and columns in the generated spritesheet.
  • Configurable number of frames to generate and range of the rotation.
  • Overridable width and height for generated frames, or force keeping the same size.
  • Configurable margin around generated frames.
  • Verbose output to get info about the generated spritesheet.
  • Can resolve the number of rotations to generate from the image filename: e.g. image-rotations-36.png for 36 frames.

Usage

spriterot --help                                                        
spriterot

Usage:
   [options] source

Arguments:
  source           Image to generate the rotations of.

Options:
  -h, --help
  -v, --verbose              Show details about the image(s) being processed.
  -k, --keep-size            Keep the size of the source image for generated rotations, could lead to cropped frames.
  --columns=COLUMNS          Configure the number of columns the generated spritesheet should have. Could lead to wasted space or a cropped spritesheet. Possible values: [min:<number>, max:<number>, clamp:<min>-<max>, <number>]
  --rows=ROWS                Configure the number of rows the generated spritesheet should have. Could lead to wasted space or a cropped spritesheet. Possible values: [min:<number>, max:<number>, clamp:<min>-<max>, <number>]
  --width=WIDTH              Manual width of each generated frame. Could lead to wasted space or cropped frames.
  --height=HEIGHT            Manual height of each generated frame. Could lead to wasted space or cropped frames.
  -m, --margin=MARGIN        Margin around frames, in pixels. Inapplicable when --width or --height are manually set or when --keep-size is enabled. (default: 0)
  -a, --algorithm=ALGORITHM  Algorithm used to rotate the image. Possible values: [rotsprite, shearing, nearest, linear] (default: rotsprite)
  -r, --rotations=ROTATIONS  Amount of rotations to generate.
  -f, --from=FROM            Angle in degrees from which to start generating rotations. (default: 0)
  -t, --to=TO                Angle in degrees up to which to generate rotations. (default: 360)
  -o, --output=OUTPUT        Output filename.

Examples

Create a spritesheet containing 9 frames of input_image.png, from 0 to 90 degrees, with a margin of 1 pixel around each frame.

spriterot -r 9 -f 0 -t 90 -m 1 -o output_image_from_0_to_90.png input_image.png

Create a spritesheet containing 20 frames of input_image.png, from 0 to 360 degrees, in a 2 columns grid. Verbose output.

spriterot -v --columns 2 -r 20 -o output_image_from_0_to_90.png input_image.png

Create a spritesheet containing 36 frames of input_image.png, from 0 to 360 degrees, keeping the size of the original source image for generated frames (could lead to cropped frames).

spriterot -r 36 --keep-size -o output_image_from_0_to_90.png input_image.png

Outputs

rotsprite: best results for standard pixel art.

kirby-no-background-table-78-78-rotsprite

shearing: best results for keeping shades of dither patterns, e.g. Playdate graphics with dithering.

kirby-no-background-table-78-78-shearing

nearest: standard algorithm, nothing special.

kirby-no-background-table-78-78-nearest

linear: best results for conventional graphics, not pixel art.

kirby-no-background-table-78-78

spriterot's People

Contributors

samdze avatar tkers avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

Forkers

tkers

spriterot's Issues

Add the ability to animate scale and rotation

Currently, the tool generates a sprite sheet that animates an image's rotation since it's expensive to do at runtime. It could be useful to also integrate scale and opacity animation, since those are expensive as well. I have something similar here: https://github.com/manaliveadam/glitterbomb/blob/main/source/glitterglue.lua but it could work something like:

  1. Specify initial scale and end scale (with 1 being the image's native size). For every frame of the sprite sheet that's generated, lerp between the initial and end scale
  2. Specify initial opacity and end opacity, and use Playdate's built-in dithering to lerp between the initial and end opacity (I use kDitherTypeBayer8x8 but you could also allow users to specify the dithering technique)

The end result should be a sprite sheet that can animate an image's rotation, scale, and opacity.

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.