Unity Gaming: Creating Game Music and Sound Loops

So for game developers worrying about the music is one of the last things on our minds. It shouldn’t be. Music gives games the extra layer of professionalism that immerses players into the gaming experience.

Now there are a bunch of free loops online. And if you want something professional you can always pay someone to write a small loop for you too. However, for those of us developers that want our games to have a unique sound, (and have an hour or two to kill) we can create our own music loops.

One of my favorite tools to do this is Audio Sauna. It’s a really good off/online music editor and gives games a very 80s feel, with the synths and samples it uses.

IT’S SOOOO EASY TO USE! Don’t just have the same generic garage band samples that everyone has. Trust me. There. Is. A. Better. Way.

Now, I am no composer, producer, music maker, so this is just my 2 cents on how to create song for your game.

Intro to Audio Sauna

To get started you can go to the audio sauna site:

AudioSauna1

They have a great online studio for quick sound loop generation. When you open the studio you should see a screen like this:

AudioSauna2

Do you see it? Great! Okay so what are we looking at. Well the studio works like most big audio applications with a menu bar at the top some editing hotkeys below that. Your main editing area in the middle, with the source input area. And the mixer, is located at the bottom.

Creating Music

Step 1: Choosing Sound Inputs

So the art of making loops, beats, music in the studio is by creating rhythms and layering different inputs together. The studio already has up one of the default inputs: the Analog Synth. Down in the Mixer you can see that the “Analog Synth” is colored red instead of blue. This indicates that it is selected and that is the current track you are editing.

Let’s take a closer look at the Analog Synth. input. So it seems pretty daunting at first but after playing around with it for a while it gets easier to understand. On the left Audio Sauna has created some presets for you to use.

AnalogSynthIntro1

Now the AWESOME thing about this tool is that you can use your qwerty keyboard as a regular musical keyboard! “But wait?!” You exclaim, “There are way more keys on a musical keyboard than a computer one.”  Yes. The tool gets around this caveat by having an octave button that will bounce your input up and down the keyboard’s(musical) keys.

AnalogSynthIntro2

 

See my mouse isn’t anywhere on the screen but when I hit the keyboard key the corresponding musical keyboard key depresses.

 

AnalogSynthIntro3

 

**I’m just noticing how confusing referencing your key from your keyboard and key from your musical keyboard is getting, so I’m going to call the musical keyboard key’s “mkeys”.

Step 2: Writing Notes

You might have also noticed that the side mkeyboard is also depressed.

AnalogSynthIntro4

The mkeyboard in the main editing area, is the full standard mkeyboard. And shows you where your note will be placed in the sheet time line. You see there are two ways of adding notes to your loop’s “sheet music”. One, using your keyboard. Two, using the pencil edit tool right on the timeline.

AudioSauna6

The Pencil tool allows you to click inside of the timeline sheet and create notes that will be triggered on play. If you exit out of the Analog Synth. input editor, you will see the plain editing sheet. However the notes you create will all be on the short 1/16 beat. To change how long the note lasts just change the 1/16 to a larger fraction, by clicking on it.

 

AudioSauna3

At the top of the sheet you can see a green bar. The green bar on the top signifies the length of the loop.

Step 3: Recording Music

Now to actually save any noise you have been creating you need to record your key input.

Let’s get the Input tool back. By double clicking the red Analog Sync. will bringing it back into view. Click on the keyboard to start using the keyboard to manipulate the mkeys. Now hit the record button on the bottom.

AudioSauna7

The green bar is now highlighted over with a red one, to signify that it is recording your key strokes now. Each time you press a key a red mark should appear one 1/16 at a time.

 

AudioSauna8

 

Great! now keep playing around with the beat until you fill up the loop.

Step 4: Layering beats

So I mentioned that using the tool was meant for layering sounds on top of one another. So lets make those other beats. Click the top right horizontal bars.

AudioSauna10

A new screen should appear. Currently the Analog Synth is selected and is the only track that has notes in it.

AudioSauna11

Now double click on the FM-Synth. The tool will then change back to the editor view, but for the FM-Synth.

AudioSauna12

As you can see below the FM-Synth is now red in the mixer. However, the Analog Synth input editor is still out.

AudioSauna13

To get the FM-Synth input tool out double click on the red FM synth name in the mixer.

AudioSauna14

A new input should appear now, like the one above. This time the presets are on the right hand side. Select one of them and beginning hitting the keys, to hear what kind of sound will be made.

This editor works the same as the one before. So either with the pencil, or in record mode with the keyboard, you can create your timeline sheet music. There is also a Sampler input that you can use. You will have to repeat the process.

Step 5: Saving the Loop

So after you have composed your amazing awesome mix. Lets get it into unity. From the File Menu there are two options you should be familiar with. The Save to My Computer option and the Export Loop as Audio File.

AudioSauna15

