Workaround for sending images from Spacebrew to Unity
How To send images from a Spacebrew website to Unity.
This tutorial will teach how to display 2d images in a Website to 3d models versions of them in unity and allow you to toggle them on and off from the website by clicking or tapping on them.
The motivation behind this exercise was to explore the ability of changing the objects available in AR by using the website running spacebrew as a controller interface where the objects being toggled would be clearly displayed as images. We believe this exercise could be used to delve into many different AR experiences.
Our particular use case was to use 2d emojis to toggle 3d versions of the same emojis in Unity. We are sharing these 2d and 3d rendering of the emojis if you wish to follow the example as is.
DISCLAIMER: We are aware there are probably many other ways, probably better ways of achieving this result so we encourage you to look into other options if this one seems to convoluted.
You can download the 3d emoji unitypackage in this link
So we began:
Our first step, was looking at the example ofSpacebrew_String and we copied there html and css.
We then proceeded to re edit and simplify the code for the purpose of our project.
This is the code we ended up with:
As you can see we only have one string being published to spacebrew: "text1".
We then proceeded to create 4 buttons that would call the function "sendTexttoSpacebrew". We created a button for each image we wanted to toggle in Unity.
The function "sendTexttoSpacebrew" is probably the most important one.
function sendTexttoSpacebrew(txt){
// console.log("Sunglass pressed");
console.log(txt);
sb.send("text1", "string", txt);
return false;
}
This function basically sends a string of text through the publisher "text1" that will be vary depending on which button is being clicked.
In order to toggle the right image we use the image as the button itself. And in order to determine what text each button sends we assign a specific text to each button:
As you can see we embed in Button 1 the image "sunglass.png" and when clicked we send the string of text "Sunglass" to Unity.
We repeat this process for every button replacing it with the corresponding image (in our cases different emojis) and there respective text. We suggest that the text is related to the content of the image.
On the css end, since we lack the proper skills we just did the very basics, meaning we made sure that the buttons would look as such by making them change color every time they were clicked.
Ok, so the next step is to edit the SpacebrewEents.cs code. This code should be inside Unity within the Spacebrew library. If you haven't imported that into Unity we suggest downloading this toolkit.
Once we located the SpacebrewEents.cs code we edited so that it looked as follows:
using UnityEngine; using System; using System.Collections;
public class SpacebrewEvents : MonoBehaviour {
//bool lightState = false; public GameObject myTongueout; public GameObject mySad; public GameObject myBig_smile; public GameObject mySunglass; private bool firstRun; SpacebrewClient sbClient; public string text = ""; public bool hidekey = false; // Use this for initialization void Start() { firstRun = true; GameObject go = GameObject.Find("SpacebrewObject"); // the name of your client object sbClient = go.GetComponent<SpacebrewClient>(); // register an event with the client and a callback function here. // COMMON GOTCHA: THIS MUST MATCH THE NAME VALUE YOU TYPED IN THE EDITOR!! //Makes it listen for incoming message called "text" sbClient.addEventListener(this.gameObject, "text"); } // Update is called once per frame void Update() { if (firstRun == true) { mySunglass.gameObject.SetActive(false); mySad.gameObject.SetActive(false); myBig_smile.gameObject.SetActive(false); myTongueout.gameObject.SetActive(false); //print ("the sunglass are: "+ mySunglass.GetComponent<Renderer>().enabled); print("These should be invisible"); firstRun = false; } public void OnSpacebrewEvent(SpacebrewClient.SpacebrewMessage _msg) { print("Received Spacebrew Message"); print(_msg); if (_msg.name == "input1") { GameObject go = GameObject.Find("ImageTarget/GameObject/"); // the name of your client object //TextMesh tm = go.GetComponent<TextMesh>(); //tm.text = _msg.value; if (_msg.value == "Sun glass") { print("here"); mySunglass.GetComponent<Renderer>().enabled = false; print("there"); mySunglass.gameObject.SetActive(true); mySunglass.GetComponent<Renderer>().enabled = true; mySad.GetComponent<Renderer>().enabled = false; myBig_smile.GetComponent<Renderer>().enabled = false; myTongueout.GetComponent<Renderer>().enabled = false; } if (_msg.value == "Sad") { print("shere"); mySad.GetComponent<Renderer>().enabled = false; print("sthere"); mySad.gameObject.SetActive(true); mySad.GetComponent<Renderer>().enabled = true; myBig_smile.GetComponent<Renderer>().enabled = false; myTongueout.GetComponent<Renderer>().enabled = false; mySunglass.GetComponent<Renderer>().enabled = false; } if (_msg.value == "Big smile") { print("bhere"); myBig_smile.GetComponent<Renderer>().enabled = false; print("bthere"); myBig_smile.gameObject.SetActive(true); myBig_smile.GetComponent<Renderer>().enabled = true; myTongueout.GetComponent<Renderer>().enabled = false; mySunglass.GetComponent<Renderer>().enabled = false; mySad.GetComponent<Renderer>().enabled = false; } if (_msg.value == "Tongue out") { print("t here"); myTongueout.GetComponent<Renderer>().enabled = false; print("t there"); myTongueout.gameObject.SetActive(true); myTongueout.GetComponent<Renderer>().enabled = true; mySunglass.GetComponent<Renderer>().enabled = false; mySad.GetComponent<Renderer>().enabled = false; myBig_smile.GetComponent<Renderer>().enabled = false; } } }}
Ok, so let's take it bit by bit, at least the important ones.
The first thing we did was create GameObjects for each of our 3D emojis:
public GameObject myTongueout; public GameObject mySad; public GameObject myBig_smile; public GameObject mySunglass;
It is very important that, in Unity you drag the 3d emoji objects into the scene and that only then you drag them into their respective GameObject. The order matters.
The next unique step of our code is start by disabling all of the 3d emojis so that they don't all show up when running Unity. So if we are running Unity it will check if it's the first time it's running and if so it will deactivate all the selected gameObjects:
if (firstRun == true) { mySunglass.gameObject.SetActive(false); mySad.gameObject.SetActive(false); myBig_smile.gameObject.SetActive(false); myTongueout.gameObject.SetActive(false);
//print ("the sunglass are: "+ mySunglass.GetComponent<Renderer>().enabled); print("These should be invisible"); firstRun = false; }
The next part is the final part of the code and the most important. This section allow for each emojis to be toggled and showed individually.
The first thing we do is check for an incoming message in the field "input1". It's important to clarify that "input1 "is the one that is connected in Spacebrew to "text1" meaning that this is the one receiving the different strings of text.
Then we just have different if statements based on the different strings of text are being send by the buttons being clicked.
If Sunglass emoji was pressed then the text "Sunglass" is sent to Unity. This code will then set the Sunglass.gameobject to True and set the renderer of all other gameObjects to false.
This process is repeated for every if statement of every string.
if (_msg.name == "input1")
{
GameObject go = GameObject.Find("ImageTarget/GameObject/"); // the name of your client object
if (_msg.value == "Sun glass")
{
print("here");
mySunglass.GetComponent<Renderer>().enabled = false;
print("there");
mySunglass.gameObject.SetActive(true);
mySunglass.GetComponent<Renderer>().enabled = true;
mySad.GetComponent<Renderer>().enabled = false;
myBig_smile.GetComponent<Renderer>().enabled = false;
myTongueout.GetComponent<Renderer>().enabled = false;
}