Merge pull request #57 from Chylum/docs/custom-network-scripts-client

Documentation: Add guide on how to create client-based network-synced scripts

Author: dooly123

content/docs/world/scripting.mdx

@@ -53,4 +53,101 @@ public class TestButton : MonoBehaviour
 
 - Click the button and the TMP text object should update to show "Clicked!".
 
-![Window showing custom script running](/img/scripting/8.png)
+![Window showing custom script running](/img/scripting/8.png)
+
+## How to Add Network Syncing Scripts Via Unity Client Build
+
+- Create a canvas object with a button inside it.
+
+![Inspector Window showing canvas](/img/scripting/9.png)
+
+- Add a script to the button object. As a simple example, we'll create a script called SCNE (short for Send Custom Network Events) which updates a TMP text object with the count of how many times a button gets clicked.
+
+- Create and assign a TMP text object to the Button Text field in the inspector.
+
+- Select the button and add an onClick() event to it. Assign your Button Gameobject to it, making sure to select SCNE.IncrementCounter as the method which your button will call on when clicked.
+
+``` cs title="SCNE.cs"
+using Basis;
+using Basis.Network.Core;
+using Basis.Scripts.Networking.NetworkedAvatar;
+using System;
+using TMPro;
+using UnityEngine;
+
+public class SCNE : BasisNetworkBehaviour
+{
+    private int counter = 0;
+
+    [SerializeField] TextMeshPro counterText;
+
+    public void IncrementCounter()
+    {
+        TakeOwnership(); // Ensure we have ownership before sending the update
+        counter++;
+        SendCustomNetworkEvent(BitConverter.GetBytes(counter), DeliveryMethod.ReliableOrdered);
+        OnDeserialization();
+    }
+
+    public override void OnNetworkMessage(ushort playerId, byte[] buffer, DeliveryMethod deliveryMethod) // Called when a network message is received
+    {
+        if (buffer != null && buffer.Length >= 4)
+        {
+            counter = BitConverter.ToInt32(buffer, 0);
+            OnDeserialization();
+        }
+    }
+
+    public void OnDeserialization() // Called after any change (local or remote)
+    {
+        Debug.Log($"Counter value is now: {counter}");
+        counterText.text = $"Counter: {counter}";
+    }
+
+    public override void OnPlayerJoined(BasisNetworkPlayer player) // Ensure late joining players receive the correct count
+    {
+        if (IsLocalOwner())
+        {
+            SendCustomNetworkEvent(BitConverter.GetBytes(counter), DeliveryMethod.ReliableOrdered, new ushort[] { player.playerId }); // Send the current counter value to the new player
+        }
+    }
+}
+```
+
+![Inspector Window showing button with SCNE script](/img/scripting/10.png)
+
+<Callout type="info">
+The overridden **OnPlayerJoined()** is used as, without it, newly joining players would otherwise not see the updated count number.
+
+**TakeOwnership()** is used to prevent desynchronisation such as the counter value resetting due to a newly joining player clicking on the button.
+</Callout>
+
+- Add a Basis Prop component to the canvas Gameobject, enter an Asset Bundle Name and press the 'Create Prop Bee File' button. Use the Loadable Config Editor to generate an XML file.
+
+![Inspector Window showing button using Basis Prop](/img/scripting/11.png)
+
+![Inspector Window showing BasisFramework prefab](/img/scripting/13.png)
+
+- Add a Basis Scene component to the an empty Gameobject, enter an Asset Bundle Name and press the 'Create Scene Bee File' button. Store it in a remote server.
+
+<Callout type="info">
+You should disable or remove the canvas object from the scene. This is because keeping it active will result in two copies of it existing in the scene later: one copy from the scene itself and another generated by the XML.
+</Callout>
+
+![Inspector Window showing Basis Scene component](/img/scripting/12.png)
+
+- Open the BasisFramework prefab. In the Bundled Content Folder component's, add the generated .bee password and url.
+
+![Inspector Window showing BasisFramework prefab](/img/scripting/14.png)
+
+- Run the Initialization scene.
+
+![Window showing Initialization scene running](/img/scripting/6.png)
+
+- Build the Unity client. Your custom script will script will be included in the build.
+
+![Window showing Unity Client Build Profiles](/img/scripting/7.png)
+
+- Click the button and the TMP text object should update the count after each button click for both local and remote players.
+
+![Inspector Window showing scene running in client](/img/scripting/15.png)