🎮 Devlog #7: Velocity Puck's 3D Character Selection, Fixed UI Arrows & Interactive Preview!

Welcome back, air hockey fans! This update brings some serious style and polish to Velocity Puck. With 3D character previews, smoother menu navigation, and interface fixes, your journey from title screen to puck smash has never looked better.

🎭 1. Character Selection Screen: Polished and Separated

The character selection process is now a dedicated full-screen interface that appears when you click Single Player from the main menu.

✅ Includes:

• Stylized header (“Choose Your Character”)

• Navigation arrows

• Dynamic character name display

• A 3D model preview rendered via Three.js!

The player no longer picks from buttons—this is a proper carousel system where players cycle through characters and view their models before launching the game.

🧱 2. 3D “Choose Your Character” Preview with Three.js

This is the biggest UX enhancement: your character choice is visualized in 3D before you even press play.

🧰 Setup:

• A separate Three.js scene, camera, and renderer are initialized inside the #characterPreviewContainer.

• Canvas: #characterPreviewCanvas

• The current character model is dynamically loaded or cloned based on the player’s selection.

• Background color and lighting match the game’s tone (0x0B0B2A with a soft glow).

🔄 Character Switching Logic:

js
const characters = [   
  { id: 'classic', name: 'Classic', color: '#e74c3c' },   
  { id: 'robot', name: 'Robot', color: '#3498db' },   
  { id: 'ninja', name: 'Ninja', color: '#2c3e50' },   
  { id: 'alien', name: 'Alien', color: '#2ecc71' } 
];  
function updateCharacterPreview() {   
  // Clear current model from preview scene   
  // Load or clone the correct 3D model   
  // Rotate and display it with animation loop 
} 

💡 Render Logic:

• A separate animation loop (requestAnimationFrame) runs only for the preview.

• Characters rotate slowly in place, giving a stylish showroom effect.

🔁 3. Fixed Arrow Navigation Buttons - Part 1

The left (#prevCharacter) and right (#nextCharacter) arrow buttons now:

• Correctly cycle through character options

• Wrap around if you go past the beginning or end

• Update:

  • The name label (#characterName)

  • The visual 3D preview

✅ Working Fix (Based on Our Previous Chat):

js
document.getElementById('prevCharacter').addEventListener('click', () => {   
  selectedCharacterIndex = (selectedCharacterIndex - 1 + characters.length) % characters.length;   
  updateCharacterPreview(); 
});  
document.getElementById('nextCharacter').addEventListener('click', () => {   
  selectedCharacterIndex = (selectedCharacterIndex + 1) % characters.length;   
  updateCharacterPreview(); 
}); 

This wraparound logic avoids index errors and enables smooth browsing through your full character lineup.

🐞 4. Fixing Arrow Rendering Bugs -  Part 2

The arrow characters (◀, ▶) weren’t displaying correctly on some systems, and instead were rendering as corrupted symbols like:

This usually happens due to a character encoding mismatch (commonly UTF-8 errors). Here’s how we fixed it:

✅ Fix: Use Unicode Escape Sequences or HTML Entities

Instead of directly typing arrow characters in HTML, we now use HTML entities, which are more consistent across devices and browsers.

Old HTML (caused issues):

html
<button class="nav-arrow">◀</button> 
<button class="nav-arrow">▶</button> 

Updated HTML (cross-browser safe):

html
<button class="nav-arrow" id="prevCharacter">◀</button> <!-- ◀ --> 
<button class="nav-arrow" id="nextCharacter">▶</button> <!-- ▶ --> 

• ◀ → ◀ (Left Arrow)

• ▶ → ▶ (Right Arrow)

🔄 Alternate Fixes (Optional)

If you want more control over style or iconography:

• Use Font Awesome:
  <i class="fas fa-arrow-left"></i>

• Or embed an inline SVG for more flexibility and animation options.

🌌 5. Background Embedded in Title Screen

The animated background from your website has now been embedded directly into the title screen via an <iframe>:

html
<iframe src="<a href="https://www.steelcyclonestudios.com/games/velocitypuck/background.html">https://www.steelcyclonestudios.com/games/velocitypuck/background.html</a>" ...></iframe>

✅ Provides:

• A seamless, animated atmosphere right at the title

• Brand consistency from your web presence

• No performance cost to the main game loop

This iframe sits behind all UI layers with a z-index: -1 and stretches full-screen to blend perfectly.

💸 6. GameMonetize SDK Integration

To help support Velocity Puck's development and future updates, we’ve now integrated the GameMonetize.com SDK to enable monetization and ad support directly within the game.

🔧 SDK Features Implemented:

• Ad display triggers for:

  • Restarting the game

  • Returning to main menu

  • Ending the match

• Pause/resume support via SDK events

• Graceful fallback if the ad fails

🧠 Code Implementation (from index.html):

js
window.SDK_OPTIONS = {   
  gameId: "jll9bmbb1qxr1uux1t1khn56z4xpvibs",   
  onEvent: function (a) {     
    switch (a.name) {       
      case "SDK_GAME_PAUSE": isPaused = true; break;       
      case "SDK_GAME_START": isPaused = false; break;       
      case "SDK_READY": break;       
      case "SDK_ERROR": console.warn("SDK Error:", a); break;     
    }   
  } 
}; 

The SDK script is loaded externally:

html
<script type="text/javascript" src="<a href="<a href="https://api.gamemonetize.com/sdk.js">https://api.gamemonetize.com/sdk.js</a>"><a href="https://api.gamemonetize.com/sdk.js</a>">https://api.gamemonetize.com/sdk.js</a></a>"></script> 

And custom ad triggers are placed before key actions:

js
function showAd(callback) {   
  if (typeof sdk !== "undefined" && sdk.showBanner) {     
    sdk.showBanner().then(() => callback?.()).catch(() => callback?.());   
  } else {      
    callback?.();   
  } 
} 

💡 Why This Matters:

• Helps fund future content like multiplayer and new characters.

• Keeps the game free for players while rewarding session engagement.

• Doesn’t interrupt gameplay flow (ads are shown at key transition points).

🧠 How It All Works Together (index.html Overview)

Your index.html now:

• Organizes screen transitions: #titleScreen, #mainMenuScreen, #characterSelectionScreen, etc.

• Uses Three.js to power both:

  • Main game rendering

  • Character preview rendering (separate scene/canvas)

• Embeds stylized CSS animations for screen glow, button hover states, and transitions

• Leverages JS modular logic to control:

  • Menu visibility

  • Character data

  • Live updates to models and previews

• Has separate canvases for:

• Main game rendering

• Character preview rendering

• End-of-game model display

✅ Summary of New Features:

• 🎭 Dedicated Character Selection Screen

• 🔁 Fixed arrow navigation buttons

• 🧍‍♂️ Real-time 3D model preview for each character

• 🌌 Animated HTML background for Title Screen

• 💫 Stylish carousel effect & updated character logic

💡 Ideas for What's Next:

• Local storage: Save your chosen character

• Unlockable skins or alt outfits

• Background music support with toggle

• Refined character animations and idle poses

Thanks again for supporting Velocity Puck! 🏒 Your feedback is shaping this into a truly unique web game experience. Drop a comment, hit play, and pick your fighter in 3D style!

— Jordon McClain
Steel Cyclone Studios 💥