TexturePacker and Unity3D GUI with UIToolkit

Developing GUI for mobile apps in Unity3D is one of the harder issues to solve in a satisfactory manner. Drawing from my own experience, the main problems with the built-in GUI system (as of 3.4.1) are:

  1. Excessive draw calls, more of a problem for earlier devices
  2. Draws excessive processing power when using GUI, even worse with GUILayout
  3. Built-in text rendering system is quite limited, difficult to customize
  4. Not all controls work well out-of-the-box for mobile touch interfaces

To combat this, a variety of approaches have been created, most of which address some subset of the above problems. This blog post in particular will be about a free, relatively new solution called UIToolkit, created by prolific Unity tools developer Prime31, and posted on Github for the community to collaborate around. It’s not the only one, nor the most mature, but it’s been gaining popularity recently and improving significantly since it first launched. I am a contributor to the project, and have mostly worked on text rendering features and fixes.

Many of the various 3rd-party GUI solutions use texture atlases, or sprite sheets to combine multiple textures into one, and that allows for draw calls to be consolidated. Since the draw call budget is pretty limited in early devices, this was one of the biggest reasons to use 3rd-party GUI, but nowadays is less of a problem. In-game GUI still requires high performance, and the overhead of calling GUI, or GUILayout are just too big to overlook even on today’s high-powered phones.

UIToolkit works extremely well with freemium texture atlas generation software called TexturePacker, by Andreas Loew. TexturePacker can automatically fit and combine multiple GUI elements onto the same texture, and export the metadata in a format that is compatible with UIToolkit. Since UIToolkit also allows for automatic switching between 1x/2x textures, which you can get in TexturePacker by changing the scale from 1.0 to 0.5 prior to export. The one caveat is that you’ll need to ensure that your 2x filenames don’t include the “@” symbol, which is unfortunately a different standard than the iOS automatic switching. However, if you’re familiar with 2D game dev with Cocos2d, you might already have TexturePacker, and you’ll be happy to know that you can continue using this great tool for GUI with UIToolkit.

There are a couple of tips I’d offer to Unity devs trying out TexturePacker for the first time:

  • Under texture format, just leave this at PNG. You’ll have to reset the texture import settings in Unity after you import it anyway.
  • Since UIToolkit requires “2x” appended to the filename instead of “@2x”, you can’t use the SD option in TexturePacker. Instead, I save my file as “…2x”, and anytime I need to re-export, I delete the “2x”, then export at 0.5 scale manually.
  • Inner padding of 2 can help eliminate bleed between textures.
  • Imported font bitmaps can be confusing because of the extra layer of indirection. The bitmap textures for both SD and 2x sizes MUST have the same filename, so store them in different directories. The exported texture atlases from TP then have different names, and the Angelcode font files should have “2x” appended to HD exported font bitmaps as well.

To address font usage, you can also export bitmap fonts in the Angelcode format, store the bitmap textures in a texture atlas through TexturePacker, and then render out enhanced font glyphs with whatever features you’d like. To get gradients, outlines, and drop shadows easily, I’d also recommend looking into commercial software called Glyph Designer. It does a great job, and is pretty affordable.

For more information about UIToolkit, see the Unity Forums blog post about it here, and the Github page here.

UIToolkit is free and frequently improving. The author of TexturePacker also offers free licenses to bloggers if you email him, which is actually how I came about having my own licensed copy.

How to Create a Unity iPhone Trailer Video on a Budget

Making a promotional video, trailer, or dev screencast of a game that’s in development can be very tricky. I used a pretty budget-conscious method to create small promo vids for Beast Boxing, and you can too! On the Unity forums, it seems like everyone mentions their screencast setup of choice, but I haven’t seen complete end-to-end instructions yet. Here’s the way that I do it.

Step 1. Set up your Unity editor environment.

Before you start, you need to decide on the screen resolution you want to capture. I’ve heard that some development houses capture at high res then downscale, or even capture at 50% game time so that they can speed it up later and make games look like they perform better! Since there are multiple resolutions now for iDevices, it does make more sense to capture at say, Retina or iPad resolution for videos, but that might require some additional work to make your game resolution-independent, and a heavier-duty machine that can handle playback and recording at a high res too.

