EliteZeon's Guide to Making Animated Battlers

Discussion in 'Non-Maker Specific Tutorials' started by EliteZeon, Apr 27, 2017.

  1. EliteZeon

    EliteZeon Third-Rate Noob Veteran

    Likes Received:
    Jacksonville, Florida [USA]
    First Language:
    Primarily Uses:
    Ello there everyone, I am here to attempt to teach yall how to make an Animated Battler for your RPGMaker Project. Wooo!!!

    In a few easy steps and about an hour or more of work, this tutorial aims to give everyone a chance at making their own unique battlers!

    Today, we will be covering the basics of making your base sprite, and then giving them a looping idle animation. If this becomes popular enough, I may move on to covering other poses with sprites and some other tricks I have learned during my time with RPGMaker.

    You may be asking yourself, "Who is this Third-Rate Noob that is trying to teach me a thing or two about sprites and battlers?"

    My answer, "I'm glad you asked! I'm nobody, I am just a Third-Rate Noob that thinks he is able to teach a thing or two about spriting and animating battlers. So let me show you what I do know!"

    Here are some samples of my work to try and convince you I may know a thing or two.
    [​IMG] [​IMG]

    "But EliteZeon-senpai, those are static!"

    Yeah I know, I just wanted to get my foot in the door.

    [​IMG] [​IMG] [​IMG] [​IMG] [​IMG] [​IMG] [​IMG]

    Interested yet?

    Ah, looking at that silence, looks like somebody's in awe! Or because I decided to stop typing up a falsified response for what I think viewers may be thinking. Well, with that lets get started!

    Step 0 - Tools and Conceptualization

    First thing's first. You can't bake a cake without an oven. I mean, you probably can, but it may be more difficult. What do I know? I am a Third-Rate Noob. But what I do know is that you will want a somewhat advanced program to get started. Most of us are cheapskates, so I'll toss over some Free Programs and tools I do recommend.

    #1 on the list is: GraphicsGale FreeEdition
    Google it, Ask Jeeves it, talk to your old Neighbor about it, use it. Ah hell, I'll link it:

    Graphics Gale is a program I use for ALL my Battle Spriting Needs. I'll be getting in on how to use it soon. But other programs will work well.

    #2 on the list is: GIMP
    GIMP stands for Graphics Interface Manipulation Program, and it is a free program! I'll be honest in that I don't use it anymore, since I have access to Photoshop Elements, which came free with my tablet. However, it is what I used to get started in my earlier days of Digital Artwork, and I believe it will always uphold a strong name. Now the main thing you will want GIMP for in this tutorial is creating GIFs to show off your finished animations to your friends, family and dog. Also, GIMP will be used to create the finishing steps for transporting your Graphics Gale product over to RPGMaker.

    #3 on the list: Mouse and Keyboard
    I technically said you needed some tools, so here are some physical ones. Now a mouse and keyboard are relatively difficult to-
    Oh most of you all already have one... alright, wonderful!

    So lets move on to conceptualization

    So what do you want to build? Do you want to build a snowman? ♪ Do you want to build a golem or human fighter? Well, personally I like having this decided beforehand, try sketching out some ideas for your battlers. You don't even have to scan them! Just try to have something down to use as reference! You can even just toss up a sketch in your PC. Or you can just come up with things on the fly and come up with something unique and interesting. Or something crappy... but that's ok!

    Ah look, these series of sketches has concept art for the Golem Battler that was posted earlier!

    You all itching to get started? Don't worry, me too!

    Now, the image examples are going to be much less frequent, so prepare for walls of text. Okay, I see that look on your faces. You all want to follow something visual along, perhaps even with a full demonstration of everything and commentary.

    Well that sounds like a lot of work... so I did it for yall.

    Mom get the camera! I'm on Youtube! Oh! Ahem...

    Step 1 - Rough Pixels
    From here on, I am going to assume you are using GraphicsGale to do your sprites as this tutorial revolves around that program for ease of use

    First thing is first, open up your preferred program and make a new file. In RPGMaker VXAce I believe battlers are preferred to work in 32x32 derived sets. Basically, get a file and make it at minimum 32x32px. My recommendation to start off with is 96x96 or 128x128.

    You will start with a small box filled with white. Find your Zoom Tool and zoom in about 400% so you don't strain your eyes. Turn on the custom grid for 32x32 so you can find the center of the image.

    Pick a background color and fill your first layer. Any color will work, but avoid Black like the plague! It will give you headaches, trust me!

    So with your new layer, open up the Properties and select your background color as your transparent color. What you need to know about your new background color and transparent color, Your selected transparent color can never be used for the battler design, as this color will be used to erase pixels and will be set up as the transparency color in RPGMaker.

    Rename Layer 1 as Background and leave it there. We are going to duplicate this layer and begin working on top of it. Rename Layer 2 as Construction, Concept, etc...

    Find a color, any color and then just start rough sketching and shaping your creature in.
    This step follow the 0 second mark to 3 minute mark on my video.

    Step 2 - Layers and Layers

    Once you have a rough idea in check, make a third layer and make sure it still has the same properties as your background. For the most part, the easiest thing to do is to duplicate your background layer and keep working from there. For the easiest animations, you want to build a separate layer for each individual cluster or body part.

    Want to know what I mean? Lets go back to this battler image of Akara:
    This 4 frame animation has six moving parts. That's right, only six parts! Here are the layers in order from top to bottom:
    Layer 1: Free Hand - This is her hand that is being held up near her head!
    Layer 2: Body - This is the main body alongside her head
    Layer 3: Lightning - Sword Magic
    Layer 4: Sword Hand - This layer is her right hand holding the sword, along with the blade itself. Notice it is under the Lightning Layer, so the magical lightning appears ABOVE the sword.
    Layer 5: Legs - Boots, Stockings, Leotard
    Layer 6: Cape - This is placed under everything, so it appears behind her legs. It is the tails on her coat that are swaying back and forth.
    Layer 7: Background - 128x128 pixels of solid color

    I generally just make the layers as I go along, this will also be where the bulk of your work goes into. I generally like to start off designing the head of the battler and working my way down. Sometimes I start with bigger blotches of color and start "carving" in my designs. This aspect may get really technical, so my video covers this for a whole hour!

    Things you want to keep in mind, whatever you want to appear above everything, make sure it is on the top layer! While things that are behind everything, you place it on the lowest layers!

    Basically, work on each body part on a separate layer, when it is on a separate layer it becomes easy to manipulate. The main downside of this part is that you may accidentally work on a different layer than intended. But once you get the feel for things, animation becomes EXTREMELY EASY.

    Some other tips, for shading, I make a new layer on top of everything, set the opacity to about 20% and use black and white to denote light and shade. When I merge it down with the layer it affects, and I get a little gradient of color I can refer back to!

    "I'm static but I have multiple layers!"

    Step 3 - Animation

    Now once you finish your static battler with all their layers, we will make a new frame of animation. Look for the film-reel icon in your GraphicsGale Program and Duplicate your static Battler! On your bottom frame lists, click on the three dots for the Frame Properties, and call your first, original frame Idle 1. Meaning Idle Animation 1. Your second frame will be Idle 2.
    Ok this is hard to explain via text alone. So here is an image:

    Duplicate your first Frame with that button boxed in Red. Follow the arrow to the Properties Button which appears as " . . ." Then set the name of your Frame from here. Set the Delay of the frame to be 1/60sec with 15 as your number. This means a 4 Frame Animation plays out in about 1 second!

    From here, you take your Layered Frames and move each body piece of your battler pixel by pixel. Pay attention to your battler portrait on the bottom right of the program as it will give you an idea of how your animations are playing out. My Video covers this aspect from 1hour 10min - end of the video.

    From here you play around until you get something that looks cool! Feel free to manipulate your pixels as well to get really cool effects in! The sky is the limit from here!

    Step 4 - Finishing Up and Transferring to RPGMaker

    Ah, got something cool? From here we will use GIMP or Photoshop or whatever to get your new animated battler into a sprite sheet. So look for the combine layers button, it looks like three boxes with an up and down arrow. I don't suggest deleting the original layers.

    With that you should have a layer with everything combined. Now get the selection tool and select everything in that frame! Open up a new file in your graphical program and make a Sprite Sheet. You just start pasting in your frames! Here is an example:

    This image is 384 x 1344 : The battler from GraphicsGale was 96x96 px. The top row is it's idle animation.

    When you open up your GIMP, Photoshop, etc program, look for your Grid Tool and set the grid to equal the entire size of the battler. IE, for bigger battlers, I use a 128px grid. From there you just copy and paste what you have into the sheet. Then you can begin preparations to transfer the sheet over to RPGMaker!

    Alright, this concludes the tutorial for now. I know it's not the best thing in the world, but I really hope it gives yall ideas on how to get started with making battlers. Perhaps I'll go back in and give more examples and more detailed explanations. Just ask what you may need help on.

    Let's see what you're capable of making!

    Last edited: Apr 27, 2017
  2. matgraz

    matgraz Villager Member

    Likes Received:
    Sao Paulo Brazil
    First Language:
    Primarily Uses:
    Too bad the pictures dont load anymore, i still have some doubts about it ):
  3. mlogan

    mlogan Global Moderators Global Mod

    Likes Received:
    First Language:
    Primarily Uses:
    All the pictures load for me. If refreshing doesn't work, try a different browser.
  4. Cloud69225

    Cloud69225 Bunches Member

    Likes Received:
    First Language:
    Primarily Uses:
    @EliteZeon I've been looking for something like this for so long! Thank you!

    I know you've done it for only 4 frames as well, but would it work if you did it for even more frames so that the animation can run a lot smoother?

Share This Page