Adding Realism to Battle Animations

じ☆ve冰风

Hey all.

In this tutorial I'm going to give various tips on how to make your battle animations look more realistic. First of all, if you're still new to using the default animation editor that RM has in the database, I'd highly suggest you to check out Palladinthug's workshop that covers the basics of each function. When you're familiar with the functions you might be thinking of creating more life-like effects, and this is where this tutorial comes in. Here I am going to discuss various effects such as explosions, projectile movement, and other phenomena that might crop up when making your battle animations.

A couple of things to consider before we go on:

Front-view vs Side-view animations

For the most part front-view battle animations will differ to side-view ones. Not only in terms of the angle of attack, but also the size. Most side-view battle systems deal in small sprites and the screen space is shared between both actors and enemies, as opposed to most front-view systems, which only show enemies on screen and in a form of battlers. As a result of that, most side-view system animations will need to be smaller in size than front-view ones.

Timing

Speed of the animation can play an important role in how the player perceives the nature of attack an actor or an enemy is performing. Faster attacks will have to take up a lot less frames than slower attacks. The overall length of animations can be altered with scripts of course, but the speed of each individual animation in relevance to all the others will still be something to keep in mind. Another thing important to consider is the pace of the battle. Making battle animations take too long, especially for commonly performed abilities, runs the risk of boring and frustrating the player. As a general rule, I try to keep my battle animations to under 20 frames, assuming default animation speed is used.

Next I am going to discuss some very common effects in battle animations and suggest some tips on how to execute them as realistically as possible. I am going to address these for both front-view and side-view battle systems.

1. Explosions

One of the most common effects in battle animations are the explosions. These can be in any context, whether it represents a blast from a grenade or a burst of magical energy. Most of these will share a similar behaviour.

The key thing to note about explosions is the rate at which they expand. They always start out fast and slow down towards the end. This needs to be considered when deciding on the size of each frame’s explosion graphic (the zoom). This difference will be great in the first few frames and small in the last few.

Another thing that happens, is that as the explosion nears its end, it also dissipates, and hence the opacity of the graphic will also start going down and eventually fading out into nothing.





2. Flashes

Flashes are somewhat similar to explosions, except they do not dissipate at the end. They contract back and disappear. They also aren’t likely to slow down as they expand, since they resemble light rather than expanding gas.





3. Projectiles (straight and curved paths)

Another very common aspect of battle animations are the projectiles. Projectiles can take a huge variety of behaviours. Perhaps the most common ones you’re likely to have are projectiles that travel straight and those that travel in a curved line. These types of animations will be completely different between front-view battle systems and side-view, so I am going to cover them separately.

Projectiles in front-view systems.

In front-view systems, we’ll see a projectile moving from the viewer towards the screen. In order to give this illusion, the main aspect to tweak is the zoom of the projectile graphic. It will start out very large and with each frame get smaller and smaller. Additionally, it will also move closer to the centre of the screen (or the intended target).

With projectiles traveling in a curve, the movement path will be slightly different. Instead of getting closer to the target, it will instead go slightly above it in the first few frames and in the last 2-3 will suddenly go downwards. It’s always a good idea to test and preview when making an animation like this so to get a good idea if the projectile is moving naturally or whether something needs correcting.





Projectiles in side-view systems.

In side-view systems the zooming of the projectile isn’t likely to play a role. It’s all in the path itself and perhaps easier to implement than with front-view systems. For straight line projectiles they’ll simply move straight towards the enemy. Keep in mind the number of frames you use for this. The fewer frames you use, the faster it will move.

The curved ones will simply follow a more curvaceous path. However, here it is also worth noting the acceleration and effects of gravity on the projectile if you wish to make it look as natural as possible. Generally, as the projectile is nearing its peak height, it will start slowing down. Once it reached the highest point and starts moving downwards, it will begin speeding up again due to gravity.





4. Fallen Objects

At times some animations will consist of fallen objects. They could be rocks, grenades, or even individuals themselves. Since in real life fallen objects bounce, they’ll have to do the same in an animation in order to look realistic. How much they bounce would differ from object to object, but a small level of bounce will be required even for the biggest and heaviest objects, like rocks. Each bounce will be smaller and smaller, until the object reaches rest. If the object is also moving horizontally as it’s falling, it might even slide for the last couple of frames.

Take note of the last few frames on this image. The character sprite (ignore the rocks) bounces slightly as soon as he impacts with the ground (in frames 3 and 5, his sprite is positioned slightly higher than in frames 2, 4, and 6).




Flauros heaves himself onto solid ground for recreation.

5. Wave Motion

Some special attacks might adopt this cool effect. To give an illusion of a wave isn’t as hard as it seems, but it can be a bit time consuming.

Best way to achieve it is to have several points on the screen where animation graphic will appear and to modify each one to slightly lag behind the previous one. Perhaps this image will explain it best:





6. Liquid Splashes

Whether it’s some nasty toxic goo or a bit of blood, you might occasionally need a liquid splash effect among your battle animations. What’s important to consider here is that liquid will be affected by gravity (unless it’s something extremely volatile that evaporates right away), and as the splash effect is nearing its end, the droplets will start falling down. Adding this downward movement in the last few frames of a liquid splash makes it look that much more realistic.





7. Character Sprites

Up to now we’ve been mostly casting fireballs, chucking rocks, and blowing things up. But remember that potentially battle animations can be even more interesting and diverse than this, since anything can be used as an animation graphic. This also includes character sprites themselves. This can particularly be useful for side-view battle systems to make characters pull off some cool-looking skills.

Let’s take a look at one of these by Gashrun (a character from one of my games; sprite graphic by PVGames):





Firstly note the small size of the graphic. It’s the same size as the actor’s battler in the game. Next notice the movement path (might be hard to tell from the above image). As the character starts moving, he speeds up, and as he finishes his manoeuvre, he slows down to a stop. This is important to consider when making the character’s movement mimic how a person would move in real life.

There are many more phenomena that can be pulled off with battle animations, some of which will combine 2 or more of the above mentioned effects, so unleash your creativity and try out new things that you haven't done before.  



本贴来自国际rpgmaker官方论坛作者:Matseb2611处,因国际论坛即将永久关站,为了存档多年珍贵资料,署名转载到本论坛存档,由于官方帖子为英文原帖，需要中文翻译请点击论坛顶部切换语言为中文就可以将帖子翻译成中文浏览,方便大家随时查看,原文地址：https://forums.rpgmakerweb.com/threads/adding-realism-to-battle-animations.36135/