Guide to the Weather System and other full screen animations

Any documentation, tutorials, tips and tricks, or examples on how to use the IB2 Toolset

Guide to the Weather System and other full screen animations

Postby youngneil1 » Fri Jan 01, 2016 11:11 am

Work in progress: rather outdated, yet still has useful info (will rewrite)

Guide to the Weather System and other full screen animations

1. Foreword
I will write down here how to properly make use of the Weather System and other full screen effects. Before I start, I am very well aware that this might not be IB's long term solution for handling full screen animations. And neither this system nor this guide shall hinder IB's progress. The quicker this system is replaced with something better, the happier I am :) . That being said, the work flown into this will not be in vain in any case. It's a road of learning for me and it's a great one. Furthermore, I try to avoid half-finished stuff whenever I can. And not writing this guide, leaving the loose ends loose or so cryptic that no one can make use of them (minus me as creator) would exactly feel like doing it only half-way through.

2. Overview
The following is a system of 10 graphic effect channels that project each to full screen (mainmap). They can be animated via scripts called from script hooks for each area in the toolset. The first four channels are for non-weather related effects (four script hooks), while the next six channels are used by the weather system via a single script hook for a single weather pattern script (e.g. winter), which in turns calls weather type scripts as its building blocks (e.g. snowWithheavyCloudsA).

The aforementioned weather pattern and weather type scripts can be found in your module's ibscripts folder (well, or will be found there later, mayhaps in subfolders for weather pattern scripts and weather type scripts to declutter the ibscripts folder).

In the following I will try use a cohesive terminology (definitions of most stuff at the end, in the section that details how a full screen effect channel works):

3. The weather system (game logic, higher level)

a. Weather pattern scripts
The system comes with seven premade weather scripts. These are:

spring: Fast changes of rainy and sunny, occassional ligthning storms. No snow or fog.
summer: Mostly sunny and light clouds, but can go all the way down to rainy thunderstorms. Light fog rarely. No snow.
autumn; Very foggy, often rain. Sometimes snow fall.
winter: Often snow, sometimes hard rain. Thick clouds and stormy, but sometimes clear or lightly clouded intervals, too.
desert: Just clear, light clouds and various degrees of sandstroms. No snow, rain or fog.
swamp: Foggy almost all the time, very rainy. No snow. Can also be used for e.g. jungles.
iceland: Extreme Version of winter, dire weather conditions with raging storms and snow very often.

They that can be directly used or serve as examples and starting points for the custom creation of further scripts. A weather pattern script does two things:

(a) It defines an entry list with all possible weather types in this area. A weather type can contain full screen effects in up to six channels. An example might e.g. be the weather type "rainWithFog" which use four effect channels: two with rain layers and two with fog layers. So, if you would like to do a ranking, from big to small it is: weather pattern script ("desert") - weather type script ("heavySandStormWithLightning") - effect channel(s) (e.g. two with heavy sandstorm layers and two with lightnings). Besides the names of the weather types, the entry list of the ewather pattern script also contains for each weather type its chance of occurrence (summed up to 100%) and its duration (randomized automatically by +/- 50%). The duration is measured in party moves (or real time timer ticks, should that one be used). The entry list is only rolled for upon entering an area. In case that the weather type from the area that the party just Comes from is existent in the new area, no roll will be made and the old weather type just continues to work. Also, when entering an area with no weather (like e.g. an house) and then leaving again, the old weather will be continued.

(b) It also defines an own exit list for each weather type from the entry list. The exit lists again contain probabilities of occurrence and duration. The purpose of the exit list is to simulate development of weather. This way you will never have an instant switch from e.g. clear weather to thunderstorm with lightning, but instead would go through steadily getting worse weathers (well, unless of course you purposefully want such change).

b. Weather type scripts
There are about 100 weathertype scripts by now. Each of these sets up of up to 6 effect channels per weather type (channels 6 to 10) from the entry list. This process is described below under "Effect channels in detail".

These are the already existing weather type scripts, so you can see which weather effects are mixed and matched to create the weather patterns::

//Weather types currently available:
//clear
//lightCloudsA, lightCloudsB, lightCloudsC, cloudsA, cloudsB, cloudsC, heavyCloudsA, heavyCloudsB, heavyCloudsC
//lightFog, fog, heavyFog
//lightSandStorm, sandStorm, heavySandStorm, heavySandStormWithLightning

//all weathers below (rain and snow types) allow adding "Showers" at the end to randomize precipitation, e.g. lightRainWithCloudsCShowers

