Devlog #7 - Upgrading the Lobby - From 2D to 3D


Following the recent progress on user authentication and character customisation, this weeks focus shifted to upgrading the lobby system. The goal is to change the basic 2D interface to a 3D lobby where players can see each other customised avatars.

3DPlayerItem Setup

In the 3D lobby, each player is represented by a playerItem prefab which displays their nickname, ready state and clan icon. To manage this, I created a SetUp() function that handles player data and ensures the lobby UI reflects each player's unique information.

Each player has a canvas with a text to show their nickname.

PlayerItem.cs

  • The SetUp() function is called when a player joins the lobby.
  • It updates the nickname label using Photon's NickName property.
  • It stores a reference to the Photon Player object for later updates. 

Spawnpoints

For the 3D lobby, each player had to be placed in the scene at a unique position. Instead of stacking players on top of each other, I used predefined spawn points to space them out. These are empty Transform objects placed in the Unity scene where each playerItem prefab is instantiated. 

Spawning Players

LobbyManager.cs

  • First, I convert the parent object holding the spawn points into a list so I can cycle through them in order.
  • spawnpointIndex is used to track which spawn point to use for each player. 

Looping Through All Players in the Room

LobbyManager.cs

  • This loop goes through every player currently in the room using Photon's PhotonNetwork.CurrentRoom.Players dictionary. 
  • A safety check ensures we don't try to use more spawnpoints than we have. 

PlayerItems Instantiating

LobbyManager.cs

  • A new PlayerItem prefab is instantiated at the current spawnpoint's position and rotation.
  • The player's data is passed into the item via the SetUp() function, which handles things like nickname and ready state. 

Clans

As a new addition, we added in clan stickers that the players can choose from when they join a room. Each player will have their own unique sticker, they can't choose the same. The clan sticker is used to identify the player during gameplay e.g. purchasing tiles, results. These icons are synced across the network using Photon custom properties, so all players can see each others clan stickers. 

Created using ChatGPT

Choosing a Clan Icon

Players can customise their clan sticker using UI buttons in the 3D lobby. This function below handles switching to the previous available clan icon when the left arrow button is clicked, the same is done for the right arrow button:

PlayerItem.cs

  • currentIcon retrieves the currently selected clan icon index from the local playerProperties hashtable.
  • The new icon is saved to the local playerProperties hashtable.
  • Finally, I update Photon's networked player properties with:

So that all other players in the room see the updated clan sticker instantly.

Assigning a Unique Clan Icon

PlayerItem.cs

  • Only the master client assigns a clan icon if the player doesn't have one yet.
  • This ensures each player has a unique icon, to avoid duplicates.

Storing Chosen Clan in Photon

PlayerItem.cs

  • This checks whether the player has a CLAN_ICON stored in their Photon CustomProperties.
  • If they do, the appropriate sprite from a list of clan icons (clanSprites) is assigned to the player's clanImage UI. 
  • I also update a hashable playerProperties to keep track of the selected icon. 

Joining Room

Shows multiple players joining the same room


What's Next?...

With the 3D lobby now bringing players together in a more dynamic environment, the next step is adding a sense of competition and achievement. To do this, I will implement a Ranking System using PlayFab's player statistics API. This system will track player wins and display global rankings, encouraging more competitive gameplay. 

References

[1] Photonengine. Custom Properties (Version PUN 2). Available at:https://doc.photonengine.com/realtime/current/gameplay/custom-properties.

Leave a comment

Log in with itch.io to leave a comment.