Pixel Art Animation | Simon Sanchez | Skillshare

Pixel Art Animation

Simon Sanchez, Game Designer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
7 Lessons (57m)
    • 1. Basics

      7:06
    • 2. Bouncing Ball

      9:45
    • 3. Setting up the Document

      7:27
    • 4. Idle

      11:23
    • 5. Attack I

      5:29
    • 6. Attack II

      8:31
    • 7. Attack III

      7:25

About This Class

In this class we're going to go over the basics of pixel art animation.

In this class I'm using Krita as an animation software, but all of this also applies to any other pixel art animation software.

This class is part of a pack of classes about pixel art, you can decide to take all of them (Suggested for beginners) or to take the ones you prefer.

Part 1: Introduction to Pixel Art

Part 2: Making an Item Set

Part 3: Make a Sideview Pixel Art Mockup

Part 4: Make a Topdown Pixel Art Mockup

Part 5: Pixel Art Animation

Part 6: Convert Any Image to Pixel Art

Part 7: Animate an Explosion in Pixel Art

Part 8: Make a Topdown Pixel Art Interior

Part 9: Pixel Art Animation with JuiceFX

Transcripts

1. Basics: welcome to two animation section In this finding section, we're going to be animating the character that we made in the Saviour Pretty grim section before that we're going to take a look at the basics off animating in creator. We're going to start animating a bouncing ball, a needle animation for our character. We are going to end with an attack animation for the charter. Before we start animating, we need toe change our workspace for that we're going to make and your file on. We're going to come here to this corner and change the workspace to animation. I know we have something like this on. We can modify tease a little bit. So for example, I have to color sector here and going to movies to the right on as it will options there either. Won t so again close that I want more space here actually going to move these here on. There we go. Maybe they went to make more space here. Unless you can see, we have aspired with these that it's called animation. No, we can save these. I'm actually going to move thes or like these. There you go and save these with the name, for example. Animation picks, alert, save. And there we go. No, Maybe I went toe my reus pres. It's looker. Maybe here and the through look so and changed these. There we go. So let's see what we have here so we can't layer two. So that's my coral layer. So if I which air it's also going to switch the layer on this timeline, I can keep a layer on this timeline doing greatly on show in timeline. So no, If I go to layer two, I also have the layer one on my timeline. So that's an option on you have some cells here, so each off those says, represents a frame so I can right click on breast in your frame on. If I can't this option activated on I pain, for example, a circle of here and then it means one here and then when here and here you can see it that when I play my animation, it's going toe show animation, right? So you also have the friend rate on the frame. It shows the number of frames per second, So when my animation reached the frame 24 it's going to be one second off animation, so I can change these. The 12 for example, on when it reached their frame. 12 is going to be one second of animation on when it reached 24. It's going to be two seconds, so you can see that if I can frame it off 60 the animation is going to play really fast on . If I have a friend writ off, six, animation is going to be really slow right here. You have to start on the end. So this is where the animation starts. On what frame on God frame, it ends. So if I change my end toe the friend security, for example, when it reached the frame, maturity is going to start again from the frame. 00 my star frame. So it's going to look for animation. Now we're going to take a look at on your skinny, so in green to move this friend here you can see it's keeps the other frames, but I'm going to the Littles for him. So I compress right click, remove frame on the same thing with the others. I can go be a frame person. The frame selected. It person control and 10 dragging that frame toe another frame on I've got get the frame. So I'm going to move with his friend here, for example, on going to press Islam right here. I know what you can see. I have a fade out version off my previous frame. So the frame start our fourth, my current frame Our show weaned a routine. I'm going to change the color of thes toe a blow, for example So you can notice the difference. So if you can see really strain are on the right. Things on frames that are after that are on renting on with these I can, for example, could be this frame again between those two frames on with here on then copy this one here on with their on between those I'm with their pagan ultimo frames. She was more Winton on the timeline so I can make thing betweens with the onion skinning so you can see where you have to place the frames. No, I havent to stay here show I can't reach the position of the frames. And there we go. You know, with super is here on this onion, you can see the configuration off, the only in skinning, so you have the color off the previous frame and tricks frames. You also have the 10th so the number of off color, and he will have the number of frames that are showing after my current frame on before that, on also the capacity off each frame. 2. Bouncing Ball: Now we're going to any made a bouncing ball, so I'm going to make a new layer. Got boasts above I'm going to set my size to 16 pixels Going to frame Ciro, your friend angry into pain by Paul Here on There we go. So in this section, animation is really complex, so you have a lot of things. So in this section, we are just going to go over the basics. So in animation you have 12 principles on we're going to take a look at some of them. So I'm going to copy my frame here, for example, on going to movies to my next one point off while going to activate the onion skinning on Let's see So that's my maximum point Great to make. I'm actually going to public eighties here on the With me to information through and green to press old to rece ice the's on both sides at the same time on without help and goingto make it like these. So this is basically on anticipation before it started to Sham on going to make another set . So I'm going to copy the frame. Then I'm actually going to potpie the first frame, so I don't have a lot of deformation. So the same thing again, but more extractive fishery exaggerated on. Now I'm going to compete. Look up this word again. And these form here, I'm going to copy it, and I know he's going to start to shut up. So I have something I did. But now I'm going to stretch cities. More like this could be again. And now maybe thes fun. So it gets a lot of information, and here it's going to start to stop. So I will have more friends concentrated on this part. I know I can move these frame here and now it's going to fall so I can grow thes companies here. These like that. Um, so and now it's going to get a squash again. So you end up with this one, but this one. And now I'm not going to copy this one because thes animation is going to look so when the animation and it's going to go back to this frame. So I'm going to set my and frame toe 40 for example. Alusi with this look home lady, I have a lot of frames here, so it can make thes. I think that there we go. No, we have a problem off timing. So the timing is basically the time that each frame stakes so and she's going to pull frames until the animation looks better. I can disable the owner skin on now. We should scream to work on the timing. They compress one frame, the breast chief and the less one on. I can move it there to have some space. So let's see. Maybe I want to have timeframe empty, so it's going to continue with the frame that is before on this is going to be fast. Now. I have some undulation here, so this is for because of greater. The who is called the Fielder doesn't work very good sometimes. So it's great, some undulation. And now let's see this frame. I didn't leave. Maybe I don't also need these phones so I can go straight that this one on it's going to be Were you fast? Hundreds of thes fun I know here is going to be taking more time, so we have more separation, and here on the maximum point, it's going to take a lot of frames. So maybe like these on now. It's going to fall really fast on. It's going to get squash. I'm now I'm going to end my animation at the friend 31 for some Alice ICO. It looks now. So now, as you can see, the timing is solid. Federer. Until Imation looks much more Mary know what you can do is disabled the onion skinning on. Of course, when we deformed the our ball with information tool it guess would like really ugly. So you should have toe come here, each frame on 10. Clean the lines on your grave, the same frame. So this one, for example. So you fix one frame and then you go be the same brain over the frame. There you go. You save some work and let's see how it looks. So there we go. We have some were frames there, but that's just something that you fixed with thing. Now maybe I come for some for big, darker color on, then shaved each frame. Ontario. Now we've learned a lot of things. You can add a shadow when he appreciates the floor, but we're going to leave our animation like this, and now we're going toe export this animation as again. So I'm going to say, with ease, fight before going to May, you Fuller onto rendered this animation as a give or as other things you can go to file when they're ag nation. You have the option to expertise as an image six months as a video. So you have the option toe. Render us a give that's in the trust God be with you as uh oh, she she beat you or Assad and bag video art both. But in this case, I'm just going to render as give so you might have to import or install thes thing. You have money for him, information on the Internet so you can shake that your frame per second are the same as your frame. Eight on different frame and the last frame. Don't pay attention to these. You have the file location here, so here, bones melt except on is going to win there. It's animation, but in my case and cork and working at 100 pick sells for 100 pixels. So I want a bigger gift so I can go to image scale image to new size. So, for example, 1000%. That's going to be 1000 pixels for windows and pixels with the filter box. Can't because of the same thing again. File. Render automation until we go. So here I have my GIF. It's also great. And some other fights, for example. Ah, palette with my colors. So let's see how they give looks on a student. See, here we have the GIF. 3. Setting up the Document: So I opened my side view of the green market because we need the tractor before extract mint character and going to add some and shortcuts to the animation. So I goto settings keyboard Strayer cuts on Dhere on animation and going to set some shortcuts. So, for example, and going to use the point for the next frame reassigned on the coma for the previous frame and now going to use shift Boyne for the next GIF ring on She's comin for the previous GIF ring. Now let's see what else I'm going to use. For example, Condra shift felt and toe on your frame on Contra plea contract E to play or a stopped animation know the difference between a frame on a key frame. So the key frames are when you have a modification, so the blue boxes or the light boxes on the frames are the key. Frames are also getting close the frames without any modification. So in the rectus, with point and coma on chief going screened to go to the key frames, so contributes play, Andi, concern chief. And to add a new key frame. So now we're just going to strike my charter so I can save you everything but my character on they can come to the layer of my character. Goto a mash Dreamed the colonel layer on There we go So I can go to file expert expertise Teoh right, Animation going to make on your folder for the character in the nation. I'm going to save these as a paean sheet with the name off character. So I made. Then you took him in. Now in going to import my charter kind of me with here, I'm also going to flip it like this on. There we go. No, in this layer and going to college polit going to rename my backgrounds on Block it on my palette. I'm going to make a pilot with all the colors of my character. Great to start with the old name goingto actually replace that color there. There we go. I'm now in going to make a bullet. So there we go. I'm also going to add a dark old length my palate. There you go. So there we have the palate and green to Maria there. I'm now I'm going to the lead the old line off my charter because I find it issued to any made without the old line going to set May 1st seen used to zero. There we go. And now I'm going to faint back my eye on going toe. Save this. And now we're ready to start making some things and going to start with changing the color off my background toe one where I can see my character better. I'm also going to add another shortcut for show in time lead so I can use for example, aunt s on. There we go so it can look me palette and major and background. And now I'm going to separate each part of my character on its own layer. So I select each part country X golfer be on the same thing with all the parts. So in going to name each part. So I have to head deal. If this is the right arm now I'm going to rearrange my layers. So I have my swore like that on the arms are above this world. So I'm going to move the layers off the arm about this world, um, the right arm it's going to be have off the head, So the legs and it or so. So that's fine. Now I'm going to make a group with this. So charter on green to show thes on the same lane so you can go Oops, right click show in Timeline. But in case and green to use, make sure coat that he's as s seems like my shortcut isn't working. So I'm just going toe go here on show in time until we go. Maybe one more space year on is done. So in going toe duplicate my group going toe and disabled this group. I'm going to name thes people animation, so I'm going to have a group with each animation. 4. Idle: So we're going to start with the evil animation I can select. There's from here on going to make a new frame for all the layers. Actually can create a frame for all the layers, so shows your friend on. If you create a new frame is going toe the late the content of your layer you should express council said on its back on. There you go. You know, maybe if you duplicate the group, you will also have in time light there layers off your sable group. So you just have to enable the group and then disable show in time. Right? So we're going to start making the little animation. So for that, and going to select each layer on going to click this pattern to create and your frame now , when I make a new friend is going to lead the content off your layer so you should press control. Set the goto, add it on. Do I give frame? It's going to keep your different but is going toe and made the content of your layer come back. So you select each layer. Ontario. Now I'm going to start with deter social, so I'm going to sable or my layers on may be I want to bring thes feel days so and then she's going to select like tihs um of thes When k one a key frame. I mean, when pixel down, I'm also the world layer one pixel down. So now with that, I am also going to sell a my left leg on select move actually needs to make these in your key frame. So I'm going to grab on my key friends on, duplicate them so and here and bring tomorrow my thirst. So remember to select your layer like so Now, the left leg. Something like that on the same thing for the other leg. Now you can feel this on Nelson Starsia fixed these now and green to duplicate again on going to move the arm on this world when defrayed one pixel down Sorry. And going to duplicate again on now in this crane in this key frame, I'm going to move my head one pixel and going to select my left on this part on my right inspired a movie sound also this word. And now I'm going toe pick some pixels on the arms on the other arm. I am going to obligate again. I know my cat. Maybe screen to come back, come down one pixel more on the X frame and she's going to duplicate the frame off the torso on the legs. So is going to come up again. But those parts are going to be down. Let's see what we can do. So maybe the next train. I can move my arm on this world at a month and my share on with the head office of the arms and this war on the screen to go back like that, something going to set my and frame toe care to six. Alice, See how this looks. Now I'm going to fix some timing, so I'm going to move off Thes more clothes. So H three frames and going to cab a differing, for example, so and at frame. So let's see. I can make you framed 21 on my need to frames off separation so my end is going to be at the frame 23. You think on may be a want when we're frame here, so going to select off those frames on with when frame like these. If they can. And my fan? No, it's the frame 24. I have a pixel to fix their. So there at my list arm to selectively here on its. So here I hear on my torso. Actually, no, that's fine on I also have to duplicate the same frame where I made some modifications. So there. And there we go. No, we can make a new layer for the old line. So limits line, click, show in timely. Um, your friend. I'm just going to paint the old lane on each frame on something like that. No. Maybe I have to fix some things. See, now we have some transparent big Selves in some frames, but the colors off my legs are too similar to the colors of my background, so I cannot dictate them that easily. So think issues changed the color or just make and you layer So the take transparent pixels with a real exact directed color like these. And that way we can attack missed aches. So, for example, here I need more all night on. See, I need to make things on my only layer thes on. No, on my right leg. I have the fix on pixels, for example. There I'm there on I can settle this there. So, like a real empties. Let's see, how are either animation looks so it looks something like this. Now, of course, I make these really fast animation also takes a lot of time, but does basically who you make on either animation. Now I'm going to export these animation, but I'm not going to export it as a gift in this case and going to export it as expression . A spreadsheet is basically one image with all the frames off animation on that was used in a game ancient when you want the import on animation for to the character or something that has to the nations. So I'm going to the several those layers, and now I'm going to go to file render animation a much seconds. So my star frame on thean frame s opinion, she, um Let's see and going to make a new layer called Kill um goingto export it on. There we go. So, no, If I come back toe that layer toe this father Sorry, You will see that we have all the frames on its own image on those frames. Also, cause I got off empty picks is around them on with a wonder if you remember on the item said section we you said a tool to separate each of them on its own image. That was called shoe box. So I can select all those image. I can come here to shoot books, toe the animation section on Look then inside the friendship. And that's going to create one image with all the frames. And it's also going toe grab their transparent pixels. So I construe express say, I'm here. We fell. They're spray shit. 5. Attack I: and now we're going to make the attack animation. So going to this able to show in timely for those layers. And now I'm going to duplicate this group. Andrea Name, meat attack. I can disability either croup. I can't believe the old line. And now I compressed show in timely for it in your grill that angry into any mate. And now I can't believe those friends because I don't need them on. I could start working on the attack animation. I'm going to make a new layer with the city down on going to plan the arc off the movement off my squirt So into skate mice war is going to come by a little bit. So which going to have on anticipation and that Anthony is going to come something they this up on green to Merrick. Each frame we have with color, for example. So I'm going to have a frame here. There were here of here on thin here again. Wait another quarter, for example, like a market. I'm just going to start having more separation between frames and thats going toe make animation look a lot faster. So if we have more frames in one part, that part is going to take more time. So if I can't frames with more separation between there, big cells is going to look fester. I know here is goingto be a little bit slower and because I need to look, this animation is going to come back to dispose. So with another color, I'm going toe thesis work. Come back like this. I'm here and there we go. So this is going to relieve the bat off my swore I can't several all the layers about this war on. I can start animating this work but fears and green toe faced. So let's see, angry into the placate my fear frame, I'm now going to rotate. It's worth a little bit. It's going to get really far. Don't worry off that, because we're going to do a cleanup section actually in a position after we finish with the vase movement created to placate bass player and I really date that, and now we say it's going to come back the steel frame Andi, then going to be really fast and go here. You can actually use my thirst conf ends, scream toe, rotate around here, and then there can use the onion skinning three go. I know it's going to come back down, though like that, so we have something isn't going, Toe said. My in friends that I'm now I can fix the timing a little bit. Those friends, when it goes really first, then he's going to get a little bit slower. I'm really fast again, so we can say And now I can start animating, for example, the right down so I can decide with the owner. 6. Attack II: so I can t 70 onion skinning for this world. Unknowing going to duplicate here on issues Need more My arm were my for peace. So there no duplicate again Fix it now we need to rotate me. Everything is need to fix these on. There we go. You know, I'm going to animate the other arm, so let's see it. The movies are here now even more something back so I can activate me torso to see what I'm doing Now at this point, the left arm is basically behind it or so. So maybe I can move thes I think so Hung off this part. Something around here on fakes a little bit now. I don't thing here going to see my left arm so I can believe these announcer here. Let's see. I'm of this year on like this. No, my arm Here. There we go. No. Maybe when I come here, I can move my thirst When praying to the left. I attended comebacks. I've here maybe goes up a little bit somethin back again. Maybe a little something is friend No, let's And maybe share. That should be easy. So in this frame, I need Teoh, There was a babysitter. Live it on before is, of course, of off their head in this part. So is your screen toe eight the frames there and then believe this part off this world. Ontario. I'm here. You have our that big. So, um, then the same Proclivities. This that's fine. This one goes here. You know, maybe when my torso goes at one basil, I can answer Move my Caroline pixel, I was that going to need to fix some things. So in these a fix everything There you go. Now let's see the legs. So when my door circles that going to extend this leg And when it comes down back to here on the other leg on the other leg I need the US Big Sal's going to activate Miss Transparent layer fixed there Terrible of Carson making all of the's really fast shoes to show you the were felt that I have when I make an innovation But you should really take a lot of time to fix off this. So the timing on from pixels and so on. Now let's see how this looking it's looking like an attack Animation on. That's good so I can disable the bad. And now I'm going to take some time to fix the pixels off. My swore when I rotate on. There we go. So let's see. So we are having something like this now. Here were my torso. He's coming down a little bit. A one. My leg today on dancer, the other leg. The same food. Let's see. Have a little bit of an issue here on this leg on. They may want to move my kids with the torso here on. There we go. 7. Attack III: Now I'm going to make ah new layer and going to name it if flush under my palate and going to have to actually warmer color. That's going to be a really strong science color like these, Um, I actually going toe another color. That's going to be I really liked science. Thanks. So So let's see. Two different with increased from It's not that different. So I'm actually going to use these particles now here going to make and your frame on with this flesh. I'm basically going toe and have the movement off my Schwab recorded so I can enable the the onion skinning on mice work ongoing to people The work with this so you can come here if I have this button enable if I have a frame and I paint is going to create a new key frame. So as you're screwing to trace the movement off that this work has from my previous frame toe my current frame. So something like these and then I need more like thes here. Then it's come this way, so agreeing to cover the flesh on the other way. I know from here going to have something more like thes. So with the car events, in a point, I'm from here now it's slowing down, so it gets shorter of here on. Now it goes three other way. So I go like these. I've got some legs like these again, this activity on and screaming on the Seiko that's looking. And as you can see it, animation now looks much more interesting now with my later scholar going to make some gain off a grabby in. So from leg dark, No, here can't a problem. I ate the fix that. So there we go. Everyone's sixties here, there were you. And now we're going to have to be overly so the same thing. Olein showing timeline Also the same thing for the flesh showing them like And this may be the only on there we go. We have the olein animated on. With that we finish it our attack animation. Now, of course, these animation, because that are Frohman on. If there's an ization problem on that, is that the? But that is where follows is is making tea Church there helped to attack with the arms. Really date, Right, So maybe you have to make this bad and the rivet More like thes. Right? So the directors can expand the armed Saleh smart. But you you know, you learns from mistakes. So there we have the information on. Now we're going to export it. So let's several days file expert burning to make you folder for the attack information. Actually, explain that and run their information in my sequence. The and everything looks fine. Let's see the truth. Their destination back. Here we go. So we select anti frames Director, Shoebox frame. Shit. Save on there. You No. Maybe to see if I have some setting fear settings. There were All right, So maybe if I makes that with big here play. There we go. No, we have all my friends on one row. I can't read this. And here we go. In this exercise, you we have to make an attack on evil animation For your character. You can if you want bank more animation. For example, our excitable please post your salt intake. You're in a section of the car so I can give you feedback Thesis t in the stand. Imation section on with the section we are at the end of the course in the next conclusion . Video with talk about what you can do next to creep improving So I receive you into Xperia by