//lightRain, lightRainWithCloudsA, lightRainWithCloudsB, lightRainWithCloudsC, lightRainWithLightFog, lightRainWithFog, lightRainWithHeavyFog
//rain, rainWithCloudsA, rainWithCloudsB, rainWithCloudsC, rainWithHeavyCloudsA, rainWithHeavyCloudsB, rainWithHeavyCloudsC, rainWithLightFog, rainWithFog, rainWithHeavyFog
//heavyRain, heavyRainWithCloudsA, heavyRainWithCloudsB, heavyRainWithCloudsC, heavyRainWithHeavyCloudsA, heavyRainWithHeavyCloudsB, heavyRainWithHeavyCloudsC,
//heavyRainWithLightFog, heavyRainWithFog, heavyRainWithHeavyFog, heavyRainWithHeavyCloudsAAndLightning, heavyRainWithHeavyCloudsBAndLightning, heavyRainWithHeavyCloudsCAndLightning
//lightSnow, lightSnowWithCloudsA, lightSnowWithCloudsB, lightSnowWithCloudsC, lightSnowWithHeavyCloudsA, lightSnowWithHeavyCloudsB, lightSnowWithHeavyCloudsC, lightSnowWithLightFog, lightSnowWithFog, lightSnowWithHeavyFog
//snow, snowWithCloudsA, snowWithCloudsB, snowWithCloudsC, snowWithHeavyCloudsA, snowWithHeavyCloudsB, snowWithHeavyCloudsC, snowWithLightFog, snowWithFog, snowWithHeavyFog
//heavySnow, heavySnowWithCloudsA, heavySnowWithCloudsB, heavySnowWithCloudsC, heavySnowWithHeavyCloudsA, heavySnowWithHeavyCloudsB, heavySnowWithHeavyCloudsC,
//heavySnowWithLightFog, heavySnowWithFog, heavySnowWithHeavyFog, heavySnowWithHeavyCloudsAAndLightning, heavySnowWithHeavyCloudsBAndLightning, heavySnowWithHeavyCloudsCAndLightning


4. The other full screen effect channels
The first four channels are not for the weather script, but can each contain an own effect script. Two I already have prepared for usage: an animated sea and shadows engulfing the party from all sides, reducing visibility to about one square around the party.

5. The set up of the channels in detail (settings within a weather type script)

Full screen effect: A graphic effect projected onto the whole main map play area. Technically, a source .png form graphics folder is enlarged and divided into as many squares as can be seen in the play area (9x9 on pc, 7x7 for android). Then the pieces of the .png are drawn to the corresponding square in play area. The source .png are quite small for performance reasons, usually 100x100px or 150x150px. This allows to use many of them at the same time. There is no technical limit to this, so you could try a 500x500px .png or whatever if you like.

Channel: As seen, we can have different full screen effects at once. This needs to be sorted and limited due to performance reasons. Therefore, there are 10 limited slots, that each can hold a full screen effect. These are the channels. The channels are drawn in the order of the channel number, channel 1 is drawn first, channel 10 is drawn last. This creates the effect that channel 10 will appear on top of everything (like high clouds), while channel 1 is at the bottom of the stack. The channels are only a part of the whole graphic stack of IB. The whole picture looks like this (simplified):
1. Hand drawn .jpeg (or .png)
2. Tile layer 1 to 5
3. Props
4. Channel 1 to 10
When looking at this I realized it would be helpful to also have the option of displaying full screen effects below the hand drawn map (like sea). Therefore, each channel can be made to be either a top channel or a bottom channel, which changes the look of the graphic stack to this:
1. Bottom channels
2. Hand drawn .jpeg (or .png)
3. Tile layer 1 to 5
4. Props
5. Top Channels
The sum of top and bottom channels is still 10, but you can freely decide for each channel whether it falls into the bottom or top category.

Layer: Some full screen effects work best in combination with a another full screen effect (each in its own channel). Think of rain - it looks better when the droplets can fall with different speeds. To achieve this, two full screen effects showing rain drops are run on top of each other (each in a different channel), moving at different speeds. This looks even more convincing when the two rain drop .png are different, having drops at different places. Such .png showing the same effect, like rain, but differently, are sorted in layers, e.g. there is rainLayerA and rainLayerB.

