Introduction

The design of "Map Flooding" includes the following aspects:

• Animations of the progress of the "flooding bar"
• Animations of the continents being flooded

Flooding Bar

The "Flooding Bar" which indicate the flooding level of the game and when the flooding meter is reached the entire map completely submerge and game is over.

Flooding bar 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 map is mostly submerged and the game screen starts to fade in brightness.

5.The map is completely submerged in seawater and the "Flooding Map" random event ends.

Flooding Animation

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.

I communicated with Group 6, I chose to use the animation about the ocean produced by their group directly. It would also fit in with the theme. Similarly, the beach uses a copy of team 6.

Note: this is the mockup vesrion of the animation and final design of the animation might be simplified in the game.

The original state of the map.

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.

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.

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.

The fifth step, where the continent is submerged and there are still some last colour blocks of sand left.

The last step of the whole animation, where the whole continent is submerged. Only the ocean is shown on the screen.

Gif animation of the flooding system

Sand Flooding Animation

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.

Flash tile