Chaos Project

RPG Maker => Tutorials => Topic started by: Hellfire Dragon on July 07, 2010, 05:05:01 pm

Title: [XP] Creating Shadow Tilesets
Post by: Hellfire Dragon on July 07, 2010, 05:05:01 pm
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
(http://i678.photobucket.com/albums/vv143/GameGuysProjects/setgrid1.png)
(http://i678.photobucket.com/albums/vv143/GameGuysProjects/setgrid2.png)
(http://i678.photobucket.com/albums/vv143/GameGuysProjects/setgrid3.png)


Step 2: Choosing Tileset/Selecting It/Copy
Spoiler: ShowHide
(http://i678.photobucket.com/albums/vv143/GameGuysProjects/selectall.png)


Step 3: New File/Pasting
Spoiler: ShowHide
(http://i678.photobucket.com/albums/vv143/GameGuysProjects/size.png)
(http://i678.photobucket.com/albums/vv143/GameGuysProjects/pasting.png)


Step 4: Setting Color
Spoiler: ShowHide
(http://i678.photobucket.com/albums/vv143/GameGuysProjects/settingcolor.png)


Step 5: New Layer/Pasting/Gradient Map
Spoiler: ShowHide
(http://i678.photobucket.com/albums/vv143/GameGuysProjects/newlayer.png)
(http://i678.photobucket.com/albums/vv143/GameGuysProjects/gradientmap.png)


Step 6: Color to Alpha
Spoiler: ShowHide
(http://i678.photobucket.com/albums/vv143/GameGuysProjects/colortoalpha.png)
(http://i678.photobucket.com/albums/vv143/GameGuysProjects/test.png)


Step 7: Final Result
Spoiler: ShowHide
(http://i678.photobucket.com/albums/vv143/GameGuysProjects/final.png)



Examples of Shadow Tileset in Use
Examples made by game_guy
Spoiler: ShowHide
(http://i678.photobucket.com/albums/vv143/GameGuysProjects/example-1.png)

Spoiler: ShowHide
(http://i678.photobucket.com/albums/vv143/GameGuysProjects/example2-1.png)

Spoiler: ShowHide
(http://i678.photobucket.com/albums/vv143/GameGuysProjects/example3.png)



Credits and Thanks




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
(http://i678.photobucket.com/albums/vv143/GameGuysProjects/WhDSv.png)
Title: Re: [XP] Creating Shadow Tilesets
Post by: G_G on July 07, 2010, 05:51:14 pm
Nice job HD! Yay me for pics!
Title: Re: [XP] Creating Shadow Tilesets
Post by: 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.
Title: Re: [XP] Creating Shadow Tilesets
Post by: Hellfire Dragon on July 08, 2010, 07:45:59 am
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 :???:
Title: Re: [XP] Creating Shadow Tilesets
Post by: Sase on July 08, 2010, 07:55:30 am
What I mean is just that shadow tile in RTP. The custom shadows you do should match the default, IMO.
Title: Re: [XP] Creating Shadow Tilesets
Post by: Hellfire Dragon on July 08, 2010, 09:00:00 am
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.
Title: Re: [XP] Creating Shadow Tilesets
Post by: G_G on July 08, 2010, 09:06:16 am
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.
Title: Re: [XP] Creating Shadow Tilesets
Post by: Sase on July 08, 2010, 09:39:03 am
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
(http://rpgmaker.fi/files/reso/xp/050-DarkSpace01_sase.png)
Title: Re: [XP] Creating Shadow Tilesets
Post by: G_G on July 08, 2010, 09:55:54 am
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
(http://i678.photobucket.com/albums/vv143/GameGuysProjects/example-1.png)
(http://i678.photobucket.com/albums/vv143/GameGuysProjects/example2-1.png)

Sase Way: ShowHide
(http://i678.photobucket.com/albums/vv143/GameGuysProjects/capture1.png)
(http://i678.photobucket.com/albums/vv143/GameGuysProjects/capture2-1.png)


Not saying its bad. I just prefer HD's way.
Title: Re: [XP] Creating Shadow Tilesets
Post by: Sase on July 08, 2010, 10:06:32 am
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?
Title: Re: [XP] Creating Shadow Tilesets
Post by: G_G on July 08, 2010, 10:08:16 am
I dont get it...
Title: Re: [XP] Creating Shadow Tilesets
Post by: Sase on July 08, 2010, 10:32:49 am
HD's way adds less transparency (less see-through), not vice versa as you implied.
Title: Re: [XP] Creating Shadow Tilesets
Post by: G_G on July 08, 2010, 11:03:06 am
Oh xD
Title: Re: [XP] Creating Shadow Tilesets
Post by: Aqua on July 08, 2010, 11:12:11 am
Shadows shouldn't be that sharp O.o

But... Default RTP /does/ use square blocks... XD
Title: Re: [XP] Creating Shadow Tilesets
Post by: element 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 !
Title: Re: [XP] Creating Shadow Tilesets
Post by: Silentknight72 on July 09, 2010, 10:46:09 pm
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.....
Title: Re: [XP] Creating Shadow Tilesets
Post by: Spaceman McConaughey on July 10, 2010, 09:45:37 pm
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.
Title: Re: [XP] Creating Shadow Tilesets
Post by: Alton Wyte on July 11, 2010, 08:06:23 pm
I'm pretty sure that the shadow would only cast fo the top of it, not the sides of it