Making Secret Doors!
Avery
by
Avery
on
October 20, 2020
October 20, 2020

Making Secret Doors!

Making Secret Doors!
by

Avery

on

October 20, 2020

Pssst! I heard, secret doors might be a nice element, that might enhance your game and be a good fuel for puzzles! The big disadvantage of that element is that it might be difficult to find the right charset just for the situation you have in your game, but no worries! Today we go step by step through several options you might want to have and show them how to create them with any tile you might want to have to do that movement.

The programs used are graphicsgale and GIMP, but you can of course use any graphics editor your choice (though MS Paint might not have all you need).

Secret Door #1: The bookshelf

There are many things you can do with a bookshelf, but before we have a look at them, I am doing a small edit to the bookshelf from the default graphics:

With just some copy and paste, I removed the small space underneath the shelf, and I did so for 3 different reasons:

  • The shelf now looks different, if all other shelves in the room look the same, it might be a clue that this one is special
  • If there is a door behind, it would be very visible through that gap. Not for the player, but a character would clearly see it logically and that would make the door not very secret
  • In case of a mechanism involved, this makes more sense, since either the mechanism would be visible or might have no room just beneath the stilts

Secret Door #1.1: The shelf sliding

This one does not have to involve a secret mechanism, you can also have your characters (or a raging monster?) push the shelf aside. However, this is probably the easiest way to make a secret door.

In the first frame, you just have the object you want to have moved in its basic position. Since I like my objects with some offset so they stand back to the wall, I did that in this frame already.

Since it is supposed to move to a side and a charset is always drawn centered, you need to have an empty space at both sides.

Now you just move that object with copy and paste with even steps to its final position, set up the charset and save it as !$forexampleabookshelf, that would look like this:

And the result looks like this:

Tip: Ensure the passibility before and after moving the shelf works fine!

Secret door #1.2 The shelf vanishing in the ground

Since the shelf has a smooth top, having it go down into the floor to let the heroes pass is always a good option as well!

Unlike the other option, here we don’t need any extra space, so 1x3 tiles for each frame is enough.

Move the shelf down in even steps, so that the top lines up with the floor in the last frame and delete everything that is moved past the baseline of the object in the first frame.

As result, you come up with a sheet like this:

This is how it will look like in game:

Tip: Both animations work with a lot of objects, just make sure they are big enough to hide the secret door from the player's sight!

Secret Door #2: The wall

The secret door in the wall is somewhat more complex to achieve, but no worries, with this walk though you can recreate it for any type of brick or stone wall you might want to use.

After you decided which wall you are going to use, it is a good start to create a matching hole. In this case, the default entrance tile and some plain color blocks do a pretty good job.

The result looks pretty neat, but to stop here would be a huge mistake! If you leave the hole like this, the stones are all paper thin, which looks pretty weird.

You can use the top of the wall autotile as a base to give the stones more depth. But due to their position they need to be a lot darker and we need shadows on them.

Much better. Here you have different approaches, from straight pixel art to get the shadows, to darken the parts piece by piece or use a color gradient as I did here (and I added some extra shadows by pixelating them on the left side.

Now we need some other parts to set up the final animation:

The counterpart of the hole is made out of the wall and again the top of the autotile is used to create depth, in case these parts become visible.

Now we have everything we need, and to set up the sheet we need these three parts, the basic hole in the middle is just used as top layer to check out everything works well.

Now, to set up a sheet, we use three layers, with the hole on the first, the wall cut out on the second above that and the one with the hole on the third on top.

All set up, as you can see on the left, just looks like the normal wall. Layer one and three stay as they are, all we do is moving layer two.

In the first movement frame it is going to slide back, so the wall piece has room to move to the side, by the depth of the stone top.

Two things are still off: the wall piece needs to become darker, since it goes back into the shadow area and also the tops of the stones need to be visible. Therefore I’m gonna darken the wall piece and delete the parts that cover these tops. Before I delete them though, I am gonna save the intact dark version of the wall piece on the side.

For the next frame we are going to use the wall piece we saved on the side and move it half the way to it’s final place.

Again we make the covered tops visible again and here I see a difference between the stone tops I have on the frame and those on the wall piece. Since only two are visible, I will edit the ones from the frame onto them and darken them then.

Much better!

For the last frame, we can just remove everything on layer 2. Alternatively, you can just have some of the stones be visible in the gap between the stones on the right.

You can now keep the frames like this or delete layer one and everything that is below the content of layer one. That is especially useful if you have several versions of this wall in game, e.g. if you also use an edit with a different pattern for the top part.

This is our resulting set, and here is how it looks like in game:

Here is a good place to stop and let you all have some fun adding some secret passages to your games!


Recommended Posts

footer-map