Water Sort Puzzle With Glittery Shader
Alicia Sudlerd, Mihkel Roomet, Henrik Tamm
Scan this to download and install Android build (Don't forget to double tap to check our shaders out!)
Overview
Water Sort Puzzle is a casual puzzle game popular on mobile platforms. The game presents the player with a number of containers (tubes, bottles, glasses, vases, etc.) filled with various colored liquids. The challenge is to pour the liquids back and forth between the bottles until each bottle contains a liquid of only one color. The game often starts off easy with just a few bottles and colors but can become challenging as more colors and bottles are introduced.
Goal
Sort the colors in such a way that each bottle is either empty or fully filled with liquid of one singular color.
Rules
- You can only pour liquid from one bottle to another if the bottles' topmost colors match and there's enough space for the liquid that gets poured over
- Each time you pour only the topmost color gets poured (the colors below it do not)
- The game ends when each bottle has only one color in it
Strategies
- Prioritizing moving the most restricted (trapped) colors first
- Trying to create an empty bottle as soon as possible, as it can act as a buffer or temporary space to help with sorting
- Planning moves ahead to ensure there is space for subsequent moves
Progression
- Each new level increases in complexity, adding new bottles and/or colors
- The player will have to keep thinking more and more steps ahead as the dynamics of the game keep evolving
Implementation
Level design
This is the initial idea for how to structure levels.
| Level | bottles | Colors |
|---|---|---|
| 0 | 2 | 1 |
| 1 | 3 | 2 |
| ... | ... | ... |
| n | n+2 | n+1 |
Physics
The game does not require a complete physics engine but should provide a smooth and natural liquid-pouring effect.
- The water surface should always be parallel to the floor
- To master the visual experience, the water surface can have a curvy fluid animation applied to the edge of the water
Bottle design
When pouring, only the bottle rotates, the liquid inside does not. This is accomplished by using a shader and code to manipulate certain defined variables during the pouring animation.
Initial Progress
Nov 14
Features
- Main menu
- AI-generated logo, default cursor and pointer cursor
- Credits panel (opens on clicking the logo in main menu)
- 7 playable levels (progress is saved)
- In-game pause menu (toggled with Esc)
All the UI buttons work. Pouring works as expected. Levels are sometimes impossible to beat (the colors are distributed randomly among the first bottles).
Next steps
- Adding UI to indicate starting and completing levels
- Displaying stream of liquid on pouring
- Adding light and particle effects to the event where a bottle gets fully completed (fully filled with one color)
- Adding an interesting watery background using a shader
More Progress
Dec 8
New Features
- 10 playable levels, now mostly beatable
- Pouring effect (line renderer)
- Everything now scales to work on both mobile and desktop
- Current level label
- Level complete UI panel
- Particles for bottle complete and level complete
An alternative shader for liquids in bottles is also mostly done, but it's yet to be added to the build.
Next steps
- Adding an interesting watery background using a shader
- Optimizing code to run faster on mobile
- Adding wave effect on pouring
- Adding more shaders to liquids in bottles
Final Progress
Jan 14
New Features
- Watery background, with water color subtly changing each level
- Four different shaders for the liquids — regular, metallic, glittery and crystalline. Choose a shader by pressing keys 1–4 or by double tapping if on mobile.
- The game now checks for no more moves and displays a notification to restart when necessary
- The bottles now look way better :)
