Stage Selection 2.0 ⭐

[bitbrain]

rewrite the stage selection so it is more clear what the objective of the game is.

The current level selection looks somewhat like this:

This has the following drawbacks:

• inconsistent pixel scale fonts and stage background have different pixel sizes
• terrible navigation it is currently hard to see where which level is, since it is zoomed in quite a bit and we can not orientate properly
• bad readability there is too much going on! The background is blinking and it is not fitting into the clean style of the game
• UI limitations currently we have to overlay the UI on the blinking background, which makes everything completely unreadable. It is also hard to change that since there is no space!
• animation effort it is difficult to animate all the background elements since they are quite unique

Requirements

Instead, we are going to replace the old stage selection with a new one! This stage selection has the following design requirements:

• the stage selection has a set of checkpoints
• checkpoints can be in the following states: activated, locked, deactivated
• only checkpoints which are locked or activated can be visited, all others are skipped when selected
• initially, only a single checkpoint is activated (all others are deactivated)
• once a player completes a level, the next level is activated, unless there are locking requirements (see Implement lock system 🔒 #48 for details) - in that case the next level is set to locked state

Additional non-functional requirements

Additionally, it should follow these non-functional requirements:

• pixelsize should be consistent with the font in use
• there should always be dark background next to each checkout (below,next or above to it) where the stage information can be placed)
• the tileset should be clean and simple and should not contain too many elements
• the general zoom scale should be decreased, so the camera is further away. As a result, more elements are visible
• all activated checkpoints should have a red lighting effect, including particle effects
• all locked checkpoints should have a blue/blinking lighting effect including blue particle effects
• all deactivated checkpoints have no particle effects nor lighting

This can look similar to this:

New Stage Model

We have to introduce a new model which looks like this:

World --- has ---> Stage
Stage --- has ---> state
Stage --- has ---> parent
Stage --- has ---> children

This results in a tree structure. e.g. we can have locking requirements where all direct children need to be at 100% in order to unlock the next one.