sdl2-sprite: Sprite previewer/animator

[ bsd3, library, program, web ] [ Propose Tags ]

View your sprites in an animated way with SDL2

[Skip to Readme]


  • SDL
    • SDL.Sprite


Note: This package has metadata revisions in the cabal description newer than included in the tarball. To unpack the package including the revisions, use 'cabal get'.

Maintainer's Corner

Package maintainers

For package maintainers and hackage trustees


  • No Candidates
Versions [RSS] 0.0.0, 0.0.1
Dependencies base (>=4.9 && <5), optparse-simple, sdl2, sdl2-image, sdl2-sprite, split, text [details]
License BSD-3-Clause
Copyright 2015 Chris Done
Author Chris Done
Revised Revision 1 made by HerbertValerioRiedel at 2019-06-02T19:10:11Z
Category Web
Home page
Uploaded by ChrisDone at 2018-05-12T11:30:42Z
Executables sdl2-sprite
Downloads 1161 total (12 in the last 30 days)
Rating (no votes yet) [estimated by Bayesian average]
Your Rating
  • λ
  • λ
  • λ
Status Docs not available [build log]
All reported builds failed as of 2018-05-12 [all 3 reports]

Readme for sdl2-sprite-0.0.1

[back to package description]


Create a horizontal sprite like this:

The size of the intended result image is 220x130, so provide that:

sdl2-sprite blue-fish.png 220x130 --fps 15

This will open a window animating that sprite:

(Note: this is a screenflow recording of the animation manually edited to repeat, so it's not as smooth as in reality.)

The animation repeats indefinitely at the desired framerate.

Using Haskell API

Use load to load in a sprite for a Renderer:

load :: MonadIO m => Renderer -> FilePath -> V2 CInt -> m Sprite

To render the sprite at a given position use render:

render :: MonadIO m => Sprite -> V2 CInt -> m ()

To advance the sprite's frame to the next frame (or loop), use animate:

animate :: Sprite -> Sprite

This is a pure function, so you can use it in a loop. See the source in app/Main.hs of this repository for an example.

How to make sprites in Inkscape

Choose the size of your intended result e.g. 220x130 and then setup the grid in Inkscape to show that size (see the Spacing X/Spacing Y fields):

It'll look like this, which is handy:

When you want to make a new frame, use Ctrl-D to duplicate the selection and use the Transform tool to move it exactly 220 pixels to the right and hit Apply.

Make sure that your document dimensions are your width x your frame count.

Finally, export your image with the right "Image size" - make sure the size is 130 so that the width scales right:

Now you're good to go! Hit Export.