Animation editor tutorial

[_Zano]

Hello, there are a lot of great posts and resources to help with making animations, but I wanted to compile some of them together and try to touch on everything in one post.

 

The basics:

Spoiler

If you are brand new to Intersect and have no experience, you should read this first: https://www.freemmorpgmaker.com/docs/en/Game_Design/Content_Editors/Animations/index.html

It goes over the interface and what everything does, after that we can begin making animations!

 

 

The first step in creating an animation is the actual animation itself, Intersect comes with some out of the box so I will use one of those as an example. To find them; open your game folder, navigate to Client and Editor, resources, animations, and you should see some .PNG files there.

 

Before we get started in the Intersect editor lets first look at how the animations are laid out.

Spoiler

I will be looking at the campfire.png. We can see that it has 5 different pictures of a small fire, these are the frames of the animation that will play in your game. To understand how the game plays the animation from 5 seperate pictures I will be using a program called Aseprite, It is made specifically for pixel based graphics and animations.

 

Now back to the image, we can see that it is 160 px wide and 42 px tall. Using 5 frames and placing them next to each other horizontally we can divide 160 by 5, and come to 32. So each individual fire is 32 px by 42px. This information will be important once you create your own animations, as the spacing in between each frame, and the boarders around must be precise, or they wont line up in the animation editor.

 

Using Aseprite you can add a grid to help show where frames should be exactly, by using the number of frames you need multiplied by the width, or height of the frames depending on if you will be laying them out horizontally or vertically.

 

Alternatively you can simply draw an outline if using a more basic image editor.

 

 

Now they we have a basic idea on how the images look, lets go into the Intersect editor.

 

Spoiler

Once you launch the editor, go to the top left and open the game editors tab, and select the first option for animation editor. If you looked at the first link and know your way around then you should be ready to start here.

 

Start by creating a new animation with the top left button. Then click on your new animation in the left window.

You should see this, A blank canvas. To start you can name your animation on the top left, and put it into a folder if it is similar to others you plan on creating.

 

Now we will create the actual animation, first decide if this is something you want to render above, or below the player. I'm making a campfire, so I want to render it below the player, therefor I will be working on the left side of the editor under the "Lower layer (Below Target)" section, if otherwise for you simply work on the right side for the upper layer.

 

Underneath the large box you will see a drop down selection box that you can select your graphic (Red underline), this will search the animations folder in your game files that we looked at earlier, select your animation, for me it is the campfire.png.

 

Next it is important to know how many frames your animation has, and which orientation they are laid out in. Mine has 5 frames, and they are horizontal, so right below the graphic selection drop down I will be changing the "Graphic Horizontal Frames" (Blue underline) to 5. Whatever you change this setting to, also change the "Graphic frame count" to, so if you have 5 frames, both will be 5.

 

Once you have those two settings input, you can click "Play Lower Animation" to the right of where the animation is displayed, and see if it looks correct. If you have the correct amount of frames on the image and in the animation settings here everything should look fine, however if it looks choppy or like it is jumping around it is likely that the spacing in between the animation you created is not even, that is important for smooth playing animations.

 

Once your animation is successfully playing you can adjust the speed at which is plays, if it looks too fast or too slow, go to the "Frame Duration" (Green underline) setting and increase it to make it play slower, or lower it to make it play faster.

 

Now that you have your animation playing how you like it, you can add lighting and sounds. sounds are in the "General" section at the top by where you named your animation. Lighting is added to each frame individually, you can select the frame you want to add lighting to, then in the "Light Editor" area select a color you would like to display, and the size, intensity, and how far it will expand.

 

If you want to check how the lighting looks, you can add it to one of your maps and save the animation, it will update in real time! You can also simply use the "Simulate Darkness" setting in the top right of the animation editor and let the animation play to see how it looks without leaving the editor. By changing the color slightly, and changing the size of the lighting for each frame I made my fire animation have a sort of glowing fire look.

 

 

 

The animation editor can handle large animations with a lot of frames, here is an example of an animation that is 9000 x 200 pixels in size, and 49 frames.

 

When creating animations it is important to remember the spacing matters, between and around frames, and the size of the frame is one to one how it will show on your game. If your player sprites are 32 wide and 64 tall and you wanted to create a teleport animation that sort of engulfs the player and takes them away, your animation would need to be at least 32 wide and 64 tall, or it wouldn't cover the whole player causing it not to look the best.

 

To quickly summarize how to create a sheet for your frames I can explain how I do it with simple math.

 

Spoiler

Lets say you need to create an animation for a bomb exploding. This will be several frames long, and for this specific animation it is likely to have frames that are vastly different in size. The concept works regardless of frame size or count.

 

What is needed first is to draw out your animation. Lets say it is 5 frame; the first being the bomb starting to explode, it is 16 px by 16 px, fairly small. The last frame is 50 px by 50px, much larger.

 

Whatever your largest frame is, take that number, in this example it is 50 px by 50px, multiply by 5 frames, if you are doing a horizontal layout like the previous fire animation, multiply the width by 5 frames. You can add some padding ( an even number like 2 or 4) to each frame to give a little space while you are editing the image together. Once you have your number, for me it will be 5 x 50 = 250, that will be the width for the animation, and the height will just be the 50, to fit your largest frame. Once you have your numbers open your favorite image editor and create a new image with those sizes.

 

Now if you have access to a grid function, set the grid settings to your largest frames size, for me again its 50 px by 50 px. If you don't, you can simply draw out the grid with a rectangle tool or something similar. Once you have that , that's your basic animation sheet, now all that's needed is to add your frames into the sheet. Make sure they are centered in each of the grids you laid out, or it will have that choppy jumping look in the editor once its playing.

 

Hopefully yours looks better than that!

 

 

Hopefully this helps someone, if you have any questions please feel free to ask.