The good news is that there is a tool for this! You can easily get a visual readout of all of the layers in your app and their blending. Here is an example:

The red areas are being blended, whereas the green areas are totally opaque, giving the best performance.

Here’s how to set it up:

Debug Mode On-Device

Open up the Instruments tool, and select an iPhone or iPod touch as the applicable device, then add a new Core Animation instrument.

You’ll then need to show Detail (View > Detail, or the button in the bottom bar). Then there is a checkbox for “Color blended layers.” This is what you want.

Your iPhone or iPod Touch should now switch into red-green mode. This setting is persistent, so you can detach your phone and use it now. To disable, attach to Instruments again and uncheck the box or restart the phone.

Debug Mode in Simulator

Turns out, there is an easier way! You can do all of this fun in the simulator. Just launch it with the CA_COLOR_OPAQUE environment variable set:

CA_COLOR_OPAQUE=1 /Developer/Platforms/iPhoneSimulator.platform/Developer/Applications/iPhone\ Simulator.app/Contents/MacOS/iPhone\ Simulator

And, boom! You can now run your apps as usual using Xcode and they’ll show up in the simulator with color blended layers enabled. To disable it, just quit and relaunch Simulator.

When I first saw the video on the Classics website, I was stunned. Here’s a frame from their demo video:

Screen capture from the intro video on Classics. Comments are mine.

The 3d effect that accompanies turning a page is a new effect unlike anything I’d seen from a 3rd party developer. The text on the page seemed to be written on a 3d-object that bent and distorted as you turned the page, simultaneously causing a soft shadow to be cast on the page below. Wow.

It seemed like it would require a lot of work, perhaps making the page a 3d object and distorting it à la the built-in “Map Curl” effect (present but hidden in the 3rd-party accessible frameworks). I began to think about how I’d implement such an effect.

To get the page ripple effect, throw in some OpenGL ES, code some mesh distortion animation, and figure out how to blend it with the rest of the interface without hurting performance. Hmm…

…Then, there’s the difficulty of getting an image from text on the phone. The frameworks are pretty tricky in this regard. The main pathway for text rendering on the iPhone is WebKit. But you can’t easily(1) get an image from a WebKit view, and you can’t insert a WebKit view into an OpenGL texture.

When I finally got a chance to download the App, I was overall very happy with it, though I had to turn off the page-turning sound immediately. This isn’t a review, though, so *moving along*, I’ll skip to a closer examination of the page-flip effect.

Taking a closer look, some things become clearer.

When the page is flipping, it has a soft appearance that looks very fishy. Hmm. Then it hit me: they’re cheating! Caught them in un-wholesome, outright cheating. No 3d-rendering, Open GL, or any of that monkey business. Just a pre-rendered sequence of images. Oh, and the text isn’t even being transformed in 3d; it’s just a simple horizontal scaling, that, in combination with animated background, gives the impression that the entire page is being distorted.

That still leaves the mystery of text rendering, and for that, we’ll have to delve into the application bundle. Using the technique from my last post, I opened the bundle and converted all of the PNGs.

The flip animation PNGs, in all of their glory.

Ah-ha, so that confirms our suspicion about the flip animation being just a sequence of images. One thing that annoys me about the animation is confirmed in the image. There is significant color banding that can be quite distracting. By opening the PNG, we can see that this is not due to the iPhone’s screen, but due to the original image. I adjusted the image of one frame to remove this issue by blurring the center of the image and adding some slight noise.

 

However, lest you think that the authors of Classics are just trying to screw with your designer sense, I did notice that the adjusted image compressed to 40KB with pngcrush -iphone vs. ~20KB for the original file. Thus, it’s possible that the effect wouldn’t have worked with larger images. Nonetheless, a little noise can go a long way in terms of obscuring color banding. The softness in the images is coming from their size being reduced, presumably to conserve processor power and memory bandwidth.

 
Now, let’s figure out how Classics is doing its text rendering. Note the .classic folders which seem to contain the books themselves. When we open them up, they’re full of…

