Full BabylonJS Game Dev (2D, 3D, Online with ColyseusJS)

Build a 2.5d Hide and Seek game in Babylon.js, featuring rabbits, fog, and simple environments. Set up the project with Node, npm, TypeScript, and Webpack for agile, asset-driven gameplay.

Refactor the BabylonJS setup by creating a clean canvas, styling to avoid scroll artifacts, and initializing the engine and scene for a main camera-driven render loop.

Extract the hide and seek assets archive and move its tile maps, textures, sprites, fonts, and environment assets into the project's public folder for next steps.

Explore building a game loop as a state machine in Babylon.js, with start, main menu, solo and multiplayer menus, and game scenes using the object scene as a unit.

Build a responsive start menu UI in Babylon.js with an SVG background, one-file-per-state architecture, and advanced dynamic texture UI, managing scene readiness and cross-browser nuances.

Create the start screen interface in a Babylon.js game with a title, an animated image, and a bunker font play button, plus responsive positioning and hover interactions.

Adjust the rendering on window resize by calling engine.resize in the main loop, keep the start screen responsive, and apply a title image with uniform stretch.

Explore setting up the main menu, state machine updates and scene changes in BabylonJS, including context passing, helper UI classes, and asynchronous scene loading.

Refactor by creating an async makeUI function, pass GUI parameters, and consistently bind context when calling GUI methods to ensure all UI interactions function correctly.

Create a small helper to generate uniform UI buttons in Babylon.js, encapsulating button properties and pointer events in a dedicated UI generator for the main menu.

Build a main menu with an animated background and three buttons (solo, multiplayer, options) using a ui menu, a shared helper, and a title image.

Learn to build an animated background in BabylonJS using the sprite manager for small sprites, the sprite pack manager for mixed sizes, and the sprite map for tile maps.

Create a 4x4 background by building a sprite map from a tile map file, loaded with an asset manager from the tile map texture JSON into a sprite sheet.

Set up the environment sprite pack manager, switch to a free camera, and generate randomized sprites to create a dynamic 2.5d background with sprite sheet coordinates.

Learn how to render an animated player mesh for main menu using a textured, double-sided plane with a follow camera, while managing alpha, z-index, and sprite map considerations in 2.5d.

Animate a plane character along a path using the Babylon.js animation class, with a follow camera, JSON and non-JSON methods, and quaternion rotation keyframes.

Address transparency and z-index by adjusting the sprite map node's alpha and position, then implement a follow camera with lock target on the parent mesh for stable gameplay visuals.

Create the solo menu interface in Babylon.js, featuring a slider scroll view for levels and a modal with controls, objectives, time, and a play button, plus preloading the next level.

Build a responsive solo menu UI with a scroll view and modal grid, featuring an image button, text blocks, start and back controls, and resize handling.

Create a dedicated game status to preload the game scene, implement init and dispose functions, and manage transitions from the solo menu to the preloaded scene.

Develop an environment model in TypeScript to render a depth scene, using one texture per asset, reuse main menu background with sprite map generator, and add camera and light.

Create a sprite mesh generator to populate the scene with five environment sprites using mesh builder, materials, and textures, positioning, scaling, and rotating them to form an environment.

Set up a skybox in the environment scene using a six-face cube texture, with backface culling off, and configure reflection and refraction textures for a performant backdrop.

Create a foggy game scene by building a Babylon.js particle system with a smoke texture, defining an emitter, setting colors, sizes, lifetimes, and zero gravity to simulate fog.

Set up a character controller and input controller in babylon.js to move the player with keyboard inputs, using axis-based movement and a follow camera.

Create a four-direction character controller with a direction-based enum and private animations for left, right, up, and down, asynchronously setting up animated materials and updating the state to switch sprites.

Implement invisible walls to keep the player inside a 15 by 15 area by blocking the character mesh via a limited move direction Vector3 in the update loop.

Launch an npc in the environment class that moves toward a destination and stops when close. Every ten seconds, it randomly selects a goal or stays still, using rabbit animations.

