How to implement the Playish controller

Welcome to the second playish instructional tutorial! We have had a lot of developers asking us to clarify exactly how they can implement the playish controller into their games. A good and easy to understand tutorial was in order, so here we are!

Downloading the plugin

To begin with you will have to download the plugin. To do this start out with going to the projects Github webpage. You can get to the page by clicking this or through the appropriate section the Playish website. When you have navigated your way to the project site click on the green button near the top-right of the page.

Then click Download as zip and save the file wherever you can easily find it.

Installing the plugin

Now it is time to get the plugin into your Unity project. Go to where you downloaded the zip file and extract the contents.

There should be two .unitypackage files inside. First make sure your Unity project is open in the editor and then open the first package. A window will pop up inside Unity. Click the import button in the lower-right corner of the window to complete the install. Then do the same with the second package.

The plugin is now installed!

The Playish manager

To make your game be able to communicate with Playish you will have to add our manager to your scene. The manager is a singleton class so there should only be one running in your active scene at any given time. To make life easier your you we have made it so that it will automatically transfer from scene to scene. Therefore you only need to add it to your first scene and that’s it!

Open the scene that will be the first one to load in your game, then create a new empty object in the scene and name it PlayishManager with capital letters and no space. This is important! Now add the component PlayishManager to the empty object. Where the object is in the scene and how it looks is completely irrelevant so do what you prefer with it.

Time to code

Now it is time for the juicy meat of the system!

Create a new script in a folder of your choice. Lets call it “ExampleController”.

This is the code for this example. Paste this into your new script file and I will go over it with you step by step to explain what it does.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using Playish;

public class ExampleInput : MonoBehaviour
{
public int playerId;

private static Dictionary<int, Device> devices = new Dictionary<int, Device>();

private DeviceManager deviceManager;

private bool lastButton;

private void OnEnable()
{
deviceManager.deviceAddedEvent += OnDeviceAdded;
deviceManager.deviceAddedEvent += OnDeviceRemoved;
}

private void OnDisable()
{
deviceManager.deviceAddedEvent -= OnDeviceAdded;
deviceManager.deviceAddedEvent -= OnDeviceRemoved;
}

private void Awake()
{
deviceManager = DeviceManager.getInstance ();
}

private void Update()
{
if(!devices.ContainsKey(playerId)){return;}

Device device = devices [playerId];

if(device == null){return;}

bool button = device.getBoolInput ("button");

int moveX = device.getIntInput ("moveX");
int moveZ = device.getIntInput ("moveY");

float rotationX = device.getIntInput ("moveX");
float rotationY = device.getIntInput ("moveY");
float rotationZ = device.getIntInput ("moveZ");
float rotationW = device.getIntInput ("moveW");


if(button != lastButton)
{
if(button)
{
transform.Translate (0, 5f, 0, Space.Self);
}
else
{
transform.Translate (0, -5f, 0, Space.Self);
}

lastButton = button;
}

transform.Translate (moveX * Time.deltaTime, 0, moveZ * Time.deltaTime, Space.World);

transform.rotation = new Quaternion (rotationX, rotationY, rotationZ, rotationW);
}

private void OnDeviceAdded(DeviceManager.DeviceEventArgs e)
{
Device device = deviceManager.getDevice (e.deviceId);

if(device == null){print ("Decive not found!"); return;}

if(devices.ContainsKey(playerId) && !devices.ContainsValue(device))
{
devices.Add (playerId, device);
}
}

private void OnDeviceRemoved(DeviceManager.DeviceEventArgs e)
{
Device device = deviceManager.getDevice (e.deviceId);

if(device == null){print ("Decive not found!"); return;}

if(devices.ContainsKey(playerId) && devices.ContainsValue(device))
{
devices.Remove (playerId);
}
}
}

Imports

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using Playish;

In addition to the 3 default system imports using Playish; is also needed.


public int playerId;

private static Dictionary<int, Device> devices = new Dictionary<int, Device>();

private DeviceManager deviceManager;

private bool lastButton;

