Hi guys! This week, we focused on enhancing the water flow mechanics with a dynamic cutscene that highlights the water filling and emptying containers. To achieve a more engaging visual experience, we needed a smooth camera system that follows the movement of the water seamlessly, giving players a clear and immersive view of the process. Here’s a deep dive into how we tackled this challenge.
To showcase the water flow mechanics effectively, we needed smooth camera movement that follows the water filling and emptying process. This way, players can fully observe the changes as they happen in real time. We added a top boundary to the water prefab, which tracks the water’s height dynamically as it moves. This boundary’s position is stored in a `targetPositionEndOffset` variable.
The top bound stops moving when it aligns with the water surface. However, when the water fills another container below, the camera needs to follow the action seamlessly. To make this happen, we introduced an additional Y-axis offset, allowing the camera’s target position to update frame by frame. The duration of this movement is calculated based on the Y-axis distance of the water from top to bottom.
To enhance the visual experience, we applied Robert Penner’s Quart-Ease-In-Out easing function. This easing starts slowly, accelerates in the middle, and decelerates at the end, creating a natural and fluid camera movement.
As a result, the camera smoothly tracks the water’s flow, providing players with a seamless viewing experience.
Check out the code snippet implementing this logic below:
private IEnumerator MoveTopPointCoroutine()
{
float timeElapsed = 0f;
float adjustedT = 0f;
timeToFillWater = 0f;
targetPositionEndOffset = Vector3.zero;
timeToFillWater = CalculateTimeToFillWater();
float topEndOffset = CalculateDistance() - 20f;
float topEndPositionCurrentOffset = 0f;
while (timeElapsed < timeToFillWater)
{
adjustedT = Easing.Ease(easingEquation, timeElapsed / timeToFillWater, 0.0f, 1.0f, 1.0f);
topEndPositionCurrentOffset = Mathf.Lerp(0, topEndOffset, adjustedT);
targetPositionEndOffset.y = topEndPositionCurrentOffset;
timeElapsed += MyTime.deltaTime * 0.5f;
yield return new WaitForEndOfFrame();
}
targetPositionEndOffset.y = topEndOffset;
}
This new camera system not only adds polish to the cutscene but also helps players appreciate the fluid dynamics at play, making the entire experience more satisfying. We’re excited to see how this feature elevates the gameplay, and we can’t wait to hear your feedback. Stay tuned for more updates as we continue to refine the mechanics and visuals of our game!
Best regards,
Playdew Team
https://store.steampowered.com/app/1752540/Lost_Twins_II/