Designing an Arcade Game Controller

When we want to make an interactive product, it is very useful to understand the interaction design framework first. After read the “Interaction Design Sketchbook” by Bill Velprank, it opened up my perspective on how to design an interactive product. Designing an interaction is not the same as designing a product itself. We want to make sure that we build the product for people, since interaction design (IxD) is designing for people. So this time, I want to design an arcade game using the IxD framework from IxD Sketchbook.

Below is the plan for designing this arcade game using IxD Framework.

I decided to make an arcade game controlling because I wanted the user to experience how to control a spaceship, since the game is the Moon Lander. I didn’t just want to make any game controller, like PlayStation or XBox controller because the user won’t really feel they are the part of the game. So, I adjusted somethings to make it like the real arcade game: there are only buttons and movement controller (no mouse movement controller).

 

Sketching

Goal

The goal is to make an interactive arcade game controller for Moon Lander game. The game controller has to be understandable, easy-to-use, and make the user feels like they are controlling a spaceship.

Sketch

I found a video about Lunar Lander arcade game on Youtube:

 

From the video, I sketched the initial design. I know, it’s kinda the same with the actual Lunar Lander arcade game. But I think what user needs are just:

  • a button to play the game
  • a right-left controller
  • a speed controller

 

Initial Design

 

Observation

I went to MAGNET at Tandon School of Engineering, to observe some people playing with arcade game. I wanted to get the idea how they are interacting with an arcade game. Also, to get the mental model of it.

 

I found out that most of the arcade game nowadays have the same design: buttons to activate an action and joystick to control the movement. And after I observed some people playing with arcade game, I knew that they didn’t have to think what to do because there are only buttons and a joystick which have clear purposes. After the observation, I changed the design of my arcade game controller.

 

 

Interaction

What user do

I want the user to control the game without being told what to do (the instruction). So the user will control it by turning the spaceship to the left and right, and the user can also adjust the speed (speed up and down).

 

What user see

The user will see 3 controllers:

  • a button to play the game
  • a steering wheel to control right-left turns
  • a gear to speed up and down

 

What user know

After seeing the controllers, I want the user understand right away how to control it. Since people have mental model to drive a car. So they should know how to use it.

 

Design

I started with the first design, which I sketched before the observation.

First Design

Then I decided to change the right-left controller from buttons to steering wheel. It’s because the mental model when people control things to turn is not by clicking one action at the time, but by turning them with a movement. And since the movement of the spaceship in the Moon Lander is to turn clockwise (to the right) and counter-clockwise (to the left), I decided to make a steering wheel as a right-left controller.

 

Second Design

 

Implementation

Tools

  • Arduino MKR1000
  • 1 arcade button
  • 2 potentiometer 10K
  • 1 resistor 10K Ohm
  • Breadboards
  • Wires

 

Materials

  • Cardboard
  • Styrofoam
  • Tape

 

Wiring

 

Here’s the simplify of the wiring

 

Setup and Code

