AI coding my first game 'Junkwars' - DAY 3

Key Concepts

• Prop Hunt Deathmatch: A game genre combining prop hunt (hiding as objects) and deathmatch (player vs. player combat).
• 3JS: A JavaScript library for creating and displaying animated 3D computer graphics in a web browser.
• Height Maps: Grayscale images used to represent terrain elevation, where pixel brightness corresponds to height.
• WebSockets: A communication protocol providing full-duplex communication channels over a single TCP connection, used for real-time data transfer.
• Game State: The complete set of data representing the current condition of the game, including player positions, object locations, and other relevant information.
• Client-Server Architecture: A distributed application structure where tasks are divided between servers (providing resources) and clients (requesting resources).
• State Synchronization: The process of maintaining consistent game state across multiple clients in a multiplayer game.
• Tick Rate: The frequency at which the game server updates the game state, measured in ticks per second (Hz).
• Delta Time: The time elapsed since the last frame or update, used for smooth animation and physics calculations.
• Q Microtask: A mechanism for scheduling tasks to be executed after the current task completes but before the browser repaints.

Junk Wars Development Stream Summary

Introduction

The stream focuses on adding multiplayer functionality to the game "Junk Wars," a prop hunt deathmatch game built using 3JS. The current version is single-player, featuring AI bots. The goal is to enable real-time deathmatch gameplay with multiple players. The streamer emphasizes the ambitious nature of the task and the uncertainty of completing it within a single day.

Current Game State and Features

• The game is built in 3JS and runs in the browser.
• The landscape is generated using height maps.
• Players can transform into junk objects to hide.
• The aiming mechanic has been improved.
• A new skybox has been added.
• The current deployed version is available at junkwarss.net.

Planning the Multiplayer Implementation

• The streamer uses Claude 3 Sonnet to analyze the codebase and create a game plan for multiplayer implementation.
• The plan includes:
  • Network Architecture: Client-server model using WebSockets.
  • State Synchronization: Creating a game state to synchronize data between clients.
  • Player Management: Assigning unique IDs to players and creating a class for remote players with network position interpolation.
  • Input Handling: Managing player input and updating the game state accordingly.
• The streamer emphasizes the importance of defining the game state and determining what data needs to be sent over the WebSocket.
• The streamer decides to focus on building a minimal viable server that handles a single client before expanding to multiplayer.

Server Setup and Initial Implementation

• The streamer creates a new "server" folder in the project to separate the server-side code from the UI code.
• Deno is chosen as the server-side runtime environment due to its TypeScript support.
• A basic WebSocket server is created using Deno.
• The server is designed to manage game state and connect to clients.
• The streamer refines a list of state data needed: player state, position updates, bullets, players, junk map, and ammo.

Integrating the Server with the Client

• A new "servercom" file is created to handle communication between the client and the server.
• The client connects to the WebSocket server and receives the initial game state.
• The client-side logic is updated to integrate with the server and use the server-provided state.
• The streamer encounters issues with the client getting stuck in the initial state and not sending updates to the server.

Troubleshooting State Synchronization Issues

• The streamer uses Claude 3 to troubleshoot the state synchronization issues.
• The streamer identifies that the client is not properly sending updates to the server.
• The streamer implements logging to track the flow of data between the client and the server.
• The streamer discovers that the server is spamming the client with updates.
• The streamer implements a diff-based logging system to reduce the amount of log data.
• The streamer identifies that the ammo count is not being properly synchronized between the client and the server.
• The streamer discovers that the client is rendering multiple bullets when only one shot is fired.
• The streamer asks Claude to map out the data flow to better understand how the game state is being synchronized.
• The streamer identifies that the server is creating multiple bullets for a single shot.
• The streamer adds comprehensive logs to troubleshoot the issue.
• The streamer discovers that the server is not restarting after changes are applied.

Addressing Bullet Physics and Collision Detection

• The streamer identifies that the server is not properly accounting for gravity in the bullet physics calculations.
• The streamer creates a plan to move the bullet physics calculation server-side.
• The streamer identifies that there is no collision detection with the terrain or map boundaries.
• The streamer creates a set of instructions to properly handle collisions.
• The streamer decides to move the height map data to the server to enable server-side collision detection.

Implementing Fixed Time Step Game Loop

• The streamer implements a fixed time step game loop to ensure consistent game state updates.
• The streamer uses Q Microtask to schedule the game loop updates.

Challenges and Future Steps

• The streamer faces challenges with state synchronization, bullet physics, and collision detection.
• The streamer plans to continue working on the server-side logic and address the remaining issues.
• The streamer plans to implement client-side interpolation to smooth out the bullet movements.
• The streamer plans to add more junk assets to the game.
• The streamer plans to eventually add weapons to the game.

Notable Quotes

• "I'm going to be learning a lot as I develop this multiplayer."
• "It lowers the stakes so you can experiment like a lot more and that's what I I really enjoy about coding with AI."
• "You don't have to just completely ignore coding principles you know you can try to understand what's going on and that's going to help you build better more secure applications."
• "If you know what you're doing then you can prompt the AI in the right direction rather than just like hoping for the best."

Technical Terms and Concepts

• Billboarding: A technique where 2D images are rotated to always face the camera, creating the illusion of 3D objects.
• Skybox: A technique used to create the illusion of a distant environment by rendering images on the inside of a cube surrounding the scene.
• CI/CD: Continuous Integration/Continuous Deployment, a set of practices for automating the software release process.
• Emissive Intensity: A property of materials that controls the amount of light emitted by the surface.
• Mesh Standard Material: A material in 3JS that simulates realistic lighting and shading.
• Mesh Basic Material: A material in 3JS that renders objects with a simple, unlit color.
• Vector Databases: Databases optimized for storing and querying vector embeddings, used for semantic search and other AI applications.
• Pine Cone: A managed vector database service.
• Hugging Face Spaces: A platform for hosting and sharing machine learning models and applications.

Conclusion

The stream documents the initial steps in adding multiplayer functionality to "Junk Wars." The streamer faces numerous challenges related to state synchronization, bullet physics, and collision detection. The streamer uses a combination of AI-assisted coding and traditional debugging techniques to address these challenges. While the multiplayer functionality is not fully implemented by the end of the stream, significant progress is made in setting up the server and integrating it with the client. The streamer emphasizes the importance of understanding the code and using AI as a tool to accelerate development rather than blindly generating code. The streamer plans to continue working on the game and stream the progress in future sessions.