This week, I focused on building the Character Customisation system. The goal is to let players personalise their appearance with different body types, colours and hats and have those preferences saved across sessions using PlayFab and shared during gameplay via Photon PUN custom properties. 

Ghost Models downloaded from itch.io by MrEliptik [1]

Hat Models downloaded from itch.io by DevilsWork.shop [2]

ScriptableObjects 

Character Types 

To manage and extend customisation options easily, I used ScriptableObject for defining body types, hat positions and mesh data.  This allows players to create new character types. 

Body Types

CharacterTypesSO.cs

Hat Types 

Using the same character type scriptable object, I created several hat types from the downloaded assets from itch.io.

CharacterTypesSO.cs

Colours

For the colours, I created a different scriptable object with different variables; one for the name and one for the colour. 

CharacterColoursSO.cs

I made several colours that the player can choose from.

All Types

To manage all the scriptable objects in one place, I made a scriptable object to handle all types, including colours, body types and hat types. This scriptable object will allow me to access all customisation options for the player. It is flexible as I can add or remove any options. 

CustomiserSO.cs

From the downloaded models from itch.io, I added the different types. 

Customising the Character

The player can cycle through available body meshes using UI arrow buttons. The mesh, display name and hat offset are updated based on the selected type. The hat position will change as the body types have different heights:

CharacterCustomiser.cs

The same logic applies in reverse with ChangeBodyLeftArrow(). This system keeps the selection looping smoothly through the list.

As I had the changing of the body type done, I could then apply the same logic to the colours and hats. 

Saving Character Data with PlayFab

Player appearance is saved to PlayFab using PlayFab User Data. This allows persistence across devices and game sessions. 

PlayfabCharacter.cs

This stores the selected appearance choices under the player's PlayFab account.

PlayFab Player Data

This shows a key value pair, the key fed is body, colour and hat. For each of these keys is a value that the player chooses. When they select the customisation choices and saves them, the value will be automatically updated to playfab under player data. 

Loading Appearance

When players log in to the game, appearance data is pulled from PlayFab and passed to the customiser. 

PlayfabCharacter.cs

If no data is found, the character resets to a default appearance. 

Syncing Character Data to Photon

To make sure each player's appearance is reflected correctly in the lobby and game, I sync their choices to Photon Player Properties. 

PlayfabCharacter.cs

Other clients can read these properties to display characters with the correct meshes and colours in real time. This function is called when the player presses the "back" button on the character customisation menu.

Final Version

Next Steps...

With the core character customisation system in place, allowing players to customise their characters and save their options across sessions and devices. 

The next step is to revamp the lobby into a 3D environment so players can see each other's characters in the lobby before transitioning into the game scene. 

References

[1] Itch.io, MrEliptik. Ghost Chess Set. Available at:https://mreliptik.itch.io/ghost-chess-set.

[2] Itch.io, DevilsWork.shop. Low Poly 3D and Pixel 2D RPG Game Assets - Devil's Work.shop. Available at:https://devilsworkshop.itch.io/low-poly-3d-and-pixel-2d-rpg-game-assets.

[3] Unity Documentation. ScriptableObject. Available at:https://docs.unity3d.com/Manual/class-ScriptableObject.html.

[4] YouTube, Skye Games. Unity Store Data in PlayFab | Interacting with data in PlayFab. Available at:https://youtu.be/KoWpVuta_nE?si=HREbI4xzX7sdzdQ4.

[5] YouTube, Coco Code. Send game data to the server for free | Playfab Player data in Unity Tutorial (#3). Available at:https://youtu.be/9-vW2z88xCs?si=FiaFZGw4WzNJKNAh.