Making Games with Tinycade: Lesson 1
Tinycade is a platform for making micro sized arcade games using just cardboard and smartphones, and in this tutorial series I will show you everything you need to know to make and share Tinycade games yourself!
Preface
In this first lesson, I want to focus on taking a simple game and making it Tinycade ready. Before we get started there are a few things I wanted to go over about these tutorials to make sure we are on the same page:
- This is not a JavaScript tutorial. We assume basic knowledge of modern JavaScript and Nodejs. If you want a crash cores on making games on the web, we recommend Mozilla’s excellent tutorial.
- You must be ready to make. Our Tinycade Instructible has a list of tools that we recommend having at the ready when you are hacking away with cardboard, but all you really need is the willingness to experiment and see what happens. Spectacular failures are still spectacular!
- All of this is still in early development. We are still in the alpha stages of this project, but it’s important to us to begin to work with game makers outside of our small academic bubble. Thanks for giving us a shot!
- We recommend Android. Mobile browser debugging is significantly more difficult with iPhones than on any Android phones. Your code should still work fine in Safari, there will just be fewer headaches during the development process.
- If you haven't already; Go make a Tinycade!
Setup
To begin with, lets get our starter code, which you can find on the Lesson 0 branch here. In there you will see a slightly altered version of the final product from Breakout tutorial by Mozilla. Once you have your code, open it up in your editor of choice so we can get hacking away.
You will also need to setup USB debugging and port forwarding for your device (if possible… for same Apple!) which you can learn to do here. In addition, you will need to have a local server ready to go. My solution for this is to use the npm package http-server, which is simple and quick if you already have node setup. Just make sure to install it globally.
Making A Controller
Ok, get your X-acto blades and your hot glue ready, we are going to make a controller. For now we are going to make a basic slider, so get a blank control panel cutout and cut a channel in the middle.
Then use whatever you have on you that can widen the channel until a toothpick moves relatively smoothly through it.
Next we need to assemble the slider itself. Since this is going to be a proof of concept controller we will iterate on in the next lesson; don’t worry about making it perfect. First let’s make a handle for the top. What I did was take a small strip of cardboard and insert some toothpicks into the flutes. Then I snipped off the end and glued them in place.
Now we need to make the other side of the slider, which will hold the marker we use to track it’s value. For stability, I glued three small cardboard strips together, then glued those to another piece large enough to paste a marker on to (if you want your code to be the same as mine, use marker 0).
Then all we need to do is slap a marker on and trim down the ends of our toothpicks so it can stay on with just friction. I decided not to glue this last part on since it’s nice to be able to take controllers apart for debugging later.
This will do for now, but as you play around with it, you will probably notice it needs a bunch of fixes to be fun to use.
Connecting the Controller
Now we are getting to the exciting part, let’s connect our controller to the game! First, open up the index.html file and add this script link to the header above the index.js inclusion.
<script src="https://unpkg.com/beholder-detection@1.1.13/dist/beholder-detection.js"></script>This will connect the Beholder-Detection package. Which is a library we have developed to make working with markers as inputs for interfaces much easier. You can learn more about it here.
To get Beholder up and running, we need to give space one the web page to exist. Don’t worry we can hide it later, but it needs to inject some HTML to actually run the computer vision code.
<!-- Somewhere in the body tag place this-->
<div id="beholder-root"></div>Create a global reference to the Beholder library we just included. Then in the index.js file, locate the init function and add this line of code to the top.
// At the top of the file add
const Beholder = window["beholder-detection"];// In init add
Beholder.init('#beholder-root');
This will connect beholder to that div we just created and inject all the HTML we need. Now all we need to do is call Beholder.update() on every animation frame to keep it going. Also, just because it will be annoying, go find the win and lose conditions which call “alert” and refresh the page, and just comment them out for now.
// at the top of update add
Beholder.update();Working with Markers
Once you have all of that going, run your local server and go to the page in a browser (with http-server mine is “localhost:8080”). Now when you go there you should see a little arrow icon in the upper left hand corner. That will pop out the Beholder debug overlay. And when you hold up the controller we just made to it, you should see something like this.
You know your markers are getting detected if you see a pink rectangle around them and an ID displayed. For a more in depth overview on how the markers work, you can checkout the docs on beholder-detection. But basically, when we detect a marker we get a few things: an ID, a position (of the center and corners), and a rotation. To make a simple slider all we need to do is get the position of the center of the marker.
To figure out how to map our slider values, we will need to get our phone connected to the local server. If you haven’t done that step yet, now is the time! If you have, then you should see something similar to this on your debug view once you slot your phone in and open the inspector.
Oh no, it’s using the front camera! To get the phone working the way we want by default, we’ll have to pass a config to Beholder when we initialize it. This configuration will also automatically turn on the flashlight and set the video size to be the smallest available (which saves on processor power).
Beholder.init('#beholder-root', { camera_params: { rearCamera: true, torch: true, videoSize: 0 } });Running it again should look much better now.
Great! Now we just need to get that marker’s info an map it to our game space. To get the marker, in update call
// Grabs a reference to a specific marker's tracking data.
const sliderMarker = Beholder.getMarker(0);// Log the center x position of the marker
console.log(sliderMarker.center.x);
Then to figure out it’s range, slide the marker to both ends of the channel you created before and record it’s values there. My range was 194–268. To connect that to our virtual slider let’s make a lerp function:
function lerp(a, b, c, d, t) {
return (t - a) / (b - a) * (d - c);
}And then apply it to our slider position in update:
// Offset by half the paddle width to center it
paddleX = lerp(194, 268, 0, canvas.width, sliderMarker.center.x) - paddleWidth / 2;Huzzah! We made our first Tinycade Game!
Next Time
In the next lesson I want to focus on two things: making a nicer slider (possibly with magnets!) and creating some game mechanics more unique to Tinycade’s capabilities.
