Sign in to follow this  
SeriousSam

SpriteSheet Animation Plugin

Recommended Posts

V1.3

AniDlg.jpg

Here is a little something for the hobby game programmers and artist out there, including myself. It is a plugin to test and design Sprite Sheets. For those that do not know a Sprite Sheet is a collection of images arranged in a grid used to make animations. This is done instead of having a bunch of image files.

Hidden Content:
About:

This plugin will load each image from the grid to build a list of "frames". And from the list sequences can be created and animated.

I am quite proud of the user interface. Drag and Drop is used to add and arrange the frames. What this means is just click and drag to move them. An insertion point is drawn to specify the location. It is very intuitive and fast to create sequences.

For a simple demonstration try this image Kickman.jpg

Select "Animation->SpriteSheetAnim" to run the plugin. Upon opening the 4 frames will get added into the left list box like screen shot above where it says "Frames 4". This is the working set of frames that are used to build animation sequences. This set can not be arranged or added to like the sequence list. The size of the frames happens to be 32x32 pixels which is the default but this can be adjusted to up to 512x512 pixels. Selecting "Draw Grid" is useful for matching the frame size to an existing sprite sheet or starting a new one.

Creating a sequence is as easy as clicking any of the frames from the "working set" and dragging to the "sequence set" on the immediate right. Frames 0 and 1 were added to the sequence in the above screen shot. Frames in the sequence set can be arranged by dragging and removed by hitting the Delete key. Also, holding Control will duplicate the frame while dragging instead of moving (think copy then paste).

To start animation press the "On" button and "Off" to stop. While running the current frame is highlighted in the sequence list.

Hidden Content:
Version:

V1.1 May 20

Improved Drag Drop Scrolling

Zoom decrement bug fix

Support for different borders around frames. No border, border both sides, or border just to right

Other bug fixes

v1.2 May 25

Added Saving/Loading Sequences. Make sure to save to file after done creating.

v1.3 May 31

Improved insertion of frame during drag and drop.

Added GIF save feature! Tested with Firefox and IE8.

Notes on GIF:

GIF's can only be created! There will be no support to load GIF's. Animations can be recreated by saving and loading sequence data.

The GIF is set to loop indefinitely and will animate at the same speed as the preview.

GIFs must use a palette. I choose to use the gdi, Window's graphic application interface to generate palette and image data for convenience. It is most likely using the window's system palette. As a result detailed images do not look that great. I noticed detailed images get dithered/halftoned. I am looking into some more advanced techniques on generating an optimized palette. I would also like to add an option to use PDN's palette or a web safe palette may also be included.

PdnAnimateControlSln.zip

PDNSpriteSheetAnim.zip

  • Upvote 1

Share this post


Link to post
Share on other sites

This is mad cool! Nice job with the UI. Excellent work! Looking forward to subsequent releases.

Share this post


Link to post
Share on other sites

WOW!! You are amazing, thanks! I have one question, though. After composing the animation, what does it do? Does it save as .pdn or as .gif?

Share this post


Link to post
Share on other sites

Thanks Kemaru. It is very common in 2D games, like super mario brothers on snes for example to use sprites sheets. They are simple and easy to use. What this plugin will do is help create different animation sequences from them. It saves the animation sequences created as a text file that could be loaded into a game. No image data is saved; only the sequence info is saved. So with this tool the user must open the same image to do the animation again.

I realize not every one is a hobby game designer but would like animations for web sites so I have been looking into saving alternatively as an animated GIF. So far I have looked over the file format and at some different existing code libraries. If I get it working I will include it into an update :D In the mean time I believe there is a plugin that uses different layers to save a animated gif.

Share this post


Link to post
Share on other sites

I'll consider adding code into the GIF/APNG plugin to allow the user to choose to have sequences detected in the image and use them as the animation instead of layers.

Share this post


Link to post
Share on other sites

Holy Cow, this is going to be a great feature!

I had one question - I already understand what to do with the .dll file, but what file should the skin file go, as it does not say dll? (Can you tell I'm still painfully new?) :oops: :shock:

Thanks so much for this.

Share this post


Link to post
Share on other sites

Thank you, Simon 8)

I had it saved to my desktop in the interim - I'll go ahead and discard. Thanks for your time and kind help.

Share this post


Link to post
Share on other sites

[...]

GIFs must use a palette. I choose to use the gdi, Window's graphic application interface to generate palette and image data for convenience. It is most likely using the window's system palette. As a result detailed images do not look that great. I noticed detailed images get dithered/halftoned. I am looking into some more advanced techniques on generating an optimized palette. I would also like to add an option to use PDN's palette or a web safe palette may also be included.

First, thank you very much. I like it.

Would that mean that I have to use the windows pallette to avoid results like this?

291ckm8.jpg

Right?

Share this post


Link to post
Share on other sites

Crazy awesome! While that hobby died down for me a few months ago, this is almost reason enough to jump back in. UI is excellent, it is fast, and it all makes sense. Well done ;)

Share this post


Link to post
Share on other sites

SeriousSam , I have your plugin installed under Effects and I can't get

any file loaded or how/where do I draw a stick man? I have used "Pivot Stickfigure Animator" ,

made some stickmen which are .stk files and they will not load into your plugin. I'm at a

loss as to what file type it will load. Will you please give me some guidance to get started?

Thanks, Robert

Edit: I didn't download >>>>File comment: VS2008 C# Solution

PdnAnimateControlSln.zip [134.14 KiB]

Downloaded 535 times <<<<

Should this be downloaded?

Share this post


Link to post
Share on other sites

Drop the unzipped *.dll file into your paint.net/effects/ folder & restart paint.net. Look for the effect under the effects > animation sub menu.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this