[Mapping]Some easy ways to make your game look better, Lights, fog and other stuff Options

[-dah0rst-]

This tutorial is for all people who want to make their game look better without great efford. I'll show you easy ways to improve your maps by fog, lighting and other stuff.

I will update this tutorial everytime I get new ideas for you- also you may suggest your own tips and improvements on the topic!

So, let's get to work...

[Show/Hide] The image without working on it...

Part 1: Using screen tone
One problem I have with most Tilesets, especially the RTP ones is, that they are much to colorful and different. Especially when you need to give a scene a certain ambient, it's hard to do so if everything is 'colourful and happy'. A sad scene, for example, looks better with lots of grey and brown than with a light green. Also, a icy cave looks much colder with having more blue or greenish blue in it (because colours always affect feelings, as you may know from your arts class )

[Show/Hide] Image with screen tone...

To do so, use the 'Set screen tone'/ 'Tint Screen' event a lot. You don't have to set it too hard (like only black and withe) but a slight tone does wonders.

[Show/Hide] The screen tone event on VX

Part 2: Lighting
Having light and shadows in your game makes your map look more interesting. The whole screen is not one tone anymore, but has lighter and darker parts.

[Show/Hide] Here comes the lighting...

To do this is abit tricky- first you have to creat a 'light character' for your events (like the sprite for an actor). You do this with Photoshop or Gimp by using a simple radial color gradient. I made some to show here, maybe I eplain in another tutorial how to create custom fogs and graphics. Import them to Graphics/Characters/ and don't forget to write a '$' before the grafic name in VX.

[Show/Hide] One sample for a lighting sprite- PM me if you want a complete one...

Now you just have to create a 'above character' event with one of those pictures as character sprite. et voila- lighting for your map!

Part 3: Fog

[Show/Hide] It gets foggy

In XP this is very easy- just select the fog you want in the chipset options- in VX, you normaly need a script. Here it is:

[Show/Hide] Fog Script

def create_fog
@fog = Plane.new(@viewport1)
@fog.z = 201
end

def dispose_fog
@fog.dispose
end

def update_fog
if $fog != nil
if @fog_name != $fog
@fog_name = $fog
if @fog.bitmap != nil
@fog.bitmap.dispose
@fog.bitmap = nil
end

if @fog_name != ""
@fog.bitmap = Cache.picture(@fog_name)
end
Graphics.frame_reset
else
if @fog_name != ""
@fog.bitmap = Cache.picture(@fog_name)
end
end
if $fog_opacity!=nil
@fog.opacity = $fog_opacity
else
@fog.opacity = 120
end
@fog.ox = $game_map.calc_parallax_x(@parallax.bitmap)*2
@fog.oy = $game_map.calc_parallax_y(@parallax.bitmap)*2
end
end

This script you have to place somewhere in the Spriteset_Map script. Also ou have to add:
'dispose_fog' to the dispose section
'refresh_fog' to the refresh section
'create_forg' to the create section

For everyone who don't know what that means: Just replace this with 'Spriteset Map' in your scripts:

[Show/Hide] Whole page...

#=======================================================================
==
=====
# ** Spriteset_Map
#------------------------------------------------------------------------------
# This class brings together map screen sprites, tilemaps, etc. It's used
# within the Scene_Map class.
#==============================================================================

