Unity/Futile Pong Example (Part 2) – Getting started with Futile, a 2D framework for Unity

In my previous post, I introduced Futile, a code-centric, 2D framework for Unity. If you want to know a little more about Futile, then give that a quick read, but this is the post where we will create a project and get started. Much of the content in this post is already covered in the videos created by MattRix. Check those out if you get lost. The entire Futile library works in the free edition of Unity, so there is no need to feel intimidated by the price of Unity Pro.

All of the coding I do will be in C#, as that is my language of choice, and it is also the language that Futile was written in. If you aren’t using C#, you will still be able to follow along and take advantage of Futile with your preferred language. These tutorials are not designed to teach you about the basics of programming, so a basic level of programming knowledge is assumed. I will do my best to explain everything that I can, and will be actively monitoring the comments section to help further.

Alright, let’s get started.

First, let’s go ahead and create a new project in Unity 3 or 4. I am currently running version 4.0.1f2. Version 4.1.2f1 is out, but there is no need for me to upgrade at this time. I will be naming my project PongDemo. You can name yours anything you want.

create-new-project

With our blank project ready to go, it’s time to harness the power of Futile. Futile is available publicly on github in three branches. Currently, the most up-to-date branch is development_physics. This branch contains all of the nuts and bolts of the framework, as well as recent commits primarily focused on physics implementations. I will be using this branch. MattRix warned me about using this branch for the moment, since it is highly unstable. Instead we will be using the development branch.

You can clone the entire branch in the normal git fashion, or click the ZIP button to download the repository as a zip file. I should note that this repository also contains a neat Futile demo which you can open and look at as well on your own.

For the moment, we want to navigate to the Assets folder within FutileDemoProject of the downloaded repository. In that folder, copy the entire Plugins directory. Navigate to the base directory for your app, and you should notice an Assets folder. Anything that is put in this folder will show up in the Project pane within the Unity editor. Similarly, anything you do in the Project pane will be reflected in the Assets folder. Jump into the Assets folder, and it should be empty. If it isn’t empty, don’t stress it. This is where you will paste the Plugins folder that was copied earlier. Alternatively, you could have dragged the Plugins folder right into the Project pane in Unity, and it would accomplish the same goal.

Back in the git repository, copy the Shaders directory located in Assets/Resources. In the Assets directory for your Unity project, create a new directory and name it Resources. In Unity, all assets that are loaded with a Resources.Load call need to be located in Assets/Resources. Since Futile makes use of this API call, we will be putting all of our assets there. Paste the Shaders directory which we copied a moment ago into Assets/Resources.

The result is that you should now have PongDemo\Assets\Plugins\Futile and PongDemo\Assets\Resources\Shaders directories, both populated with various files. If you are not well-versed with shaders, don’t get scared off. You can write an entire Unity game with Futile without ever seeing the term again. Tab back over to the Unity window and you notice that this directory structure has been replicated in the Project pane. It should look something like this:

asset-structure-in-unity

The entire Futile SDK is now loaded into your project and ready to roll. But first, a little house keeping. You might have noticed a Main Camera object in the Hierarchy pane of the editor. Typical Unity projects will make use of this, but Futile will dynamically create and manage the camera for us. So let’s delete that by right clicking on it and selecting delete.

In Plugins/Futile there is a C# file named Futile.cs. If you were to take a look into it, you would see that it extends the MonoBehaviour class. In order to take advantage of the MonoBehavior directives, any derivative of MonoBehavior needs to be attached to a Unity GameObject. In order to do that, all we simply do is click on the GameObject menu in Unity, and then Create Empty. In the Hierarchy pane, you will now notice a new GameObject. Right click it and rename it Futile, just to keep things clean and clear, but you can name it whatever you like. Finally, we need to drag the Futile.cs script from the Plugins\Futile path in the Project pane onto the Futile object that we just created. You can look in the Inspector pane and see that the Futile script is attached to the Futile object:

futile-script-attached

With Futile now properly attached to our Futile GameObject, we will create the script that will drive our game. To keep things tidy, create a folder name Scripts in the Project pane, and then right click this new folder and select Create and then C# Script. I am going to name mine PongDemo:

