Monthly Archives: May 2014

Icon Sizes

Posted on by
Reply

Yikes, we’re now up to 20 unique icon sizes for a full cross-platform universal build! It wouldn’t be so bad if it weren’t for the fact that icons, in particular, tend to go through a lot of redesign. Sooner or later, most indie developers start looking for some automated tool to generate all the various sizes from a single high-resolution master. And there are plenty of options to choose from for that automation.

(You DO have a high-resolution master, right?? 1024×1024, or more.)

I’ll discuss Adobe Illustrator/Photoshop here, but I think the same concepts will apply to other tool combinations (such as Inkscape/GIMP, for example). And let’s assume your source document is in vector format, because it gives us an additional rasterizing step to consider.

First, unless your artwork is very simple (or you’re just not very discriminating), a “save for web” straight from your vector package probably won’t produce optimal results, particularly at the lowest resolutions. Illustrator, for example, will tend to make things “overly bold” at low resolutions, so fine lines and other details may bleed into others nearby. You’ll likely get better results if you drop it into Photoshop at full resolution for the rasterizing, then downsample from there using either Photoshop itself, or some other tool of your choice. (Though much of this is subjective – for certain images you may actually prefer the artifacts from a certain tool path.)

So, let’s assume we’ve rasterized at full-resolution, we next need to consider resampling/downsizing. I’ll use the current working icon of Eggheadz Bounce as my test case:
icon comparison side-by-side
Here’s our example, using a 1024×1024 master, targetting 72×72. The images were produced as follows:

  • a “save for web” straight from Adobe Illustrator
  • fullsize rasterize in Photoshop downsized bicubic
  • fullsize rasterize in Photoshop downsized bicubic sharper
  • fullsize rasterize in Photoshop, downsized with ImageMagick using ‘catrom’ filter, strongly unsharp-ed
  • via makeappicon.com
  • via resizeicon.com

The last two are just to illustrate a couple (of the many) online tools that you might find. Note that some online tools might exhibit problems, like not preserving transparancy, and most (that I’ve found) produce results that are just a bit soft for my tastes.

I suppose to a non-discriminating eye all of the above icons might look about the same — and I’ll admit that they do, to a degree. But there are subtle differences in sharpness that can be critical in improving readability on small devices. (if stacked on top of each other, and toggled A/B, the differences are more apparent than as presented here side-by-side)

(Check the ‘space’ between the eye-outline and the eye-brows, that’s a good place to look for the differences)