Movement pattern: The full screen effects need to be moved across the screen to have the desired effect. A static picture of hovering rain drops would not really do the trick, would it :) . Generally, movement is in x (horizontal, positive means to the right side) and y (vertical, positive means downward) direction. The most simple way to use this is a linear change of x and/or y. But sometimes this will not provide the needed illusion, snow for example has a randomly drifting nature, fog even more so. Therefore, I have prepared a few different alogrithms - which I call movement patterns - for computing the movement across the screen, using a little random number chaos. They are named after the movement effect they try to simulate. We have so far:
1. linear (just go into the direction vector of x,y endlessly)
2. random straight (switch to one of 8 randomly (left/right, up/down and all the diagonals) chosen directions after a while)
3. rain (fall down, with a little random x drift added)
4. clouds (smoothly sail in one direction for a while, then randomly change that direction)
5. snow (fall down slowly, with a lot random x drift added)
6. fog (slowly moving, changing direction randomly quite often; works for ocean, too)

Override values: Each of the movement patterns comes with default settings for its speed, direction and nature of random change. Still, it's possible to override these values with custom settings (e.g. making the rain fall faster or the fog change direction more often). This is crucial for applying the movement patterns to new full screen effects not originally intended for the pattern (e.g. animating an ocean with the fog pattern).

Looping source: By default all effects use the source .png in a looping way: what scrolls out below appears on top, what leaves on the right side appears again on the left side. A few movement patterns work differently, namely fog, here. They scroll around an enlarged inner section of the source .png. Once that inner section reaches the source .png border, the scrolling changes direction towards the center again. This is useful because the default looping shows a slightly visible seam at the border that is avoided this way. When using a source .png that has lots of free space (like rain or snow) it's very hard to notice the seam. On the other hand, a fog makes the seam appear much stronger. This value comes predefined with the movement pattern, but can be overridden, too.

Shape changing animations: So far all the full screen effects discussed worked by moving a .png across the screen in various patterns. Beyond this it can be helpful to have the .png change its shape while is moved across the screen (like e.g. waves breaking on the moving ocean). Technically this work by calling a series of .png that are switched against each other during the movement across the screen. The source .png that form together a shape changing animation have the very same name + a number, starting with 1. Furthermore, the speed of the shape change can be set.

Animations happening at random intervals: It is helpful to have some animations only happen once in while (like lightning in a thunderstorm), with a certain chance for the animation to trigger per move of party /passing of real time (if the real time timer for the module is activated).You can specifiy this chance between 0 and 100. Furthermore, you can define in two possible ways for how long the animation shall run once it has been triggered: either by just an amount of real time passing or - for shape changing animations with numbered frames - by setting the number of frames to display before the anmiation ceases. You can also tie togehter two channels to get triggered on the same random roll - this is very helpful for two layered efffects that utilize two channels at the same time. Finally, you can specify whether you want the triggered effect to fade in once it's triggered (or happen abruptly), same for the phase of its ending.

Contain effect fully inside map area: Last but not least, you can set whether the effect shall remain fully inside the map area at any time (shifting its center away from the party once you come close to a map border) or to stay always centered on top of the party (a part of the effect is cut off then when you near map border). The later is helpful for e.g. the flicker ot the party's torches or some such.

6. Appendix: already existing .png for full screen effects

lightCloudLayerA.png
lightCloudLayerA.png (12.38 KiB) Viewed 5593 times

lightCloudLayerB.png
lightCloudLayerB.png (11.37 KiB) Viewed 5593 times

lightCloudLayerC.png
lightCloudLayerC.png (10.44 KiB) Viewed 5593 times

cloudLayerA.png
cloudLayerA.png (16.33 KiB) Viewed 5593 times

cloudLayerB.png
cloudLayerB.png (16.26 KiB) Viewed 5593 times

cloudLayerC.png
cloudLayerC.png (17.1 KiB) Viewed 5593 times

heavyCloudLayerA.png
heavyCloudLayerA.png (25.43 KiB) Viewed 5593 times

heavyCloudLayerB.png
heavyCloudLayerB.png (19.71 KiB) Viewed 5593 times

heavyCloudLayerC.png
heavyCloudLayerC.png (22.78 KiB) Viewed 5593 times

lightRainLayerA.png
lightRainLayerA.png (3.16 KiB) Viewed 5593 times

lightRainLayerB.png
lightRainLayerB.png (3.21 KiB) Viewed 5593 times

rainLayerA.png
rainLayerA.png (3.67 KiB) Viewed 5593 times

rainLayerB.png
rainLayerB.png (3.56 KiB) Viewed 5593 times

heavyRainLayerA.png
heavyRainLayerA.png (4.79 KiB) Viewed 5593 times

heavyRainLayerB.png
heavyRainLayerB.png (4.45 KiB) Viewed 5593 times

