Multiplayer Pub in Babylon.js With Colyseus

June 6, 2024

Babylon.js Multiplayer Website Showcasing My Past Work

Welcome to my interactive pub where you can explore my past projects in a unique and engaging way. On this site, you can walk around, either alone or with others, and check out my previous work.

Key Features:

  • Walk and Explore: Navigate through the pub in a multiplayer environment, interacting with others in real-time.
  • View My Projects: Discover my past projects displayed around the pub.
  • Randomized Environment: Enjoy the randomly generated bottles and glasses created using Babylon.js parametric shapes.
  • Interactive Media: Toggle YouTube videos on and off as you explore.
  • Technologies Used:

  • Frontend: Built with Vue 3, Nuxt 3, and TypeScript for a robust and maintainable user experience.
  • Backend: Utilizes Express and Colyseus for scalable and efficient multiplayer support.
  • Colyseus Backend Code:

    Here's a glimpse of the backend code powering the multiplayer interactions:

    TYPESCRIPT
    import express from "express";
    import cors from "cors";
    import { createServer } from "http";
    import { Server } from "@colyseus/core";
    import { monitor } from "@colyseus/monitor";
    import { WebSocketTransport } from "@colyseus/ws-transport";
    import { GameRoom } from "./rooms/GameRoom";
    const port = Number(process.env.PORT || 8081);
    const app = express();
    const corsOptions = {
    origin: "https://balazspub.netlify.app",
    optionsSuccessStatus: 200,
    };
    app.use(cors(corsOptions));
    app.use(express.json());
    const gameServer = new Server({
    transport: new WebSocketTransport({
    server: createServer(app),
    }),
    });
    gameServer.define("GameRoom", GameRoom);
    gameServer.onShutdown(() => {
    console.log("Server is shutting down.");
    });
    app.use("/colyseus", monitor());
    gameServer.listen(port);

    More details on how to set in the https://docs.colyseus.io/

    Step into a world where past meets present, interact with the environment and others, and experience a new way to explore a portfolio.

    A visual depiction of what is being written about

    Share this article

    The Newsletter for Next-Level Tech Learning

    Start your day right with the daily newsletter that entertains and informs. Subscribe now for free!

    Related Articles