Enhancing maps with pictures

[Me5kuTis]

Good evening. Instead of throwing a stupid joke in the beginning I'll just move on to what you need.

What you need :
I - Programs needed
   1. rm2k/3 - duh
   2. Photoshop (don't know about painshop pro)
II - Photoshop skills
   1. Layers
   2. Blending options
III - RM2k/3 skills
   1. Picture drawing
   2. Variables
   3. Fork conditions

If you have what it takes then we should get started. But before that I have to warn you that this system needs a loading screen unless you have a map 20x15. Maximum loading wait is 4 seconds, maybe less. Don't worry if you can't do a loading screen. I'll include a loading screen tut in here.

----------
PART ONE : Making the picture

Open RPG Maker open the map you want special effects or lighting on and hit printscreen (If your map is so big that it doesn't fit in the screen on 1x1 size then youll have to take multipul screenshots of it and combine them.) first open paint and edit the picture. Get rid of everything besides the map.


Like this

-----------
PART TWO : Making the effects

You can choose from a big variety of things you want to do. You can make shadows, lights, chipset addons and anything you can think of.

--
A - Shadows
--

Open The picture in photoshop. Make a new layer (ctrl+shift+n) name it something like shadows.

Your layers should look something like this



Right-click on the layer and choose blending options Set opacity to 64 (best for shadowing). Add color overlay with 100% opacity. The overlay color should be black as that's the shadow's color.

Now you can just be creative. Pick a brush or pencil (color doesn't matter as we have overlay color) and draw. You can also copy paste a tree set the blending options the same as the shadows layer and free transform it to look like a shadow (skewing works the best). Don't forget to erase the background of the tree or you'll just have a box instead of a tree. Do the same with all of the objects that are on the map (like buildings, trees, bushes, cars, rocks, anything). When your done you should have somthing like this



Don't forget that some objects are higher than ground and change the shadows to look more realistic. For example take a look at the bottom tree's shadow. Notice how it falls on the wall?

When your done with that You have to discard of the "background" layer and change the blending options on the shadows so they would have 100% opacity. They will be totally black. Next fill the transparent zone with some other than black color (it will be transparent in rpgmaker) after that you should have something like this



Now it's time to make it 256 colors. Go to Image>Mode>Indexed
It will ask wether you want to flatten layers choose yes.
and make the menu look like this :

Press ok and save as .png, not interlaced. You have just made a shadow.
Now import it to rpgmaker. Warning rpgmaker only allows you to import 640x480 and not bigger. So I recommend using a 40x30 map because 40x16=640 and 30x16=480.

Now you have to draw the picture on the screen. This is the tricky part. Your party start position has to be in the center of the map. For a 40x30 map we would use 19x14 coordinates.

Make an autostart event and draw the picture you have imported with 64 transparency, 160x128 position and make sure you Tick the box [Move with map]. You can also draw other pictures too. Then you have to make a move event and WALK the hero to his real starting position (Teleporting doesn't work). Just make something like

Start Slip Through
Move Speed Up
Move Speed Up
*Your moving directions*
Move Speed Down
Move Speed Down
End Slip Through

After the moving event add the "move all" command ( "Proceed with movement" in other translations of rpgmaker).  Now everybody who plays your game would notice that your character appears in the middle of nowhere nad runs to the start position. Here's where you need a loading screen to hide it. Making a nice loading screen is easy if you have a great imagination. The Loading screen tutorial is at the end of this tutorial so be sure to read it.

---
B - Light
---

I guess shadows were a bit harder than lighting. So if you have shadows you need light. Lighing is easy.

Open photoshop open your shadows.png file choose the magic eraser tool. It's an eraser with a * next to it. It works like a paint bucket. You can fill transparency. So erase everything except the shadows. For example if you had black shadows and white background erase the white and leave the black. Then create a new layer (ctrl+shift+n) (call it something like light) and CTRL+Click on the "background" layer. You'll notice that the shadows are now selected. Choose Select>Inverse from the menu.Click on the "light" layer and fill the transparent area with white. Don't loose your selection. Choose Filter>Render>Lighting effects from the menu. You'll have a window pop up. There you customize the lighting as you like and click OK. Then get rid of the "background" layer. press CTRL+D (deselect) and fill the transparent zone with some color (Not white, gray or black). The color will be transparent in rpgmaker.
Now choose Image>Mode>Indexed. If Exact is chosen then great but if any other then choose "Local (Adaptive)" Forced : "None" Dither : "Diffusion" Amount : "75%" and Tick preserve exact colors.
Save the image as .png, not interlaced. Do the same as with the shadows - Import, draw (Preferrably with bigger transparency, choose your own color, dont forget the coordinates - 160x128 ), move hero.

Here's how the finished product should look like :


//Whoa, I've never written a tut before and look how good it's turning to be (P.S. - The first Smilie of the tut)

---
C - Spotlight (Advanced)
---

Now comes the hard part of lighting. When you have shadows and basic lighting, you can make some spotlights. That's just for the night. Making the spotlight itself is up to you now. You can use selection and lighting effects. The placement is the main problem.
Let's say I have a big map and I need several spotlights on it.What you have to do is make the character appear on one of the spotlight positions, draw the spotlight and run to the next position, draw the second one and so on, finally running back to the real starting position. The main problem is with drawing since rpgmaker draws pictures, where the coordinates represent the center of the picture. You Can choose three ways of drawing.

1. Move tha character so the picture would be drawn in the right place (Good only for not moving objects)
2. Change the Coordinates from 160x120 to AxB (No that ain't god either
3. Altering the picture itself (Yeah that's the one!)

In the beginning you will have a picture like this


But it will be drawn a bit higher than you want it to be. So you need to double it's size in the vertical axis like this

Now it will be drawn as it You wanted it to be.

---
D - Moving lights
---

Let's say you want some character be able to use a WORKING flashlight.

You will need two variables and four pictures of the flashlight. All of the pictures must be altered. Up and down have to be double sized in the vertical axis where the flashlight up picture is on the top and down is on the bottom. Left and right have to be double sized in the horizontal axis where the flashlight left picture is on the left side and right is on the right side. Here's an example of how they should look.



However, don't forget that those flashlight sides are four different images.

First we need an event on the map to check where the hero is looking and draw a picture. Call it eventface

The event has to be Parallel process and have four pages
with a variable heroface 1 to 4 for a starting atribute.
1 is for left
2 is for up
3 is for right
4 is for down

In each page determines which side the hero is facing and draw a picture.

For the First page you want to have this code :
<> Show Picture :   1, LeftViewOfFlashLight, (V[0001],V[0002])
<>CYCLE
   <>
:END Cycle
<>

For the second add this code :
<> Show Picture :   1, UpViewOfFlashLight, (V[0001],V[0002])
<>CYCLE
   <>
:END Cycle
<>

For the Third page use :
<> Show Picture :   1, RightViewOfFlashLight, (V[0001],V[0002])
<>CYCLE
   <>
:END Cycle
<>

And for the last page use this code :
<> Show Picture :   1, DownViewOfFlashLight, (V[0001],V[0002])
<>CYCLE
   <>
:END Cycle
<>

---
Now you need a commont event (have a map event for non hero picture moving)
---

You need a parallel process common event. The code in the common event: First we store hero's (of course the hero can ALWAYS be changet to an event) coordinates in two variables. Let's say HeroX and HeroY.

<> Variable Ch:[0001:HeroX] Set, Hero   X pos
<> Variable Ch:[0002:HeroY] Set, Hero   Y pos

Now check where the hero is facing.

<> Variable Ch:[0001:HeroX] Set, Hero   X pos
<> Variable Ch:[0002:HeroY] Set, Hero   Y pos
<> FORK Optn:Hero - Left Face Direct
  <>
:END Case
<>

Then we change the variable "heroface" to 1 for left, 2 for up, 3 for right and 4 for down.

<> Variable Ch:[0001:HeroX] Set, Hero   X pos
<> Variable Ch:[0002:HeroY] Set, Hero   Y pos
<> FORK Optn:Hero - Left Face Direct
  <> Variable Ch:[0003:heroface] Set, 1
  <>
:END Case
<> FORK Optn:Hero - Up Face Direct
  <> Variable Ch:[0003:heroface] Set, 2
  <>
:END Case
<> FORK Optn:Hero - Right Face Direct
  <> Variable Ch:[0003:heroface] Set, 3
  <>
:END Case
<> FORK Optn:Hero - Down Face Direct
  <> Variable Ch:[0003:heroface] Set, 4
  <>
:END Case
<>

Then we move the picture which is drawn in the "eventface" event.

<> Variable Ch:[0001:HeroX] Set, Hero   X pos
<> Variable Ch:[0002:HeroY] Set, Hero   Y pos
<> FORK Optn:Hero - Left Face Direct
  <> Variable Ch:[0003:heroface] Set, 1
  <> Move Picture :   1, (V[0001],V[0002]),0.1sec
  <>
:END Case
<> FORK Optn:Hero - Up Face Direct
  <> Variable Ch:[0003:heroface] Set, 2
  <> Move Picture :   1, (V[0001],V[0002]),0.1sec
  <>
:END Case
<> FORK Optn:Hero - Right Face Direct
  <> Variable Ch:[0003:heroface] Set, 3
  <> Move Picture :   1, (V[0001],V[0002]),0.1sec
  <>
:END Case
<> FORK Optn:Hero - Down Face Direct
  <> Variable Ch:[0003:heroface] Set, 4
  <> Move Picture :   1, (V[0001],V[0002]),0.1sec
  <>
:END Case
<>

There. Now you have a working flashlight.

---
E - Extra's
---

Shadows vs. Flashlight
Be sure to have your flashlight picture OVER the shadow picture.

----------

Loading Screen.

----------

If you use this tutorial you definately will need a loading screen to hide the hero running from spot to spot drawing pictures.

You have to make a 320x240 sized image. with the words loading.
Make it show up at the beginning of the picture drawing event. The Loading picture has to be number 20. (number 100 in rm2k3)
Erase the picture at the end of the picture drawing event.

That's it you have made a loading screen. Right now it's pretty dull.
Use more pictures, make the loading screen animated, have sounds, music. Just use your imagination.

---------

Finally the tutorial is done and I can relax. It took me 1 Hour 50 Minutes to write it but it's done. If there's any mistakes or you don't understand something feel free to post it here, PM me or contact me via email (that's kind of slow). I hope this tutorial helps many folks out there to improve their graphics  of their game to 10/10. Now I bid you good luck and good night.

[Me5kuTis]

This system can also be used for chipset addons. If you don't have the needed space in your chipset just make a picture of it. And draw it with 0% transparency. Don't forget that your character is going to be under the picture and will be able to walk right through it. You just need to make some events where the pic is going to be. You can also make very small details on the map.

Guess that's it.

[ivan mage]

Great tutorial! I need to add this to my game.

[Me5kuTis]

Uhh.. Sticky?

[AsakuraHao2004]

I dont think it's THAT good..

[Osmose]

Can we see a screenshot of the light effects? Just curious as to how that looks.

[maxine]

well as i thought. This would be a pretty abd idea.. Or maybe just a whole lot of scripting. YOU have too make the character darker when walking in the shadows.. This is just some 10 hour per map delayed script time

[Me5kuTis]

Just light

[Me5kuTis]

Both - The lights AND the shadows

Sorry it took so long. I was a bit busy coding X/Y based enemy sight (No events needed, Woot!).