class Spriteset_Map
#--------------------------------------------------------------------------
# * Object Initialization
#--------------------------------------------------------------------------
def initialize
create_viewports
create_tilemap
create_parallax
create_characters
create_shadow
create_weather
create_pictures
create_fog
create_timer
update
end
#--------------------------------------------------------------------------
# * Create Viewport
#--------------------------------------------------------------------------
def create_viewports
@viewport1 = Viewport.new(0, 0, 544, 416)
@viewport2 = Viewport.new(0, 0, 544, 416)
@viewport3 = Viewport.new(0, 0, 544, 416)
@viewport2.z = 50
@viewport3.z = 100
end
#--------------------------------------------------------------------------
# * Create Tilemap
#--------------------------------------------------------------------------
def create_tilemap
@tilemap = Tilemap.new(@viewport1)
@tilemap.bitmaps[0] = Cache.system("TileA1")
@tilemap.bitmaps[1] = Cache.system("TileA2")
@tilemap.bitmaps[2] = Cache.system("TileA3")
@tilemap.bitmaps[3] = Cache.system("TileA4")
@tilemap.bitmaps[4] = Cache.system("TileA5")
@tilemap.bitmaps[5] = Cache.system("TileB")
@tilemap.bitmaps[6] = Cache.system("TileC")
@tilemap.bitmaps[7] = Cache.system("TileD")
@tilemap.bitmaps[8] = Cache.system("TileE")
@tilemap.map_data = $game_map.data
@tilemap.passages = $game_map.passages
end
#--------------------------------------------------------------------------
# * Create Parallax
#--------------------------------------------------------------------------
def create_parallax
@parallax = Plane.new(@viewport1)
@parallax.z = -100
end
#--------------------------------------------------------------------------
# * Create Character Sprite
#--------------------------------------------------------------------------
def create_characters
@character_sprites = []
@mirror_sprites = []
for i in $game_map.events.keys.sort
sprite = Sprite_Character.new(@viewport1, $game_map.events[i])
@character_sprites.push(sprite)
end
for vehicle in $game_map.vehicles
sprite = Sprite_Character.new(@viewport1, vehicle)
@character_sprites.push(sprite)
end
@character_sprites.push(Sprite_Character.new(@viewport1, $game_player))

end
#--------------------------------------------------------------------------
# * Create Airship Shadow Sprite
#--------------------------------------------------------------------------
def create_shadow
@shadow_sprite = Sprite.new(@viewport1)
@shadow_sprite.bitmap = Cache.system("Shadow")
@shadow_sprite.ox = @shadow_sprite.bitmap.width / 2
@shadow_sprite.oy = @shadow_sprite.bitmap.height
@shadow_sprite.z = 180
end
#--------------------------------------------------------------------------
# * Create Weather
#--------------------------------------------------------------------------
def create_weather
@weather = Spriteset_Weather.new(@viewport2)
end
#--------------------------------------------------------------------------
# * Create Picture Sprite
#--------------------------------------------------------------------------
def create_pictures
@picture_sprites = []
for i in 1..20
@picture_sprites.push(Sprite_Picture.new(@viewport2,
$game_map.screen.pictures[i]))
end
end
#--------------------------------------------------------------------------
# * Create Timer Sprite
#--------------------------------------------------------------------------
def create_timer
@timer_sprite = Sprite_Timer.new(@viewport2)
end
#--------------------------------------------------------------------------
# * Dispose
#--------------------------------------------------------------------------
def dispose
dispose_tilemap
dispose_parallax
dispose_characters
dispose_shadow
dispose_weather
dispose_pictures
dispose_timer
dispose_fog
dispose_viewports
end
#--------------------------------------------------------------------------
# * Dispose of Tilemap
#--------------------------------------------------------------------------
def dispose_tilemap
@tilemap.dispose
end
#--------------------------------------------------------------------------
# * Dispose of Parallax
#--------------------------------------------------------------------------
def dispose_parallax
@parallax.dispose
end
#--------------------------------------------------------------------------
# * Dispose of Character Sprite
#--------------------------------------------------------------------------
def dispose_characters
for sprite in @character_sprites
sprite.dispose
end
end
#--------------------------------------------------------------------------
# * Dispose of Airship Shadow Sprite
#--------------------------------------------------------------------------
def dispose_shadow
@shadow_sprite.dispose
end
#--------------------------------------------------------------------------
# * Dispose of Weather
#--------------------------------------------------------------------------
def dispose_weather
@weather.dispose
end
#--------------------------------------------------------------------------
# * Dispose of Picture Sprite
#--------------------------------------------------------------------------
def dispose_pictures
for sprite in @picture_sprites
sprite.dispose
end
end
#--------------------------------------------------------------------------
# * Dispose of Timer Sprite
#--------------------------------------------------------------------------
def dispose_timer
@timer_sprite.dispose
end
#--------------------------------------------------------------------------
# * Dispose of Viewport
#--------------------------------------------------------------------------
def dispose_viewports
@viewport1.dispose
@viewport2.dispose
@viewport3.dispose
end
#--------------------------------------------------------------------------
# * Frame Update
#--------------------------------------------------------------------------
def update
update_tilemap
update_parallax
update_characters
update_shadow
update_weather
update_pictures
update_timer
update_fog
update_viewports
end
#--------------------------------------------------------------------------
# * Update Tilemap
#--------------------------------------------------------------------------
def update_tilemap
@tilemap.ox = $game_map.display_x / 8
@tilemap.oy = $game_map.display_y / 8
@tilemap.update


