- Joined
- Oct 13, 2012
- Messages
- 3,740
- Reaction score
- 25,335
- First Language
- German
- Primarily Uses
- N/A
Knock, knock.
Who’s there?
Your ex.
What ex?
Your ex-plaination on doors.
Yeah I know.
Doors seem to be a simple thing, right?
There are plenty of them in the RTP and they are easy to use. But… they are all front view. And small. And maybe not the one special design we need.
So, how do we handle a door? Well, of course with a knob, but enough of the bad puns (for now).
Making a basic door
In fact, the height and width of your resulting door is up to your taste and the style you use.
To empathize that, I have here a picture of three different sprite styles you might choose for your game:
(left to right: MZ default, WaywardMartian, BrunaCremm)
It makes sense that each of them has a different “optimum” range for the door height. The general rule of thumb is:
The great thing is: if the width is 1 tile, you can follow this tutorial as is, no matter how tall or short the doors are. If you go with a different width, you might have to adjust your values a little.
If we look at any default door, we see a certain pattern: the door on the top is just our basic door and the bottom is just the empty frame, which reduces the frames we have to touch for our default door to two.
For those two frames there are a few things that need to be adjusted:
For showing purpose I will use this medium door:
That of course already is the first frame, and since the last frame stays empty, half of the needed frames are done:
To get our door into the right format, we have several options on how to bring them into existence, but the steps are pretty clear.
We can make that by simply using the transformation option in Graphicsgale:
We could also simply edit it to be more narrow, by cutting and pasting vertical pieces, which would give us full control over the ratio:
We could also use the scaling option in Gimp, or any other picture editing program, which usually uses an algorithm while scaling:
In this case, all results are passable:
The scaling in graphicsgale gives you a result that is still fully pixelated, but depending on the door design, your patterns might end up looking a little wonky.
The manual editing is my go to, but it can be a little difficult to nail the needed ratio and here you might have to make some further edits if more complex patterns are involved.
The scaling with a smoothing algorithm behind it as in Gimp keeps all those patterns intact, but might blur your result.
Other programs even let you pick which algorithm you wanna use when scaling (you could even get this to work in Gimp, if you scale the whole layer of the door and not just the selection).
I personally prefer to scale manually, while the default doors were obviously done with a smoothing algorithm. Which you pick, is up to you, for the doors here I prepared the manual versions.
All we need to do is selecting our door and use “Slope” , the value for the 38px wide door is -0.33 (or 0.33, if it is supposed to open in the other direction)
and -1 (or again, 1 for the other way) for the 23px wide one.
Make sure your selection is larger then just the door, otherwise Graphicsgale will do this, when you use that option:
…which is usually not what you want for your doors.
Since the doors open “into the wall” we now need to cut off the upper parts of our sloped doors.
The default door all open into a darker opening and have a transparent background:
but I personally prefer to have options with the “opening” behind, and since we are all in editing at this point, why not make a few more options to have ready in case we want to use them?
For example we can use the two dungeon doors and simply use cut and then copy and paste to bring them to the dimensions we need.
Then we can format them to how many options we want to have. I personally like to have one door that opens to a light opening, one that opens to a dark opening and one with a transparent background, in case I want to place something else behind it or just have it as an opening between two rooms or so.
The assembling happens in Gimp, we simply copy our door base on layers on top of the background layer we just made.
To create the lights and shadows, we again have many options, here I will show you one that makes use of layer masks once more.
We duplicate the layer with the door we want to apply the shading to and recolor it to the darkest (or brightest, in case of the other one) shade it is supposed to have.
Adding an all black layer mask to that layer will make that vanish for the moment, but now we just take a very soft white brush and draw in the area for the shading - on the right and the top.
We can now adjust these shadows with some smudging or drawing additional shades in with a lighter gray.
For the transparent door, I like to go with similar shade, just a little lighter and for the bright I like to go with a bright yellowish tone.
We export it with a !$ at the start, to ensure it is drawn on the map without any offset (as the chars usually have) and that the engine knows we have only one part of a charset, not the full sheet with eight.
And there we go, a fully functional custom door!
And if you read until here and did not notice anything, well, I did not until hiddenone nicely pointed me towards the fact, that my door opens in the wrong direction and the knob has to be on the other side.
First I had planned to redo all the images and edit it out, but I left it in to add this little talk about: think about what you do and always remember to step away from your work and check if everything you did actually makes sense this way.
Often when you just follow a procedure, you miss out on important adjustments as I did here.
But that is not horrible, and after a short embarrassed laugh, here is the fixed version ;3
Who’s there?
Your ex.
What ex?
Your ex-plaination on doors.
Yeah I know.
Doors seem to be a simple thing, right?
There are plenty of them in the RTP and they are easy to use. But… they are all front view. And small. And maybe not the one special design we need.
So, how do we handle a door? Well, of course with a knob, but enough of the bad puns (for now).
Making a basic door
In fact, the height and width of your resulting door is up to your taste and the style you use.
To empathize that, I have here a picture of three different sprite styles you might choose for your game:
(left to right: MZ default, WaywardMartian, BrunaCremm)
It makes sense that each of them has a different “optimum” range for the door height. The general rule of thumb is:
- A door should be at least as tall as you characters, maybe with a few extra pixels
- A door should be at least as wide as your characters, usually it is 1 tile wide if it is a “normal” door.
The great thing is: if the width is 1 tile, you can follow this tutorial as is, no matter how tall or short the doors are. If you go with a different width, you might have to adjust your values a little.
If we look at any default door, we see a certain pattern: the door on the top is just our basic door and the bottom is just the empty frame, which reduces the frames we have to touch for our default door to two.
For those two frames there are a few things that need to be adjusted:
- they have each a different width than the default one, with fixed values across all the default doors
- the height on the other hand is never touched
- as they submerge into the frame, they get shadows on the right and top area
- they are sloped by fixed values across the default doors
For showing purpose I will use this medium door:
That of course already is the first frame, and since the last frame stays empty, half of the needed frames are done:
To get our door into the right format, we have several options on how to bring them into existence, but the steps are pretty clear.
- Adjust the width of the door
We can make that by simply using the transformation option in Graphicsgale:
We could also simply edit it to be more narrow, by cutting and pasting vertical pieces, which would give us full control over the ratio:
We could also use the scaling option in Gimp, or any other picture editing program, which usually uses an algorithm while scaling:
In this case, all results are passable:
The scaling in graphicsgale gives you a result that is still fully pixelated, but depending on the door design, your patterns might end up looking a little wonky.
The manual editing is my go to, but it can be a little difficult to nail the needed ratio and here you might have to make some further edits if more complex patterns are involved.
The scaling with a smoothing algorithm behind it as in Gimp keeps all those patterns intact, but might blur your result.
Other programs even let you pick which algorithm you wanna use when scaling (you could even get this to work in Gimp, if you scale the whole layer of the door and not just the selection).
I personally prefer to scale manually, while the default doors were obviously done with a smoothing algorithm. Which you pick, is up to you, for the doors here I prepared the manual versions.
- Sloping the doors
All we need to do is selecting our door and use “Slope” , the value for the 38px wide door is -0.33 (or 0.33, if it is supposed to open in the other direction)
and -1 (or again, 1 for the other way) for the 23px wide one.
Make sure your selection is larger then just the door, otherwise Graphicsgale will do this, when you use that option:
…which is usually not what you want for your doors.
Since the doors open “into the wall” we now need to cut off the upper parts of our sloped doors.
- Shading
The default door all open into a darker opening and have a transparent background:
but I personally prefer to have options with the “opening” behind, and since we are all in editing at this point, why not make a few more options to have ready in case we want to use them?
For example we can use the two dungeon doors and simply use cut and then copy and paste to bring them to the dimensions we need.
Then we can format them to how many options we want to have. I personally like to have one door that opens to a light opening, one that opens to a dark opening and one with a transparent background, in case I want to place something else behind it or just have it as an opening between two rooms or so.
The assembling happens in Gimp, we simply copy our door base on layers on top of the background layer we just made.
To create the lights and shadows, we again have many options, here I will show you one that makes use of layer masks once more.
We duplicate the layer with the door we want to apply the shading to and recolor it to the darkest (or brightest, in case of the other one) shade it is supposed to have.
Adding an all black layer mask to that layer will make that vanish for the moment, but now we just take a very soft white brush and draw in the area for the shading - on the right and the top.
We can now adjust these shadows with some smudging or drawing additional shades in with a lighter gray.
For the transparent door, I like to go with similar shade, just a little lighter and for the bright I like to go with a bright yellowish tone.
We export it with a !$ at the start, to ensure it is drawn on the map without any offset (as the chars usually have) and that the engine knows we have only one part of a charset, not the full sheet with eight.
And there we go, a fully functional custom door!
And if you read until here and did not notice anything, well, I did not until hiddenone nicely pointed me towards the fact, that my door opens in the wrong direction and the knob has to be on the other side.
First I had planned to redo all the images and edit it out, but I left it in to add this little talk about: think about what you do and always remember to step away from your work and check if everything you did actually makes sense this way.
Often when you just follow a procedure, you miss out on important adjustments as I did here.
But that is not horrible, and after a short embarrassed laugh, here is the fixed version ;3
