Creating UI Atlases in Photoshop Automagically

A little over a year ago I was working on a game engine for a successful toy company. The project never ended up being finished (long, nasty story which I’ll happily tell over beers), but one of the interesting things I did for this project was build a Photoshop-to-Unity automatic UI workflow. The basic idea was:

  1. Create UI layout in Photoshop, with one “root level” layer or layer group corresponding to a control.
  2. Name the groups according to a fairly complicated naming convention (which encapsulated both behavior and functionality, e.g. how a button might change its appearance when hovered or clicked and what clicking it would do).
  3. Press a button.
  4. Select a target folder (which could be inside a Unity project’s “Resources” folder, of course).
  5. And point a script at the folder.

This worked amazingly well and allowed me to adjust to changing client requirements (e.g. random UI redesigns) very rapidly. But along the way I decided there were significant design issues with the concept, one of them being that the images needed to be texture-atlases (b) for performance reasons, but more importantly (a) because you needed to adjust import settings for each image (you can’t even select multiple images and change their import settings all at once — maybe this is fixed in Unity 4).

Another obvious problem was the embedding of behavior in names — it was convenient if you got it right the first time, but a serious pain in the ass for iterative development (either change the name in Photoshop and re-export everything or change the name in Photoshop and then edit the metadata file, and… yuck).

Anyway, I’ve had the “perfect” successor bouncing around in my head for a while and then the other day it struck me that someone probably has written a Photoshop image atlas tool already, and I might be able to rip that off and integrate it with my script.

Turns out that (a) someone has written an image atlas tool for Photoshop and (b) that the key component of that tool was a rectangle packer someone else (sadly the link is defunct) had written, implementing an algorithm documented here.

So that’s what I spent New Year’s Eve doing, and the result — Layer Group Atlas — is now availble on github.

Screen Shot 2013-01-01 at 7.00.46 PM

