Map Flooding Design
The design of "Map Flooding" includes the following aspects:
- fixed weather icons (i.e. rain, typhoon)
- animations of the progress of the "flooding bar"
- animations of the continents being flooded
In order to comply with the basic setting of "Flooding", our team intended that when the map was ready to start triggering "Flooding", one of the first prerequisites to be met was that the game's weather should be "Rain" or "Typhoon", to match the reality of the situation. After the weather conditions are met, the flooding will begin.
This is a prerequisite created by our team for the "Flooding" event to be triggered, namely the "Flooding Bar" which serves to remind the player how far the "flooding level" of the current continent has progressed.
Flooding bar sprite animation
As the animation shows, the entire progress bar is divided into five stages, each relating to the five levels of "Flooding". They are differentiated as follows.
1.Normal, when the weather icon has not changed and the sea level is normal.
2.Sea level has risen slightly, but the weather icon remains the same.
3.As the sea level continues to rise and the mainland begins to be submerged, the weather icon changes from its original icon to 'Rain'.
4.The continent is mostly submerged and the game screen starts to fade in brightness.
5.The continent is completely submerged in seawater and the "Flooding Map" random event ends.
To make the overall 'Flooding' more visually appealing, I have also created a related submerged animation. The animation takes about 10 seconds and shows the continent gradually being submerged by the sea from the edge of the sandy beach to the complete submergence of the continent.
The following are some specific step-by-step details of the painting.
Similarly, the beach uses a copy of team 6.
I began the animation of the tsunami flooding the continent, which was the first step in ordering the axes of the overall squares on top of the original layers.
This is the second step of the whole animation, starting with a square bokeh of the outer border of the beach (the part near the sea is the first to be flooded), while adding different layers to bokeh the different blocks of colour. The process of 'flooding' is reflected by adding different layers of different colours.
This is the third step, where the colour bokeh extends from the top and bottom borders of the beach to the middle position of the beach, which is then shown to be submerged in the middle.
This is the fourth step, in which the overall size of the continent is reduced while the continent represented by the green block in the middle is reduced in the same proportion to have the visual effect of making it appear that the continent is submerged.
This is the fifth step, where the continent is submerged and there are still some last colour blocks of sand left.
This is the last step of the whole animation, where the whole continent is submerged. Only the ocean is shown on the screen.
To make the program code easier to write, I also created another stand-alone version of the beach being flooded at the same time.
As shown in the picture, the whole animation has the effect of the beach first being submerged by the sea at one corner and then gradually expanding. Finally the whole colour block is completely submerged.