lightFogLayerA.png
lightFogLayerA.png (21.67 KiB) Viewed 5592 times

lightFogLayerB.png
lightFogLayerB.png (21.69 KiB) Viewed 5592 times

fogLayerA.png
fogLayerA.png (23.4 KiB) Viewed 5592 times

fogLayerB.png
fogLayerB.png (22.25 KiB) Viewed 5592 times

heavyFogLayerA.png
heavyFogLayerA.png (19.36 KiB) Viewed 5592 times

heavyFogLayerB.png
heavyFogLayerB.png (18.25 KiB) Viewed 5592 times

lightSnowLayerA.png
lightSnowLayerA.png (3.18 KiB) Viewed 5592 times

lightSnowLayerB.png
lightSnowLayerB.png (3.22 KiB) Viewed 5592 times

snowLayerA.png
snowLayerA.png (4.67 KiB) Viewed 5592 times

snowLayerB.png
snowLayerB.png (5.27 KiB) Viewed 5592 times

heavySnowLayerA.png
heavySnowLayerA.png (5.52 KiB) Viewed 5592 times

heavySnowLayerB.png
heavySnowLayerB.png (4.99 KiB) Viewed 5592 times

lightSandstormLayerA.png
lightSandstormLayerA.png (3.16 KiB) Viewed 5592 times

lightSandstormLayerB.png
lightSandstormLayerB.png (3.19 KiB) Viewed 5592 times

sandstormLayerA.png
sandstormLayerA.png (3.38 KiB) Viewed 5592 times

sandstormLayerB.png
sandstormLayerB.png (3.59 KiB) Viewed 5592 times

heavySandstormLayerA.png
heavySandstormLayerA.png (5.07 KiB) Viewed 5592 times

heavySandstormLayerB.png
heavySandstormLayerB.png (5.12 KiB) Viewed 5592 times

sea1.png
sea1.png (20.05 KiB) Viewed 5592 times

sea2.png
sea2.png (20.22 KiB) Viewed 5592 times

sea3.png
sea3.png (20.08 KiB) Viewed 5592 times

sea4.png
sea4.png (20.13 KiB) Viewed 5592 times

sea5.png
sea5.png (20 KiB) Viewed 5592 times

sea6.png
sea6.png (19.74 KiB) Viewed 5592 times

pixShadow1.png
pixShadow1.png (4.97 KiB) Viewed 5592 times

pixShadow2.png
pixShadow2.png (4.98 KiB) Viewed 5592 times

pixShadow3.png
pixShadow3.png (4.96 KiB) Viewed 5592 times

pixShadow4.png
pixShadow4.png (5.05 KiB) Viewed 5592 times

pixShadow5.png
pixShadow5.png (4.96 KiB) Viewed 5592 times

pixShadow6.png
pixShadow6.png (5 KiB) Viewed 5592 times

pixShadow7.png
pixShadow7.png (4.97 KiB) Viewed 5592 times

pixShadow8.png
pixShadow8.png (4.99 KiB) Viewed 5592 times

pixShadow9.png
pixShadow9.png (4.94 KiB) Viewed 5592 times

pixShadow10.png
pixShadow10.png (4.97 KiB) Viewed 5592 times

lightningLayerB1.png
lightningLayerB1.png (3.22 KiB) Viewed 5592 times

lightningLayerB2.png
lightningLayerB2.png (3.67 KiB) Viewed 5592 times

lightningLayerB3.png
lightningLayerB3.png (4.74 KiB) Viewed 5592 times

lightningLayerB4.png
lightningLayerB4.png (6.56 KiB) Viewed 5592 times

lightningLayerB5.png
lightningLayerB5.png (8.52 KiB) Viewed 5592 times

lightningLayerB6.png
lightningLayerB6.png (10.48 KiB) Viewed 5592 times

lightningLayerB7.png
lightningLayerB7.png (11.88 KiB) Viewed 5592 times

lightningLayerB8.png
lightningLayerB8.png (13.03 KiB) Viewed 5592 times


WIP
Attachments
lightningLayerA8.png
lightningLayerA8.png (13.68 KiB) Viewed 5592 times
lightningLayerA7.png
lightningLayerA7.png (11.9 KiB) Viewed 5592 times
lightningLayerA6.png
lightningLayerA6.png (10.45 KiB) Viewed 5592 times
lightningLayerA5.png
lightningLayerA5.png (8.54 KiB) Viewed 5592 times
lightningLayerA4.png
lightningLayerA4.png (6.6 KiB) Viewed 5592 times
lightningLayerA3.png
lightningLayerA3.png (4.76 KiB) Viewed 5592 times
lightningLayerA2.png
lightningLayerA2.png (3.7 KiB) Viewed 5592 times
lightningLayerA1.png
lightningLayerA1.png (3.21 KiB) Viewed 5592 times
User avatar
youngneil1
Backer
Backer
 
