Space: The Game

I wanted to build a desktop arcade cabinet that will use an Arduino Leonardo to control an iPad game.  The Arduino will connect to the iPad via Bluetooth and control the game using simulated keyboard inputs.  The enclosure will be laser cut out of MDF and resemble a classic arcade cabinet with a joystick and 2 large concave buttons.

When trying to figure out how I would get an Arduino to control an iOS app, I had trouble finding any sort of resources or documentation on how this is done.  I then came across the idea of programming the game to respond to keyboard inputs because iPads can connect to bluetooth keyboards.  From there, I could get the Arduino to simulate a bluetooth keyboard with each of the buttons and joystick sending a specific ASCII key.  I chose the Arduino Leonardo because it could simulate a keyboard.

Arduino as a Keyboard

The first thing I did was try to hook up the Arduino and BLE Shield.  This would be the main part of the project because if it didn’t work, my idea wouldn’t pan out like I intended.  When I first plugged in my Arduino, I had a lot of  trouble uploading code.  Even just the bare minimum amount of code wouldn’t upload.  The IDE couldn’t find the port.  After several attempts and a lot of research, I decided to try a different micro usb cable.  This thankfully solved the problem and I threw the other one across my room.

To get the Arduino sending keyboard inputs, I included the “Keyboard” library.  Keyboard.begin() initializes it similarly to Serial.begin() in the setup function.  Sending text is as simple as Keyboard.print(“Hello”).

Note to self: Don’t ever, and I mean EVER just test the keyboard functionality using Keyboard.print(“Hello”) in the loop function because it will be nearly impossible to do anything.  It will just constantly type hello wherever you are on your computer.  I tried to delete that code and reupload it so it would stop but it would keep typing as it was compiling and uploading and mess it up.  Literally chaos.

The second thing I did was try to connect the Arduino to my phone via Bluetooth.  I bought the 1Sheeld+ because I heard it was a good, versatile BLE shield.  After playing around with it and trying out some sample code, I got it to connect to my phone and control some LEDs with a slider in the 1Sheeld app.  This was great and all but I couldn’t find any information on sending data from the Arduino to the phone.  There are thousands of websites, videos, and tutorials on doing it the other way but thats not what I needed.  After a lot of research, I decided the 1Sheeld+ wasn’t the part that I needed so I returned it and ordered a Bluefruit LE Shield by Adafruit.

The Bluefruit turned out to be pretty much perfect for this project.  I soldered in the header pins so it could sit on top of my Arduino and loaded the sample HID Keyboard sketch.  Right away, it worked really well with my iPad.  It connected via bluetooth like a normal bluetooth device rather than through an app like the 1Sheeld+.  The example sketch took in user inputs in the serial monitor, and sends them to the iPad over bluetooth.  Below is a quick gif of it in action.

Now that I knew this worked, all I had to do was modify the sketch so that I could send specific characters with the press of a button.  This turned out to be both easy and difficult at the same time.  The solution to the problem is pretty simple.  Setup your buttons like normal with input pins and get the button state with digitalRead.  An if statement will make sure that you only send data to the iPad when the button is pressed.  Seems simple right?  Well it took me a long time to figure out.  Maybe its cause I haven’t slept in like 40 hours or something but it just wasn’t working and I couldn’t figure out why.

After trying a lot of different variations of the code and wiring, I added in an if statement that was in the example code and it worked.  This if statement didn’t really do anything other than print to the console but it made the button work as intended.

Here is a quick video showing the button typing the letter ‘A’ on my iPad.

Next on the list was to try it with all of the buttons that I will be using and make sure it all works as it should.  I added in some more buttonState integers and if statements that send different characters.  I wired up the arcade buttons and it all worked perfectly.

Enclosure

I want this project to resemble a classic arcade cabinet so my enclosure had to be a mini version of one.  I started out by sketching what it would look like and getting all of the dimensions that I needed.  From there, I built my model in Fusion 360.

My first sketch was the front face.  Here, I decided on the dimensions of the box itself so it would be proportioned decently while still having a good place to put the iPad.

The second sketch was from the side where I created the back part of the box.

Once each piece was extruded to the desired dimension, it took on a form that I was pretty happy with.

After creating this model, I got a few tips from Toby on how to turn it into a 2D sketch for laser cutting.  He said that he usually extrudes each face separately and moves them together into the model.  It took a lot longer but will be easier to laser cut.  I was also able to add in some tabs that will fit together when I assemble it.

Once I finished the model using this new method, I played around with animations in Fusion and created this little explosion gif.

After this, I went back in and created a bunch of new sketches to add interlocking tabs so it would be more secure and easier to glue together once it was all laser cut.

Like any classic arcade cabinet, it had to have a cool design.  I chose to make a space game because I could find resources online for it pretty easily.  My sister came up with the name “Space: The Game” so that’s what its called.  I designed a simple vector rocket to be used on the side of the cabinet as well as in the game.

The sides of the cabinet were the most fun part of the enclosure.  I got to mess around in Illustrator and come up with some cool designs.  These are the designs that I ended up using in the format that I sent to the laser cutter.

