Profile PictureBalazs Farago Dev
Open menu

Part 1: Creating Multiplayer and Diorama Effects

June 17, 2024

Setting Up the Environment for Our Multiplayer Game

In this segment, we will discuss the setup of our multiplayer game's environment. Our goal is to create a stunning desert space ambiance in the diorama, featuring effects like sunrise and laser lights. Additionally, we want each player to have a unique color for their character, making it easier to distinguish between players.

Multiplayer Game Link

You can access the multiplayer game using the following link: https://r3f-shooting-space-diorama.vercel.app/

Playroom Integration

To simplify the multiplayer implementation, we use the service provided by https://joinplayroom.com/, which is a fantastic tool for integrating multiplayer experiences.

Diorama Style

The diorama's design aims to evoke a desert space atmosphere, highlighting elements like sunrise and laser effects. To enhance these visual effects, we increase the bloom intensity. The following code snippet demonstrates how to achieve this effect:

JAVASCRIPT
jsxCopy code
          {!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

Unique Astronaut Colors

To make it easier to distinguish between players, we want each astronaut character to have a unique color. We achieve this by modifying the colors in the following places:

JAVASCRIPT
jsxCopy code
    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;
      }
    });

With these settings, we are one step closer to creating an exciting and visually appealing multiplayer game. In the next segment, we will continue with further refinements and enhancements.

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