Here I have created a couple of fields for different purposes.

  1. A public int called playerId that will be set in the inspector. It will decide what player will control the component.
     0 = player 1, 1 = player 2, etc.
  2. A static dictionary to store the relationship between the player ids and their respective devices when players are connected.
  3. Just a variable to store a reference to the device manager. Makes things easier.
  4. lastButton keeps track of the state of the button that will be on the controller.

private void OnEnable()
{
deviceManager.deviceAddedEvent += OnDeviceAdded;
deviceManager.deviceAddedEvent += OnDeviceRemoved;
}

private void OnDisable()
{
deviceManager.deviceAddedEvent -= OnDeviceAdded;
deviceManager.deviceAddedEvent -= OnDeviceRemoved;
}

Here the deviceAdded event and the deviceRemoved event are listened to and unlistened to as needed.


private void Awake()
{
deviceManager = DeviceManager.getInstance();
}

Gets the device manager and stores it into a variable at awake for easy reference.


if(!devices.ContainsKey(playerId)){return;}

Device device = devices [playerId];

if(device == null){return;}

Here we check if the player is registerd as connected and fetch a reference to the device that player is holding.


bool button = device.getBoolInput ("button");

int moveX = device.getIntInput ("moveX");
int moveZ = device.getIntInput ("moveY");

float rotationX = device.getIntInput ("moveX");
float rotationY = device.getIntInput ("moveY");
float rotationZ = device.getIntInput ("moveZ");
float rotationW = device.getIntInput ("moveW");

Fetching all the inputs from the loaded controller on the device the player is holding. Storing the values in local variables to make things easier and cleaner.


if(button != lastButton)
{
if(button)
{
transform.Translate (0, 5f, 0, Space.Self);
}
else
{
transform.Translate (0, -5f, 0, Space.Self);
}

lastButton = button;
}

If the button on the players controller is pressed then move the gameobject up along the Y axis by 5 units. When it is released it is moved down by the same amount.


transform.Translate (moveX * Time.deltaTime, 0, moveZ * Time.deltaTime, Space.World);

transform.rotation = new Quaternion (rotationX, rotationY, rotationZ, rotationW);

Move the gameobject when the joystick is being moved on the controller. Also rotate it when the controller is being rotated.


private void OnDeviceAdded(DeviceManager.DeviceEventArgs e)
{
Device device = deviceManager.getDevice (e.deviceId);

if(device == null){print ("Decive not found!"); return;}

if(devices.ContainsKey(playerId) && !devices.ContainsValue(device))
{
devices.Add (playerId, device);
devices
}
}

This function is run when the deviceManagerAdded event is triggered.

It receives the device that was added and checks if it is not already connected to a player. If not then it is added and connected.


private void OnDeviceRemoved(DeviceManager.DeviceEventArgs e)
{
Device device = deviceManager.getDevice (e.deviceId);

if(device == null){print ("Decive not found!"); return;}

if(devices.ContainsKey(playerId) && devices.ContainsValue(device))
{
devices.Remove (playerId);
}
}

This function is run when the deviceManagerAdded event is triggered.

It receives the device that was added and checks if it is connected to a player. If it is then it is removed and disconnected.


I hope that helped you understand the inner workings of this script.

Creating a controller.

Now it is time to create the actual controller.

Go to the Playish website and log in. If you do not have an account you will have to create one first.

Now click the menu button in the very top-right of the screen. Then select Upload Game.

Ok! Time to create your first game on Playish.

Fill in all the information and make sure to select Private as the games release status.

Next is file uploads. Skip it for now and press next and enter the controller designer!

Here you will create your different controller screens for your game.

Use the scrollable interface to the right to change the layout of the default controller to something like this:

Make sure you give it the name “ExampleController” and then press the Save Changes button.

Congrats on creating your first controller!

Uploading your game

Now for the last step! Packaging and uploading your game to Playish.

To package your game go to “File > Build Settings…”. There you will have to make sure your game is to the right platform. Pick WebGL if it is not already picked. Also make sure to add all scenes you want to include in your game into the scene part of the window. You can also use the Add open scenes button if that is easier for you.

When satisfied press Build and save in an easy to remember spot.

Go to the playish website and edit the game you created earlier there. Follow the steps and when in the file upload step follow the instructions there.

Now go and playtest! Congrats on making your first game with the Playish controller.