Profile PictureBalazs Farago Dev
Open menu

1. Rész: Multiplayer és diorama hatás létrehozása

June 17, 2024

Bevezetés a Környezet Beállításába

Ebben a részben a multiplayer játékunk környezetének beállításával foglalkozunk. A célunk, hogy egy lenyűgöző sivatagi űrhangulatot teremtsünk a diorámában, és elérjük a kívánt grafikai hatásokat, mint például a napfelkeltét és a lézerfényeket. Emellett a játékosok egyedi színeket kapnak, hogy könnyen megkülönböztethetők legyenek egymástól.

Multiplayer Játék Linkje

A multiplayer játékot ezen a linken érhetitek el: https://r3f-shooting-space-diorama.vercel.app/

Playroom Integráció

A multiplayer funkcionalitás egyszerűbbé tételéhez a https://joinplayroom.com/ szolgáltatást használjuk, amely nagyszerű eszköz a többjátékos élmény integrálásához.

Dioráma Stílusa

A dioráma megjelenését úgy terveztük meg, hogy egy sivatagi űrhangulatot idézzen, ahol a napfelkelte és a lézerfények dominálnak. A grafikai hatások kiemeléséhez a bloom effektust magasabbra állítjuk be. Az alábbi kódrészlet mutatja, hogyan érhetjük el ezt a hatást:

JAVASCRIPT
          {!downgradedPerformance && (
            // disable the postprocessing on low-end devices
            <EffectComposer multisampling={2}>
              <Bloom
                luminanceThreshold={0}
                luminanceSmoothing={0.9}
                height={1000}
                intensity={3}
              />
              <Vignette offset={0.2} darkness={0.5} />
              <N8AO
                halfRes
                color="black"
                aoRadius={2}
                intensity={1}
                aoSamples={6}
                denoiseSamples={4}
              />
              <SMAA />
            </EffectComposer>
          )}
A visual depiction of what is being written about

Egyedi Űrhajós Színek

Az űrhajósok egyedi színei megkönnyítik a játékosok megkülönböztetését egymástól. Ehhez a megfelelő helyeken módosítjuk a színeket az alábbi kóddal

JAVASCRIPT
    nodes.Character_Hazmat.traverse((child) => {
      if (child.isMesh && child.material.name === "Hazmat_Main") {
        child.material = playerColorMaterial;
      }
      if (child.isMesh) {
        child.castShadow = true;
        child.receiveShadow = true;
      }
    });
    nodes.Character_Hazmat_Head.traverse((child) => {
      if (child.isMesh && child.material.name === "Hazmat_Main") {
        child.material = playerColorMaterial;
      }
    });
    clone.traverse((child) => {
      if (child.isMesh && child.material.name === "Hazmat_Main") {
        child.material = playerColorMaterial;
      }
      if (child.isMesh) {
        child.castShadow = true;
      }
    });

Ezekkel a beállításokkal máris közelebb kerültünk ahhoz, hogy egy izgalmas és látványos multiplayer játékot hozzunk létre. A következő részben további finomhangolásokkal és fejlesztésekkel folytatjuk.

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