Unity/Futile Pong Example (Part 3) – Adding and managing art assets in Futile for Unity

By the end of this tutorial, you should have something that looks like this

In my last entry, I took you through the basics of getting Futile imported into Unity. As exciting as it can be to finally have a blank canvas, especially if this is your first introduction to Unity, an even more exciting part is getting your artwork on that canvas.

For those that used the development_physics branch in the last tutorial, please note that we are now using the development branch, at the caution of author MattRix. Just like the other branches, it can be pulled in normal git fashion, or you can download a zip of the repository.

Since the primary goal of this series is to work our way through a Pong rehash, it would make sense to start with assets we will use for it. I have taken the liberty of creating some truly amazing sprites, a white 8×64 rectangle paddle, and a white 8×8 ball with a bit of transparency. You can create your own, or download the ones I made in ZIP format. Prepare to be dazzled.

If you recall from the last tutorial, I explained that any assets we intend to load need to be in the Resources directory of your project, so let’s create a home for our textures. Right click on the Resources directory in the Project pane and create a new directory. I will name this directory Atlases. So you should now have an Assets/Resources/Atlases path.

Now, why on earth did we name it Atlases?

Futile loads your assets from a texture atlas, also known as a sprite sheet. Essentially, this is a single image that contains multiple sprites. This means that we will need to bake those wonderful art assets I made into a single texture atlas. This may sound like overkill for a Pong demo, but this is a best practice that you should be applying to any game you make. TexturePacker is, perhaps, one of the best tools out there for creating texture atlases. There is a free, unlimited trial version which is perfect for our needs. It has output functions for many different frameworks, and one of those happens to be Unity.

Many of the 2D frameworks for Unity already have an integrated sprite sheet manager. Why should you opt for one that doesn’t? Pretty simple really. Your project will not be as intertwined within the web of Unity, so if you ever decide to part ways with it, your work is easier to migrate. Also, there are some amazing tools that already accomplish what other 2D frameworks try to do within Unity’s editor. Instead of relying on those, I prefer to stick with the trusted, industry standard ones that I am already familiar with. This really is the beautiful part of Futile: it does not try to reinvent the wheel.

Drag and drop paddle.png and ball.png into TexturePacker, and it will automatically create the atlas for you. For the Data Format, select Unity3D. We also need to tell TexturePacker where to save the resulting output. Let’s direct it to the Assets/Resources/Atlases directory we created above, and name the file PongDemo.txt. This text file contains JSON formatted data that will tell Unity how to slice up the sprite sheet. Note that the texture file will be saved to the same path, as PongDemo.png unless you change it. Finally, make sure to disable the Allow rotation option, as this is no longer supported by Futile.

If you are using the free version of TexturePacker, you will need to disable the Trim option, and change the Algorithm to Basic. There might be other limitations that you need to change, but I believe that covers the two. The compression won’t quite be as good as it is in the premium version, but that is not something to worry about for this, or just about any game you will make.

texturepacker-options

Click the Publish button, and in the Project pane of Unity you will notice that Resources/Atlases will now be populated with the two files that TexturePacker created.

Unity will automatically compress and apply bilinear filtering to any new texture that is imported. The result is that the edges of textures may appear blurry from the filtering, and some artifacting may occur as a result of the compression. To achieve crisp, pixel perfect textures, click on the PongDemo.png file within the Project pane, and set the Filtering Mode to Point, and the Format to Truecolor, then hit Apply. There may come a time when you actually want these options set at their defaults, so it would serve you well to know that they exist.

We are now ready to load some textures with just a few lines of code. Back within the Start() function of PongDemo.cs, enter the following:

	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); 
		
		Futile.atlasManager.LoadAtlas("Atlases/PongDemo");

		FSprite paddle = new FSprite("paddle");
		Futile.stage.AddChild(paddle);	
	}

The last three lines are the only ones that have changed since the last tutorial. We load the sprite sheet with a call to atlasManager.LoadAtlas, with the only parameter being the location in the Resources directory to the atlas files. We then instantiate the variable paddle, which is an FSprite object, with the name of the individual sprite's filename, without the extension. Finally we add the paddle sprite to Futile's main stage. Execute the code and you should see the paddle in the center of the screen.

pongdemo-first-run-paddle

