Video made and edited by: Gloria Lee
Music made by: Albert Mayer
Animation created by: Tony Nguyen
by tvn5142
Video made and edited by: Gloria Lee
Music made by: Albert Mayer
Animation created by: Tony Nguyen
by tvn5142
by tvn5142
by tvn5142
As we are coming to an end, I want to show you what made it possible for our “gameplay” video.
The video was a large group of gifs and PNGs compressed into an AE file. Once that AE project is done, it is imported to Premiere registered as a media form. As you can see in the image above, the GIFs have a specific time to show. It creates an illusion that the game is interactive and functional.
The UI is basically PNG images that are placed in front of the video. Of course, the UI is made differently with a specific amount of heart and lives.
The gifs were made in Aseprite. Each layer has its own specific purpose for me to use in the After Effects project. The black labeling in the image represents the gif that will be exported. For example, the Running tag will be exported as Running1 with frames 3 to 6 and the Falling tag will be exported as Falling1 with frames 7 to 16. This is a mundane process but still gets the job done.
Thank you so much for reading my blogs!
The final video will be uploaded to site soon and hopefully, you will enjoy it!
Have a great Christmas break!
Tony
by tvn5142
I finally finished the sprites! It was quite fun and satisfying with the results it came out as. As you can see, the sprites that I did last was the monsters’ deaths, the player bouncing from a wall, and the strong attack. Even though they are four (five if you count both Patient Zs) death that I had to make, they were the less stressful animation to do. Both of the player’s sprites were the most difficult because I have to start it from scratch, mostly.
I got to admit, the strong attack looks very nice in the result. I had to compromise the number of frames to be less tedious when it comes to animating.
Speaking of animating, the next and LAST blog will be unedited scenes that will be shown in the video!
See you then!
Tony
by tvn5142
Having to learn about the pixel animation world is one to enjoy with pain and suffering. In other words, while you may like doing animation for a while, it gets banal and tedious in the long run. So, this tutorial will demonstrate how that may become to fruition.
So the first thing that you want to do is open a new file. Decide on your layer settings and whatnot. If you don’t know what about layer settings, I made a tutorial/guidelines for it.
Once you have your clean open canvas, you have an option to start out fresh with your sprite or have some sort of reference. You can easily paste a reference image by using the standard CTR+ C and CTR + V. The other option is using a reference layer. In my opinion, I can’t find a better use for the reference layer other than it creates a layer with the reference image for you. So, I just stick to the old standard CTR way.
Once you have a reference layer, or not, you going to start making your line of actions using the layers on the bottom. Again, if you do not know what are the layers/frames on the bottom do… look at the guidelines.
Line of action is the movement of your sprite in the simplest form. Usually, this step can be done with lines, but if you’re an advanced animator, you’re going to use more than just a few lines with more fluid frames.
Once you start having your first line of action, you are going to need a new frame by pressing ALT+N.
Once you did create a new frame, it will actually duplicate the frame you used before. I’m not sure about any other methods that can make me create a clean frame instead of a duplicated frame, but this will have to do. You can easily fix this by clicking on the frame and deleting the frame layer.
Now, you going to need to draw the second frame of your animation. But you don’t need to have to go back and forth layers to see what you have done last time, because Aseprite has the onion skin feature!
The onion skin will give you the advantage of seeing the past frame and the next frame. You have the option to make it the default black or make it red & blue. Personally, I use the red and blue because it gives a better contrast to which one was the past and the other one is in the future. You are going to use this until every frame is finished to the end.
I’ve ended up with a mere 7 frames. Even though there is barely any animations, the motion itself is too quick to count.
As you can see, the blue indicates the future frame and red indicates the past frame in a very quick motion. This animation indicates the monster is digging into the ground.
Once you finished your set of lines of action, the next step is to color it in! Coloring it is somewhat the most difficult part of the animation. After all, you’re doing this frame.by.frame. So, you have no choice but to tolerate it. The only shortcut you may do is duplicating frames and do a little bit of transforming.
This is the method I tend to do time to time, depending on the condition, because it saves A LOT of time.
Since I also do outlining, I have to do this step with every frame and cannot copy and paste the lines because each frame is different. Everything is due process… Fortunately, using the mouse with the line tool essentially helps me with the outlining so I don’t have trouble with the technicalities. Rather, its an abundance of being annoying.
Aaaaaaannnnd that’s about it! Fortunately for this current sprite, I didn’t have to do much besides outlining and transforming here and there.
As you can see, I do label each limb so I can get a better view of what needs to be moved and how it needs to be moved. If you look at the “Ground” layer, Frame 1 to 3 is using the stable frame option. I use this because the ground didn’t change until frame 4. So, if I need to have the ground changed, I can do it with no hassle besides Frame 4 to 8.
Also to note: Frame 1 to 7 lasts 50 milliseconds while Frame 8 lasts 500 milliseconds. I did this to give a better understanding that it can stay underground and it quickly digs when I present this sprite. If you don’t remember how to change the frame duration, just right-click the frame and click frame properties. You will see it there.
That’s about it from this tutorial! I hope you have learned that Aseprite is not a complicated program. Rather, it is a more simple tool created with the purpose of making pixellated art. By no means that I am saying that pixel art is easy and simple to do; It can be possible to make pixel art very beautiful if you can make it that way.
Good luck with your sprites!
Tony
by tvn5142
These three attacks will be the three-tap animations when the player starts to fight the monsters. The jump will have the same animation but will have a different leg pose of course. Now, the character should possibly have a strong one hit but I haven’t made it yet.
Hopefully, I will finish all of the monster’s animation skits that include Tiflo’s attacks and every single monster’s death animation.
Look forward to it!
Tony
by tvn5142
The movement for the player is now finished! The next animation groups I have to make for the player are the attacks and bouncing off walls. It will be a repeatable three-tap attack and will have the same animation during jumping.
The frame consistency on this is odd and I am aware of that. The reason for that is because the frame duration cannot be altered for a different set of frames. Frame one has an absolute frame duration and cannot be unique to a specific frame layer. Fortunately, that really doesn’t matter to me when it comes to animating frames because I’ll be using Adobe After effects.
The next blog will be the same thing. Fortunately, I am on Thanksgiving break, so that means I can do a lot more progress than I did when I was taking classes.
See you next time!
Tony
by tvn5142
So far, I started to make another one of the monsters in motion. This one will not have a walking animation because it’s ability requires it to jump. I put the acid spit separate to help me animate it better when I start making scenes.
I got to admit, the jumping took me a while. But then again, it pays off for how it smooth the animation is!
Next week will be another sprite’s animation or two.
See you next time!
Tony
by tvn5142
Now, I am in the process of animating all of my sprites with their intended purpose. In all honesty, I didn’t expect that the walk cycle was going to take this long to make. I am glad that it is finally over just to be shown in the video for like five seconds.
The punch is obviously the attack frame. I still need to figure out the frame durations for each one because Aseprite doesn’t cooperate of having multiple different frames with their custom frame duration.
I will make the best of it with the rest of the monsters and show their true ability.
Thanks for reading!
Tony