pongdemo-script-created

Just like Futile.cs, PongDemo will, by default, extend MonoBehaviour. You will see that when we open it in a few moments. Since it is a MonoBehaviour, we will attach it to the same Futile GameObject that we attached Futile.cs to. If you are at all confused and overwhelmed by this concept of attaching source code files to GameObjects, don’t panic. This is merely part of the project setup, and it is a prime example of why I don’t like working in the Unity editor itself. Some people love the visual aspect it provides, but I find it rather clunky.

With PongDemo.cs attached to the GameObject, it is time to start getting into some code. Double click on the PongDemo.cs file in the Project pane to open it. Unity comes with a pretty decent IDE known as MonoDevelop. I use it, and have not found much of a reason to look for alternatives, but feel free to do that on your own. PongDemo.cs will open in MonoDevelop, and you will notice that there is already some code in there.

using UnityEngine;
using System.Collections;

public class PongDemo : MonoBehaviour {

	// Use this for initialization
	void Start () {
	
	}
	
	// Update is called once per frame
	void Update () {
	
	}
}

The most important things to note here are the Start and Update functions. Start() is for anything you need to perform before your game loop begins executing. Your main game loop has essentially been created for you already. Update() is how you hook into it. You can have multiple C# scripts that extend MonoBehaviour, each with its own call to Update(). For our game, this call to Update() will be the only one we need, and so this is effectively our main game loop.

There are a few more things we need to do in order to create our game canvas. Type the following code into the Start() function:

	void Start () {
		FutileParams fparams = new FutileParams(true,true,true,true);
		
		fparams.AddResolutionLevel(480.0f, 1.0f, 1.0f, ""); //iPhone
		
		fparams.origin = new Vector2(0.5f,0.5f);
		
		Futile.instance.Init (fparams);	
	}

The first thing we see here is that we are creating a FutileParams object named fparams. These parameters are for mobile devices, and they define which orientations to support. In our case, we will set them all to true, even though they are irrelevant to us right now. In the next line of code we add a resolution level. This is a very useful way of loading assets based upon the screen resolution of the device in use. Once again, we don’t care about this right now and so we are going to ignore the various parameters except for the first one, which can be thought of as the minimum screen width we will support. This happens to be the width in pixels of the older iPhones.

There have been a few references to mobile devices so far. If you don’t intend to develop mobile games, don’t get scared off. While Futile does a great job of supporting mobile devices, it is not intended to be exclusive to the mobile world.

Moving on, we next set an origin for the Futile stage. A Vector2 is merely a representation of a 2 dimensional vector. In this case, we are using it to tell Futile that we want 0, 0 to be at the center of the screen. Finally, we initialize Futile with the fparams we just created, and we are all set.

Back in the Unity editor, if you were to execute this code by clicking the play button, you should see a blank, black canvas at the default resolution that Unity sets for every new project. To keep things really simple, we will set this default resolution to 480×320 to match the minimum resolution level we chose to support when we initialized Futile above. To change this, go to File, Build Settings, and make sure the PC/Mac/Linux platform is selected and then click the Player Settings button at the bottom.

build-settings

In the Inspector pane, change the resolution width to 480, and the height to 320.

player-settings

Go back to the main Unity screen and make sure the Unity editor’s built in simulator is set to 480×320, and then run it again:

editor-resolution

This is our scene. It’s so pretty that we should probably save it. Click File, Save Scene, and I’ll name mine PongDemo to be really creative. As with just about anything, you can name yours whatever you wish. At this point, you can feel free to safely close out of Unity and know that all of your work has been saved. This is a very anti-climatic place to end this portion of the tutorial, but hopefully I can get the next one up soon. In it, we will start loading and handling art assets.

Take me to the next tutorial!

About these ads

3 thoughts on “Unity/Futile Pong Example (Part 2) – Getting started with Futile, a 2D framework for Unity

  1. Pingback: An introduction to Futile, a 2D framework for Unity | Game Development

  2. Pingback: Adding and managing art assets in Futile for Unity | Game Development

  3. Pingback: Unity/Futile Tutorial – Bringing Pong to Mobile – Intro | Jason Rendel

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s