Holy Adobe!

Yup, those are PDFs. So that explains how they got the image to do the animation. Unlike the HTML/WebKit rendering on the iPhone, there does exist a simple way to get an image from a PDF page. Also, they get lots of typographic control. Metadata says they were created by Phillip Ryu in Pages.

The Info.plist file just encodes information like the title and the names of the chapters in the book. Well, that’s about all that’s interesting in the App bundle.

(1) Okay, so I did find a way to do it, but it’s not pretty. You can poke around in the sublayers of a UIWebKitView and find some that have useful CGImages as contents, but it makes a lot of assumptions about the internals of the frameworks and thus could break in the future.

I assume you have at least a little experience with the Terminal and that you’re running Mac OS X 10.5.
Here’s how to take apart an iPhone app and look at its resources:

1. Right-click the application icon in iTunes > select “Show in Finder”
2. Copy the .ipa file to a new location
3. Change the file extension to .zip
4. Unarchive the zip, and you’ll get a directory of files
5. Take the App bundle from the “Payload” directory and use Get Info to remove the .app extension

Okay, now you can see all of the resources in the App bundle, but if you want to view any PNGs, you’re still out of luck. In the build process for an iPhone app, Xcode goes through and converts any PNGs into a special format. To change them back to standard PNGs that you can open in Preview or other apps, you’ll need to normalize your PNGs. I decided to go with the Python-based code for simplicity. The following assumes you use it as well:

1. Save the python code to somewhere convenient
2. Open a Terminal window
3. cd into the application directory (the former .app bundle), as the script will normalize all PNGs in the current working directory or its subdirectories.
4. Type “python <path to python script>”
5. There will be a prompt; type “Y” for yes and hit enter. The script will now convert your PNGs!

This process can be useful if you’re curious about how some app works; sometimes you can get a good idea just from looking at its resources.

In a future post, I’ll detail some of my observations from peeking into other developers’ work.

Us pdxers developed an app to procedurally generate wallpaper images.

I presented it, but the presentation was difficult as I couldn’t see the audience or hear anything and we had to try countless things to get Adobe Connect to work.

We ended up with “best satellite app” for our effort.

Other winners are listed here.

[UPDATE: added screenshots]
[UPDATE: added result]

If you’re interested in beta testing, I suggest attending.

I redesigned the webpage with cues from Apple and the current status quo among Mac and iPhone developers to inform my design style. Simplicity, materiality (textured metal), space, and shadow are the key visual concepts.

As I plan to have actual paying customers, I’m going to make sure it renders nicely in IE 6 & 7 for a change. I’ll go find a windows machine to test on (note: yes, if I’m making a web page for a client I do make sure of this too). I figure that there will be a decent percentage of windows users who will be interested in my iPhone software and I wouldn’t want to leave them out in the cold for a good experience getting support or more information (it would also be nice if they bought my software).

The first page to go up is the blog because it doesn’t contain spoilers about Propagate (yet). Soon, the front page and other stuff will follow.

Yay / eep, time to start beating the elves to get them to code faster so I’ll have Propagate ready by then!

[UPDATE: heh, looks like propagate took a bit longer than expected… but hey, it's going to rock, so there.]

I wonder if The Nonist’s posting about The Graphis annual ‘57–’58 had anything to do with it.

Tetracyts from brew on Vimeo.

First item, I ported yellowtail to the iPhone SDK. Was ok, though OpenGL ES seems to lack GL_QUADS, which is annoying, given the way the program is written. Gar, I should have ported my recode instead of the version I had based on the original code. Anyway, it works at the moment; as I don’t have an API key, I’ll have to wait for performance data until the SDK goes public….

Next, learning the other parts of the api, coding back-end stuff for various projects….

I heart QC. Using the plugin I posted before with zoom blur. Scale down before applying blur for decent performance.