end
#--------------------------------------------------------------------------
# * Update Parallax
#--------------------------------------------------------------------------
def update_parallax
if @parallax_name != $game_map.parallax_name
@parallax_name = $game_map.parallax_name
if @parallax.bitmap != nil
@parallax.bitmap.dispose
@parallax.bitmap = nil
end

if @parallax_name != ""
@parallax.bitmap = Cache.parallax(@parallax_name)
end
Graphics.frame_reset
else
if @parallax_name != ""
@parallax.bitmap = Cache.parallax(@parallax_name)
end
end
@parallax.ox = $game_map.calc_parallax_x(@parallax.bitmap)
@parallax.oy = $game_map.calc_parallax_y(@parallax.bitmap)

end
#--------------------------------------------------------------------------
# * Update Character Sprite
#--------------------------------------------------------------------------
def update_characters
for sprite in @character_sprites
sprite.update
if sprite.bitmap==Cache.system("TileE") and $ice!=true
sprite.wave_amp = 1
sprite.wave_length =50
sprite.wave_speed =250
end
end
for sprite in @mirror_sprites
#~ sprite.update
#~ sprite.wave_amp = 4
#~ sprite.wave_length =100
#~ sprite.wave_speed =200
end
end
#--------------------------------------------------------------------------
# * Update Airship Shadow Sprite
#--------------------------------------------------------------------------
def update_shadow
airship = $game_map.airship
@shadow_sprite.x = airship.screen_x
@shadow_sprite.y = airship.screen_y + airship.altitude
@shadow_sprite.opacity = airship.altitude * 8
@shadow_sprite.update
end
#--------------------------------------------------------------------------
# * Update Weather
#--------------------------------------------------------------------------
def update_weather
@weather.type = $game_map.screen.weather_type
@weather.max = $game_map.screen.weather_max
@weather.ox = $game_map.display_x / 8
@weather.oy = $game_map.display_y / 8
@weather.update
end
#--------------------------------------------------------------------------
# *Update Picture Sprite
#--------------------------------------------------------------------------
def update_pictures
for sprite in @picture_sprites
sprite.update
if sprite.bitmap==Cache.picture("mirror_down") and $ice!=true
sprite.wave_amp = 1
sprite.wave_length =50
sprite.wave_speed =300
end
end
end
#--------------------------------------------------------------------------
# * Update Timer Sprite
#--------------------------------------------------------------------------
def update_timer
@timer_sprite.update
end
#--------------------------------------------------------------------------
# * Update Viewport
#--------------------------------------------------------------------------
def update_viewports
@viewport1.tone = $game_map.screen.tone
@viewport1.ox = $game_map.screen.shake
@viewport2.color = $game_map.screen.flash_color
@viewport3.color.set(0, 0, 0, 255 - $game_map.screen.brightness)
@viewport1.update
@viewport2.update
@viewport3.update
end

def create_fog
@fog = Plane.new(@viewport1)
@fog.z = 201
end

def dispose_fog
@fog.dispose
end

def update_fog
if $fog != nil
if @fog_name != $fog
@fog_name = $fog
if @fog.bitmap != nil
@fog.bitmap.dispose
@fog.bitmap = nil
end

