Goodhustle Studios, maker of Beast Boxing 3D and Skybox

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.

Beast Boxing 3D is our first-person boxing game with awesome character design, fun, lightweight RPG elements, an entertaining story with a twist, and (new in 1.2!) an Endless mode to keep the challenge going!

Here are some of our best reviews so far:

“You’ve got an iPhone, you gotta get this…” 9.5 / 10 – Scott @ G4 TV Canada’s Reviews on the Run!

“With great use of touch controls, an amusing storyline, and wonderfully illustrated beasts, Beast Boxing 3D is a K.O.” – Macworld

“Beast Boxing 3D is exactly the kind of boxing game I’ve been waiting for. ” – TouchArcade

If you haven’t tried it yet, you can buy it today on the App Store, or if you just want to try it out, play our Lite version for free!

I just learned today that there is a bug in Beast Boxing v1.2 that will prevent accurate syncing of the “Mad Skills” achievement to Game Center for winning Beast Boxing 3D on Hardcore difficulty mode. When a fix goes in, I will do my best to ensure that profiles who have this achievement locally will sync properly to Game Center without having to re-beat the game. It’s hard enough the first time!

Thanks to Mark Simpson for reporting the problem.

Beast Boxing 3D version 1.2 got released today and is On Sale for 33% off ($1.99) for the holidays! Here’s a quick list of updates:

* Brand new Endless mode improves replayability with GameCenter Leaderboards
* Two new hilarious holiday-themed opponents available in Rematch mode, along with a new arena (see the attached screenshot). That brings the total to 11 opponents and 5 arenas!
* More responsive and quicker controls
* Four awesome brand new arena music tracks from Last Cannon developer Shadi Muklashy!
* Loads of visual and performance improvements, along with some minor bugfixes

The 1.2 update feels better than ever, and we hope you’ll take a look and see how you like the latest additions!

Beast Boxing 3D is on sale for $1.99, or 33% off, for the holidays! It’s holiday season, and we’re celebrating and giving thanks for an awesome month and a half since we launched the game. We’ve been hard at work the entire time building more content and addressing customer feedback and suggestions for the game. Last week, I had to sneak a little time away from my beautiful honeymoon in Hawaii to get in some last-minute content and upload version 1.2 for review.

The 1.2 update has several awesome improvements in store for you Beast Boxers out there. First off, to give people some more stuff to do aside from the story mode, there’s a new Endless mode. We added two holiday-themed beastly fighters and a brand new fighting arena that will be available in Rematch mode and Endless mode. We tightened up the responsiveness of the controls – it doesn’t read your mind yet, but it does improve on the speed you’re able to chain attacks and blocks together, and it feels great! Oh, and we’ve got four brand new music tracks from multi-talented developer Shadi Muklashy!

The update’s in review now and should be available as a free update in a matter of days. We can’t wait to share it with you!

Apple just approved our first update to Beast Boxing 3D this morning. Here’s what’s Included:

• Improved performance
• Reduced memory footprint that should help address some of the crash issues that users have been reporting
• Streamlined savegame UI
• Fixed tap-to-select problems on scrolling menus.
• A new icon!

Beast Boxing 3D's new logo!

Download it and enjoy! Next up is a new character and also the first challenge mode for players who finish the career story…

So you’re all done with your game (or nearly done!) and it’s time to show off all of your hard work! Just like with creating games, spending the time on making a polished trailer can be a great use of your time, but it can also feel like flailing about in the dark if you don’t know what you’re doing!

Luckily, I just went through this experience so you don’t have to! In this post, I’ll describe a general process that you can apply to make trailers of your game that communicate well and look semi-professional. You can also refer to my earlier post about creating Unity iPhone Trailers on a Budget to see the technical how-to that will let you capture your game with clarity for Youtube or other distribution methods.

Step 1. Understand your Appeal

This might seem obvious, but it’s easy to get mired in the technical details of trailer creation without considering what you want to communicate in the first place! So start with the basics. Open your text editor and answer the following questions:

• What are the 2 or 3 coolest short/quick visual features of my game?
• What sets my game apart from other look-alikes?
• What is the most common action that occurs in the game?
• What are the things that occur at the boundaries of levels in the game? (like story dialogue or intro/outro scenes)
• What is the most interesting special effect in my game?
• List 10-15 places/levels/characters in the game that exhibit one of the above characteristics, but are audiovisually distinct (or as distinct as possible). This is your scene list.

Step 2: Create a crude storyboard

From the scene list, order each of those listed “scenes” in a way that avoids direct repetition of things that look similar to one another. Don’t worry about exact composition – this is your time to try and mentally visualize the color or tone of your trailer so that it doesn’t feel repetitive.

Try your best to use some of these rules of thumb:

• Take the 2 most visually interesting things in your list and place them 1/3 and 2/3 of the way through your trailer. This creates space and provides peak excitement spread out.
• If you were able to find things that occur at the boundaries of levels, place them at the front and back of each third (or each half) of the trailer.
• If you have 2 scenes that share the same art or audio content, put them at least 2 scenes apart from one another.

Step 4. Start recording content

This part is easy – take your scene list, and use your vidcap software of choice to record LOTS of video of each of those scenes. Make sure to demonstrate a good amount of your functionality, and try to have action sequences that flow smoothly instead of taking actions slowly. For the most visually interesting things, record 4 instances (preferably with variety) for later use.

Step 5. Editing

Now you’ve got to fire up your video editor of choice. I use iMovie because it’s very affordable! Now, for each of the types of scenes I listed, you can try some of these approaches and see how they work for you:

• Start with a company / publisher logo, and end with the title of the game and the URL of your website.
• For really visually interesting scenes, cut up your 4 instances so that they hop between visually distinct styles and repetitively show the same thing. Your cuts should be really short for these – play with the start and end points and don’t use any transitions to get a punchy, rhythmic feel.
• In between those, use your more common scenes. These can last 3-4 seconds in length, which gives a break in the rhythm for your viewers.
• Use transitions only between action scenes and buffer scenes. Use cross and fade transitions but stay away from Wipe or other fancy transitions unless the scene you’re going to is scrolling, as it looks kind of home video-ish. When cutting between action scenes, just cut directly without a transition.
• If your character has actions that they go through, try placing the start of your clip at the first or second frame of the action taking place. Leaving space beforehand leads to a jerky feel when transitioning, and going with the first or second frame can feel more natural and give the sensation of action.
• Make sure you include unique or special features – if you can’t find a good place for them, try putting them at the end right before the final scene.

If you get lost, a great way to get restarted is to watch a trailer in the same game genre that gets you excited and try to discern its structure, then use it as a template.

Step 6: Publish!

The last step is just to publish! If you use Youtube, make sure to take advantage of linking to your promo website in your description, and use Annotations accordingly to have your viewers subscribe for future videos. If you followed this far, you obviously care about providing a good experience for your users, and that’s the most important thing! Keep on working hard, and good luck!

We’re finally live with Beast Boxing 3D! Get it on the App Store here! It’s been a long time coming, but we’re excited to get Beast Boxing in everyone’s hands, and to commemorate that, we’re releasing this background poster image from the game for your home screen.

Sized perfectly for iPhone and Retina backgrounds – enjoy!

Poster for non-Retina displays

For Retina displays

Khang Le is one of the most efficient and productive artists I’ve ever had the pleasure of working with. His art ain’t bad, either. ;) Let’s take a look at Khang’s concept art process for one of the characters in the game, and see a set of screengrabs from his 3D modeling process as well!

Darbech, Final Story Portrait

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!