wiki.sine.space | sinespace

Demo Radio (Scripting)

From wiki.sine.space
Revision as of 21:18, 12 August 2019 by Jayden Catnip (Talk | contribs)

Jump to: navigation, search

Sinespace Radio Demo (Beginner)

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.

Create a Radio Model

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).

Radio Demo 1.jpeg

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 :

  • Scripting runtime component (used to add scripting to a game object)
  • Shoutcast Streaming component (used to play streaming audio to the listeners)
  • Clickable Activator (Makes the game object clickable, used for the radio admin)

Create Your Radio Interface

Radio Demo 4.jpeg

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.

Radio Demo 2.jpeg

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.

Radio Demo 3.jpeg

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.

Radio Demo 5.jpeg

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.

Radio Demo 7.jpeg

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.

Radio Demo 8.jpeg

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.

Radio Demo 9.jpeg

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.

Radio Demo 10.jpeg

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.

Radio Demo 11.jpeg

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.

[[]]