• Hi, Guest!
    Some images might be missing as we move away from using embedded images, sorry for the mess!
    From now on, you'll be required to use a third party to host images. You can learn how to add images here, and if your thread is missing images you can request them here.
    Do not use Discord to host any images you post, these links expire quickly!
Fogs and Panoramas

Fogs and Panoramas 2017-05-25

Let's talk graphics! If you're looking for something special to help set the mood, you might consider trying out some Fogs or Panoramas; but what are they?


Fogs


  1. An image that lays over the entire map
  2. It can be a still image or an animated .GIF
  3. It can be any size; if it's not as big as the map it will be tiled/repeated to cover everything
  4. Its' transparency can be controlled in RMXP
  5. It can be set to move through RMXP (not animation, the image just slides in the direction you set at the speed you set)

Fogs do not:
  1. Have priority settings. They are allways on top of everything.
  2. Stop moving or change direction unless you event them to do so.
  3. Cross map connections. Even if the same Fog is on both maps, it does not load properly and will be cut off.

Here's an example of the difference a fog makes. On the top are screenshots without any fog, and below them are the same areas with a special fog.
bfDzmCo.png

If you want to see some more examples of fogs in action, there's some .GIFs in this spoiler
o1cFmIN.gif
opfESeo.gif

On the left, an animated .GIF that creates the looks of firelight at night. On the right, a still image that's moved back and forth by RMXP to look like the shadow of trees blowing in the wind.
Ol2zzx9.gif
1CnVxvV.gif

On the left, a single animated water tile is repeated accross the map to create an underwater look. On the right, a still image made to fit this map size has light streaming in to reveal hidden item locations.
nmaErCM.gif
VAJXmBA.gif

On the left, a simple animated .GIF creates the look of fireflies and nighttime. On the right, an image made specifically for this map lights multiple lanterns and windows with their own special colors.
Step 1 is to make your image. then stick it into your project! Just look for the Graphics Folder, and then stick your image in the Fogs Folder.

Aki tip: You actually don't need to double the size of your Fog like with other graphics in Essentials. By default they display at 200% their size, so you might save yourself a step there.

Step 2 is set up your fog to be displayed! This can be done by attaching it to a certain tileset so that they're allways together, or something like a Parallel Process event to display a Fog on a certain map. Check out the spoiler below labelled Visual Aid

Aki tip: If you know what map you're going to use your fog on, it's easy to customize it! Set your finished map to 1/2 size view and grab a screenshot, then you can use that as a guide to draw a perfect fitting Fog image.

Step 3 is changing any of the Fog options you want to use!
Opacity is the transparency of the image. Lower number = Fainter the image appears

Blending is how the Fog mixes with the stuff below it. You probably want to leave this on Normal unless you know what you're doing because it will mess with the colors

Zoom is automatically set to 200. You can leave it like that and not have to worry about doubling your fog images, or set it to 100 if you did.

SX and SY are values that move the Fog. The numbers are usually at zero, which mean no movement, but you can change them to control the speed and direction the fog image moves. The values can be negative or positive, and a higher number will move the Fog faster in that direction. It will keep moving and the image will keep repeating itself so there's no need to worry about seams at the edge of the image.

  • SX positive =right; negative =left.
  • SY positive =up; negative =down.

The Hue Slider is also on the bottom, and it will of course change the color of your Fog if you slide it. (This only works on colored images, it won't turn a black/white image to green or orange)

Setting up a parallel process event to make my Fog appear
1YnsT63.gif



Setting up in the Database to make my Fog/Panorama appear everytime I use this tileset
Dscvhhn.gif


Panoramas


  1. An image that lays under the entire map
  2. It can be a still image or an animated .GIF
  3. It can be any size; if it's not as big as the map it will be tiled/repeated to cover the whole area
  4. It's only visible on spaces where there are no tiles, or the first layer tiles have transparency

Panoramas do not:
  1. Have priority settings. They are allways on beneath the entire map.
  2. Move or change. A .GIF can be used to create a moving image, and an event can be used to change the panorama, but there are not built-in options to do that like Fogs have.
  3. Stop where the map stops. If you approach the edge of the map and see the void, the panorama will be there instead.
  4. Automatically stop the player from walking on them, they don't have their own passability setting.

Check out this screenshot where I overlapped the game's window with the map behind it. Notice the sky and plants that can be seen in the game, but aren't on the map?
KauzVj8.png


gIZvABm.gif

At the edge of the cliff is a Panorama to create a mountain view. There are invisible tiles blocking the player from moving forward, but the Articuno graphic can easilly move on top of the Panorama thanks to checking the Through option in its' event.

I don't have any more good examples on hand while writing this, but Panoramas don't have to just be used at the edge of a map like it is here. Another good use of a Panorama might be creating puddles that the player can walk on, but also reflect a sky full of moving clouds, like seen on Hoenn's Route 120. You can try that one out for yourself by using this resource here! ;)
Step 1 is to make your image. then stick it into your project! Just look for the Graphics Folder, and then stick your image in the Panoramas Folder.

Step 2 is set up your Panorama to be displayed! This can be done by attaching it to a certain tileset so that they're allways together, or something like a Parallel Process event to display the Panorama on a certain map. Check out the spoiler below labelled Visual Aid

Setting up a parallel process event to make my Panorama appear
OZFFQnT.gif



Setting up in the Database to make my Fog/Panorama appear everytime I use this tileset
Dscvhhn.gif
Credits
This is just a tutorial, I don't need any credits.

Oh uh, if you were interested in the games the screens came from:
  1. The ones with a Mew are from MewYou
  2. The hi-res game isn't released. And probably won't be antyme soon. Sorry!
  3. All the others are from Bonfire Stories.
Author
Aki
Views
9,998
First release
Last update
Rating
5.00 star(s) 5 ratings

More resources from Aki

Latest reviews

These are very good, straightforward explanations. And nice examples! I have some new things to try!
Although I knew how fogs worked, I had no idea panoramas even existed. This was an awesome introduction to them and was extremely helpful for beginners.
great resource - extremely helpful. Also the panorama gif example with the characters riding the mamoswine is great!
Very well explained. After this tutorial people have no excuse to make boring maps anymore! haha
Back
Top