Animating Tiles: Opening Animations
September 29, 2020
September 29, 2020

Animating Tiles: Opening Animations

Animating Tiles: Opening Animations



September 29, 2020

When it comes to adding some extra “life” to your game, small animations for interactable objects are usually a good thing to go for. Today we will cover three base techniques of how to open things, and many of them can be used on other object types as well.

Side Note: I use graphicsgale for the main part, but you can use any graphic program of your choice that supports layers. Additionally, I remove the shadows on the floor when I edit and add them back in in the end when I set up the sheets, so don’t be confused, when they are gone in the steps shown below.

Type 1: Door

Usable on: Wardrobes, Windows, Doors…

Our demonstration object for type 1 is this RTP wardrobe:

Whenever you make a door type animation, you will need something that is behind the door, in this case the inside of the wardrobe. To create that, we could try to draw it from scratch, or have a look at the other tiles and see if there is something we can use to create it.

Here, we are lucky:

The back of the wardrobe, stretched out and made a lot darker in combination with using that tiny empty shelf part from the bookcase make a great empty interior. Don’t worry about the side strips, they will be covered up by the doors anyways.

Now all we need is the doors themselves:

Just separate them with box selection and erase everything that is not part of the door.

By using the box selection, make two versions of the door that are more narrow than the base one. One about 2/3th of the width, one about 1/3th. Make sure to not destroy the details in this process, in this case the hinges and the handles.

“Slope” the doors. You can use the slope tool in graphicsgale, or manually move the columns down one by one. Watch out, the slope tool in other programs might not work that well and could make the whole thing blurry. Experiment with the setting of the tools yourself to find the right method in your program of choice.

After the slope, use the line tool to add some more wood to the doors.

For more realism, you can now brighten the left door front and darken the right one. To do this, I duplicated the doors, made my changes in the brightness and erased the top and side edges.

Repeat for the other door, just move the columns here down by two instead of by one. In this case I also had to rework the handles a bit manually.

Now use the colors from this door to draw the fully open doors. All you need is the line tool and some copy and paste for the handles.

And now we are already done, we can copy these on our empty wardrobe and set it up in a charset:

Type 2: The Drawer

Usable on: Drawers, surprisingly

Again, we will use a basic RTP piece of furniture to show how this will work.

For this type of animation, we will need to create the fully drawn out version first. And again, a look into the other default tiles is the best choice.

In this case, these neat boxes are just what we needed. All we need to do is make them fit the front part of the drawer and make them a little shorter. The boxes with the papers and the book and key inside are perfect for drawer insides as well, so I also made versions from those.

You might also want to make a filled and an empty version of the same drawer, so your character can take something out and you will see it happen on the map.

Starting from the full version, we erase some of the back of the drawer  to create the different stages of the animation. Make sure the differences between them are about the same so the animation is pretty smooth in the end.

All you now have to do is to set up the character sheet and put the different stages above the drawer you want to be animated.

Type 3: The chest

Usable for: Boxes, Chests, everything with a lid that can be lifted

Because the default RTP chests are already animated, we take a look at the tilesets, and there we can find this neat suitcase:

To make the animation, we first need to seperate upper and lower parts.

Since the upper part is already fully there, we get that one just by erasing everything that is not the lid, but for the bottom we need to do some reconstruction.

Here I pasted only the top surface of the lid on the bottom and used a dark area for the interior base. The back part is a part of the front minus some pixels, as the base is not paper thin. For the lock, I just guessed and placed some pixels that felt about right. You could use the chests for reference here, if you struggle on that part.

A chest animation in the RPG Maker format usually has four stages that are pretty easy to create.

The “closed” is the one you start with, easy.

For open, you usually just use the front of the lid part and move it all the way up, the upper line of the chest always stays the same. here I added a visible part of the handle by copy and paste as well.

For the stages in between you shorten the top surface to ⅔ and ⅓ and move up the front of the lid so it is still attached.

Again, I copied parts of the handle so it did not look off in these frames.

When putting both parts together make sure to add a shadow below the lid by box selection and darkening that part.

Handy tip: If you keep the lid/door/drawer on separate layers, you can easily add some variation by adding some goods to find inside.

With these three types of animations in your bag of tools you can add a lot of things to explore in your game!

Recommended Posts