For the more visually-minded, you start with a UI design in Photoshop. (Stuff can overlap, you can have multiple states set up for controls, etc.) The key thing is each “root level” group/layer corresponds to an image in the final atlas (and yes, transparency/alpha will be supported, if a group/layer’s name starts with a period then it is ignored (as per UNIX “invisible files”) while a group/layer with an underscore will only have its metadata exported.

Screen Shot 2013-01-01 at 7.02.47 PM

For every layer (other than those which were ignored) metadata about the layer is stored in a JSON file. (One of the reasons I didn’t take this approach with my original tool was the lack of solid JSON support in Unity. I — cough — addressed that with another little project over the holiday break.) The JSON data is intended to be sufficient to rebuild the original Photoshop layout from the atlas, so it includes both the information as to where each element is in the atlas, but where it was in the original layout.

Screen Shot 2013-01-01 at 7.01.36 PM

Finally, the script creates and saves the atlas itself (as a PNG file, of course).

Aside from the CSS sprite support I mention in the comments in a TODO — an obvious thing for this tool to be able to do would be to export a bunch of CSS styles allowing the images in the atlas to be used as CSS sprites — there’s one more missing thing: a Unity UI library that consumes the JSON/atlas combination and produces a UI.

That’s my project for tonight.

Nexus 7

Nexus 7, iPhone 4, and Kindle Fire
Nexus 7, iPhone 4, and Kindle Fire

My Nexus 7 (16GB) showed up yesterday — two business days after I ordered it. Shortly after activation I received my $25 of Google Play credit which kind of nullified the non-free shipping (insofar as $25 Google Play credit can be considered to be worth $25).

Cutting to the chase: I like it. Overall, I like it better than the (nearly one year old) Kindle Fire. (I like the Kindle Fire a lot more now than when I got it because of significant improvements to the OS, including password protection for purchases.)

My wife and I recently changed jobs, as a result of which we both had to give up employer-provided iPad 2s, and we’re now using our old iPads when the girls let us. So the contrast in performance between the iPads and the newer Android (ish) devices couldn’t be made more stark, and by-and-large it’s not terribly stark. In flat out performance (e.g. loading complex web pages) the newer devices are noticeably faster, but in general use the iPads are more fluid and pleasant, which seems to indicate to me that there are fundamental architectural issues in Android which are never going to be fully addressed (much as Flash sucked in ways Adobe simply couldn’t fix).

Seven Inches

I find both the Kindle Fire and the Nexus 7 to be totally usable for reading, web surfing, and watching video. If anything, I would suggest they are — overall — slightly superior devices to the iPad for those purposes for the simple reason that smaller size, lower weight, and better performance trump display size.

As soon as it comes to use as a computer substitute, the iPad simply wins. I have bought Sketchbook for all three devices (I have the cheaper phone-centric version on the Kindle Fire). I am a huge sketchbook pro user and I find the 7″ version to be frustrating at best (at least the Kindle OS has been improved such that it’s not horribly jerky any more).

Android v. iOS

As alluded to before, based on the jerkiness of Android 4.1.1 (insert dessert name) on the Nexus 7, Android’s UI/graphics subsystem is significantly behind iOS and it’s not going to catch up. But aside from the niceties of UX animation, I’m not sure that matters. If UX mattered that much, Microsoft wouldn’t have been worth more in 1999 — in inflation-adjusted terms — than Apple is today. Yes, these are different times, but give most people a 30% discount and make their UX clunkier and less tasteful and they’ll say “why yes, I will buy a new PC”. (As Don Norman mentions in the Design of Everyday Things, even his family is not immune — opting for price or features over aesthetics and usability when purchasing things like stovetops.)

Icons: one area where the Nexus 7 is seriously (but trivially) handicapped is aesthetics. While the system as a whole looks quite nice, there are some truly horrible icons. For example, the “Applications” icon — a white circle with six small white squares in it — which manages to be unintuitive, ugly, impossible to remove or replace (as far as I can tell — I’m sure it can be replaced) and locked to the center of the “dock”. There are plenty of butt-ugly icons — the music app is a pair of orange headphones that look like an escapee from Program Manager circa 1994, and the book reader is a blue book cracked open to face away from the user.

System: I find the basic Android “launchpad”, at least for the Nexus 7, to be pretty confusing. The Kindle Fire was pretty bad, but I’ve gotten used to it, and find it quite pleasant now. That said, once I figured my way around there are some ways in which the Nexus 7’s UI is markedly superior to both iOS and (as I understand it not having used it for more than a few seconds) Windows Phone 7. In essence, “widgets” (which are provided by apps) allows you to allocate a subgrid of icons in the launcher screens to be a small panel owned by an app. E.g. a mail widget might display a small inbox.

If there were one feature of the Nexus 7 / Android which I would like to see Apple copy into iOS it would be widgets. On the screen of my Nexus 7 in the photo you can make out the Gmail widget, an analog clock widget (sigh), a calendar widget, and a Flipboard widget.

Applications: iOS is ahead but the gap is definitely closing. Angry Birds — yes. Sketchbook Pro — yes. Tiny Wings — no. Grand Theft Auto Chinatown Wars — no. And, notably, when you try to search for games like Infinity Blade the name autocompletes (it’s a common search) but you get nothing but crapware. Perhaps more importantly, Pages — no. iMovie — no. Apple itself makes nicer software than Google and this has follow-on effects on the ecology that don’t change (just look at how Microsoft’s poor and inconsistent application design degrades the entire Windows ecosystem, or how Apple’s worst missteps — metal! — have been imitated slavishly).

One area where Android excels compared to iOS is its openness. I’ve got Firefox and could easily install one of a number of programming environments that don’t have any of Apple’s restrictions (e.g. Codea on the iPad won’t let you share your code with anyone else, short of email and copy-and-paste). The fact that there are no compelling development tools on Android (that I can see) is pretty telling.

Installing Apps: when I first tried to install an app I got mysterious errors which turned out to be quite common (the solution was to turn Gmail syncing off and on). Once I got it working I found installing new apps markedly quicker and more painless than achieving the same thing in iOS (and I appreciate having automatic update as an option, although I’d prefer it to be on a per-app basis). (Also — hint to Apple — I’d like to be able to delete an app instead of update it.)

Silos: why is there a Message app and a Talk app? Why is there a Gmail app and an Email app? And why a navigation app and a Maps app? If Apple’s insistence on dividing communication into silos based on the medium is annoying, Google’s rises to mystifying. At least on my iPhone I can see email from Gmail, Exchange, and vanilla POP and IMAP in one place.

3D Game Performance: I know that the Nexus 7 should be running rings around the iPad (and iPhone 4) but from my brief experiments with 3d games (I tried Pocket Legends and Space Legends, both from the same vendor, which may be telling) I found games to run more choppily on the Nexus 7. In any event the difference wasn’t marked, so I call it a wash.

Notifications: Android fans make a lot hay over the superiority of Android notifications. Thus far, I’d call it a wash (perhaps Android’s the weird little icons in the sometimes-visible “menubar” will prove to be helpful).

Content Offerings: Google’s Play store is ubiquitous but a tad confusing. On the one hand they offer you the option to get everything from magazines to apps to movies in one place, on the other hand there are a ton of different storefronts that are all slightly different. One thing I found pretty annoying is that it’s not made clear whether the “price” of a movie is purchase or rent (or what resolution is being sold to you). And, in the end, it just seems to be the same stuff sliced up differently (insert joke about Taco Bell’s menu options). In the end, Kindle, Netflix, and Hulu+ all run dandy on the Nexus 7 (I noticed Super 8 was available via Netflix streaming and watched it last night).

Conclusions

None really. I like the Nexus 7, and I think it’s a worthy competitor to the iPad in a Windows vs. Mac kind of way (i.e. it’s not as good, but has some nice things I wish the iPad had, and the price is right). Unlike the Windows vs. Mac comparison, the ecosystem is squarely on Apple’s side (for the time being, at least) — the iPad has a significantly better game selection. Notably, in key areas Android still hasn’t caught up with the original iPad. My Kindle Fire languished largely unused for about six months (I’ve been using it quite a bit since having to return my iPad 2) — I might have more definite conclusions after the rumored iPad mini ships or doesn’t ship.

Pay peanuts. Get monkeys.

Yesterday on AppleInsider, Daniel Erin Dilger shows that at least some of Android’s explosive growth is actually from Chinese forks of Android that aren’t part of the Android ecosystem (e.g. aren’t compatible with Android apps) and don’t benefit Google (e.g. don’t channel user search and maps through Google services).

Dilger, whose pro-Apple sentiments make John Gruber, say, seem like Paul Thurrott or perhaps Richard Stallman, tends to be very diligent in his research (and, like some of us, he has a long memory). His article makes three major points and backs them up well:

  • OMS is not Android.
  • Tapas is not Android.
  • Google’s handset market share includes large contributions from platforms that simply aren’t Android and don’t benefit Google.

Of the main Android vendors known here in the US (Samsung, LG, HTC, and Motorola), only HTC (coming off a very low base) has seen significant unit growth from 2009 to 2010 (Motorola and LG have actually gone backwards, and Samsung has gained sales but lost market share). The astronomical growth attributed to Android comes from handset makers in the “Other” category.

“Other” turns out to mostly comprise cell phones made in China for the Chinese market using OMS and Tapas, which are derived from Android but not interoperable and not tied to Google services. Dilger puts it thus: “Calling Tapas a version of Android is like calling Baidu a version of Google or Youku a version of YouTube.” This is perhaps a bit unfair — you could probably install vanill Android on one of these phones if you wanted to. It would probably be more similar to suggest that Chrome is a version of Safari.

It follows that Android’s alleged growth is basically fictional. The most charitable conclusion is that a minimum of 400,000 Android handset sales are in fact OMS/Tapas sales.

From looking over people’s shoulders here — and you may recall that I talked to the UPS driver who delivered my iPad and it seems like the Apple produce consumption rates here in Tuscaloosa AL seem to be a reasonable placeholder for the US as a whole — I see nearly as many Androids as iPhones in use.

Stat Counter Mobile Browser Share (late January 2011)
Stat Counter Mobile Browser Share (January 2011)

Now, bear in mind that these are raw, unweighted scores and that the vast majority of Stat Counter’s numbers come from US servers. The figures for China show UCWEB way out in front, having taken share away from Nokia (distant second) with iPhone (third) and Android (fourth) slowly climbing. The iPod touch figures in the above chart are interesting — I’m not sure if they include iPads or not. It looks like Opera got a sudden uptick for some reason which came at the cost of iPhone and iPod Touch, but that these have rebounded. I’m guessing we’re seeing some weird kind of sample bias.

Here’s the main takeaway point: Android’s share has gone from 4.5% to around 14.2% in a year. But supposedly 6-8x as many Android devices have been sold (and the existing installed base was small), so where are all these phones? The fact that Android mobile browser share has grown so much (without the help of China, where measured Android usage is still tiny) suggests that Dilger is reading too much into the Chinese component of “other”. On the other hand, if a huge proportion of Android cell phones were sold in the last twelve months, why has Android market share less than tripled?

I suggest that there’s a huge unmeasured factor here: the number of Android cell phones returned or exchanged. How many Android users are on their third or fourth phones? Given the rate of release of new Android models and the ability of consumers to return phones, pay a restocking fee, and get a brand new phone, I would suspect that a lot of phones get bought, activated, and then exchanged for a new phone. This is probably compounded by the fact that most Android phones are presented in Best Buy, etc., as inert plastic bricks. The end-user doesn’t find out how clunky the phone is until he/she has had it a day or two. I’d played with several iPhones for a couple of hours before I decided to buy.

Samsung and Microsoft tout “units shipped”.

Google touts “activations”.

You pay peanuts, you get monkeys. (I believe that’s from Guy Kawasaki.)

Apple is Doomed

iPhone 4's "flawed" antenna design
iPhone 4's "flawed" antenna design

I’ve now had an iPhone 4 for about a month (as you no doubt recall, I queued for a product on launch day for the first time in my life) and my (apparently) free bumper case is in the mail (it’s in Netherlands orange — so much for my plans to bask in reflected glory).

A friend of mine used to joke that if Microsoft ever released a version of Word that actually worked it would go out of business. Word is the very heart of Microsoft’s revenue stream: people buy PCs (and thus Windows) to run Word, not the other way around. People upgrade their PCs to run newer versions of Word they hope might address their current problems with Word. So it follows that once people have a version of Word they’re happy with, Microsoft would be in big trouble.

Word hasn’t become a perfect product, but it’s good enough and Microsoft’s record of improving it is bad enough that no-one feels very compelled to upgrade. But Microsoft isn’t in trouble. The fact is that a lot of computers are out there and they die fairly often, so just based on the need to maintain the fleet, Microsoft will make money for a long, long time, but its days of giddy expansion are behind it. It’s gone from being the phone company of the late 19th century (rapaciously devouring competitors) to being the phone company of the 1950s (fat and happy and utterly dominant).

The iPhone 4 just works. Forget the baloney about its “flawed antenna design” — no-one who has one cares. It has awesome battery life, runs as fast as an iPad, is a better camera than a point-and-shoot (except for lacking optical zoom), feels like a piece of jewellery in your hands, and is rock solid (yeah you can smash one if you drop it on concrete). And here’s the kicker — it’s price competitive with its shoddy plastic rivals that run “free” open source software (developed by an advertising company to spy on its customers and deliver ads to them). All this, and Apple’s margins are almost certainly higher than its rivals’, which means that in a race to the bottom, Apple won’t bother competing.

It follows that Apple is doomed. The original iPhone was a great idea for a device, crippled by lousy battery life and a slow CPU, that became enormously successful in chief because its rivals were so incredibly worse (kind of like Word vs. Wordperfect). Of course, what Apple is doomed to is becoming a fat happy complacent company raking in cash for generations.

I hope the title of my post drives down Apple’s stock price a little bit further, but I’m not holding my breath.

Life is too short for free crap

One of the lessons I’ve been a bit slow to learn is that waiting for free is expensive. It can be infinitely expensive.

3d

Here’s how I learned it: 3d software. I love 3d, but really I’m a bit of a dabbler. Back when I first got into 3d there was nothing terribly good available for free, so I ended up paying a lot of money for things like Strata 3d, Form*Z, ElectricImage, 3d Studio Max, Alias Sketch, and so on. I’d sunk a lot of money, probably over $20,000, into 3d software in about ten years — a lot of money for a hobby, but hey I was single, earning a ton of money, and it was all tax-deductible. Even so, I started baulking at the prices when 3ds max started getting revved every year or so with $1000+ upgrades — I stopped upgrading my software and for a while I coasted… but eventually it got too out-of-date and incompatible.

It was around then that I got into Blender (which is free). I couldn’t get my head around Blender’s UI, so I did as much as possible in other packages, like Wings3D and Silo, only ducking into Blender for lighting and rendering. I got to like Blender, despite its flaws, and lately it has started promising to be truly competitive with commercial packages, even in usability.

But it’s been over five years since I started working with Blender and I’m still not very comfortable in it (there are very few software packages I use that I don’t feel comfortable, indeed expert, with, so it’s pretty amazing to fumble my way around a program I’ve been using for five years). And it looks like being a while before Blender 2.5 is really useful (right now, it won’t import my Blender 2.49b animations). If I had been depending on my 3d work for a living, there is no way I would put up with Blender.

Indeed, when I started doing some serious 3d work, I ended up buying several packages and — in pure productivity terms — they each paid for themselves within a few days.

Life is short. If I think I might have some talent as a 3d artist, what’s the cost of spending extra time figuring out how to use needlessly difficult software? And what’s the cost of waiting to start using a product that promises to be awesome some time in the future?

Android

Tim Bray has very publicly joined Google’s ranks with the express purpose of killing the iPhone. He is quoted as saying:

The iPhone vision of the mobile Internet’s future omits controversy, sex, and freedom, but includes strict limits on who can know what and who can say what. It’s a sterile Disney-fied walled garden surrounded by sharp-toothed lawyers. The people who create the apps serve at the landlord’s pleasure and fear his anger.

There’s more of this vitriol, but I think that gives you a pretty good idea. Tim Bray certainly deserves a bit of respect for his many achievements, but this is just silly.

You know what I really want for my phone? A third-party task manager to kill runaway background apps.

The big difference between Apple and Google is that Apple has always had a more holistic view of “the user experience” than Google (or pretty much any other company). Apple wants to make sure users have lots of software to choose, and they’d prefer it to be good. They want to developers to make lots of money, but adhere to standards. (Standards they’ve never been able to get most developers to stick to on their “open” platforms.) They want a great experience for everyone, but there are tradeoffs involved. Sometimes, making things better for users means making life difficult for developers.

Perhaps the best example of this is Apple’s approach to DRM. They put in just enough to please content producers, and so little that it has almost no material effect on end-users. Do you know anyone who has had serious problems with Apple’s DRM? Ah yes, a sterile walled garden guarded by vicious lawyers — which makes musicians money and consumers happy.

Google simply doesn’t care. It wants cell phones to have decent web browsers in them. That’s basically it. It doesn’t care if people like their cell phones, or if developers make money producing software for their cellphones, or if cell phone companies sell users phones with outdated software, or if carriers force users to pay for “free” features. It makes almost no effort to force cellphones to be upgradeable, or adhere to minimal quality standards, or be interoperable. As far as Google is concerned, once you’ve bought your Android phone and can click on its ads its work is done.

But hey, it’s “free” — and, you know, if your time is worthless then enjoy.