iOS Games with Joy(stick)

Playing games using controllers is nothing new for gamers with iOS devices. The controllers I am referring to are virtual joystick, accelerometer or gyroscope. But let's face it, playing games with fingers sometimes just doesn't feel the same without the physical touches of a joystick (there is a reason why we call it JOY stick!). This is something I sometimes miss when I play games on the touch devices.

Fortunately, my college education hasn't gone to waste and it is being put to good use here. Instead of putting up with the constraint, I say we make a real joystick for our iPhone today!

Let's start with our first goodie - the joystick. The joystick controller we are using in this project looks like this:

Yes, we are using our lovely Arduino plus a WiFi Shield and a Joystick Shield. Don't miss our previous post on using Arduino to build an ultrasonic tape measuring device if you haven't read it.

• Arduino UNO board: $20.49
• WiFi Shield: $51.00
• Joystick Shield: $21.95

Hardware

Connect three shields together.

Three Shields: Arduino UNO (top left), WiFi Shield (top right), Joystick Shield (bottom)

Attach the three shields together with JoyStick Shield at the top, WiFi Shield in the middle middle, Arduino at the bottom.

That's it!!!

Arduino program

You can download the Arduino code that performs the UDP broadcast from here. In the git repo, there are two folders: RedButton API, WiShield. Make sure you have the newest version of Arduino IDE

• Copy RedButton API to /Your local Arduino/ folder
• Copy WiShield to /Your local Arduino/libraries/ folder

Compile and upload RedButtonAPI file to your Arduion board

The Arduino code create a local network named "RedButtonAPI" and broadcast its status to the network via UDP port 1234. The output format looks like: "id=1111,1,1,1,50,49," (The reason I add id field here is to help us detect reduntant data.) "1,1,1,50,49" coresponds to the values from ButtonA, ButtonB, ButtonC, JoystickX and JoystickY.

You can download the joystick shield datasheet from here.

Here is the schematic of the joystick:

(Keep in mind which button is buttonA, buttonB or buttonC and the direction of Joystick X and Joystick Y)

To complete all pieces of the puzzle, let's look at how we use RedButton API to enable the communication between the hardware and our iOS devices wirelessly.

RedButton API Introduction

RedButtonAPI is a static library that we created to enable communication between Arduino and any iOS device using the connectionless UDP protocol.

NOTE: RedButton API was inspired by Amit Pitaru's work in the area of assistive technology.

You just need two steps to use this API. Create a instance of RedButton API class and set it up to receive controller values via its delegate method.

How to integrate RedButton API:

1. Create a RedButtonAPI instance, set delegate to your self (self in this case is the HelloWorldLayer class)

   RedButtonAPI *redButton = [[RedButtonAPI alloc] init];
   redButton.delegate = self;
   

2. Set up the delegate methods. There are six methods you should be aware of:

   - (void)receivedRawDataFromArduino:(NSString *)data;
   - (void)receivedRawDataFromArduinoWithRedundantCheck:(NSString *)data;
   - (void)buttonAPressed;
   - (void)buttonBPressed;
   - (void)buttonCPressed;
   - (void)joystickDataofX:(NSString *)xData Y:(NSString *)yData;
   

In most use cases, you will just need last four methods. These methods tell you if A, B, C buttons are pressed and the current value of your joystick.

Test driving RedButton API

1. Download the API from github

2. Download the SpaceShooter Game code from here.

   NOTE: Space Shooter is a cocos2d game developed by Ray Wenderlinch for one of his cocos2d game tutorials. Below is a video demo from Ray's tutorial showcasing space shooter. In this video you can see how the space shooter is being controlled via the use of tap and accelerometer.

   Let's take it a step further and use our own joystick to control Ray's ship!

3. Drag two files (libRedButtonAPI.a, RedButtonAPI.h) into SpaceShooter Project, in Build Settings, set Compiler to Apple LLVM compiler 3.1

4. In HelloWorldLayer.h, import RedButtonAPI.h, add delegate declaration
5. In init method of HelloWorldLayer.m , create an instance of RedButtonAPI, set delegate to self
6. In HelloWorldLayer.m, replace the ccTouchesBegan:withEvent: method with buttonAPressed method and keep the rest of the code intact. Essentially we are replacing the touch control with our joystick A button control.
7. In init method of HelloWorldLayer.m, comment out self.isTouchEnabled = YES;

8. In HelloWorldLayer.m, we are going to use joystick to control the position of our space ship:

   • Comment out accelerometer:didAccelerate: method

   • Add joystickDataofX:Y: method:

     - (void)joystickDataofX:(NSString *)xData Y:(NSString *)yData{
     #define kJoystickCenterX 50
     #define kJoystickCenterY 49
     #define kMaxDiffX 0.2
     int x = [xData intValue];
     int y = [yData intValue];
     _shipPointsPerSecY = (y-kJoystickCenterY)/kMaxDiffX;
     _shipPointsPerSecX = (x-kJoystickCenterX)/kMaxDiffX;
     }
     

   kJoystickCenter and kJoystickCenterY is the value of the physical joystick when the joystick is in its neutral position. If the joystick is in the middle right position, we will calculate the X, Y offset and give a speed to the ship based on the offset value.

   • Comment out this line of code: //self.isAccelerometerEnabled = YES;

   • In init method after the definition of float maxY, float minY, replace them with the code block below:

     CGSize winSize = [CCDirector sharedDirector].winSize;
     float maxY = winSize.height - _ship.contentSize.height/2;
     float minY = _ship.contentSize.height/2;
     float maxX = winSize.width - _ship.contentSize.width/4;
     float minX = _ship.contentSize.width/4;
     float newY = _ship.position.y + (_shipPointsPerSecY * dt);
     newY = MIN(MAX(newY, minY), maxY);
     float newX = _ship.position.x + (_shipPointsPerSecX *dt);
     newX = MIN(MAX(newX, minX), maxX);
     

   • Add a variable in HelloWorldLayer.h file

     float _shipPointsPerSecX;
     

     The purpose of this code is to set the boundary so our ship will always be within the visible area of our iPhone screen.

9. In the update method, comment out this part:
   
   
   Comment out restartTapped method and endScene method and their corresponding code blocks.
10. Compile and run the code. We can now move the space ship with our joystick!

Time to check out our beautiful creation:

Here is the screencast showing the steps mentioned above:

You can find all related files to this project from github

Hope you enjoy the post. If you like what you are reading, subscribe to our RSS feed for more cool articles coming your way.

Comments

[shanshan]

" NOTE: RedButton API was inspired by Amit Pitaru's work in the area of assistive technology. " Amit is my Coding teacher, lol.