Implement a hud timer in the game that tracks a 60-second countdown and rabbits found, with a pause screen that freezes movement and presents resume and menu options.

Add a rabbit counter to the HUD by creating a rabbit image and a text block with a reusable image helper, then align them to the left of the UI.

Implement a UI pause menu that toggles game status by pressing escape, blocks NPC updates and player movement, and displays a pause model and a resume button.

Implement an exit button in the pause HUD, refactor the model, add a private exit button with resizing, and use a game status flag to return to the main menu.

Implement interactive rabbit NPCs in a BabylonJS game by detecting player–NPC collisions, updating the score and HUD, and incrementing an NPC counter with safeguards to avoid repeated triggers.

Create a white ellipse feedback that appears at the disappeared rabbit's engine position and moves to the top-left, converting engine coordinates to UI via the linked NPC mesh.

Create win and lose states with a basic UI showing score and a go-to-menu button, driven by game status, NPC count (ten to win), and a timer-based loss condition.

Create a local multiplayer menu featuring two player slots with controls, player images, and names, plus a level menu button and a back button.

Enable local multiplayer by creating per-player viewports and cameras, with a shared action manager and player controls, looping over players to initialize viewports and the active camera.

Fixes local multiplayer feedback by using a separate layer mask per camera to prevent UI duplication, and updates the HUD to calculate distances per screen when rabbits are collected.

Develop music and ambience for a Babylon.js game with ambience, start menu, and in-game music tracks, preloaded via an asset manager and integrated with sfx such as clicks and footsteps.

Implement sfx in a BabylonJS game by adding confirm, back, input, collect, and walk sounds with a central sound manager, preventing overlaps and syncing with ambience.

Design and implement a two-part options menu for the BabylonJS game, including ambient, music, and SFX volume controls with image-based sliders, and a generic device source manager for inputs.

Create a two-player controls options panel that binds keys via device source manager for keyboard input, supports press-to-assign inputs, displays a grid of controls, and safeguards against missing game context.

Learn to make a Babylon.js game mobile-ready by detecting mobile devices, enforcing landscape mode, and implementing two on-screen joysticks with a pause menu.

Explore implementing an in-game mobile UI with a virtual joystick, touch events, and a pause menu, wiring input controller and HUD for solo and local multiplayer on mobile.

Deploy your BabylonJS game to production with Firebase hosting and emulators, verify assets and sound, then publish on Itch.io and share with the community.

Explore extending 2.5 d games with more levels, generic environments, and new post-processing effects, while choosing 2d over 3d for performance, and prepare for a new 3d Babylon.js editor project.

Explore panda love you, a cooperative 3D game where 1–4 players survive waves of enemies using Babylon.js editor, featuring a low-poly environment, gold panda font, and Superhot-inspired visuals.

Explore the Babylon.js editor by creating a first person shooter project in TypeScript, manage assets and scripts, inspect properties, set up a gitignore, and run and test in the browser.

Understand how the index.ts file loads the scene file, which lists assets with positions, materials, and scripts; the Babylon editor generates a corresponding scene in the scene folder.

Explore the Babylon.js editor to learn key scripts such as on initialize, on start, and on update, and review a camera script extending three camera for a first-person setup.

Explore the global architecture of our game, starting with a simple start scene and basic UI, then implement a multiplayer scene with create room, lobby UI, and in-game UI.

Download the asset archive, copy it into your project folder, and extract it. Prepare materials, meshes, sounds, textures, and the main menu user interface; fonts aren’t provided.

Create the start scene and a responsive UI for the Babylon.js editor. Load the gold panda font and implement a Menu Manager for the play button.

Wire the play button to load the multiplayer scene, using get control by name and a click handler that emits a load multiplayer game event.

Create a global UI manager and a general UI for the multiplayer scene, with a create/join room button and a room list in a scroll view.

Design and manage a dynamic menu UI for a multiplayer lobby, including create and join room events, room UI, visibility management, start game logic, and player slots.

