Internet of Things with Unity3d, Arduino and Spacebrew – Part 2 | BitchWhoCodes | Stacey Mulcahy - a Microsoft Technical Evangelist

Internet of Things with Unity3d, Arduino and Spacebrew – Part 2

Part 2 – Using Spacebrew with Unity

For the purposes of this tutorial, I have created a super simple Unity project that has one button and one text field. When the button is pressed, it will send a message. When a message is recieved, the textfield will update with the data. I am keeping it simple, rather than showing the actual intergration into my game with its larger file size and complexity. Now, until we get the Arduino up and running, we are going to have the Unity piece send a message and listen for that same message. This will prove that it is being routed through the Spacebrew server, and being received – taking that part of the communication out of the problem before we get all crazy and add the microcontroller into this mix. If you want to skip the steps and just take a gander at the Unity Project – you can download it from my repo.

Download the Unity client sdk for Spacebrew

Spacebrew has a Unity client sdk that we are going to use. We will need to clone or download the repository from here https://github.com/Spacebrew/spacebrewUnity.

Create a new Unity3d Project and add the Spacebrew SDK

We can start using the the Spacebrew SDK by dragging and dropping the Spacebrew Client project from the unpacked directory onto the Project panel in Unity. When we drop that directory, we will get a dialog that will ask us if we want to import the assets:

unity3d-spacebrew-tutorial-step02.

Once we have that imported, we can see that we get a prefab, and a few scripts. There is one script that is code for the client, which takes parameters from the properties panel for the prefab. Another script handles events – sending and receiving data.

unity3d-spacebrew-tutorial-step01a

Add and Configure the Spacebrew Prefab

We want to add the Spacebrew prefab to the stage so that we can use it. Find the prefab in the project panel and then drop it onto the stage. Next we have to configure it to work with our local Spacebrew server that is chugging along. Select the prefab from the Hierarchy panel to bring up the inspector panel.

First, we need to set the correct server address property, assigning it to our local Spacebrew server installation. As I ran my server on the default port ( being 9000), I am going to set the server address property to

ws://localhost:9000

. It is important to keep the ws prefix on the url – when you run the project, you will get a warning about it being deprecated.

unity3d-spacebrew-tutorial-step03

Next we need to add what events we want to subscribe to and or publish. Remember, a client can both publish and subscribe to multiple channels. For this example we are going to listen for only 1 event, and we are going to publish only 1 event. Start by defining what we are going to publish.

  1. Under the Publishers section, enter 1 for size. We will only publish one event ( or stream / channel ).
  2. Change the name of the publish stream to be button_pressed
  3. Next change the data type to be string.

We can now publish a stream called “button_pressed”, which will send information in a string format. For the sake of testing, we want to also subsbribe to that same event.

  1. Under the Subscribers section, enter 1 for size. We will only subscribe to that one event ( or stream / channel ).
  2. Change the name of the channel we want to subscribe to, to be button_pressed
  3. Next change the data type we expect to be string.

We can now hit play and open up the console panel to see if it works. We won’t be sending or receiving any messages quite yet, but we should be able to see if we are able to connect to the Spacebrew server through the console messages. If there is an issue connecting, you will get an error in the console. Error connecting means you will likely have to double check your server address, make sure the server is running, or if you started with a different port number, double check that to make sure it is correct.

Create UI to Send and Display Data

It’s time to build a crappy, I mean “functional” UI that will allow us send and receive messages to and from the server. Let’s start by building a basic game object that will function as a button. I have used a basic button graphic that you can get here<>. You will want to drag and drop that image into the project panel.

To create a button that will send data:

  1. Create a new game object and name it subscribeButton in the properties panel.
  2. Make it look like a button. Select the subscribeButton in the hierarchy and then in the properties panel, click the Add Component button > Rendering> Sprite Renderer. Drag and drop the button image from the assets panel onto sprite field in the Sprite Renderer section. You should now see the button on the stage.
  3. Make it work like a button. Again, with the subscribeButton selected in the hierarchy, click the Add Component button> Physics2D>Box Collider 2D. We want to add a collider as it will provide us with all the events we need for mouse interaction, like to know if someone has clicked
  4. Add Script to the Button. Let’s add one more component: click the Add Component button > New Scripts> and Name the new script SendButton. Double click on the script to open it up from either the properties or the project panel and enter in the following code:

With the button working, we now need to enter a textfield that will just display the data receieved. To add a text field:

  1. Add a GUI text field. From the top menu, click GameObject>Create Other>Gui Text
  2. Name the text field. Select the text field in the hierarchy panel and then name it subscribeText
  3. Make it visible. With the text field still selected, change the font-size in the properties inspector to be 10, change the color to white, change the text property to be Waiting for data. Now you won’t see this in the scene panel, so check to see if you can see it in the Game panel

Now, we can run the Unity project, and open up the Spacebrew admin page. We should see that each time we click the button, that it sends the event – and the color of that circle node will change to visualize that the data has been sent. However, we can’t receieve it quite yet, because although codewise we have set up for it, we need to actually connect publishers and subscribers on the admin panel for data to be passed through.

Connect the Publisher and the Subscriber

Open the index page in the admin directory of your Spacebrew server, and drop it into a browser. You should now see something that looks like this – with a single client, publisher and subscriber.
unity3d-spacebrew-tutorial-step05

We need to connect them to make sure that data is both sent and receieved. To connect them, click the circle on the publisher, and then click the circle on the subscriber. You should now see a line drawn between them, to illustrate that connection. Remember, this is not limited to a one to one connection, you can connect many publishers and subscribers together, as long as you are connecting them based on the proper event name and value ( in this case, button_pressed).
unity3d-spacebrew-tutorial-step06

Receiving and Displaying Data.

One last step. We need to figure out what we want to do when our subscriber gets data. For this tutorial, we just want to write the data to the screen in the text field we just added. The Spacebrew Unity SDK actually provides some stub code where it prints out messages sent and received in the SpacebrewEvents.cs file. We are going to capture that message and then put the value of the data into the textfield. Replace the SpacebrewEvents.cs code with this:

Let’s test this out. When we press that button, if all is well in the universe, we should see the data being sent by the button written to the textfield. Also, if we have the admin panel, we should see that circle change color. Works? Yah! Now let’s add in yet another moving part – the microcontroller.

Moving on to the last part of this tutorial – Getting Arduino to work with Spacebrew using Processing.

Filed under: Tutorials — Stacey @ 6:06 pm