[XP] Creating Shadow Tilesets

Started by Hellfire Dragon, July 07, 2010, 05:05:01 pm

Previous topic - Next topic

Hellfire Dragon

July 07, 2010, 05:05:01 pm Last Edit: July 07, 2010, 05:49:26 pm by Hellfire Dragon
Creating Shadow Tilesets




Introduction

This started with G_G on msn. He was trying to make a shadow for every object on a map and couldn't get so I helped and this is the result. You can look at some examples under the tutorial of this in use.


Tutorial

Helpful Hint: ShowHide

Whewn you create your new file, before copying the image, set up a 32 X 32 grip with option 'Snap to Grid' selected. This will help when positioning the tileset.

This tutorial is done with Gimp so if you're using there will most likely be some differences.
First, pick a tileset, I'm using the dark space tileset, and open it in Gimp. Now select the Rectangle Select tool and select the whole tileset (Ctrl + A) then copy it (Ctrl + C). Open a new file with the same width and double the height of the tileset you're using and paste your tileset in, making sure it's positioned at the very top. Create a new layer and paste the tileset into the file again, this making sure it's positioned perfectly under the first one.

In the toolbox you have 2 color blocks (or whatever you want to call them :P ) Click on them set both their HTML notations to 635c74. Now select the second layer, select the tiles in it and then go to the color menu, select Map then Gradient Map. This should have changed the bottom tiles to shadows.

Finally you need opacity. Go to Layer, select Transparency and pick Color to Alpha... Click OK on the dialog that appears and you're done.

Pictures (by game_guy):
Step 1: Setting up the Grid
Spoiler: ShowHide




Step 2: Choosing Tileset/Selecting It/Copy
Spoiler: ShowHide


Step 3: New File/Pasting
Spoiler: ShowHide



Step 4: Setting Color
Spoiler: ShowHide


Step 5: New Layer/Pasting/Gradient Map
Spoiler: ShowHide



Step 6: Color to Alpha
Spoiler: ShowHide



Step 7: Final Result
Spoiler: ShowHide



Examples of Shadow Tileset in Use
Examples made by game_guy
Spoiler: ShowHide

Spoiler: ShowHide

Spoiler: ShowHide



Credits and Thanks


  • Hellfire Dragon
  • game_guy for examples and pictures



Author's Notes

Not much else to say really, except here's the tileset I made (the one used in the examples), if anyone wants it.
Spoiler: ShowHide

G_G


Sase

To be honest, I'd use the default RMXP shadowing. This one looks way darker and not as smooth.

Hellfire Dragon

You could just use a lighter color if you wanted :P And what do you default? There's one square shadow tile in the default tilesets :???:

Sase

What I mean is just that shadow tile in RTP. The custom shadows you do should match the default, IMO.

Hellfire Dragon

I did try to get it to match, I used the color picker to take the color from the RTP shadow tile so I don't know why it didn't come out the same :/ Probably could've used a bit more opacity though.

G_G

July 08, 2010, 09:06:16 am #6 Last Edit: July 08, 2010, 09:16:19 am by game_guy
Quote from: Sase on July 08, 2010, 02:55:15 am
To be honest, I'd use the default RMXP shadowing. This one looks way darker and not as smooth.


Well it may look way darker, but look at the results. It looks way better. We resorted to this way because there was only one square shadow.

HD You can add this to the examples. Its my mapping part of the video. http://www.youtube.com/watch?v=3A3yF2OhdbM

EDIT: To match the RTP shadow tile, gotta do a bit of math. First of all, GIMP only allows percent opacity 0-100. While in RMXP its 0-255. The actual opac level of the RTP is 128.0 in rmxp.

So 128 / 255 * 100 = 50.1. That should match or almost match the same shadow tile. Haven't tested it yet.

Sase

July 08, 2010, 09:39:03 am #7 Last Edit: July 09, 2010, 03:38:51 am by Sase
Here's a version I made from scratch. No tilesets were hurt while making this one.

In Paint.NET you can use "overwrite" in the flood tool instead of "blend". Also I eliminated a great deal of useless sprites (the ones that are exactly the same), added a not-shiny version of the "floating platform"s bottom right corner + a bottom version of the crystal that has no shadow (so you can make it floating).

Spoiler: ShowHide

G_G

You didnt actually recreate the circle. You have the top edge, top corners, bottom edge, bottom corners, but where are the side edges?

Also I did a comparison map. Made both maps same way, just different tilesets. I have to say HD's way is better. I think HD's way adds more transparency which makes it look pretty good.
HD Way: ShowHide


Sase Way: ShowHide



Not saying its bad. I just prefer HD's way.

Sase

You are propably right, since I didn't test it in-game.

Quote from: game_guy on July 08, 2010, 09:55:54 am
I think HD's way adds more transparency
:D?

G_G


Sase

HD's way adds less transparency (less see-through), not vice versa as you implied.

G_G


Aqua

Shadows shouldn't be that sharp O.o

But... Default RTP /does/ use square blocks... XD

element

i use gimp too, if u make shadows make sure u always use Filters-> Blur-> gaussion Blur for the more smooth effect round the shadows.
Works great !

Silentknight72

Quote from: elementisland on July 09, 2010, 02:59:08 pm
i use gimp too, if u make shadows make sure u always use Filters-> Blur-> gaussion Blur for the more smooth effect round the shadows.
Works great !

nice idea, but it will be non pixel-artsy now if u do that.....
Sigs: ShowHide






Spaceman McConaughey

Quote from: Sase on July 08, 2010, 10:32:49 am
HD's way adds less transparency (less see-through), not vice versa as you implied.


No. No, no. No no no. Just follow the steps, and then lower its opacity through the layer control(very very simple).

There ya go. Fucking simple.

Alton Wyte

I'm pretty sure that the shadow would only cast fo the top of it, not the sides of it