You should use the Save to My Computer option when you haven’t quite finished your mix and would like to work on it later. The Tool saves what you’ve done as a session that you can reopen with the tool again. The Export Loop as Audio File is the one we need when we are done with our loop and want to put it into Unity.

 

The next blog post in the series will be adding your saved Loop into Unity!

Happy Mixing!

-TheNappingKat

 

 

Unity Gaming: Oculus Integration – Unity 5

Hey Everyone!

With Unity 5.2 out and all the cool new features with Virtual and Augmented Reality. I thought I’d do a quick tutorial about how to integrate Oculus into your Unity 5.2 or higher project. I’m walking through set up for a windows machine.

Step 1: Download

Go to Unity’s Home page and download Unity 5.2. Then go to the Oculus websites downloads section. Download the SDK, Runtime, and Utilities for Unity.

OculusDownloads

Step 2: Unity Plugins

Import the Oculus Plugin for Unity. In your Unity Project go to the Menu and select Assets>Import Package>Custom Package

In the File Explorer Select the Plugin you downloaded from the Oculus website.

UnityPlugin

Step 3: Oculus Prefab

Drag the Prefab into your scene, or the camera rig onto your character.
Prefab

Step 4: Enable VR development in Unity

The newest and most important step – ENABLE VR FOR THE EDITOR! Do this by going to Player Settings and selecting the box for Virtual Reality Development

PlayerSettings
VRSupported

Now run the Game. It should exactly the same. But if you have an Rift set up the it will mirror the Unity Editor Game View.

And there you have it. Complete integration =)

Happy Coding!

-TheNappingKat

Hide and Seek: Sphero vs. Drone (Part 1)

SignalR and Backend Coding

Hey Everyone. So the backend part of games tends to be some of the most difficult code to write in the project. I’m also not of fan of backend Server code (but that’s just me). In this project I pushed out of my comfort zone to step more into the hardware back end world.

Really this tutorial is about Signal R in general. That way you can follow along and make a hide and seek game, or create your own game based on these principles and fundamentals.

Getting Started

So for those of you that haven’t used Visual Studio, that is the IDE I’m programming with in this tutorial. You can get for FREE here: http://www.visualstudio.com/ 

  1. Make a new empty project

Signal R – Backend

Create a new Project in web

 

Then, in the New ASP.NET Project window select MVC and Change Authentication to No Authentication.  Click Create Project.  Now you need to get the nugget package from the Package Manager.

Tools> Nuget Package Manager> Package Manager Console

Then type:

PM> install-package Microsoft.AspNet.SignalR

If you expand your Scripts folder you will see that the libraries for SignalR have been added.

 

Now Right-Click the Hubs folder, and click Add | New Item, select the Visual C# | Web | SignalR node in the Installed pane, select SignalR Hub Class (v2) from the options. And Create a new hub called GameHub.cs.

This Hub will be the host of your server and game logic. It will also be what all clients send their messages to.

 

Under our project create a new class called Startup.cs, by right clicking the project Add > Class.

 

 

Add the following code:

using Microsoft.Owin;

using Owin;

 

[assembly: OwinStartupAttribute(typeof(SRHS2backend.Startup))]

namespace SRHS2backend

{

public partial class Startup

{

public void Configuration(IAppBuilder app)

{

app.MapSignalR();

}

}

}

 

Now go to HomeController.cs in your Controllers folder.

Add the following code snippet:

public ActionResult Game()

{

return View();

}

 

Now this next part is mostly for seeing which messages are getting to the server and displaying them for the developers to see. We didn’t implement it in this code but there are sources online that show you the javascript and jQuery needed to print to the new view we just created her http://www.asp.net/signalr/overview/getting-started/tutorial-getting-started-with-signalr-and-mvc

 

Now, your gamehub.cs class is derived from SignalR’s Hub class. This allows you to access all the currently connected clients and the methods within those clients.

 

To understand it better, the CreateGame(User user, Game g) method would be called in the client code, and defined in GameHub. While the Clients.All.gameGreate(g, sm) is defined in the client side of the code.

The User, Game, and ServerMessage are classes that I created for this specific game. They hold information that is required by each User, Game, and ServerMessage. While AllGamesList and AvailableGames, are Lists that I create in GameHUb so the server can reference all the active and passive games currently in progress.

 

Signal R – Front End

Now we will make the front end that links with Signal R.

First we want to create a new blank Universal App.

 

 

Next we install the SignalR Client NuGet package for both the phone and the windows 8.1 project.

 

Now the way that the client interacts with the server code that was written is by connecting with the hub and sending messages through that hub.

For the SignalR portion of the client code create a new folder call SignalRCommunication, that contains the following classes: ISignalRHubs.cs, SignalREventArgs.cs, SignalRMessagingContainers.cs, and SignalRMessagingHub.cs.

