Profile PictureBalazs Farago Dev
Open menu

Multiplayer Pub in Babylon.js With Colyseus

June 6, 2024

Babylon.js Multiplayer Weboldal, ami a Régi Munkáimat Mutatja Be

Weboldal: balazspub.netlify.app

Üdvözöllek az interaktív pubomban, ahol egyedülálló és izgalmas módon fedezheted fel korábbi munkáimat. Az oldalon sétálhatsz, akár másokkal együtt is, és megtekintheted régi projektjeimet.

Főbb Jellemzők:

  • Sétálj és Fedezd Fel: Navigálj a pubban multiplayer környezetben, valós időben interakcióba lépve másokkal.
  • Tekintsd Meg a Projektjeimet: Fedezd fel korábbi munkáimat, amelyek a pub különböző részein vannak kiállítva.
  • Randomizált Környezet: Élvezd a random generált üvegeket és poharakat, amelyeket a Babylon.js parametric shapes segítségével hoztunk létre.
  • Interaktív Média: Kapcsold be és ki a YouTube videókat, miközben felfedezed az oldalt.

    • Használt Technológiák:

  • Frontend: Vue 3, Nuxt 3 és TypeScript segítségével épült, hogy robusztus és karbantartható felhasználói élményt nyújtson.
  • Backend: Express és Colyseus biztosítják a skálázható és hatékony multiplayer támogatást.

    • Colyseus Backend Kód:

    Íme egy bepillantás a multiplayer interakciókat támogató backend kódba:

    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);

    Több adat a beállításról a https://docs.colyseus.io/ weboldalon

    Lépj be egy olyan világba, ahol a múlt találkozik a jelennel, lépj interakcióba a környezettel és másokkal, és tapasztald meg egy portfólió felfedezésének új módját.

    A visual depiction of what is being written about

    Oszd meg ezt a cikket

    Merülj el az izgalmas tudásban, amíg a buszra vársz!

    Indítsd a napod a legújabb technológiai áttörésekkel. Csatlakozz most, és merülj el az innovációban!

    Kapcsolódó Cikkek