Getting materials and laser cutting was not as smooth as I had planned.  I had built my entire enclosure in Fusion with the intent of having 3mm thick MDF.  I went to Home Depot to buy my materials only to find they didn’t have anything in metric, nor anything close to 3mm.  I ended up getting 1/4″ MDF and had it cut down to two 32″x18″ pieces to fit in the laser cutter.  When I got home, I had to go back through my model and change all of the thicknesses to 6.35mm (1/4″) and make sure all of my joints were adjusted accordingly.  It was kind of a hassle but necessary to have a good looking final product.

In order to take that 3D model and translate it to 2D for laser cutting, I had to take multiple steps that I kind of made up along the way.  First, I copied every body, or piece, in Fusion to a new component.  From there,  I made components out of each body so I could easily move them around.  I rotated them so they were all flat on one plane and laid them out so they wouldn’t overlap.  I took all of these components and made a drawing of it in 1:1 scale and exported as PDF.

In Illustrator, the first time I created files to laser cut, I knew I needed to make each line thin and red so it would be cut.  I couldn’t easily modify the pdf so I just used the pen tool and the rectangle tool to trace each shape.  The second time around, when I had my adjusted thicknesses, I was able to isolate each shape by clicking on them a bunch of times and copy them to another file where I could move them around.  To make this enclosure, I needed pretty much all of 2 32″x18″ sheets of MDF.  As you can see in the pictures below, there was not a lot of space around each piece.

Laser cutting was kind of a pain.  Like the last time I had to get something laser cut, my files weren’t formatted correctly.  The lines weren’t the right red, even though I specified 255,0,0 and the line widths were wrong.  On the file with the designs, each design showed up as an outline to be cut instead of etching.  Huge thank you to Toby for helping me out and getting the files fixed in Rhino to be laser cut.  The file with the designs took over an hour to finish, mostly because of the etching.  It came out perfect though.  Each piece fit together exactly how I wanted and it looked really cool.  Here it is mocked up and standing without any glue yet.

As well as it fit together, it still needed glue to be sturdy and less fragile.  I used liquid nails to keep everything together and had it in some clamps for a long time.

Adding the joystick and buttons was really easy.  The buttons have a nut on the bottom that screws off so you can slide the button into the hole.  The nut screws back on to basically sandwich the board.  The joystick handle screws off but to attach the joystick without having visible screws, I cut another, smaller piece with the same hole cut out to sit right below the top surface of the arcade cabinet.  I could then screw into this instead and attach that to the top with liquid nails.  The final product turned out great and reminds me a lot of actual arcade games.

The details on the sides are lighter than I expected but came out awesome.  The depth from laser etching really adds to the feel of the enclosure as a whole.

Wiring

The wiring was pretty straight forward considering I only had 2 buttons and a joystick.  I couldn’t find anything helpful about the buttons online so I just messed around with wiring them up until it worked.  I figured out this was the way it should be wired up, with ground going to both the input pin as well as ground with a pull down resistor.

Through more experimenting, I found out that I could instead put ground on the top pin, 5V in the middle, and the wire to the input pin where the ground is in the image above.  This would help out a lot with soldering because I wouldn’t have to connect two wires to one pin.

The joystick was pretty easy to figure out as well.  Each button only has two pins, one for power and the other for the input pin and ground.  I played around with it and printed data in the Serial console so I knew which button responded to which direction you move the joystick.  Here is the diagram for how each button is laid out.

When I was first starting on the wiring,  I thought I’d need a separate pull down resistor and wire for ground for each button so I put them on a protoboard in this nice, organized fashion.

This turned out to be kind of a waste of time because, during testing I realized that all of the ground wires and all of the 5V wires could be connected in series.  I still like how it looks though and I still used it.

To make the wiring a bit simpler when plugging into the Arduino, I soldered the ground and 5V wires of one button to the next until I got to the last one.  These wires would then connect to the Arduino.  For my game, I only wanted the user to be able to move sideways so I only soldered wires to 2 of the 4 buttons on the joystick.  This meant that I would have 4 total inputs.  I found some female header pins that I soldered to the BLE Shield so it would be easy to plug in and remove.

Making the Game

The game wasn’t the focus of this project.  I mainly chose this project because I wanted to make a really cool enclosure and learn to interface an Arduino with an iPad.  Because I am really good at procrastinating and got a late start to this project, I followed a tutorial by Hacking with Swift to create my space game.  I changed some things around once I was finished though.  I changed the orientation to work in portrait and changed some of the sprites with my own designs.  The main thing that I worked on was trying to get it to respond to keyboard inputs.  I connected my bluetooth keyboard to my iPad and was able to receive keyboard data.  However, this data and these functions only worked in the class GameViewController.swift but I needed them in GameScene.swift.  I tried a lot of different things but could never get it to work the way I wanted.

Code

All of the files for the game can be found at my Github repository here.

The Final Product

I was going to use the white seamless background but my enclosure was too big.

Conclusion

I am happy with how this project turned out but like any project, it could be better.  Had I not procrastinated so hard I might have been able to get it working or make my game a little cooler.  I clearly didn’t learn my lesson from the first the first project because I was up fr 40+ hours working on it the day before it was due.  I love the way my enclosure looks.  To me that was the most important part because it wouldn’t feel like an arcade game if it didn’t look like one.  I think this project gave me a really good starting point for future projects.  I will still work on it occasionally to get it working as it was supposed to and from there, I can build upon the game.  I learned a lot doing this project and that feeling of closing 20 tabs once you’re finished never gets old.

‍