The ISignalRHub is the interface for your SignalRMessagingHub.

 

And the SingnalREventArgs.cs acts as the interface allowing all parts of the project to access the messaging events.

The SignalRMessagingHub is where the connection is created between the server hub and client is initiated.

Now to connect with the Server Hub we need the following code:

#region “Implementation”

 

public async virtual void UserLogin(User tabletChatClient)

{

// Fire up SignalR Connection & join chatroom.

try

{

await gameConnection.Start();

 

if (gameConnection.State == Microsoft.AspNet.SignalR.Client.ConnectionState.Connected)

{

await SignalRGameHub.Invoke(“Login”, tabletChatClient);

}

}

catch (Exception ex)

{

 

// Do some error handling. Could not connect to Sever Error.

Debug.WriteLine(“Error: “+ ex.Message);

}

I put mine inside of the first User interaction with the server, so in this case when the User logs in.

For the Phone application if using the emulator you will need to use long polling since the phone emulator uses the PC’s identification number and a lot more work has to go into formatting your computer to run it.

This is the code you will need

#if WINDOWS_PHONE_APP

connection.Start(new LongPollingTransport());

#else

connection.Start();

#endif

 

Now we need to write code that will listen to events on the SignalR Server and wire them up appropriately

Calling the .On method is how our proxy hub listens to any messages the server passes to the clients.

Lets make this easier to understand by going through .On and explaining what each part is doing.

SignalRGameHub.On<Game, ServerMessage>(“gameCreated”, (g, sm) =>

{

SignalREventArgs gArgs = new SignalREventArgs();

gArgs.CustomGameObject = g;

gArgs.CustomServerMessage = sm;

// Raise custom event & let it bubble up.

SignalRServerNotification(this, gArgs);

});

The .On method can take in as many parameters as needed depending on which server call it’s defining On<x,y,z>.

Before you saw the server gamehub call Clients.All.gameCreated(); in the client code the quotes in SignalRGameHub.On method refer to which ever method we are listening to and then dictates what the client code should do based on the delegate following the On method.

The (g, sm) are the parameters that we defined earlier <x,y> in this case <Game, ServerMessage>. They are a part of a delegate that will create the SignalREventArgs, to parse out a gameObject and a ServerMessage. Then it raises a SignalRServerNotification(this, gArgs) that will trigger an event. You still need to write that event in other parts of your code.

We now need to write the method for the SignalRServerNotification(this, gArgs)

#region “Methods”

 

public virtual void OnSignalRServerNotificationReceived(SignalREventArgs e)

{

if (SignalRServerNotification != null)

{

SignalRServerNotification(this, e);

}

}

 

#endregion

 

 

 

Cool now on to defining calls made by the client that will be sent to the Server.

Make sure to define all the methods that will be sending information to the server. These async virtual methods will be called by the ISignalRHub. The quoted part “UpdateUser”, “CreateGame” and “JoinGame” refer to the methods on the server side GameHub, if the names are not exactly correct the server methods won’t invoke.

 

SingnalRMesagingContainers refers to the objects that you want to send through JSON to the server to manipulate. Meaning you would define your object classes within this .cs file. However if you already defined your models, in a models(or other name) folder, that will work too, in fact it’s preferred.

Referencing Gamehub

In order for your Signal R Hub to be accessed by all parts/pages of your project you will need to modify the App.xaml.cs in Shared.

public static new App Current

{

get { return Application.Current as App; }

}

Then inside the OnLaunched(LaunchActivatedEventArgs e) method add

App.Current.SignalRHub = new SignalRMessagingHub();

 

 

Inportant! If you are going to be passing objects through SignalR both projects need to have the exact same code for the objects.

Now when calling/listening to the SignalR hub from different pages of your app easy now that we have everything set up.

CALLING

LISTENING

Inorder to approipately handle the triggered SignalRServerNotifaction we need to add SignalRServerNorification for that page by referencing the App.Current.SignalRHub.SignalRServerNotification

When implementing the SignalRHub_SignalRServerNotification be sure to appropriately handle the dispatcher so the page can still be responsive when events are triggered.

 

In my code I use the CustomSererMessage to find which state the server is on versus the game. You can implement changing and checking game state however you think best suits your game.

 

Publishing your Server code

Eventually you want to publish your code to an azure website so anyone who downloads the application can connect to the server.

Use the steps in this tutorial to do so: http://www.asp.net/signalr/overview/deployment/using-signalr-with-azure-web-sites

Sphero

Okay so we finally have the backend set up. Now it’s time to implement more of the front end. Depending on your game you might want to change some of the XAML and front end to suit your purposes but the connection and control of the Sphero will remain the same.

First thing is to add the Sphero SDK that you downloaded to your project references.

https://github.com/SoatExperts/sphero-sdk

Connecting to Sphero

Second is to modify the App.xaml.cs so all pages in the project can remain connected to the same Sphero.

 

Now go into the page that you want to initiate connection with your sphero. For Hide and Seek I put it in the lobbyPage.xaml.cs since I wanted to make sure users were connected before they started the game. One thing to note about the DiscoverSpheros method; it will only return a list of Spheros that are on and in Bluetooth connection state (blinking red and blue).

private async void DiscoverSpheros()

{

try

{

// Discover paired Spheros

List<SpheroInformation> spheroInformations = new List<SpheroInformation>(await SpheroConnectionProvider.DiscoverSpheros());

 

if (spheroInformations != null && spheroInformations.Count > 0)

{

// Populate list with Discovered Spheros

SpherosDiscovered.ItemsSource = spheroInformations;

}

else

{

// No sphero Paired

MessageDialog dialogNSP = new MessageDialog(“No sphero Paired”);

await dialogNSP.ShowAsync();

}

 

}

catch (NoSpheroFoundException)

{

MessageDialog dialogNSF = new MessageDialog(“No sphero Found”);

dialogNSF.ShowAsync();

}

catch (BluetoothDeactivatedException)

{

// Bluetooth deactivated

MessageDialog dialogBD = new MessageDialog(“Bluetooth deactivated”);

dialogBD.ShowAsync();

}

}

After you discover the Spheros you then need to connect to one.

 

Controlling Sphero

With your device now connected to the Sphero that you choose, it’s time to implement the controls. Go to the page that you want the controls to appear and open the page’s .xaml file. In this case it was my GamePlayPage.xaml.

Then add the following to the <Page> tag properties:  xmlns:Controls=”using:Sphero.Controls”

Now depending on what else you want to put on the page the placement of this next code block will differ, but the content is still the same.

<Controls:Joystick x:Name=”spheroJoystick” HorizontalAlignment=”Left” Margin=”30,0,0,30″ Grid.Row=”1″ VerticalAlignment=”Bottom” Calibrating=”spheroJoystick_Calibrating” CalibrationReleased=”SpheroJoystick_CalibrationReleased” Moving=”SpheroJoystick_Moving” Released=”SpheroJoystick_Released” PointerReleased=”SpheroJoystick_PointerReleased”/>

The important properties of the Controls:Joystick input are Calibrating, CalibrationReleased, Moving, Released, and PointerReleased. These can be added directly in the XAML or can be added in the Events tab of the Properties Window in Visual Studio.

 

Almost done, with Sphero. In order for the code in XAML to actually do anything, we need to make sure that the events are implemented and make sure the connection is still active.

private SpheroDevice _spheroDevice;

We check the connection and start the Joystick in the page’s initialize method.

 

Since we saved the connection in the App.CurrentConnection we can reference even if we navigate to a different page after the initial connection.

 

And that’s it! You can now get more information from the Sphero if you want to, and track more data. Look in the API for on how to do more with your Sphero.

 

 

 

 

 

 

Drone

So some quick background on the Drone. ARDrones produce their own wifi that your device will need to connect to. Normally not a problem. But when your app needs to also talk to a Server consistently it provides a problem at we were only able to fix by connecting a PC to a hardline and the drones wifi simultaneously.

Getting Started

Create a new Blank windows 8.1 app. Download the SDK off git. Unzip the package and copy the reference libraries you need into your project Folder. Then go to your Reference folder in your project and reference the new files that you just moved. Do this in order to keep all the references together so when you share the solution nothing becomes dereferenced.

Integrating Front end

Go to the page’s xaml page and add to the <Page properties/>

xmlns:input=”using:ARDrone2Client.Windows.Input”

 

The main thing that needs to be in the UI is the field of view from the drone’s camera. The allure of drones is being able to control a new perspective that we normally can’t see as a human.  The camera output is also a major way that the user can control the drone when they lose direct line of sight.

To add this camera output to the screen you need to insert a MediaElement into your page. I like the element to take up almost the entire screen and then over lay the Joystick, Takeoff, Landing, and other command buttons.

 

The next step is to add the JoystickControl from the Drone ToolBox and the corresponding XAML Controls.

 

Be sure to name them differently. I suggest naming them after what they control. “YawGazJostick” and “RollPitchJoystick”.

 

 

<Grid x:Name=”JoystickGrid”

Grid.Row=”1″>

<input:JoystickControl x:Name=”YawGazJoystick”

BorderElipseColor=”Red”

StickColor=”Black”

Margin=”0,0,80,80″

HorizontalAlignment=”Right”

VerticalAlignment=”Bottom”

Height=”200″

Width=”200″ />

<input:JoystickControl x:Name=”RollPitchJoystick”

BorderElipseColor=”Green”

StickColor=”Black”

Margin=”80,0,0,80″

HorizontalAlignment=”Left”

VerticalAlignment=”Bottom”

Height=”200″

Width=”200″ />

</Grid>

 

It’s also good to have a Take Off button as well as an Emergency Button. There are several other capabilities of the Drone that you can add to your project however we won’t be using them. Your button doesn’t need to look like this it can be just a normal button.

 

 

<Button x:Name=”TakeOffLandButton”

Grid.Row=”1″

VerticalAlignment=”Bottom”

HorizontalAlignment=”Center”

IsEnabled=”False”

BorderThickness=”0″

Click=”TakeOffLandButton_Click”

Style=”{StaticResource ImageButtonStyle}”>

<!–<Image x:Name=”TakeOffLandImage”

Source=”/Assets/Parrot/btn_take_off_normal.png”

Stretch=”None” />–>

<Grid>

<Grid.ColumnDefinitions>

<ColumnDefinition Width=”50″ />

<ColumnDefinition Width=”*” />

<ColumnDefinition Width=”50″ />

</Grid.ColumnDefinitions>

<Polygon Grid.Column=”0″

Fill=”{StaticResource Green}”

StrokeThickness=”0″

Points=”0,62 50,0 50,62 0,62″ />

<Rectangle Grid.Column=”1″

Fill=”{StaticResource Green}”

HorizontalAlignment=”Stretch”

VerticalAlignment=”Stretch”

StrokeThickness=”0″ />

<Rectangle Fill=”{StaticResource ParrotBrush}”

Grid.Column=”1″

Height=”3″

VerticalAlignment=”Top” />

<Polygon  Grid.Column=”2″

Fill=”{StaticResource Green}”

StrokeThickness=”0″

Points=”0,0 50,62 0,62 0,0″ />

<Line Grid.Column=”0″

X1=”50″

Y1=”0″

X2=”1″

Y2=”60″

Stroke=”{StaticResource ParrotBrush}”

StrokeThickness=”3″ />

<Line Grid.Column=”2″

X1=”0″

Y1=”0″

X2=”50″

Y2=”60″

Stroke=”{StaticResource ParrotBrush}”

StrokeThickness=”3″ />

<TextBlock x:Name=”TakeOffLandingTextBlock”

Grid.Column=”1″

TextAlignment=”Center”

VerticalAlignment=”Center”

Foreground=”White”

FontSize=”30″

Padding=”50,0″>TAKE OFF</TextBlock>

</Grid>

</Button>

 

Same with the Emergency Button. It doesn’t need to look as complicated as this. Just make sure you include a click event.

<Button x:Name=”EmergencyButton”

Grid.Row=”0″

Grid.RowSpan=”2″

HorizontalAlignment=”Center”

VerticalAlignment=”Top”

BorderThickness=”0″

Padding=”0″

Margin=”50″

Width=”300″

Height=”60″

Click=”Emergency_Click”

VerticalContentAlignment=”Stretch”

HorizontalContentAlignment=”Stretch”

Style=”{StaticResource ImageButtonStyle}”>

<!–<Image Source=”/Assets/Parrot/btn_emergency_normal.png”

Stretch=”None” />–>

<Grid>

<Grid.ColumnDefinitions>

<ColumnDefinition Width=”50″ />

<ColumnDefinition Width=”*” />

<ColumnDefinition Width=”50″ />

</Grid.ColumnDefinitions>

<Polygon Grid.Column=”0″

Fill=”{StaticResource Red}”

StrokeThickness=”0″

Points=”1,0 50,0 50,60 1,0″ />

<Rectangle Grid.Column=”1″

Fill=”{StaticResource Red}”

HorizontalAlignment=”Stretch”

VerticalAlignment=”Stretch”

StrokeThickness=”0″ />

<Rectangle Fill=”{StaticResource ParrotBrush}”

Grid.Column=”1″

Height=”3″

VerticalAlignment=”Bottom” />

<Polygon  Grid.Column=”2″

Fill=”{StaticResource Red}”

StrokeThickness=”0″

Points=”0,0 50,0 0,60 0,0″ />

<Line Grid.Column=”0″

X1=”1″

Y1=”-1″

X2=”50″

Y2=”60″

Stroke=”{StaticResource ParrotBrush}”

StrokeThickness=”3″ />

<Line Grid.Column=”2″

X1=”0″

Y1=”60″

X2=”50″

Y2=”-2″

Stroke=”{StaticResource ParrotBrush}”

StrokeThickness=”3″ />

<TextBlock Grid.Column=”1″

TextAlignment=”Center”

VerticalAlignment=”Center”

Foreground=”White”

FontSize=”30″>EMERGENCY</TextBlock>

</Grid>

</Button>

 

 

 

 

Drone Backend .xaml.cs

Now in the xaml.cs page we need to initialize the connection to the Drone and establish eventhandlers for the joysticks inputs and the emergency land and take off buttons.

The page needs the appropriate library references:

using ARDrone2Client.Common;

using ARDrone2Client.Common.Configuration;

using ARDrone2Client.Common.Input;

Inside of the class for the page initialize the DroneClienct and VideoSourceUrl as well as the DispatcherTimer, which will allow the app to continue other processes while it connects to your Drone.

private readonly DroneClient _droneClient;

private const string VideoSourceUrl = “ardrone://192.168.1.1”;

// ReSharper disable once PrivateFieldCanBeConvertedToLocalVariable

private readonly DispatcherTimer _timer;

Add the lines below so the Drone can be initialized and connect to the application.

 

For the Drone portion of the application we also need to add lines to the OnNavigatedTo portion of the page.

if (!_droneClient.IsActive)

await _droneClient.ConnectAsync();

UpdateDisplay();

 

The UpdateDisplay() Method is in charge of changing the Screen to allow the other Drone Activities to become active. However we aren’t going to use many of them so the only one we need to become actuve is TakeOffLanding, EmergencyButton, and ResetEmergency Button.

 

Now to see the video while we are controlling the Drone we need to set the MediaElement’s source to the Video URL in the Page_OnLoaded method.

private void Page_OnLoaded(object sender, RoutedEventArgs e)

{

ArDroneMediaElem.Source = new Uri(VideoSourceUrl);

UpdateDisplay();

}

 

We also need to handle what happens to the video when the app suspends and resumes.

private void OnResume(object sender, object e)

{

ArDroneMediaElem.Source = new Uri(VideoSourceUrl);

}

 

private async void OnSuspend(object sender, Windows.ApplicationModel.SuspendingEventArgs e)

{

var deferral = e.SuspendingOperation.GetDeferral();

ArDroneMediaElem.Source = null;

await Task.Delay(2000);

deferral.Complete();

}

 

Handling Drone input and Joystick controls are similar to how we did with the Sphero.

OnTakeOffButton_Clicked

private void TakeOffLandButton_Click(object sender, RoutedEventArgs e)

{

if (_droneClient.IsFlying())

_droneClient.Land();

else

_droneClient.TakeOff();

UpdateDisplay();

}

Emergency

OnPointerEntered

base.OnPointerEntered(e);

 

if (e.Pointer.PointerDeviceType != Windows.Devices.Input.PointerDeviceType.Touch)

return;

 

Point pos = e.GetCurrentPoint(JoystickGrid).Position;

var joy = pos.X < (ActualWidth / 2) ? RollPitchJoystick : YawGazJoystick;

var bounds = new Rect(joy.ActualWidth / 2, joy.ActualHeight / 2, JoystickGrid.ActualWidth – joy.ActualWidth / 2, JoystickGrid.ActualHeight – 75 – joy.ActualHeight / 2);

if (!bounds.Contains(pos))

return;

joy.Margin = new Thickness(pos.X – joy.ActualWidth / 2, pos.Y – joy.ActualHeight / 2, 0, 0);

joy.VerticalAlignment = VerticalAlignment.Top;

joy.HorizontalAlignment = HorizontalAlignment.Left;

 

OnPointerReleased

base.OnPointerReleased(e);

if (e.Pointer.PointerDeviceType != Windows.Devices.Input.PointerDeviceType.Touch)

return;

Point pos = e.GetCurrentPoint(JoystickGrid).Position;

var joy = pos.X < (ActualWidth / 2) ? RollPitchJoystick : YawGazJoystick;

joy.Margin = joy == YawGazJoystick ? new Thickness(0, 0, 80, 80) : new Thickness(80, 0, 0, 80);

joy.VerticalAlignment = VerticalAlignment.Bottom;

joy.HorizontalAlignment = joy == YawGazJoystick ? HorizontalAlignment.Right : HorizontalAlignment.Left;

joy.Reset();

 

 

Summary

So like I said, not an easy endeavor. Working with hardware takes a while and comes with its own set of unforeseen challenges. But, I hope this little post helps.

If you want to look at the source code it’s here:

Though I do have a caveat, most of this code was written last year and has not been updated since 2014. If major changes have happened in the SDK they have not been integrated yet. I’ll try and keep an eye out and update accordingly.

 

Happy Coding!

-TheNappingKat

 

 

Unity Gaming: Getting Infinite Working

Infinite Runner

Okay so the game I’m making is an infinite runner. What’s an infinite runner. Well it’s pretty self-explanatory but just to make sure everyone is on the same page; an infinite runner game is a game where the world is procedurally generated as the player experiences it, and will exist for as long as the player is alive. Most infinite runners take the title seriously and have their players running along a path that is never ending while collecting prizes and/or dodging enemies.

This unique-ish twist that this example has, is that it’s not going to be 3rd person or 2D like most infinite runner.

Gravity Gunner is a First Person Shooter Infinite Runner.

Platforms

So for our infinite runner we need a character to run constantly. Now you can do this of two ways.

  1. Have the user control your charters speed and movement. While the environment passes by. Think Super Mario Bros.
  2. The player’s speed/position is locked and the user can only control limited direction. Think Temple Run.

In this example the player’s forward direction is locked and the user can only manipulate left/right direction. 

Spawners

Understanding Spawners

Okay so when I say Spawner, what do I mean. Well the Spawner is an object that generates objects, either from scratch or clones of specified objects. In an infinite runner the Spawner refers to the script that will generate the next platform in your series. Now we will use Spawners for our platform generation but it can also be used for generating enemies.

So before we can create our Spawner we should create the objects that we want to Spawn and convert to Prefabs. This way the prebas can be used multiple times in our game.

For an infinite runner I want to create flat platforms for my character to run on. And since the character is going to manipulate “gravity” we will want to spawn four platforms to form a hallway with top, bottom, left and right sides.

So for this piece let’s start simple and build from there.

With any infinite runner its all about the prefabs. The Platform prefabs usually contain.

  • The model for the platform
  • The behavior of that platform, a.k.a whether or not it’s moving
  • Enemy characters
  • Coins or items for the characters
  • Random other triggers for end of level, or game actions

Although some of the items will be generated randomly by their own spawners the location of them in the world usually is dependent on the world/pieces/platforms generated.

Creating Span Object/Platform

So I’m creating my own platform, but you can easily import one from the assets store or from a 3D modeling program. I’m just doing it this way cause it’s faster.

  1.  Create a Cube
    • Make sure it’s at 0, 0, 0
    • I like the dimensions to be 6, 1, 14
  2. Create Prefab
    • It’s really important to maintain organization when building a game. Your Assets folder can become unmanageable really quickly if you don’t have any organization. I’ll talk about it in a later post, but for now trust me. MAKE FOLDERS! I create folders based on the items in my game. For example usually I’ll have a folder for MyPrefabs, MyAudio, MyMaterial, MyScenes, and MyScripts. So in Assets you Should Create a folder called “MyPrefabs”  and to that folder Create a prefab called “SimplePlatform”.
    • Drag Cube Object from the Hierarchy to the Prefab.
  3. Create the Spawner Object
    • Create an Empty Object, Place it at 0, 0, 0.
    • Rename it Spawner.

Okay now let’s make the Spawner do something.

Spawner Script

    1.  Create List
      • This is for keeping track of your objects in case you need to do manipulation to your objects. You know like destroying them, or rotating them…
public List platformList;
public List platformTypes;
    1. Instantiate Platform
      • Now in your Start() method add the following
for(int i = 0; i < 6; i++){
    GameObject x = (GameObject)GameObject.Instantiate (this.PathPlatforms [0], new Vector3 (0, -3f, 0), Quaternion.identity);
    x.tag = bottomPlatformTag;
    x.gameObject.tag = "Platform";
    this.activeBottomPlatforms.Add (x);
}

Destoryers

Understanding Destoryers

So if the spawner and world are the heart of an infinite runner. The destroyer is the ventricles or something, trying to keep this analogy but I might end up switching, we’ll see.
Memory management, especially in games, is the main contributor to glitches and lag. Destoryers help with this by eliminating unnecessary objects from the scene that the engine no longer has to keep track of.

Destoryers and Spawners

Okay so there are many ways to make an infinite runner. I’ll explain one, and then tell you another way.
In ours, the Destoryer works with the Spawner and destroys platforms that are no longer necessary. Instead of having the Spawner spawn platform after platform after platform, we only spawn a set number in order to reduce the number of objects in memory. The destruction of a platform by the Destoryer triggers the Spawner to create another platform. And that’s how we get the “infinite” part of our infinite runner. =D
Although there are other ways to implement the infinite runner, they all consist of some sort of spawner and destroyer. Some Spawners are timed based and will generate platforms based on how much time has gone by, but the destroyer will still exist and destroy objects as they leave the screen.

Creating Destoryers

Create the Destroyer Object by:

  1. Making a cube
  2. Move the cube back to the -20 in the z axis
  3. Scale it to 10x10x1 in the x, y , and z plane
  4. Then take away it’s mesh render

Okay, so now that’s it’s created let’s make it destory the platforms

Destoryer Script

Create another script in the MyScripts folder called “DestoryerBehavior”.
Then add a OnTriggerEnter() method so the Destoryer can be triggered by the objects it intersects. In the Ontrigger add an if statement to check and see if the object setting off the trigger is a platform. If it is, destory it.

    void OnTriggerEnter(Collider other) {

        string collideTag = other.tag;

        if (collideTag == "Platform")
        {
            Destory(other.gameObject);
        }

    }

See super simple. However, we still need to get the Spawner and the Destoryer to work together

Putting it Together

There are two tasks left to complete, 1) Getting the platforms to run into the Destoryer 2) Getting the Destoryer to signal the Spawner to create a new platform.

