Aseprite Top Down Pixel Art Shooting Animation for Unity – Tutorial


What’s up Game Developers? CouchFerret here, and today we’re going to
draw and animate our shooting animation in Aseprite. We’ll draw it in all 8 directions to make
smooth turning transitions. If it sounds fun, then stay with me, and consider
subscribing so you won’t miss any future videos of this game. Cool, let’s begin! I’ve decided to have 8 directional animations
for aiming, instead of the 6 directions we have for the running and walking animations. The reason behind this is that with 6 directions,
there are huge gaps between rotations. When we shoot arrows it would look odd that
the archer’s animation is facing in a completely different direction than the arrow’s movement. Let’s start with the frames for all directions,
where the bow is fully drawn with an arrow. Later, we will fill out the rest of the frames
of the animations. I’ve separated the body from the rest of the
parts like the arms, bow, and arrow. Now, let’s lay down the bow. After that, we need to draw a horizontal line
which will be the arrow itself. Pick the color of the face, and put a pixel
on the bow where the hand would hold it. To make the arrow be a bit more recognizable,
let’s have a white pixel at its tip. This will be the arrowhead. Okay, let’s draw the other arm, which will
pull the arrow. We need to use a darker shade when we draw
the arms in front of the body to make them distinguishable. That’s good enough! Because the bowstring is kind of narrower
than 1 pixel, we need to give it 50% opacity to make it look like it’s very thin. It’s easier to just have it on a layer of
its own and set the layer’s opacity to 50%. We are done with the AimLeft frame. Let’s continue with AimLeftDown! When working in pixel art, it’s highly recommended
to use perfect lines as much as possible. Perfect lines are the lines that don’t have
ugly breaks in them and your eyes can follow them without difficulty. The 45 degree angle’s line is a perfect line,
and sometimes they call it the 1:1 line, based on the `y` and `x` coordinates. But other perfect lines exist like the 2:1
and 1:2 and of course the 1:0 and 0:1 which are the vertical and horizontal lines. Okay, let’s redraw the bow based on the arrow. Then, let’s adjust the string as well. I’ve tried to lower the arm, but it doesn’t
look good if it isn’t in line with the arrow. Now, we can continue with AimDown. This one is easy because not a lot of stuff
is visible. We can only draw the arms, and that’s all. Mirroring the AimLeftDown, we can easily make
the AimRightDown. The same is true for the AimRight also. We are done with the front facing frames. Let’s do the back facing ones! Drawing the arrow, the same perfect line thing
applies here as well. The AimUp is just 2 pixels, so that will be
fast. And finally, let’s mirror the AimRightUp to
get the AimLeftUp. Now, we are done with every direction. How cool is that? Okay, let’s spice things up by animating the
directions. Let’s copy the frame, and change the bow to
have less tension in it. We need to move the arrow a bit forward because
it’s not yet pulled, and adjust the arm to it. Let’s make the string a straight line. It looks cool! But we need one frame between them. I’ve planned to have a short animation for
releasing and shooting the arrow. Probably this will end up being a separate
animation in Unity, but for now, let’s draw it with the rest. The arm should jump back, the arrow should
disappear, and the whole bow should lose its tension. Perfect! Let’s copy it to the other side to get the
AimRight animation. From now on, the rest of the animations are
trials and errors. Modify it until you become satisfied with
the results. It’s a bit tedious so I’m fast forwarding. Okay, I’m back and here are the final animations. During the process, I went back to redraw
the bow in the AimLeftDown and the AimRightDown animations. I wanted to emphasize the bow’s tension change. I think it ended up being pretty good, so
let’s export it as a sprite sheet to use it in Unity in the next episode! That’s it for today folks! Next time, we will use the exported sprite
sheet in Unity to make shooting animations with a Blend Tree. We will be able to run and shoot at the same
time. So be sure to subscribe and leave a thumbs
up! If you have any questions about what you have
just seen, feel free to ask and I’ll try to answer all of them. See you next time!

4 Replies to “Aseprite Top Down Pixel Art Shooting Animation for Unity – Tutorial”

  1. Hey everyone! 👏 👏
    I'm happy to announce our community Discord server , come and join us : https://discord.gg/dac7sr2
    And also, you can get all the Sprites and Project Files by supporting me on Patreon : https://www.patreon.com/CouchFerret

Leave a Reply

Your email address will not be published. Required fields are marked *