Posts: 3994
Joined: Sat Dec 08, 2012 7:51 am

Re: Guide to the Weather System and other full screen animat

Postby youngneil1 » Mon Jan 11, 2016 7:33 am

Big update to the guide, reflecting the current state of the weather system. Nearing completion of weather system and guide rapidly now.
User avatar
youngneil1
Backer
Backer
 
Posts: 3994
Joined: Sat Dec 08, 2012 7:51 am

Re: Guide to the Weather System and other full screen animat

Postby youngneil1 » Mon Aug 07, 2017 9:20 pm

1. Changing the graphics of weather types: clouds, fog, sandstorm and lightning (full screen images overlaying each other, yet moves as sprites)
The files below can be found in your module's graphic folder - just keep their name and size and exchange them with a fitting graphic matching your module's style:
(Note: I think lightning has a bug, must investigate later)

lightCloudLayerA.png
lightCloudLayerB.png
lightCloudLayerC.png
cloudLayerA.png
cloudLayerB.png
cloudLayerC.png
heavyCloudLayerA.png
heavyCloudLayerB.png
heavyCloudLayerC.png


lightFogLayerA.png
lightFogLayerB.png
fogLayerA.png
fogLayerB.png
heavyFogLayerA.png
heavyFogLayerB.png


lightSandstormLayerA.png
lightSandstormLayerB.png
sandstormLayerA.png
sandstormLayerB.png
heavySandstormLayerA.png
heavySandstormLayerB.png


lightningLayerB1.png
lightningLayerB2.png
lightningLayerB3.png
lightningLayerB4.png
lightningLayerB5.png
lightningLayerB6.png
lightningLayerB7.png
lightningLayerB8.png


2. Changing the graphics of weather types: rain and snow (single little sprites drawn many, many times by an algorithm varying position and speed)
Thes files below can be found under Default/NewModule/graphics - just place a .png (matching your module's style) with the same name and size in your module's graphic folder:

rainDrop.png
snowFlake.png

3. Weather Editor
Note: The weather effect editor is not supported anymore - it was very powerful for finetunig, but also based on an older weather approach without sprites (which was too slow).

The weather editor is still working though:

It has three sections, like layers of an onion:
Weathers, WeatherTpyeLists and WeatherTpyeListItems.

a. Weathers
Weathers can be defined per each area via the area property areaWeatherName (just enter the name of the weather). You will find seven premade weathers:
spring: Fast changes of rainy and sunny, occassional ligthning storms. No snow or fog.
summer: Mostly sunny and light clouds, but can go all the way down to rainy thunderstorms. Light fog rarely. No snow.
autumn; Very foggy, often rain. Sometimes snow fall.
winter: Often snow, sometimes hard rain. Thick clouds and stormy, but sometimes clear or lightly clouded intervals, too.
desert: Just clear, light clouds and various degrees of sandstroms. No snow, rain or fog.
swamp: Foggy almost all the time, very rainy. No snow. Can also be used for e.g. jungles.
iceland: Extreme Version of winter, dire weather conditions with raging storms and snow very often.

The premade weathers can be directly used or serve as examples and starting points for the custom creation of further weathers.

b. WeatherTpyeLists
WeatherTpyeLists are the different states a weather like e.g. "spring" can go through over time. Like "lightCloudsA" (few clouds favouring cloudswith the lightCloudLayerA.png) or lightRainWithCloudsAShowers (medium cloud thickness favouring clouds with the cloudLayerA.png and medium amount of rainDrop.png). When a weather is entered the first time it always begins with the special WeatherTpyeList entry. This one branches to other states, who in turn branch into each other, creating a continous flow of weather states.

c. WeatherTpyeListItems
The WeatherTpyeListItems of a WeatherTpyeList are the exit options of a weather state. They contain a chance to be rolled (always addign up to 100% within a weather state), a duration defining how long the rolled new weather state will last and an effect to play for this rolled weather state (from drop down list).
User avatar
youngneil1
Backer
Backer
 
Posts: 3994
Joined: Sat Dec 08, 2012 7:51 am


Return to Users Guide and Tutorials

Who is online

Users browsing this forum: No registered users and 1 guest