If you recall, we set the origin (0, 0) of the Futile stage to the center of the screen when setting up our fparams. By default, any sprite you add to the stage will be at this position. To change the position of the sprite before adding it to the stage, we would do the following:

		FSprite paddle = new FSprite("paddle");
		paddle.x = 50.0f;
		paddle.y = -100.0f;
		
		Futile.stage.AddChild(paddle);

And the result:

pongdemo-paddle-offset

Since we are playing with x and y values, let's try changing them in the Update() loop:

public class PongDemo : MonoBehaviour {
	
	public FSprite paddle;

	// Use this for initialization
	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); 
		
		Futile.atlasManager.LoadAtlas("Atlases/PongDemo");
		
		paddle = new FSprite("paddle");
		paddle.x = 50.0f;
		paddle.y = -100.0f;
		
		Futile.stage.AddChild(paddle);
		
	
	}
	
	// Update is called once per frame
	void Update () {
		paddle.x++;
		paddle.y++;		
	
	}
}

Please note that we added a public declaration to paddle to the PongDemo class so that it will be accessible to Update(). This is known as variable scope, and if you are completely lost by the term, you ought to brush up on your programming skills, as that is beyond the scope (I'm so sorry for the cheap pun!) of these tutorials. Next, we change the FSprite paddle = new FSprite("paddle") line to just paddle = new FSprite("paddle") so that there is no conflict with the public declaration above. Finally, in the Update() function, which is called once per frame, we increase the x and y values of paddle. Execute the code, and our paddle will levitate away.

To wrap this tutorial up, try playing around with other properties of paddle, such as:

		paddle.color = Color.red;
		paddle.rotation = 45.0f;
		paddle.width = 100.0f;
		paddle.height = 200.0f;

pongemo-red-paddle

Similarly, try creating an instance of the ball, and another instance of the paddle. See if you can figure out how to place the paddles at the edge of the screen, which is one of the things we will be doing in the next tutorial.

Take me to the next tutorial!

By the end of the tutorial you just read, you should have something that looks like this

About these ads

18 thoughts on “Unity/Futile Pong Example (Part 3) – Adding and managing art assets in Futile for Unity

  1. Pingback: Getting started with Futile, a 2D framework for Unity | Game Development

  2. All I get is a black screen when I try to run it after adding the atlas. I get an exception where it can’t find the ‘element named ‘paddle’ ‘, then points to an error in the Futile code at line 134

      • yep, I just went through the tutorial again from scratch to make sure I did things right, and again I get the same error

      • Did you create your own art or did you use the ones I provide? Before adding to TexturePacker, the paddle must be named paddle.png, and the ball must be named ball.png. The Atlas it creates must be named PongDemo.png.

        Any chance you can expand the Resources folder in your Project pane, and screenshot that? Might not hurt to upload your code somewhere too. I have recreated this project several times and I have not run into this issue.

      • http://imgur.com/jgNHP5o
        http://imgur.com/telc6t5

        I copy+pasted your code so it should be exactly the same. I used your art assets and everything is named the same. One thing I can think of is that I’m using a newer version of texturepacker, so there is no option to disable trim, instead there is a dropdown menu to set trim mode to ‘none’.

        Besides that I can’t see what I’ve done differently

      • Everything looks good. Do me a favor and take a screenshot of the contents of your PongDemo.txt file in your resources folder. Sorry to make you do so much work here.

      • Everything is good with your PongDemo.txt. Couple things to try, which really shouldn’t make a difference:

        Try using FSprite paddle = new FSprite(“paddle.png”) instead of just “paddle” If this works, then you are probably using the master branch of the github project instead of the development. Make sure you use the development branch @ https://github.com/MattRix/Futile/tree/development – And don’t use the Futile.unitypackage file. I don’t believe that MattRix always updates that with every commit.

        Try removing the tps file from your Resources/Atlases folder. This really shouldn’t matter.

      • Looks like I used the wrong branch, and now it’s working. Thanks for the help! Can’t wait for some more tutorials!

  3. Pingback: Creating the basic structure of our Pong game in Futile | Game Development

  4. Hello. When I try and get the paddle to load I get a blank screen. It comes up with an error that says FutileException: Couldn’t load the atlas texture from: Atlases/PongDemo Also I have tried using FSprite paddle = new FSprite(“paddle.png”) but that did not work as well. Sorry for the trouble!

  5. Oh gosh I’m an idiot haha. Sorry for wasting your time. keep up the great work on the tutorials! I find them really helpful when I can spell correctly lol

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