🏒 Devlog #5: Velocity Puck's Title Screen, Menus, Camera Magic & More!

Welcome back, air hockey heroes! In Devlog #5, we’re leveling up Velocity Puck with new UI systems, cleaner navigation, and a dynamic camera experience that makes each match feel cinematic. Here’s everything new, under the hood and in-game.

🎬 1. New Title Screen & Game Start Flow

We added a proper Title Screen (#titleScreen) that’s the first thing players see. It's minimal and clean, displaying the game logo with a glowing effect and a Start Game button. Clicking this launches the Main Menu, giving players control over how they want to jump into the game.

🔧 How it works:

• HTML: The title screen is a full-screen overlay:

html
<div id="titleScreen">...</div> 

• JavaScript: Clicking #startButton hides the title and shows the main menu:

js
document.getElementById('startButton').addEventListener('click', function() {     
    document.getElementById('titleScreen').style.display = 'none';     
    document.getElementById('mainMenuScreen').style.display = 'flex'; 
}); 

🗂️ 2. Main Menu + Single Player & Options

Once players leave the title screen, they land on the Main Menu (#mainMenuScreen). This menu has the following choices:

• Single Player: Starts the match.

• Multiplayer: Placeholder for future update.

• Options: Opens the new side-panel UI for customization.

• Credits: Opens a credits overlay.

Everything is styled with large buttons (.menu-button-large) for easy navigation.

html
<button class="menu-button-large" data-screen="singlePlayer">Single Player</button> 

🧠 Code Logic:

Clicking a menu item triggers its behavior:

js
case 'singlePlayer':   
  document.getElementById('mainMenuScreen').style.display = 'none';   
  gameStarted = true;   
  animate(); // Launches the game loop   
  break; 

🎨 3. Options & Color Menu Overhaul

We reorganized the menu structure so that all visual settings live under Options → Colors.  Options originally was called Settings and was renamed. This includes:

• Paddle Colors

• Field Colors

• Theme Toggle

🧱 New Hierarchy:

mathematica
Options   
  └── Colors        
       ├── Paddle Colors        
       └── Field Colors   
  └── Toggle Theme 

🛠️ How it works:

• Buttons like #settingsMenuItem and #colorsMenuItem expand nested panels with options.

• Each color option updates the scene using functions like updatePaddleColor() and updateFieldColor():

js
function updatePaddleColor(color) {     
    playerPaddleMaterial.color.setStyle(color);     
    playerPaddle.material = playerPaddleMaterial.clone(); 
} 

This setup allows cleaner UI control and prepares us for more customization layers.

🖥️ 4. Main Menu Screen + Exit Confirmation Modal

To complete the game loop experience, we added:

• A Main Menu screen (#mainMenuScreen) with navigation options

• A modal popup (#exitConfirmation) asking:

  "Are you sure you want to quit?" This shows when Exit is clicked from the side panel, and offers Yes and No buttons.
  

💡 Exit Flow:

js
function exitToMainMenu() {   
  gameStarted = false;   
  document.getElementById('mainMenuScreen').style.display = 'flex';   
  ... 
} 

This makes quitting intentional and avoids accidental exits mid-match.

🎥 5. Dynamic Camera: Fluid, Responsive, Cinematic

One of the most exciting changes is our dynamic camera system. Instead of a fixed top-down view, the camera now follows the puck to enhance immersion.

🎯 Key Logic in animate():

js
const targetCameraPosition = new THREE.Vector3(); 
targetCameraPosition.x = puck.position.x * 0.3; 
targetCameraPosition.y = 50; 
targetCameraPosition.z = THREE.MathUtils.clamp(60 + puck.position.z * 0.3, 45, 75);  
// Smooth interpolation 
camera.position.lerp(targetCameraPosition, 0.05); 
camera.lookAt(new THREE.Vector3(puck.position.x * 0.2, 0, 0)); 

📸 Explanation:

• Horizontal tracking: Follows the puck's x axis, dampened to avoid jitter.

• Z-position: Adjusts depth based on puck’s position to keep the action centered.

• Camera lookAt: Keeps focus near the puck but with room to see opponents.

This system creates a smoother, more immersive feel while still supporting gameplay clarity.

✅ Summary of New Features:

• ✅ Title screen with glow animation

• ✅ Full main menu system

• ✅ Organized options under collapsible panels

• ✅ Exit confirmation modal

• ✅ Dynamic puck-following camera

• ✅ Continued robot animation and character system support

💡 Ideas for What's Next?

Coming in future devlogs:

• Multiplayer support (split-screen or online)

• Sound effects and background music

• Save/load settings and profiles

• Tournament mode with progression

Thanks again for following along with Velocity Puck! We hope these updates make the game feel smoother, more complete, and fun to navigate. 🎮

Let us know what feature you want next!

— Jordon McClain
Steel Cyclone Studios 💥