Assumptions

1. You are somewhat familiar with Unity's GUI. No previously coding experiences in Unity is assumed.
2. You have heard about Arduino. No coding experience in Arduino required.
3. Basic Understanding of Objective-c & iOS application development

The Big Picture

The idea of this tutorial is to use an Arduino Joystick to wirelessly control a character in Unity 3D and run the app on iPhone. In order to accomplish this, there are several things we need:

1. Arduino: get joystick data and button data and broadcast it with UDP protocol.
2. Xcode data receiving interface: Our Open Source RedButton API provides a delegate method to easily retrieve Joystick data broadcasted from the Arduino joystick.
3. Unity Plugins for iOS: Once our iPhone receives the Joystick data, it need to send data from our Objective-c code to Unity code, so the joystick position can control the character in Unity.
4. Unity 3D application: A character in Unity that can move forward, backward, left and right in response to our Joystick data.

Arduino

This part is exactly the same as the Hardware, Arduino program section in the previous blog You can upload the same code (Under Arduino folder) to your arduino board.

Xcode data receiving interface

The RedButton API is used to receiving Joystick data from Joystick. This is an API we developed and used in our [iOS Games with Joy(stick)] tutorial. Follow the RedButton API Introduction section in the blog if you haven't used it before.

Unity Plugins for iOS

One of the main issues you may ask is how do you send Joystick data to Unity. Luckily for you, Unity describes a way to do just that in their official documentation. You can take a close look at Unity's build native code plugins for the iOS platform [here]. or you can follow the instruction below.

Three steps from the official documentations:

1. Define your extern method in the C# file like follows:

   [DllImport ("__Internal")]
   private static extern float FooPluginFunction ();
   

2. Set the editor to the iOS build target

3. Add your native code source files to the "Classes" folder

In the RedButton API, we have defined several delegate methods to receive data from Arduino. Now we just need to add a layer on top of RedButtonAPI layer so it can send messages to Unity. Let's call this transition layer SendToUnity. The SendToUnity.h and SendToUnity.mm was defined for this purpose. SendToUnity Class is the transition layer: it sends data received from RedButtonAPI class to Unity.

Let us apply those steps in this project:

Here we use Joystick X axis data as an example to go through each line of code in both the Objective-C and Unity code. The Joystick Y axis data and the A,B,C buttons is similar to Joystick X axis data. The whole file of SendToUnity.h & SendToUnity.mm file can be downloaded from [here](Under Xcode file folder)

1. In Xcode, SendToUnity.h file add a float property x to save joystick x axis data.

   #import <UIKit/UIKit.h>
   #import "RedButtonAPI.h"
   @interface SendToUnity : NSObject<RedButtonAPIDelegate>
   @property(nonatomic) float x;
   @end
   

2. In SendToUnity.mm file

   #import "SendToUnity.h"
   #define kJoystickCenterX 50
   @implementation SendToUnity
   @synthesize x;
   -(id)init{
       if (self = [super init]) {
           RedButtonAPI *redButton = [[RedButtonAPI alloc] init];
           redButton.delegate = self;
       }
       return self;
   }
   - (void)joystickDataofX:(NSString *)xData Y:(NSString *)yData{
       self.x = [xData intValue];
   }
   @end
   
   
   static SendToUnity *tmp = nil;
   
   
   extern "C" {
       float RedButtonJoystickX(){
           if (tmp == nil) {
               tmp = [[SendToUnity alloc] init];
           }
               return (tmp.x-kJoystickCenterX)/kJoystickCenterX;
       }
   }
   

The SendToUnity.mm file defined a constant to store Joystick's center value. In its init method, we instantiate a RedButtonAPI object and set its delegate to SendToUnity.

Then, joystickDataofX:Y: delegate is used to receive the axis data. The last extern "c" part is necessary in order for Unity to call and get the return value.

Note that we use (tmp.x-kJoystickCenterX)/kJoystickCenterX equation to normalize the return value to a range between -1 to 1.

3.In Unity, if you want to call RedButtonJoystickX methods, you need to defined it in the c# file like so:

    [DllImport ("__Internal")]
    private static extern float RedButtonJoystickX();

The method can then be called as if it is an internal Unity method:

    float fA = RedButtonJoystickX();

Unity 3D application

OK. Now the issue about send data from Joystick to Unity is solved, the next step is to build the Unity app.

In this app, we reused some source files from Unity's official tutorial called Penelope. Speaking of which, If you are going to create a third person game in Unity, Penelope tutorial is really a MUST read.

1. Download and import Resources file from [Penelope tutorial].

2. Create a new project named NewPenelope

3. Create a Plane via Unity->GameObject->Create Other->Plane. Drag & Drop the grass1TGA file onto Plane to set the grass ground. Set Position to 0,0,0 & Scale to 10,10,10 as the image below.

1. Create a Directional light via Unity->GameObject->Create Other->Directional light. Make its position 0,0,0 and set its Rotation to 45,0,0

