you can fly!?
 

Sprite Sheets - part 2
turning an image sequence into a single Sprite sheet
for Gamemaker, ParticleGen and other GameDev tools

more tutorials:
PD Pro
more PD
PD Particles

  to Part 1: from Animation to Sprite Sheet   /  Part 2: from Sprite Sheet to Animation

Now that we have loaded an image which in fact contains an array of multiple sprites, or small images, we can use another plugin, which comes standard with PD Pro. That plugin will extract the images from the sprite sheet and load them into a custom brush. The Brush Keyframer will then be used to render that brush into a new animation.

First, let's make sure we see the whole sprite sheet, not just parts of it. If the individual small sprites are fairly large, such as 256x256 or larger each, then it would be easy for the sheet to reach 2048x2048 pixels or more when you have dozens of frames. A collection of 16 sprites at 256x256 each would fit in a 1024x1024 array, 4x4 sprites. If you're on a screen resolution of 1024x768, only parts of the images will show unless you zoom out.

Zoom out or force a zoom fit to window -  Use F4.
Now return to the k)iller plugins panel


This plugin will create a custom brush containing the various sprites found in the currently loaded sprite sheet, so we should expect to find it in the Brush tab.

Select the Brush tab, and launch the plugin called ArrayToAnimatedBrush_pb.exe


In our example, we have 4 rows of up to 5 sprites, or image cells.

The maximum number of sprites in such an array would be 20, but we know that in this example we have two cells which remain black, unused. We have 18 images in all.

Enter these values, then click OK

Oh, ust for grins, let's say we entered 19 instead of 18 for the total images. This of course will add one black sprite to the end of  animated custom brush.
This just created a custom brush with 19 sprites. Let's be sure to store it with the menu:

Brush > Store / manage...


The brush manager window has an option at the bottom to let you show its content as a filmstrip.

You can resize the window of that filmstrip to see them bigger, or smaller to see more or all of the sprites it contains.
You can also scrub through the set of images with the slider.

Since we intentionally caused 19 instead of 18 image sprites to be copied to the brush, a black cell should be in the set. We can easily see this, by adding one more cell. Click the 'Add frame' button.
The additional frame is added after the last, black cell.
Now that we see this, let's click 'Delete frame' twice, to remove the one we just added, and the black cell.
If we want to make the brush larger, use the menu:

Brush > Resample...


Actually, we don't to change the size of the brush. What we want instead is to make a new animation, which will be the same dimensions as the brush. So, we can use the Resample function just to verify the current brush size.

Of course we could also do a little math: If the sprite sheet was in a 600-pixel wide picture, and it contained 5 columns of equal width, then 600/5=120 pixels for each sprite width.


Now that we know what dimension our new animation will have, use the File>New menu to create a new image of that size, or resample the current image to the new size.
Enter the dimension of the animation's image.
If we still had that original sprite sheet at this time, then it will appear at the new, smaller size.

Of course we don't want or need this anymore, so clear it to blank, white or whatever. Or just leave it alone. We'll soon use the Brush Keyframer to override the images of the animation with the brush's frames.

But before we can do that, we need to actuaqlly create an animation.
Use the menu:

Animation > Create...


We'll need at least 18 frames, but it's ok to enter more, and kill a few unneeded ones later.

If you don't care to copy that small sprite sheet anymore, you can have the frames cleared to the secondary color as they're created.

Again, it really doesn't matter, since the Brushkeyframer is about to replace the frames with what the brush contains.

Be sure that the correct animated brush is selected. Click the thumbnail in the brush manager. Make sure there's no scaling or transforms applied through the brush manager. Click Reset if necessary.
Now we're good to go with the menu:

Brush keyframer...

The Brush keyframer is an important and powerful tool for animators. You can use it to position the image from the brush at one place for a given time, and at a different place later on along the timeline. You can keyframe the positions (and other things like opacity, rotation angle and scale), and then render the progression of the brush.




Click 'Get Brush'.

The custom animated brush now appears in the Keyframer preview.


Use the slider at the bottom of the keyframer, to scrub through the animation. You will see our handyman walk.
Select the desired Mode if different from the default (which is Opaque).


Then click Render.



The animation toolbar now shows again the walk sequence, as rendered from the animated brush containing the sprites, through the brush keyframer.




However, we have a few too many frames at the end, since we had allocated space for 20 frames, but only 18 were needed for one cycle of all sprites.


Click the last frame in the animation toolbar, and delete it, then again. That will get rid of the two excess frames at the end.

When the animation is completed, we can save it to image sequences, or AVI, or back again in the animation plugins, using the Export to AnimGif utility.


You can specify a global  delay for each frame of the animated Gif.


That's it, now it's time to have fun and paint ith the newy created brush. Here's an example where the size of the brush varies with the speed at which the mouse moves. We've painted it over the original sprite sheet, after reducing its contrast and making it lighter.



< click to enlarge




  to Part 1: from Animation to Sprite Sheet   /  Part 2: from Sprite Sheet to Animation