Friday, 13 November 2015

Spriter Pro and GameMaker

Well, the last two posts were about old retro stuff for now, this one's more about the new things. And back to game development, too. Lovely, shiny, new dev stuff..

A few weeks ago, I got a copy of Spriter Pro cheap from Bundle Stars. In the last couple of days, I've had a chance to play around with it a little. Spriter is a 2D animation program, aimed at game developers. I've managed to make a character and animated it walking, so I'm going to use that example to give an idea of how Spriter works.



First Steps in Spriter

It should be noted that Spriter is NOT an art program - all the art assets you need will have to be created in other software. In my case, I used Photoshop. To tell the truth, Illustrator (or something else vector-based) would probably have been better, but my old CS3 version doesn't play nice with Windows 7 and keeps crashing. Luckily Photoshop's path tools were enough for me to get some basic assets ready for use with Spriter. So this is what I made:

Sorry, bit of a big image there..


Now, the reason I didn't trim that picture down was so that you could see the Layers list on the right side - each element of the character is a separate layer. Spriter needs individual parts to animate - you can't simply import a picture of a whole character and properly animate it. Creating each part as a separate layer in Photoshop meant that I could easily isolate and export it as a .png file, ready for Spriter.

Here's some of the actual .png files:

Head

Neck

Chest

Torso