2. Create Player Object via Unity->GameObject->Create Empty. Rename it to Player. In the Project Objects folder, choose penelopeFBX. Drag & Drop it onto Player to make it as Player's child object.

3. Now comes the fun part. Let's add some scripts to our Player object.

(1) Character Controller script

Select Player in the Hierarchy, then using Component->Physics->Character Controller set the parameters as indicated in the screenshot below.

(2) Animation Controller script

For this one, use the same script in Penelope tutorial named AnimationController.js. This script will be attached to the Player object. This script plays the appropriate animations for Penelope and blends the animations. It also uses the character’s movement direction to determine which animation should be played.

(3) Move script

This is the main script we are using to control the Character.

    using UnityEngine;
    using System.Collections;
    using System.Runtime.InteropServices;
    public class Move : MonoBehaviour {
    //character variable stores the player
        public CharacterController character;
        //defined all objective-c side method as extern data
        [DllImport ("__Internal")]
        private static extern float RedButtonJoystickX();
        [DllImport ("__Internal")]
        private static extern float RedButtonJoystickY();
        [DllImport ("__Internal")]
        private static extern bool RedButtonIsButtonAPressed();
        [DllImport ("__Internal")]
        private static extern bool RedButtonIsButtonBPressed();
        void Start () {
            Screen.orientation = ScreenOrientation.LandscapeLeft;
        }
        void Update () {
        float fA = RedButtonJoystickX();
        float fB = RedButtonJoystickY();
        bool bC = RedButtonIsButtonAPressed();
        //use the Joystick X value to control Unity's X axis
        //use the Joystick Y value to control Unity's Z axis
        character.Move(new Vector3(fA,0,fB));

        //send a log output if button A is pressed.
        if(bC)
        {
            Debug.Log(bC.ToString());   
        }   
        }
    }

7.Add script to Camera

Add FollowTransform.js to Camera. This script makes camera follow the player when the player is moving to a different position. Here is the FollowTransform.js code:

    var targetTransform : Transform;        // Transform to follow
    var faceForward : boolean = false;      // Match forward vector?
    private var thisTransform : Transform;
    function Start()
    {
        thisTransform = transform;
    }
    function Update () 
    {
        thisTransform.position.x = targetTransform.position.x;
        thisTransform.position.y = targetTransform.position.y+2;
        thisTransform.position.z = targetTransform.position.z-3.5;  
        if ( faceForward )
            thisTransform.forward = targetTransform.forward;
    }

This script sets the camera x as player x, camera y as player y + 2, camera z as player z - 3.5 so that the relative position of camera and player are always the same.

8.Make all connections IMPORTANT

In Camera's Follow Transform (Script), set Player as target like this:

In Player's Animation Controller, Character Controller, Move (Script)

Set all the connection and values as shown below:

Summary: Steps to run the whole project

1. Upload theArduino program to the Arduino board, make sure your connect Joystick Shield (top), WiFi Shield (middle), Arduino (bottom) in the right order and make sure the Red LED light is on (WiFi network is created)
2. In your iPhone WiFi Settings select RedButtonAPI
3. In Unity, click Build Settings, switch platform to iOS
4. Click Build & run. It will open Xcode for you.
5. In Xcode, select Run on device.
6. That's it. It's time to use joystick to control your penelope.

All files for this project can be found from [GitHub]

I hope you found this tutorial useful.

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.

The developers at this studio love making things that nobody else has thought of. There are lots of avatar creators or online avatar games on the internet - the more popular ones include the South Park avatar creator and Weeworld. Even though avatar creators are not something new to the world, we are thinking of revolutionizing it. We won't reveal too much about our final goal yet, but for now our Avatar Creator is the simple lean software that we have developed. Currently it is only available as a Facebook app, but we will continue to gather feedback, improve on it and take it to the next level and to different platforms. You can create your own beautiful avatar here: www.apps.facebook.com/theavatarcreator

:)

And for those of you who think that avatar creating is useless and boring, we have included a few reasons as to why avatars are important to the internet culture:

1) Anonymity

With an avatar as a profile picture, you can remain anonymous yet at the same time allow people to feel personally connected to you through a warm and friendly avatar. 

2) Personal branding

Your avatar can convey a lot about your personality (or your ideal personality anyways). If you use your avatars consistently and creatively people will remember you more easily and there is no need to painfully smile at a camera in attempt to capture the perfect image. Instead, you can just imagine it, build it, show it off to the world!

3) Broaden your mindset

It's fun to dress up different characters and to pick up different styling tips. Oftentimes, you may even learn a thing or two about different cultures and lifestyles, as scrolling through these different options exposes you to new things you may not have come across in real life before. It may even get your own creative juices flowing and inspire you in your next upcoming project.

So, what are you waiting for? Create your 100% free and beautiful avatar today! And remember to like our page or share it so that your friends can join in the fun too!