Anyway, once you decide on your capture resolution, make sure you click “Maximize on Play” in the Unity Editor. This will help in a couple of ways – first, if you have other editor windows with the scene open, it takes some resource load off of your computer so that it can focus on delivering the fastest framerate. Having to duplicate animations and keep the inspector up to date does slow it down the editor a bit. Second, it also provides a consistent placement for the game scene so that you can have your capture area set up perfectly when you’re ready for it.

If you have a second monitor set up, I’d disconnect it and reboot, and also make sure that background processes like Time Machine aren’t running at the time.

Step 2. Set up your recording / vidcap software.

Everyone’s got their own preference for vidcap software, but I like to use iShowU HD. On my Macbook Pro, other software packages like Camtasia (which I love on PC) or Screenflow just weren’t able to keep a high framerate going, were tricky to get a capture area set up for, or I couldn’t get them to produce output video at my desired resolution. iShowU HD is pretty affordable, too, and has a free demo. In any case, I’d recommend that you try all of the demos that are available to see how they run on your setup, and pick the one that works best for you. These instructions are specific to iShowU HD, but the general idea is the same thing regardless of your software.

First, set your output video size. Since Youtube has a default display height of 360 pixels, I set my capture area to 480 x 360. This provides a 4:3 aspect ratio and a 1:1 mapping with letterboxing on the sides, so it turns out well in the end. Hit the Gear button next to Output video, and select Change Size > Set Size…, and set it to 480 x 360. Hit the Gear again, and select Change Format > Apple Animation. This is a very high quality capture, so you can get a nice vidcap that isn’t blurry and also works with iMovie. Hit the Gear one last time and select Change Frame Rate > 30. 30 fps is what Youtube does, and is all my MBP can handle, so there’s not much point going higher, but feel free to experiment. Make sure that you uncheck “Record sound from input device”, unless you like having your own breathing in your trailers.

iShowU Settings

Over Capture Area, high the Gear, then hit Same as Video Size… this will set up a 1:1 capture mapping and give you the best quality video. Press the Play button in the Unity editor, then go back to iShowU and click Choose over capture area. Drag the rectangle over your video area, and if you want, center it vertically as we’ll see horizontal letterboxing added later in iMovie.

Now, for videos that I’ve capped with iShowU, I used to have problems with the color getting really washed out. The solution I found on their forums is to use the experimental color correction. Go to iShowU’s Preferences, then General, then click “Color correction (experimental).” It did wonders for me, and it might work for you!

Video washed out? Try "Color correction" in iShowU Preferences

Step 3. Record videos.

Fire up your Unity iPhone remote if you need it, then hit the Play button in Unity and press the Record button in iShowU. Record to your hearts’ content, and hit stop when you’re done. Repeat this process as necessary, and stay tuned for my next post if you need tips on what to record!

When you’re done, it’s time to bring your videos into iMovie.

Step 4. Import your videos to iMovie.

I assume you know how to use your own version of iMovie. I just completed the Beast Boxing Trailer with iMovie ’11, so I’ll just speak about the general settings to choose and revisit iMovie specifics another time.

Import the vidcaps into your Event Library, and start working with them in your Project. When you’re satisfied with your trailer, there are many options for sharing. Publishing directly to Youtube with the “Medium” setting resizes and expands your content to 640×480, and ends up adding horizontal letterboxing, and this is what I do. It makes the natural 360px high content look a little better, and users that pick the 480px high HD setting will get an even nicer display.

If you’d rather export directly to Quicktime, choose Share > Export to Quicktime, and pick Options to open the Movie Settings panel. I use H.264 compression, Key Frames Every 24 frames, Data rate of “Restrict to 6000 kbits/sec”, Optimized for CD/DVD-ROM, and a High quality on the Compressor with Encoding: Best Quality. In the Size panel, choose NTSC 720 x 480 4:3, and check Preserve aspect ratio using Letterbox (if required). If you decide to upload this to Youtube, it’ll look pretty much the same as the direct Share to Youtube option, so it’s up to you.

iMovie Quicktime Movie Settings

I had good results with this process, and I hope it’s helpful to you to promote your iPhone games as well!