DIY – Make Your Own DDR Mat on the Cheap for Your Unity2D Game | BitchWhoCodes | Stacey Mulcahy - a Microsoft Technical Evangelist

DIY – Make Your Own DDR Mat on the Cheap for Your Unity2D Game

Did I have you at DDR? Dance Dance Revolution is one of those games that has its very loyal audience, with hours wasted in local arcades breaking records and myths about rhythm and grace simultaneously. Search Youtube for DDR, and it will take you down the most amazing internet rabbit hole, across generations, and across countries and oceans.

A DDR style mat can be easily made by making a series of pressure sensors and some LEDs. Pressure on the sensor can be detected by a microprocessor such as an Arduino, SparkCore, Galielo, and the leds can be used to give visual cues of the sequence or light up when its been stepped on.

You can go and fork out the cash for some pressure sensors which typically range in price from 7- 12 bucks. These sensors will give you a higher level of fidelity and are better for applications that require more fidelity in weight for example. We are going to make our own pressure sensors from Velostat which is a pressure-sensitive conductive material. If you add a bit of conductive thread to it, you can capture the analog values to determine pressure, and boom – you got your own pressure sensors perfect for a DDR mat, a whoopie cushion, even a smart coaster.

Making a Pressure Sensor from Velostat and Conductive Thread

This is the easiest part of this project by far. You will need the following materials to create your own pressure sensor:

Steps

  1. Cut out the size and shape of the sensor that you want to make. For a DDR mat, I took a single sheet of Velostat, and created four square blocks from it to make four “foot” pads.
  2. Cut some conductive thread and take it onto one side of the Velostat, cover the surface and leaving a bit of it hanging off
  3. Repeat on the other side
  4. Connect one end of the aligator clip to the thread, on both sides

That’s it. You are ready to go! You will know need to get a microprocessor and connect one of the clips to a wire that is connected to Ground, and another that is connected to an analog pin.

This video shows all the above steps and it connected to a SparkCore.

Reading the Analog Value

You will need to calibrate the sensor. This often means reading the values and determining the value range. For my sensor, with no pressure, I was reading about 120 and up. For a full press, it was somewhere under 20. To capture an analog pin, you will need to read it’s value using the analogRead method in most microcontrollers.

Here is an example for Arduino:

Uploading this to your board, with the circuit completed should result in values being written back that are changing when you put pressure on the sensor.
If you are using Arduino, you should be able to open the Serial monitor and see the values changing as you press it.

Here is an example for the SparkCore:

For the SparkCore, I created this sketch in the Web IDE. This allows you to write code in browser, verify it like you would in Arduino, and then Flash it onto your SparkCore over Wifi. Spark.io has some great docs, so I won’t focus too much on the details.For the SparkCore, I used the Spark CLI to monitor the values coming back from the pressure. With the command line, you will need to log in, and then you can monitor variables saved by each SparkCore on an interval you can specify. For example:
spark monitor {your_spark_Id} pressure 1000
You can do a bunch of things with the CLI – like open a serial monitor as well.

Now that you have one sensor going, you will need as many as you game requires. Here is an image of 4 foot pads that are hooked up to an Arduino:
ddr01. We ended up using Processing with this mat, so that we could communicate to Unity3d.

I have a finished sample that had four foot pads, but for this tutorial I am keeping it simple and will just use one sensor. To check out the code for the full DDR mat with sensors and the led string, please visit the respository. Check out the start sequence for the prototype here:

Using the Data From the REST API for the SparkCore

If you are using Arduino, you will need to think about how you can access that data elsewhere or share it. With an Arduino Mega, you could use low level sockets for example. You could store the data in a database. You could use web sockets, or something like Spacebrew with Processing.

As I am using the SparkCore, it stores the pressure data each time it sets it. This data is then exposed via a REST API, so at the most basic, I could go and just poll the api, which is what I do in the Unity2D example. Ideally I would use something with real-time communication, like web sockets, but polling seems to work good enough for the case of prototyping it out.

Getting data from the SparkCore cloud data api is easy. You will need to know the ID of your sparkcore, which you can find by logging in on the web, and selecting your sparkcore to get the number. You will also need to get an access token. With these two pieces of info, you can call the rest api to get data about a specific variable you have set to save. The url for the api will look like this:
https://api.spark.io/v1/devices/{YOUR_SPARKCORE_ID}/{VARIABLE_NAME}?access_token={YOUR_ACCESS_TOKEN}

Using the Data In Unity2D

I followed a basic tutorial to make a Flappy Bird clone - probably #546,335 clone of this game to be exact. Instead of pushing the spacebar, I decided to use my sensor. To capture data from the api in Unity I had to pull down the JSONObject library available from the Asset Store in Unity.. I could then use the WWWW class in Unity to retrieve the data. Here is an example of getting the data from the api, which I do in the Plane script:

Now, before you run it and think WHY DOES IT NO WORK, remember: you need to change out the id of your SparkCore, and your access token in that url! When you start the game if you press the sensor, it should add force to the plane, acting an an input to your Unity game.

Using the Data in BabylonJS

I took one of the basic particle examples from BabylonJS, and I showed how to capture the data from the SparkCore API to incorporate it. If you press the sensor, you’ll start the particle system. Imagine making a few sensors where if you walked in difference places, you’d trigger explosions ( land mines) for example. Again, I just captured and polled the REST API on a regular interval using jQuery:

When you hit the pressure sensor, the particle engine starts:
babylonjsbig

You can get all the code for the Unity2D game, the BabylonJS example, and the sketches for the SparkCore from the github respository