| Line 124: | Line 124: | ||
<p>Click on the Radio Demo object in the hierarchy and at the bottom of the inspector click the add component button, add a Virtual Goods component. Change the type to furniture and category to furniture/other, fill out all the other tabs in the virtual goods component as require. More details on how to use the virtual good component can be found here [[Virtual_Goods|Virtual Goods setup]].</p> | <p>Click on the Radio Demo object in the hierarchy and at the bottom of the inspector click the add component button, add a Virtual Goods component. Change the type to furniture and category to furniture/other, fill out all the other tabs in the virtual goods component as require. More details on how to use the virtual good component can be found here [[Virtual_Goods|Virtual Goods setup]].</p> | ||
| − | [[]] | + | [[File:Radio Demo 24.jpeg]] |
| + | |||
| + | When you selected furniture in the type field of the virtual goods component the Space Pack will have added a Room Furniture component to the Radio Demo object, if it hasn't been added click the Radio Demo object and click the add component button at the bottom of the inspector and add one by searching room furniture. Click the place on floor check box in the room furniture component and drag the Stream Player object from the hierarchy to Main Collider field. More information on the room furniture component can be found here [[How_to_upload_items_as_furniture|Room Furniture setup]]. | ||
In this tutorial we are going to create a radio script that allows us to play and change the streamed radio being played within a region in Sinespace. You will require a current install of Unity and our SpacePack API for this demo to work correctly Get Started.
Firstly right click in the hierarchy and create an empty game object and set the transform to 0 0 0 and rename it to Radio Demo, this will be our container for the virtual goods component and room furniture component (more on this later), it also helps us keep our project tidy. Right click on the Radio Demo game object and create a cube and renamed it as Stream Player, this will be our radio model (you can add any model you like here).
While the Stream Player is selected add the following components to the game object by clicking the add component button at the bottom of the inspector :
Right click Radio Demo object and create a canvas and in the canvas inspector set the canvas render mode to screen space overlay, this will create a canvas in which we can add UI elements over the main screen.
In the canvas inspector set the UI scale mode to scale with screen size, this will scale the UI and elements dependent on the users screen resolution.
Right click the canvas and create a new canvas called Radio Admin and set the anchor preset to bottom centre and the rect transform width 400 and height 30, move the position to slightly above bottom centre, this will act as our container for our radio interface.
Right click the Radio Admin object and create an input field width 200 height 30 and position it to the left of the canvas (container), rename it to ifServerAddress. You can change the font sizes color to suit your requirements.
Right click the Radio Admin object and create a UI button, rename to Submit and change the width to 100 height 30, position it to the right of the input field. Using the drop down arrow to the left of the button click on the text item and change the text to Submit.
Select the Submit button and in the inspector locate the On Click() box, press the plus icon then drag the Stream Player. from the hierarchy to the bottom left box, click the drop down in the top right and select scripting runtime > CallScriptFunction, in the bottom right box enter UpdateRadio, this will be the script function that is called when we click on the submit button.
Right click the Radio Admin object and create another UI button width 100 height 30 and rename it to Close and position it to the right of the submit button, using the drop down arrow next to the button use the text field as before and change the text to Close.
Click on the Close button in the hierarchy and as before locate the On Click() box, press the plus icon and drag the Radio Admin object into the bottom left box, in the top right box select game object > set active (bool) and make sure the checkmark is unchecked. This will set the Radio Admin canvas inactive when the button is pressed.
Click on the Stream Player object in the hierarchy and locate the clickable activator we added earlier, press the plus icon in the on click event () box and drag the Radio Admin canvas to the bottom left box, in the top right drop down select game object > set active (bool) and make sure the check box is checked. This will set our radio admin as active when the radio model is clicked.
To finish off our admin panel select the Radio Admin canvas in the hierarchy and set it to inactive. This will hide the admin panel till the radio cube is clicked.
To start with we need to add some script references that will allow us to access the components on some of the objects, While the Stream player object is hi-lighted in the hierarchy scroll down to the script runtime component in the inspector and locate the object references panel, in the size enter 2 as we will be referencing two items for use inside the script. In the first name field type Stream Player and drag the Stream Player object from the hierarchy onto the reference field (important note here scripts are case sensitive so remember the names)
in the second name field type ifStreamAddress and drag the ifStreamAddress object from the hierarchy onto the second reference field.
Now for the fun part the script, this can be typed directly into the script runtime (source code box) or you can use a script editor such as VS Code to enter the script. For the sake of visibility I will be using VS Code a tutorial on how to install this is located here Auto Complete Setup
Our full radio script is shown above, below I will go through the script in order that it is read and explain what it all does.
These two lines of make the objects and their components available within the script for example our input field text for the stream address and the shoutcast streaming component on the Stream Player. They are called from the script references that we previously set in the scripting runtime (object references) and are called from within the script with Space.Host.GetReference(“objectname”). To call them from inside the script we now only have to use StreamPlayer or ifStreamAddress.
Space.Host.StartCoroutine(UserJoin) - This line calls a special kind of function called a coroutine : (Coroutine Manual), our reason for using this is to allow as to add a small 5 second pause on the script coroutine.yield(5). We pause the script temporarily to give the user time to fully load into the region before we try to connect to the network.
Space.Network.SubscribeToNetwork(“RadioDemo”, GetStream) – This line subscribes us to space networking, once subscribed this line will listen for messages on s specific channel “RadioDemo” when a message is received the function GetStream is called. When the user first loads into the region the radio will only activate if a network message is received, therefore we add GetStream() to the bottom of the function to initiate the radio when a user joins the region.
Why do we use networking? When a user loads into the region the radio script loads “client side” meaning any changes made to the radio address will only be changed for the user who changed it, we use Sinespace networking to update (sync) the other users in the region.
When this function is called we check the shard (a temporary region storage area) for a stream address.
local StreamAddress = Space.Network.GetShardProperty(“StoredStream”) - We check the shard named StoredStream for a stream address, if there is one present it will store it to the variable StreamAddress.
if StreamAddress == nil then StreamAddress = “http://192.227.85.169:6191” end – We check the previously set variable StreamAddress to check if it has an address, if it is nil then a default address is set in its place. This acts as an offline address for when there are no streams stored (Important Note: Shards only store their data till the last person leaves the region)
ifStreamAddress.UIInputField.Text = StreamAddress – here we set our UI Inputfield to our currently set StreamAddress.
PlayRadio(StreamAddress) – We call the next script function to play the radio and pass the current StreamAddress.
This function plays the stream address using the Shoutcast Streaming component we added to the Stream player game object.
StreamPlayer.Radio.Stop() - This line stops the currently playing stream.
StreamPlayer.Radio.PlayMP3Stream(StreamAddress) – here we tell the Shoutcast streaming component the currently set stream address.
StreamPlayer.Radio.Play() - Finally we play the radio using the Play command.
This function is called by our radio admin canvas and is used to set the current stream address.
local StreamAddress = ifStreamAddress.UIInputField.Text – when the submit button is pressed on the Admin panel the stream address is stored to the UIInputField we access this via the text command and store it to the variable StreamAddress.
Space.Network.SetShardProperty(“StoredStream”, StreamAddress) – Using Sinespace networking we store the variable StreamAddress to a shard (temporary region storage) named “StoredStream” this can then be accessed by other users.
Space.Network.SendNetworkMessage(“RadioDemo”, {URL = StreamAddress}) – this command sends a network message on channel “RadioDemo”, this initiates the radio update for all users in the region.
PlayRadio(StreamAddress) – Finally we call Play radio function in the script to play the radio client side (network messages are only sent to other clients and not received by the user updating the radio).
Click on Stream Player object in the hierarchy and locate the script runtime component in the inspector, check the Wait For Player and Wait For Network boxes.
Wait for Player halts the script from executing until the player has loaded into the region.
Wait For Network halts the script from executing until the player has loaded into the region and connected to the network.
Click on the Radio Demo object in the hierarchy and at the bottom of the inspector click the add component button, add a Virtual Goods component. Change the type to furniture and category to furniture/other, fill out all the other tabs in the virtual goods component as require. More details on how to use the virtual good component can be found here Virtual Goods setup.
When you selected furniture in the type field of the virtual goods component the Space Pack will have added a Room Furniture component to the Radio Demo object, if it hasn't been added click the Radio Demo object and click the add component button at the bottom of the inspector and add one by searching room furniture. Click the place on floor check box in the room furniture component and drag the Stream Player object from the hierarchy to Main Collider field. More information on the room furniture component can be found here Room Furniture setup.