Interactive Cardboard Story [ULTRA EASY AND CHEAP]

Have you ever wanted to make your own point and click adventure?

But at the same time didn't want to draw a lot of images?
Then this is the tutorial for you !! !! !!! !! !!!!!


In this tutorial you'll learn how to make a interactive landscape that tells your story! My project was made in Dutch! But you can make your own dialog in your own language in the world that you'll create! And all of this made from old stuf that you probably already have at home!

^^ up here ^^ you see that if you pick your character and place it in front of the gate that there is audio playing!

In this Instructable I'll teach you how to make a simpleinteractivestory. We'll use a Arduino for the physical part and Unity to manage the audio and digital part. And to give it an amazing look, we'll use a lot of cardboard and hot glue!


This tutorial will be divided in a couple sections: How to download and install the needed software, The basic principle of the system we're going to make, In detail step by step how I made this project, a couple of tips and tricks, some construction tips, and probably more stuf.

Step 1: "Getting the Ingredients"

The stuff you'll need:
Here is a list of components, and software I used for this project. Later on in the tutorial I'll go in detail why I used it and how and where to get them! BUT FOR NOW! HERE YOU GO!

  • An Arduino
    (doesn't really mater what kind)
  • A Computer
    (with at least one USB port)
  • Arduino Software
    (Just the basic software without extended library's is fine!)
  • Unity3D
    (it's free, it's easy, and kinda lightweight)
  • A microphone
    (just something you can record audio with.)
  • Audacity
    (or any free to use audio recording software. U can also use a phone for this)
  • CARDBOARD
    (Or anything else, as long as it is a easy-to-use non-conductive material
  • Some wires
    (Almost anything "conductive" you can find wil be fine, but wires are easy-er to use
  • Flat Thumb-tags
    (Cheapest is best, cause you'll need to strip them and only use the copper of the thumb-tag)
  • Sticky stuff
    (Anything from hot-glue to ducktape is fine, but hot-glue is easiest.)
  • Maybe some motors
    (It's optional! But it can make the project come to life just a little bit more!)


And thats it, I used only recycled materials during this build, to keep it accessible for anyone to make! (and it helps a lot that it's very cheap!)

Step 2: The Basic Principle

Keep it simple!

The system can be as complicated as you want it to be! But becauseeveryone needs to be able to do this we'll be keeping it simple!

The main Idea is that you need to be able to move "real-life-objects" around to further the story and activate moving pieces of cardboard! (Oh and it needs to be cheap and fast to make!)

The whole system we're about to make is based on the simple principle of detecting if something is on or off! You could also make this project by only using light-switches. (well... if you really wanted to anyway)

But let's take a look at the pictures to see how the basics work!

To tell your story you need a couple of things beside basic knowledge of the wiring. You need a good-looking environment that invites people to interact with it. And you need a story to tell about your environment!
(and a little bit of coding)


SO! The Arduino can detect if someting is a closed loop or not. It does this trough sending power trough one of the ports and looking if it returns that power by checking the "gound-pin". If it does, then the arduino will return a signal called "LOW" and if it doesn't it returns "HIGH". Basically telling you that its on or off! We'll use that later on in the Code part of the tutorial!


The next step in the tutorial teaches you what software I used to do the technical stuf! And later on I'll teach you how to use it!

Step 3: Making a Small Prototype

Making a small test area

Before we start coding it might be a good idea to make a little test setup!

In this test setup we'll make a little house with a connection point where you can put your character!
And we'll hook it up to the Arduino!

So I recommend looking at the beautiful pictures! They'll teach you some basic construction stuff and also how to wire everything!

Remember! You can always expand! Or make it your own way with your own materials! No problemo!

Step 4: Download All the Software We'll Need

Download list:

In the pictures above, there is a detailed walkthrough of the webpages.
If you have these already, or if you know how to get this software, you can skipp the download part.

Unity3D - will be used to play audio samples so you don't have to do it on your Arduino.
(Alternatives are MAX-MSP, Isadora and basically anything that can play audio with an Arduino as external input. But I think Unity might be the easiest to use.)

Arduino software - is used to read and write code to the Arduino.
(Alternatively you could use the Arduino web Editor, but I don't see a practical use for it during this project.)

Audacity - is used to record audio trough your computer, and to export those recordings to .WAV files.
(There are literally thousands of alternatives to this one, you could use the voice record app on your phone as well. But I used Audacity so I could record with my external mic.)

Step 5: Installing the Software We Need

Making this easy for you!

Because not everyone knows how to install software we'll do it "step-by-step" during this part of the tutorial. Feel free to skip this if you want! No need to look at this if you're already an software installing legend!

Step 6: Recording Audio

During this step I"ll teach you how to record audio using Audacity.

As always you can look at the steps in the pictures.


Record

Open audacity, and first check if your settings are to your liking. I suggest recording in mono, if you don't have a stereo recorder or two mics it will record audio on your left stereo track. And because I want to hear my audio trough both of my speakers I want to record it mono! so it sends the audio over all my speakers.

you can do this by selecting the microphone you want to use and next to the dropdown window for the microphone select your desired stereo/mono setting.

Now your ready to hit record and record your dialogue! But keep in mind that you don't record your audio to loud or to quiet! keep your recordings consistent and articulate as well as you can! Even if you're doing weird voices!

Edit

There are a number of ways to edit audio, and on that alone I could do a extremely long tutorial. So I suggest you use "the google" to find out more about editing audio.

What I will cover tough are simple copy pasting functions!
Cause by selecting what you want to copy/cut and pressing CMD+C or CTRL+C and picking where you want to paste it by clicking somewhere in the timeline and then pressing CMD+V or CTRL+V you copy pasted your audio segment.

Also you can remove things you say by selecting the wave-form/audio that you want to delete in the timeline and simply pressing the backspace button!

and now your a audio editing master! (in my opinion)


Export

Make a selection of the audio you want to export as one file! and then go to file -> export -> export selected audio as .WAV
Give it a good name and then save it somewhere you can easily find it.

That's all about audio! <3

Step 7: The Code

I kept the code simple and easy, no fancy librarys or weird functions! If you have a basic understanding of code, and know how to make a "If-statement" then you'll probably understand what I've done!

(If you're a Coding legend! And you've a moderate knowledge of Unity and C# you could take a look into "Statemachines". Cause if you're going to make this project bigger than 4/5 inputs it might be more efficient to use Statemachines!)

In the Images I've explained what the code does. And how my script looked for this project. You can just copy paste most of the code! But I recommend looking at the images to see what it does! cause then you can expand on what I've made!

The last step will explain how you put it in unity and connect everything to the computer!



Arduino Code:

Open the Arduino software and create a new sketch! Save the new sketch somewhere you can easily find it.

After that you should paste and compile the code beneath. If it does not give errors you can put it on the Arduino. (look at the pictures for more info on doing that)

void setup() {
  Serial.begin(9600);
  pinMode(2,  INPUT_PULLUP);
}

void loop() 
{
  //BASE VALUE         
  int sendToUnity = 0;

  //USED PINS
  int inputToUnity = digitalRead(2);

  //WHAT TO SEND TO UNITY
  if(inputToUnity == LOW)
  { sendToUnity = 1;}
 
  Serial.write(sendToUnity);
  Serial.flush();
  delay(100);
}



Unity Code:

Start UnityHub and create a new project. Give it a good name and save it on a good place! When you're Unity project is created start by making to new folders. One is called "scipts" the other is called "Audio" drag your audiofiles into the folder created in unity.

Then go to the player settings and change your API compiler setting ( .net thingy) to something else than .net 2.0. The last 2 updates from Unity changed the other option so much, but when I changed it to whatever else was there except from 2.0 the code works.

When you've done that go to your scripts folder and rightclick in the folder. Click on "create new C# script" Call it "ArduinoLink" open the script by dubble clicking the script icon. copy-paste or write the code into your scripting window. when your done safe the script. (CMD+S or CTRL+S)

Go back to your Unity project. Go to the hierarchy in your window, rightclick on it and create a new "empty gameobject." Call this "_arduinoLink" or something like that. click on the object, and drag the script you just made on top of it. It should now show up in your inspector window.

As you can see there are some windows underneath the script in the inspector. You need to make new Empty gameObjects to drag into the little windows. They will contain the audiofiles you want to play. BUTTTT! FIRST! We'll need to add a audio source to the empty gameobjects. The easyest way to do this is by dragging the audiofile over the new Empty gameObejects. (Just look in the pictures if you're doing it right.)

Once you've added your audioSource to the empty gameObjects you need to go to the top of the hierarchy and disable it. Cause like I've mentioned earlier you can't activate a GameObject twice! And we don't want to play the audio file as soon as you start the game. So uncheck the little checkmark.

Now your mostly done! You still need to Add the gameObejct to the Inspector window of your ArduinoLink Script. So drag the objects from the hierarchy to the right place in your script.

PFFFFF!!! okay! now your almost ready to click play and try your first play test!


using System.IO.Ports;
using UnityEngine;


public class ArduinoLink : MonoBehaviour
{

    public SerialPort sp = new SerialPort("/dev/cu.usbmodem146201", 9600);
    public int inputData = 122;

    public GameObject audioFragment_Error;
    public GameObject audioFragment_Intro;


    void Start()
    {
        sp.ReadTimeout = 1;

        if (audioFragment_Error == null)
        { Debug.Log("AudioFile_00 Missing"); }
        if (audioFragment_Intro == null)
        { Debug.Log("AudioFile_01 Missing"); }
    }

    void Update()
    {
        if (!sp.IsOpen)
        {
            sp.Open();
        }

        try
        {
            inputData = (int)sp.ReadByte();
            Debug.Log(inputData);
        }
        catch (System.Exception)
        {
        }

        if(inputData == 0)
        { audioFragment_Error.SetActive(true); }

        if (inputData == 1)
        { audioFragment_Intro.SetActive(true); }

    }

}

Step 8: Controlling the Moving Stuf!

Making your own switch!

Before you think that we'll be making a "nintendo Switch" i'll explain what we are going to make!

Because I didn't want to code to much during this project I've tried to keep all the movement as analog and simple as i could!
So thats why I've made a big pressure sensitive button from cardboard and some wires and scrap-metal, thumb-tags and a spring! That way I could turn the motor for the big waterwheel on and off when I wanted.

It is used to interrupt a power-loop when something is on top of the button. But mine did allow to see if anything is connected when its on top of the switch! so thats just like the on-off system that I've explained in step 2. Only now you can physically see whats happening!

You can see what the switch does, and how it was made in the photos!

Step 9: Putting It to the Test!

Now there is just one thing left to do! Testing what you've made!

  1. Connect your Arduino to the computer (Using the USB)
  2. Push the Arduino script to the Arduino
  3. Press play in Unity
  4. Go to the Arduino software and open the Serial monitor until the compiler of Unity receives data
  5. Close the serial monitor
  6. place your character on your action point! And enjoy your story!

\/ \/ \/ \/ \/ Down here you see a example of the starting sequence \/ \/ \/ \/ \/

I hope everything is understandable! And as easy and accessible as I hoped it was! If you made this and or made something inspired by this please post it on Instagram and tag @daangijzen good luck and have fun!

Share

    Recommendations

    • Tape Contest

      Tape Contest
    • Pocket Sized Contest

      Pocket Sized Contest
    • Epilog X Contest

      Epilog X Contest

    7 Discussions

    1
    None
    hugheswho

    4 weeks ago

    Great project. Thanks for sharing. Can you post some more video of the interaction, sounds/movement etc? It would be great to see.

    2 replies
    0
    None
    daangijzenhugheswho

    Reply 27 days ago

    Oeh! Yes afcourse! I’ll try to find some good footage of it!

    Or recreate some of it, but it will take a minute cause im in the middle of a new project! (I guess 4 to 8 days)

    0
    None
    hugheswhodaangijzen

    Reply 25 days ago

    That would be cool. I think this project has so much potential. I would love to make something similar.

    0
    None
    seamster

    4 weeks ago

    Impressive work! Thank you for sharing all the details! : )

    1 reply
    0
    None
    Gadisha

    4 weeks ago

    Fun idea! I'd like to see more of the finished project! (Nederlands is geen probleem) (;

    1 reply
    0
    None
    daangijzenGadisha

    Reply 27 days ago

    This could be a bit difficult cause i had no space to store this project. So its kinda at the bottom of a paper recycling bin... oops...

    But I’ll try, friend of mine had a lot of pictures! So I might be able to upgrade the photos a bit!

    (En cool maar ik reageer ff in het engels zodat iedereen snapt waar ik het over heb xD)