Add Guide on How to Add Network-Synced Animations (#88)

* Add Guide on How to Add Network-Synced Animations

* Add Clarification that sharing BEE files with passwords is pretty safe

* Add clarification on how to host/connect via local or remote servers

Author: Chylum

content/docs/faq.mdx

@@ -52,4 +52,16 @@ You can create custom worlds using Unity. Check out the [World Creation Guide](/
 We welcome contributions! See the [Contributing Guide](/docs/contributing) for more information on how to get involved.
 
 ### What's the difference between core component contributions and add-on contributions?
-A: Core components include systems that make up the key features of Basis. Contributions (or modules) include extra features which, while useful, are not required by default. Therefore, contributions may provide features that are outside the scope of the main Basis offering, which may provide value to developers using Basis.
+A: Core components include systems that make up the key features of Basis. Contributions (or modules) include extra features which, while useful, are not required by default. Therefore, contributions may provide features that are outside the scope of the main Basis offering, which may provide value to developers using Basis.
+
+### Does sharing Bee Files Compromise Remote Content Hosting Server Credentials?
+
+No! You can share your BEE files with your friends for instance. A BEE file encompasses the Basis asset (even for multiple platforms), excluding the encryption key used to decrypt it. In other words, it is basically a multi-asset-bundle. If you share a BEE file's password, then this allows anyone that has it to be able to access whatever is inside the BEE file (i.e., the specific UGC like props, avatars, worlds).
+
+## How can I connect to a local server from different devices?
+
+There are several options for connecting to a local server from different devices. For instance, you can enable port forwarding on your router. Alternatively, if you prefer not to tinker with your router, you can install [`Tailscale`](https://tailscale.com/download), which is very simple to set up.
+
+## Where can I set up a remote server?
+
+There are a variety of Cloud services you can host your servers in. Examples include: Bunny, DigitalOcean, CloudFlare, AWS, Microsoft Azure, Google Cloud, and more.

content/docs/world/props.mdx

@@ -189,4 +189,122 @@ Note: Both local and remote players can spawn cubes!
 
 <Callout type="info">
 Double note: You can access Basis VR via Steam as well. To get an access key, [join the discord](https://discord.gg/v6ve6WT562)!
-</Callout>
+</Callout>
+
+## Adding Network-Synced Animations
+
+Adding networked animations for props, as well as worlds and avatars, is quite simple as they can be created using the Unity `Animator`.
+
+The example code below shows example code for a network-synced Opticor rifle, and the corresponding Animator state machine and triggers it uses:
+
+```
+using UnityEngine;
+using System.Collections;
+using Basis.Scripts.BasisSdk.Interactions;
+using Basis.Scripts.Device_Management.Devices;
+using Basis.Network.Core;
+using Basis;
+
+[Cilboxable]
+public class OpticorShooting : MonoBehaviour
+{
+    private BasisPickupInteractable pickup;
+    private BasisNetworkShim network;
+    private Animator animator;
+    public AudioSource audioSource;
+    public AudioClip audioClipCharge;
+    public AudioClip audioClipMisfire;
+
+    void Start()
+    {
+        this.pickup = GetComponent<BasisPickupInteractable>();
+        this.pickup.OnInteractStartEvent.AddListener(OnPickup);
+        this.pickup.OnInteractEndEvent.AddListener(OnDrop);
+        this.pickup.OnPickupUse.AddListener(OnUse);
+        this.network = Basis.SafeUtil.MakeNetworkable(this);
+        this.network.NetworkMessageReceived = OnNetworkMessage;
+        this.animator = GetComponent<Animator>();
+    }
+
+    public void OnNetworkMessage(ushort PlayerID, byte[] buffer, DeliveryMethod DeliveryMethod)
+    {
+        Debug.Log("Opticor: Received network message!, PlayerID: " + PlayerID + ", buffer length: " + buffer.Length + ", DeliveryMethod: " + DeliveryMethod);
+        if(buffer.Length < 1) return;
+        if(buffer[0] == 1) 
+        {
+            //Debug.Log("Opticor: Start the Pew Pew! (networked)");
+            CheckShoot();
+        }
+        else if(buffer[0] == 2)
+        {
+            //Debug.Log("Opticor: Stop the Pew Pew! (networked)");
+            StopShoot();
+        }
+    }
+
+    private void OnPickup(BasisInput input)
+    {
+        //Debug.Log("Opticor: Picked up!");
+    }
+
+    private void OnDrop(BasisInput input)
+    {
+        //Debug.Log("Opticor: Dropped!");
+    }
+
+    void OnUse(BasisPickUpUseMode mode)
+    {
+        switch (mode)
+        {
+            case BasisPickUpUseMode.OnPickUpUseDown:
+                //Debug.Log("Opticor: Start the Pew Pew! (local)");
+                this.CheckShoot();
+                this.network.SendCustomNetworkEvent(new byte[] { 1 }, DeliveryMethod.ReliableSequenced);
+                break;
+            case BasisPickUpUseMode.OnPickUpUseUp:
+                //Debug.Log("Opticor: Stop the Pew Pew! (local)");
+                this.StopShoot();
+                this.network.SendCustomNetworkEvent(new byte[] { 2 }, DeliveryMethod.ReliableSequenced);
+                break;
+        }
+    }
+
+    private void CheckShoot()
+    {
+        animator.SetBool("GunTrigger", true);
+        if (this.animator.GetCurrentAnimatorStateInfo(0).IsName("Firing") || this.animator.GetCurrentAnimatorStateInfo(0).IsName("Misfire"))
+            return;
+        else
+            CheckIdleState();
+
+        void CheckIdleState()
+        {
+            if (this.animator.GetCurrentAnimatorStateInfo(0).IsName("Idle Overheated"))
+            {
+                this.animator.SetTrigger("GunMisfire");
+                audioSource.PlayOneShot(audioClipMisfire);
+            }
+            else
+            {
+                this.animator.SetTrigger("GunShoot");
+                audioSource.PlayOneShot(audioClipCharge);
+            }
+        }
+    }
+
+    private void StopShoot()
+    {
+        this.animator.SetBool("GunTrigger", false);
+    }
+}
+```
+
+<Callout type="info">
+The `BasisNetworkShim` is used to allow Cilbox scripts to have networking functionalities.
+</Callout>
+
+![Inspector Window showing button and components](/img/props/7A.png)
+
+![Inspector Window showing button and components](/img/props/7B.png)
+
+You can try out the Opticor example for yourself by downloading its asset package [here](https://drive.google.com/file/d/1C0kOI8tfK4xD6j_Bqys3oSMJpV_OWNPR/view?usp=drive_link).