Before I coded, I had to setup the environment for MKR1000 since I had never use it before. I followed the tutorials step by step from Arduino Website (https://www.arduino.cc/en/Guide/MKR1000) and Project Hub (https://create.arduino.cc/projecthub/charifmahmoudi/arduino-mkr1000-getting-started-08bb4a)

It wasn’t that hard to setup the MKR1000, but it was kinda tricky. There was time when the driver couldn’t find the port (I used Macbook). It’s said that when you use OSX, it should install automatically. But the port couldn’t be read, use these to solve it (I found it on internet, but forgot the resource):

  • Make sure that the USB cable is the right one. There are types of USB cable: the cable to transfer data, or just cable to charge. Make sure that it can transfer data
  • If the cable is right and it’s still not showing, press the reset button on the Arduino twice

After the Arduino was ready to use, I started to code. For using keyboard and mouse with the Arduino, I followed this tutorial: https://www.arduino.cc/en/Tutorial/KeyboardAndMouseControl

 

Here’s my code:


#include "Keyboard.h"
#include "Mouse.h"

const int buttonPlay = 4;

int buttonPlayState = 0;
int buttonPlayLastState = 0;

int buttonPlayTestState = 0;
int buttonPlayTestLastState = 0;

int mappedSpeedValue;
int mappedTurnValue;

void setup() {
// put your setup code here, to run once:
pinMode(buttonPlay, INPUT);
pinMode(A1, INPUT);
pinMode(A2, INPUT);

Serial.begin(9600);
Keyboard.begin();
Mouse.begin();
}

void loop() {
// put your main code here, to run repeatedly:
buttonPlayState = digitalRead(buttonPlay);
int speedValue = analogRead(A1);
int turnValue = analogRead(A2);

if (buttonPlayState != buttonPlayLastState) {
if (buttonPlayState == HIGH) {
Mouse.click(MOUSE_LEFT);
}
}
buttonPlayLastState = buttonPlayState;

mappedSpeedValue = map(speedValue, 0, 1023, -1, 1);

if (mappedSpeedValue > 0) {
Keyboard.press(KEY_UP_ARROW);
delay(100);
Keyboard.release(KEY_UP_ARROW);
} else if (mappedSpeedValue < 0) { Keyboard.press(KEY_DOWN_ARROW); delay(100); Keyboard.release(KEY_DOWN_ARROW); } mappedTurnValue = map(turnValue, 0, 1023, -10, 10); if (mappedTurnValue > 3) {
Keyboard.press(KEY_RIGHT_ARROW);
delay(100);
Keyboard.release(KEY_RIGHT_ARROW);
} else if (mappedTurnValue < -3) {
Keyboard.press(KEY_LEFT_ARROW);
delay(100);
Keyboard.release(KEY_LEFT_ARROW);
}

Serial.print("speed: ");
Serial.println(mappedSpeedValue);
Serial.print("turn: ");
Serial.println(mappedTurnValue);
Serial.print("button state: ");
Serial.println(buttonPlayState);
Serial.print("button last state: ");
Serial.println(buttonPlayLastState);
}

 

At first, I used Keyboard.write and it worked fine in web pages, texts, and cursor. But when I tried to control the game, it didn’t work. I asked Tom and he suggested to use Keyboard.press and Keyboard.release instead of Keyboard.write. And it worked like charm. But until now I couldn’t understand why only the game that couldn’t be controlled by Keyboard.write.

Before making the enclosure, I tested it if it was working or not. Here’s the video.

 

Making the Enclosure

I used cardboard to make the enclosure and styrofoam to make the controllers.

 

Final Product

(will be updated soon)

 

The Takeaways

From this assignment: making a game controller, I learned a lot about interaction design and also how to use different kind of Arduino. I learned that when we want to make a product for people, we have to know what is the user needs. Because we want to fulfill the needs, not just making product without knowing the goal and whether the user need it or not. That’s why observation and gathering data (can be a research) is needed.

In this assignment, we actually have to make a mouse controller (moving towards x and y axis) but since I made an arcade game controller, I didn’t implement it. If it’s an arcade game, the user wouldn’t need a mouse controller. So it depends on the goal and the product we want to make. It has to match the user needs.

Also, when we’re making an interactive product. It’s better to use the design process. Meaning that we have to step by step understanding who’s the user, what’s the goal, how’s our idea, what’s the mental model, how to design it (both the interaction and the interface), how to implement it, and lastly we need to iterate it. Because interaction design is design for people.

 

What I’d Do Better

If I had more time, I wanted to make the interaction and feedback as precise as I could. Right now what I’ve made is:

Speed

  • Mapped potentiometer into a range of (-1) and (+1). (-1) to speed down and (+1) to speed up

Turn

  • Mapped potentiometer into a range of (-10) and (+10). If it’s > 3 and < 10, turn right. If it’s > -10 and < -3, turn left. Range -3 and 3 is the middle point to make it stay still.
  • So that when we want to make a turn right, the value has to be > 3, and to turn left < -3.

This is not exactly mirroring what the steering wheel mechanism is. So if I had more time, I want to add:

  • Let say after we turn right, and stirn the wheel to left (even the value is still > -3), but it will turn left.
  • So, I’d add if last value < initial value then turn left, and if last value is > initial value then turn right.

Leave a Reply

Your email address will not be published. Required fields are marked *