@carnegie-mellon-robotics-academy/cra-template-unity-react

Unity-React-Template

Installing

1. Install npx
2. Open a terminal and go to a folder where you want to download the template.
3. Enter the command: npx create-react-app --template @carnegie-mellon-robotics-academy/cra-template-unity-react

Project Environment

This template installs a Unity Project along side of a react application. The root of the project is meant to be a workspace for your IDE.

Getting Started

Building Unity

1. Open My_Unity_Project through Unity3D editor. You may need to upgrade or downgrade, that is fine.
2. Once open, add TestScene to your build settings.
3. Click build. Name the game "unity_game" and save it in the dist folder.

Building the app

1. cd into the root of the project.
2. run npm build or yarn build (if the build fails try removing node_models and re-install)
3. Once, complete, run npm start or yarn start

Subscribing to messages

JavaScript

// When component mounts, listen for any message with a topic of unity_awake
const unityAwakeSubscriber = { topic: "unity_awake", callback: handleTestMessage }

  useEffect(() => {
    // addTopicListener imported from unity_api.js
    addTopicListener(unityAwakeSubscriber);
  }, [])

C#

 void Start()
  {
    // Find the MessageDispatcher script
    messageDispatcher = GetComponent<cmra.MessageDispatcher>();
    // Add an event listener. This subscribes to the topic test, with a method name of startTest which is also a function below.
    messageDispatcher.addMessageListener(new Subscriber("test", startTest));
  }
  private void startTest(object parameters)
  {
    // Deserialize the parameters again. TODO: Come up with a solution around having to do this. Simply casting did not work out. 
    StartTestParameters testParams = JsonConvert.DeserializeObject<StartTestParameters>(parameters.ToString());
    // Pass the parameters to the test coroutine.
    StartCoroutine(TestCoroutine(testParams));

  }

Sending Messages

JavaScript

const handleTest = async () => {
    const msg = { topic: "test", message: { method: "startTest", parameters: { i_testTime: 3, resolver: "endTest" } } }
    setTesting(true);
    // Waits until Unity sends a message back with a topic equal to endTest.
    // This method is imported from unity_api.js
    await sendUnityMessageAsync(msg, "endTest").then((message) => {
      setTesting(false);
    });
  }

C#

// Sends a message to the browser with a topic of the resolver variable. This message does not need to send an object as parameters. "messageDispatcher" is assined on start.
messageDispatcher.SendData(null, resolver);