if @fog_name != ""
@fog.bitmap = Cache.picture(@fog_name)
end
Graphics.frame_reset
else
if @fog_name != ""
@fog.bitmap = Cache.picture(@fog_name)
end
end
if $fog_opacity!=nil
@fog.opacity = $fog_opacity
else
@fog.opacity = 120
end
@fog.ox = $game_map.calc_parallax_x(@parallax.bitmap)*2
@fog.oy = $game_map.calc_parallax_y(@parallax.bitmap)*2
end
end



end

And what you have to do now to get your fog? Just import your fog graphic into your Graphics/Picture/ Folder.
An example (also created with gimp) is here:

[Show/Hide] Sample fog

And now you need an event that has the script (under 'advanced') order with this text:

$fog="xy" (xy= name of the fog graphic, like "FogIntense")
$fog_opacity = z (z= the fogs opacity, between 0 and 255, like "100")

It also looks very great (especially with good lighting) when the fog is moving. To od so, just rightclick on your map in the map-tree (on the left side of your screen) and select 'properties'- here you just mark the 'scroll horizontal' option under 'background' and set the value to 1. (im sorry not having a screenshot for this )

The config event
I always use one event on every map to set fog, screen tone and weather (here you can also see how you set the fog graphic):

[Show/Hide] The event of power!

As you can see, i made a very easy night/ day change. Just by setting the 'Tag'-switch (sorry, I'm German- Tag means day) to On, it will by day and vice versa.

[Show/Hide] Night to day in just one second^^

The ligh beams are also a fog graphic...

Tip
My screenshots are just the work from about 2 minutes. To make a really good looking map, you spend much time with trying how to set light and fog, change their opacity and improve the effects to get the best out of your map. Especially in roleplaying games, atmosphere is very important. A good picture can create atmosphere better and more easier than a good story- a picture is worth more than a tousand words^^

More stuff to follow- i can't wait for your feedback^^

This post has been edited by -dah0rst-: Oct 22 2010, 09:54 AM

[Titanhex]

Don't a lot of tutorials emphasize not going overboard on this? I have to say that these screenshots aren't too bad, but you'd want to use this technique very sparingly, and only for special areas.

That being said this is a good tutorial for executing the events to do this, as well as providing good scripts and useful information in a clear manner =D Good job.

[-dah0rst-]

Don't a lot of tutorials emphasize not going overboard on this? I have to say that these screenshots aren't too bad, but you'd want to use this technique very sparingly, and only for special areas.

Thats right- as i said, you have to create the right atmosphere. As example, you can do fog and light opacity to 10- this wont be to intensive, but will make you screen more interesting to the eye... (btw- my screens are not fine tuned, those are quick examples)

[Valdred]

I would say the tutorial is magnificent. Ever played 'do you remember my lullaby?'
You should. It uses this all the time, and it is a beautiful game.

http://www.freebirdgames.com/lullaby.html

[mudducky]

I think the advice you gave is good.

It would be better if you edited the examples and didn't go overboard on the fog and lightbeam. If I were controlling the PC on either of those two last maps, my eyes would get dizzy fast and I'd probably point that out clearly to the developer.

[darkhalo]

Thanks for sharing this da0rst. I quite like the idea of using the images to support your effects with scripts and so on.
Maybe continue this thread with selective night lighting effects etc....just an idea what you could add.

[JCRBrowns]

Oh wow thank you sooo much

[Brent Murray]

This is actually some pretty good advice for not just people using VX, but in general! Excellent tutorial! I may have to rememer some of this stuff when the time comes for me to switch to XP or VX someday.

[Satou Asahira]

I suck at mapping. lol I was criticized for this in both of the game-making competitions. I think these tips will help me improve. Thanks.

[-dah0rst-]

This tricks can also be used in XP- here it's even easier to create fog, because its its implemented in the chipset settings. Because i haven't XP on my computer, and its about 3 years ago i worked with it, I'm sorry I can't tell you precisely where you can find the options -.-
Maybe i get the demo and tell you afterwards

[shady ultima]

Is there anyway to do this all in 2k3?

[-dah0rst-]

If anyone knows if RPG 2000 features semi-transparent layers i could- other way it will result in veeeeery dirty screens...

[BlaZe22]

Great tutorial!
Very helpful
Thanks alot