Documentation: Add guide on how to script via Cilbox (#59)

* Documentation: Add guide on how to script via Cilbox

* Documentation: Remove redundant Basis UI component step in Canvas UI guide

* Documentation: Remove redundant Basis UI component step in Canvas UI guide (forgot to save!)

Author: Chylum

content/docs/world/scripting.mdx

@@ -132,7 +132,7 @@ The overridden **OnPlayerJoined()** is used as, without it, newly joining player
 
 ![Inspector Window showing BasisFramework prefab](/img/scripting/13.5.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.
+- Add a Basis Scene component to 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.
@@ -154,4 +154,85 @@ You should disable or remove the canvas object from the scene. This is because k
 
 - 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)
+![Inspector Window showing scene running in client](/img/scripting/15.png)
+
+## How to Add Network Syncing Scripts Via Cilbox
+
+The Cilbox CIL can be used to create scripts that work in runtime. Currently, Cilbox is still quite experimental. The following example shows how to create a script to make a cube rotate using Cilbox.
+
+- Create a cube object and an ObjectRotator component to attach to it. Make sure to add [Cilboxable] above your class.
+
+```cs title="ObjectRotator.cs"
+using UnityEngine;
+
+[Cilboxable]
+public class ObjectRotator : MonoBehaviour
+{
+    [SerializeField] private Vector3 rotationSpeed = new Vector3(0, 100f, 0);
+
+    private void Update()
+    {
+        transform.Rotate(rotationSpeed * Time.deltaTime);
+    }
+}
+```
+
+![Inspector Window showing cube with rotation script attached](/img/scripting/16.png)
+
+- Create an empty Gameobject and attach a Cilbox Basis Scene component to it. The Cilbox Basis Scene becomes the cilbox that all your scripts run in.
+
+<Callout type="info">
+Note: If your editor can't detect the Cilbox namespace, you can either create your own .asmdef file and reference Cilbox, or simply open the Cilbox asmdef and select *Auto Referenced* to resolve this.
+
+![Inspector Window showing cube with rotation script attached](/img/scripting/16.5.png)
+</Callout>
+
+![Inspector Window showing CilboxSceneBasis component](/img/scripting/17.png)
+
+- Add a Basis Scene component to an empty Gameobject, enter an Asset Bundle Name and press the 'Create Scene Bee File' button. Store it in a remote server.
+
+![Inspector Window showing Basis Scene component](/img/scripting/18.png)
+
+![Inspector Window Load Config](/img/scripting/19.png)
+
+- When you run the scene in playmode, your created script will be compiled by Unity normally. However, before actually being able to play, the scripts are swapped out by a Cilbox Proxy component. These are what actually execute as components during runtime. Basis uses its copy of Cilbox Proxy and Cilbox Basis Scene instead of yours, but your data gets serialized.
+
+
+![Inspector Window showing created Cilbox Proxy component](/img/scripting/20.png)
+
+![Inspector Window showing Cilbox Scene Basis component updated in play mode](/img/scripting/21.png)
+
+![Window showing play mode](/img/scripting/22.png)
+
+- Run the Initialization scene and test your Cilbox script in the app. The cube should rotate.
+
+![Window showing cube rotating Cilbox demo in app](/img/scripting/23.png)
+
+Here is an additional example using shaders which you can try.
+
+``` cs title="NM_Wind "
+using UnityEngine;
+
+[Cilboxable]
+public class NM_Wind : MonoBehaviour
+{
+    public Texture2D NoiseTexture;
+    public Texture2D GustMaskTexture;
+    public void Start()
+    {
+        ApplySettings();
+    }
+    void ApplySettings()
+    {
+        Shader.SetGlobalTexture("WIND_SETTINGS_TexNoise", NoiseTexture);
+        Shader.SetGlobalTexture("WIND_SETTINGS_TexGust", GustMaskTexture);
+        Shader.SetGlobalVector("WIND_SETTINGS_WorldDirectionAndSpeed", new Vector4(1, 1, 1, 30 * 0.2777f));
+        Shader.SetGlobalFloat("WIND_SETTINGS_FlexNoiseScale", 1.0f / 175.0f);
+        Shader.SetGlobalFloat("WIND_SETTINGS_ShiverNoiseScale", 1.0f / 10.0f);
+        Shader.SetGlobalFloat("WIND_SETTINGS_Turbulence", 30 * 0.25f);
+        Shader.SetGlobalFloat("WIND_SETTINGS_GustSpeed", 50);
+        Shader.SetGlobalFloat("WIND_SETTINGS_GustScale", 1.0f);
+        Shader.SetGlobalFloat("WIND_SETTINGS_GustWorldScale", 0.0016666667f);
+    }
+}
+```

content/docs/world/ui-canvas.mdx

@@ -22,12 +22,6 @@ Note: If you are making a World Space canvas, an X,Y,Z a scale of 0.001 is usual
 
 ![BasisFramework UI canvas add Basis Graphic Raycaster](/img/ui-canvas/3.png)
 
-- Add a Basis UI Component, making sure to assign the required fields in the inspector.
-
-![BasisFramework UI canvas add Basis UI Component](/img/ui-canvas/4.png)
-
-![BasisFramework UI canvas add Basis UI Component required fields](/img/ui-canvas/5.png)
-
 - Change the canvas layer to OverlayUI.
 
 ![BasisFramework UI canvas layer OverlayUI](/img/ui-canvas/6.png)