Integrate assets into the map, organize the scene with empty meshes, and add ground, clouds, bushes, and walls with materials and lighting, and test collision.

Create a game manager to coordinate players and enemies, support local and remote players, and implement AI that moves toward the closest player, laying multiplayer groundwork.

Load the first 3d enemy mesh with the scene loader, import Babylon loaders, position it, enable collisions, and initialize the UI and game managers to control camera and animations.

Implement basic artificial intelligence enemy behavior in a Babylon.js scene by switching from idle to walk using animation groups, then targeting and moving toward the player and triggering attacks.

Learn how to optimize multiple enemies with independent animations by using a mesh asset container to instantiate models, clone meshes, and assign separate animation groups without repeated imports.

Replace the blaster with a pose and swap the ball for a heart, adjusting position, scale, and emissive for proper camera framing. Add a timeout to dispose each heart projectile.

Implement enemy death by tagging projectiles to detect collisions with enemy meshes, reduce life, dispose projectiles, and remove enemies when life reaches zero, while visualizing the bounding box.

Delve into the multiplayer part with the agnostic collisions framework, a real-time Node.js websocket solution for Babylon.js and other tech, emphasizing simplicity, game focus, and clear documentation.

Set up the Colyseus environment by creating server settings and a local dot env, wire dot env with webpack, and initialize and start a TypeScript server on the configured port.

Create the network manager to handle online gameplay in Babylon.js, including joining rooms. Propagate data between classes for real-time synchronization and link client and server via a settings file.

Create and manage rooms with room name and room ID using Colyseus, implement a websocket client, join or create rooms from the UI, and connect the frontend to the backend.

Learn to join or create a private room, manage a four-player roster, and broadcast join/leave events with a network manager and event emitter, updating the ui in real time.

Fetch available rooms from the network manager and display them in a room list scroll viewer as buttons showing room IDs and current/max players. Click a room button to join.

Learn how to instantiate and synchronize players in a multiplayer game by sharing local player position and actions, managing online players, and handling player added and removed events.

Share and replicate online players' positions and rotations in real time, using per-frame updates and linear interpolation for smooth movement, while local players emit position rotation data.

Synchronize player rotation in a BabylonJS game by adjusting the mesh rotation via target rotation and rotation quaternions, addressing pivot alignment and optional inverted rotation, with camera pivot considerations.

Learn to synchronize player projectiles by sending position and impulse to the server, broadcasting instantiate ball messages, and replicating the projectile across players' views.

Create a server-side arena to manage waves of enemies, spawn them at random positions, and broadcast game start, while evaluating whether to synchronize enemy positions.

Create waves of enemies by detecting when the room is clear, trigger a new wave after a delay, and progress through levels while adjusting walls to contain foes.

Define the master client role, chosen as the oldest player in the room, to synchronize enemy positions from the master's viewpoint to all players, preventing desynchronization and lag-related issues.

Synchronize and interpolate enemy positions across clients by updating each enemy's next position in a master room, using a for await loop and update messages.

Enable enemies to kill players, update the camera to reveal the full map on death, and implement lose and restart flows using a player killed event and life management.

Determine game over by checking each player's life, broadcast game over to all players, and reset enemies, player meshes, tags, and server-side life for restart.

Explore optimizing game environments by merging meshes in Blender, and implement a sound manager in TypeScript with menu, in game, and endgame music plus sfx for clicks and enemy attacks.

Learn to implement spatial damage sound in BabylonJS by passing an enemy's position as a vector3, varying playback rate, and coordinating music transitions with end callbacks.

Implement a BabylonJS player state system with an enum covering idle, attack, and walk animations, manage current animations, and synchronize actions with online multiplayer data.

Coordinate player movement animations in a BabylonJS online multiplayer scene by mapping keyboard inputs to directional actions and syncing states across players.

Weigh the editor's advantages and drawbacks for drag-and-drop scene creation in multiplayer projects, and leverage LookAt, physics, and lighting to build compelling 3d web games.