For my tastes, it’s still hard to beat Photoshop Bicubic Sharper. Though in fairness to ImageMagick (http://imagemagick.com/) there are a dozen different filters, and endless combinations of other possible effects (notably unsharp, but also windowing functions, linear vs perceptual colorspaces, etc, on and on), so there is a lot of potential there.

This post is just to share some initial comments/experiences, fwiw. Perhaps in a later post, if there’s any interest, I’ll post my Photoshop and/or ImageMagick scripts (no great rush though, as many others have posted similar scripts, easily found if you search for them).

[edit] Also wanted to mention another online tool: http://icon.angrymarmot.org/ as well as a link to the post with the photoshop script.

Leftover bits = promotional opportunity

Posted on by
Reply

There was intended to be a little ‘easter egg’ (sort of a bonus feature) in the character selection screen of Eggheadz Bounce. On the rear wall would be a generative painting – one that could produce an endless variety of ‘mountainous landscapes’. (well, “endless” within certain bounds – technically, they’d all be unique, though they’d all be somewhat similar)
Eggheadz Gallery
However, it’s not going to make the final release – primarily for performance reasons. It’s too tricky trying to figure out what level of detail will work for each of the vast array of devices out there. So, rather than make any one of them suffer just for the sake of this silly easter egg, it was decided to leave it out entirely.

But all is not lost… I’ve repackaged it into a standalone ‘art app’, and will release it as a freebie promo device.

Google Play Game Network

Posted on by
Reply

GPGN is up and running! Well, actually got it wired last weekend (tweeted here) but I’ve since flushed it out a bit with a few more achievements and such.
GPGN

As with all things Android related to integration, you will again be diving out to the command-line to explore the mysteries of “keytool”. I have no intention of covering that material here (as others have already done a much better job than I ever could) but let me just say that this is just one of those necessary evils that you’ll HAVE to become familiar/comfortable with as an Android developer.

You’ll need it for creating a certificate to sign your jar… for integrating with Facebook… for Game Network.

Fortunately, GPGN just needs a “one-pass” run of keytool to get at the SHA1 of your certifificate. (unlike Facebook, that needs three passes)

If I could offer a suggestion, it would be to ignore all the “automated” scripts you’re likely to encounter that pipe one command into the next. Rather, issue one command at a time, and make sure you properly substitute in YOUR values, then redirect the output to a text file with a logical name for the result of THIS single step.

Then, if/as necessary in a multi-pass process, feed that text file into the next step, again redirecting that NEXT step to a text file named appropriately for it.

This way you’re far more likely to “notice” any problems that occur during individual steps. Plus, you’ll have all those files from the intermediate steps that something else is probably going to ask for eventually – might save you some effort.

BTW, keep your certificate and all derived products safe and backed up.

Short or tall? Aspect ratios

Posted on by
Reply

The staggering variety among mobile devices (particularly in the Android world) pose a challenge for the developer: how to properly handle all those screen sizes?

One approach is to just pick a single “native” resolution and simply stretch it to fit whatever the device happens to look like. This often doesn’t look very nice and can turn circles into ovals, squares into rectangles, etc.

Another approach is to “letterbox” your native resolution onto the device. So if the device is “taller” than your native resolution, you’d fit width and add letterboxed bars at top and bottom. (or vice versa, for landscape orientation) You can even fill that area with something other than black, and try to squeeze some UI elements onto it. But it’s usually pretty obvious when an app has “less used” edges resulting from letterboxing.

Eggheadz Bounce, Title, Aspect Ratio Comparison

Another approach is to adapt your native resolution on-the-fly to match the device’s aspect ratio. This is a bit more work, and requires more planning up front to make sure all assets will “fit together” the way they’ll need to, but I think it gives the most pleasing results.

For Eggheadz Bounce’s title screen, I took a sort of hybrid approach. It’s working with a dynamic content size, scaled to match the device, and I allow the background to stretch-to-fill, but keep all UI elements at their native scale.

Everything is then positioned in relative coordinates. The most obvious example is the central row of buttons that maintain their relative position against the stretched background.

Tap to begin

Posted on by
Reply

20140507_074840

Work continues on Eggheadz Bounce, and I really need to catch up with some “journal” work here on the blog. Lately I’ve been finding some spare moments to “dress up” some otherwise bland portions of the UI. A case in point is the “tap to begin” message at the start of a new game.

This type of message should be a “call to action”, because in effect it’s like a mini help screen – it’s letting the user know what’s expected of them right now. Often you’ll see such messages blinking, flashing, pulsing, glowing or otherwise animated, because it helps draw the players attention to them.

(Too often I download a game, press “play”, and am left wondering “ok, how do I make it go?!”. While “Bounce” isn’t a flappy-clone, and does have separate help screens, I felt that borrowing the simple start message strategy might aid the player.)

Question was: how to make it stand out? There are various “glows” and other such effects used elsewhere in the UI, so I wanted something unique for the game screen.

Enter the old-school (Commodore Amiga -era) wavy sinus text scrolly effect. Sure, it’s a bit cheesy, but I’ve tried to keep it subdued, not over-the-top, just enough to catch your eye, without being incredibly annoying. What do you think, have I succeeded?

This type of effect is quite easy to achieve, provided that you can treat your text strings as individual characters. Then it’s simply a matter of keeping some sort of running animation counter and using it as the “theta” in a set of trig calcs to determine the current offsets. For example:

-- convert frame counter into theta
-- the scaling factor will determine overall speed of the wave
local scalingFactor = 0.1
local theta = frameCounter * scalingFactor
local magnitude = 10 -- how far should the characters "wander"?
local offsetX = magnitude * math.cos(theta) -- calc the x offset
local offsetY = magnitude * math.sin(theta) -- calc the y offset
-- let's assume the "home" position in stored in centerX/centerY, then:
textObject.x = textObject.centerX + offsetX
textObject.y = textObject.centerY + offsetY