Moving Platforms

To get the Platforms to collide with the Destoryer we need to add script to the platform prefab that will move the platforms backwards towards the Destroyer.
So on the SimplePlatform Prefab add a new component in the inspector. Create a C# Script called “MoveBackwards”. In it add this script to the update function as well a float for the speed.

    public float backspeed = 3.0f;

    
    // Update is called once per frame
    void Update () {
        transform.Translate(Vector3.back * Time.deltaTime * backspeed);
        }

Script Interction

So to interact with the Spawner the DestoryerBehavior needs to reference the Spawner’s Script. We can do this by Finding the appropriate object and then getting the component we want from the object. Add these fields to the DestroyerBehavior:

    public float backspeed = 3.0f;

    
    // Update is called once per frame
    void Update () {
        transform.Translate(Vector3.back * Time.deltaTime * backspeed);
        }

Now we want to remove the platform the Destoryer collided with from the Spawner’s list, as well as Destory the object.
To do that we need to edit the Destoryer’s OnTriggerEnter method.

        if (collideTag == "Platform")
        {
            
        platformControllerScript.activeRightPlatforms.Remove(other.gameObject);
        Destroy(other.gameObject);

Great so now the Spawner will be automatically triggered to spawn a new Platform.
Run your scene and you should see the platforms being destroyed and spawned so that there are always six. =D

And there you have it. Infinite is now working in your game!
Happy Coding!

-TheNappingKat

Hide and Seek: Sphero vs. Drone

So this project was one that I did with a friend Christine early in 2014. It’s a twist on Hide and Seek but instead of hiding with people, your Sphero is the one that’s hiding while the Drone Seeks it out. Pretty cool, right!?

If you don’t know what a Sphero is check it out: http://www.gosphero.com/

They’re really cool and fun to code on. We also use an AR Parrot Drone. Also fun to play with but much harder to code for this specific project. Check out some of their stuff here: http://ardrone2.parrot.com/ 

I went into the project thinking it wouldn’t be too hard. Big mistake. Hardware has a way of surprising you in the least fun way when coding. Anyway, we stopped working on it in June, but I hadn’t made a post about it until now. Sharing some of the insights that I gleaned and practices I learned would be a great way to kick off this blog.

 

<h2>Overview: </h2>

Create a new twist on the classic game that uses both a Drone and a Sphero. Learn how to create a windows 8.1 project to talk between the Sphero and Drone. This is by no means an easy project to implement. If you are not familiar with back-end networking and communication concepts as well as connecting with hardware, I suggest reading the documentation for each of the technologies first.

<h2>Before you start: </h2>

Who is TheNappingKat?

Good Question! Oh, you didn’t ask. Well, I’m going to tell you anyway.

They see me rollin'
They see me rollin’

My name is Katherine Harris. I work for Microsoft, and I just became a Technical Evangelist for the Audience team.

What is a Technical Evangelist? Even better question! But I’ll give you the straight to the point simplified answer instead of the long, sit you down for 10 minutes one.

So the definition of evangelist is: Someone who talks about something with great enthusiasm (thanks merriam-webster). Therefore a technical evangelist talks about technology with great enthusiasm. In the context of my job it means I’m a developer that goes to events and teaches others about Microsoft technologies and how to use them.

More about me.

I’m a super nerd. Comics, Video Games, TV, movies! I love super heroes! DC > Marvel though DC please get a move on with your movies! I also love doing high intensity, high adrenalin activities: white water rafting, skiing, going to Roller Coaster parks (front row each time).  Also a great night is Karaoke night!

So a little more about my past.

I was born and raised in Northern Virginia. I also went to the University of Virginia, graduating from the Engineering School with a BS Computer Science Degree.

I didn’t always want to be a computer scientist. But after first year of E-School, I realized that it was the only class that I was really excited to go to and do assignments on. I found my calling when I joined the Student Game Developers. A student run organization that built games in their spare time (HA, what spare time, E-School is hard!) Anyway, I started out doing the art for my friends games. I did 2D sprites, 3D models, animations, logos, random other stuff. Eventually I got more into the coding side of things. Became a level designer for some games, a developer, then moved on to Director, and then Vice President of the club. Not bad for a person who did know anything about coding before school.

Anyway now I’m going to be sharing my knowledge and talking about whatever I think is super fun.

So that was me in a slightly large nutshell.

Happy Coding

-TheNappingKat

The Internet of Fun!?!?

What is the Internet of Fun you ask? Oh you didn’t. Well, I’m going to tell you anyway.

Just like the Internet of Things, the Internet of Fun is the interconnection of “Fun” technologies, both software and hardware, that has been gamified! These technologies include Oculus Rift, Kinect, Spheros, Drones, and whatever else I can get my hands on!

So if you have any cool hardware that you would want me to integrate into a game let me know!

Happy Coding!

-TheNappingKat