Pelvis
(I didn't upload them all, those should give you the idea)

So once all that's done, you start a new project in Spriter and start importing the parts. If you've set things up in the way that their (easy-to-follow) tutorials suggest, this is pretty easy. You drag and drop each element and set their pivot point (the point around which they rotate). In my case, I was basically recreating the Photoshop image that I'd started with:

I should call him Humpty Dumpty after putting him back together again

The next step is a little more technical. If you've ever rigged a 3D model for animation, you'll be familiar with this - this is the same thing but in 2D. On the other hand, if you're new to character rigging, this is going to sound pretty weird...

You have to create a "skeleton" for the character out of "bones". It's all virtual though, so it's not as morbid as it sounds. Here's the skeleton for my character:

A skeleton, several hours ago.





Each of the bones corresponds to one of the elements we made earlier - one for the head, one for the neck and so on. You also have to define a hierarchical relationship for the bones, which sounds complicated but really isn't. It's basically a way to tell Spriter that when I rotate the top of the arm, then the bottom of the arm will also move, because they're joined - however, when I rotate the bottom of the arm, the top part won't necessarily move. This is because, in the hierarchical relationship, the top of the arm is the parent and the bottom part is the child - a child can rotate without moving the parent, but moving the parent will move the child.

It's probably harder to explain than it is to actually understand in practice. Those tutorials explain all this stuff probably better that I do.

Anyway, once you've made the skeleton, you then assign the images to the individual bones. For example, you assign the head image to the head bone, the neck image to the neck bone and so on.

So here's my fully rigged character, showing the individual graphics and the underlying bones they're attached to:



That's all the preparation out of the way, then comes the fun part - animating the thing.

Spriter uses keyframes. Keyframes are brilliant. Lets say that at the beginning of your animation, the head is looking up. Then, 200 frames later, you might move the head so it's pointing down. A keyframe will be created here with the head in the new position. The magical part is, Spriter will then generate all the frames between the two positions so that it animates smoothly. In the image above, there are only 4 keyframes - that is, there were only 4 times that I had to adjust the character's position. Here's a .gif of the final animation in all it's glory:


I reduced the size by 25% of the original


The .gif itself is actually a little ropey, I just did a quick export 'cos I wanted to give an idea of what the animation in the pictures above looked like. You can export with more frames, transparent backgrounds and all that fancy stuff if you like.




Spriter in GameMaker

Thankfully, the .gif isn't the only means of export. You can also export sprite strips - kind've a big graphics file that shows all the frames on one page. At the moment, this seems the best way to get your animation into GameMaker, although BrashMonkey, the makers of Spriter, say that a dedicated plugin for GameMaker is on the cards.

I created a little "game" in GameMaker just to experiment with and, with a bit of googling, I got the character to walk left and right on keypresses. I should also say that I created a quick idle animation as well, just so I could test the scripting a little better. Here's how I did it:

The first step was to export the animation as a from within Spriter using the "Export Animation as PNG/GIF" option in the File menu:

Note the output file is set to sprite strip - and make a note of the number of images!


I won't show the output itself as it's a pretty big file (77x6000px), but think back to those old movie projector reels where you could see individual frames if you held it up to the light - that's more or less what a sprite strip is.

Next, in GameMaker, you need to make a new sprite (s_PlayerWalkRight in my case), then click Edit Sprite. Under the File menu, you now need to choose Create from Strip. Select the animation file you just exported from Spriter and you should see something like this:





Some of the information that GameMaker asks for will have been shown in Spriter's output dialogue box, such as the number of images. Images Per Row will be 1 (as the sprite strip is basically a vertical strip of frames). You may need some basic maths for the image dimensions - the width is normally ok, but if you're not sure, hover over the file in Windows and it'll tell you the dimensions. For the image height, just divide the height of the file by the number of images.

Next, duplicate the sprite, call it something like s_PlayerWalkLeft. You can flip the sprite image horizontally from within GameMaker (Edit Sprite > Transform > Mirror/Flip).

As I said, I created an idle animation as well, so I imported that the same way as the s_PlayerWalkRight animation above, called it s_PlayerIdleAnimRight, then duplicated and flipped it, with the result saved as s_PlayerIdleAnimLeft. So I now had the following sprites:

s_PlayerWalkLeft
s_PlayerWalkRight
s_PlayerIdleLeft
s_PlayerIdleRight

Time to create the o_Player object. I created it without a default sprite, as the scripting will handle sprite assignation. Now create a Step event and add the following code to it:

if keyboard_check (ord('D')) {                  // if 'D' is presed...
    sprite_index = s_PlayerWalkRight;           // Change the sprite to the walking RIGHT animation...
    x = x + 3;                                  // and move 3px to the right
}
  
if keyboard_check_released (ord('D')) {     // Then, when 'D' is released...
sprite_index = s_PlayerIdleAnimRight;       // Use the right-facing idle animation...
x = xprevious;                              // and stop moving
}


if keyboard_check (ord('A')) {                  // if 'A' is pressed...
    sprite_index = s_PlayerWalkLeft;            // Change the sprite to the walking LEFT animation...
    x = x - 3;                                  // and move 3px to the left
}
  
if keyboard_check_released (ord('A')) {     // Then, when 'A' is released...
sprite_index = s_PlayerIdleAnimLeft;        // Use the left-facing idle animation...
x = xprevious;                              // and stop moving
}

And that should be enough to get you moving left and right. You'll also have to make a Create event and put the following in the code, or he'll start off invisible:

sprite_index = s_PlayerIdleAnimRight

I've no idea if its the 'proper' way but it works fine for me!


Spriter: Verdict So Far

So far, I'm really enjoying Spriter. It's pretty intuitive and when I get stuck, there's always the tutorials as well. While I have some basic experience of animation, I am not in any way an expert, but I managed to get a basic walking character with a day or so of work. To tell the truth, most of that was in Photoshop rather than Spriter, cursing the fact that my Illustrator wasn't working! The actual importing of images into Spriter, creating bones, assigning images to them and then animating - that was all pretty pain-free.

It may be that in time, as I work more with animation, I may come across limitations of the software, but I imagine that'll be quite some time in the future. I bought Spriter when it was on sale, but after trying it, I think it's actually well worth the full price - $59 / £39 (not a referral link!). For someone like me, who has so far stuck to static or very minimally animated sprites, it means I can actually create something halfway decently animated, in a short amount of time. Given that the alternative for me is basic to non-existent animation or struggling for days to make something decent, I think it's definitely worth it.

Edit 18.11.15 - changed the code around a little after some testing

No comments:

Post a Comment