Traversing the road to success.

Archive for the ‘Cocoa’ Category

How to build Glass Buttons in iPhone programmatically

Tired of the default iOS buttons? Yes, we too. Don’t want to spend hours of graphical design just to put a new button style? Nah, we neither.

About a year ago, Erica Sadun posted how to use the undocumented UIGlassButtons from iOS to generate a shinny button, and then copy it to be used as an image in your real buttons. The post is still accessible here: http://www.tuaw.com/2010/02/19/iphone-devsugar-create-shiny-buttons-easily/

But, what if you could avoid the pain of generating each button also and just select the color of the button on your code? We thought it wouldn’t be too hard to do it, and Juani (our star programmer) did it.

I just compiled his code in a project that will demonstrate how to use these buttons. The CrystalButton class is just a subclass of UIButton so all you have to do is use them like normal buttons (even in the Interface Builder) but be aware that now you have a new property to set: the tint color of the button.

@property (nonatomic, retain) UIColor * tintColor;

Without further delay, here is the CrystalButton sample: http://dl.dropbox.com/u/14713330/CrystalButtonsSample.zip

Play with it. Enjoy it. Tell us what you think.

– Rula.

Advertisements

How to emulate anti-aliasing in OpenGL ES 1.1

So, you are building a 3D game. Everything looks somehow fine while things are moving, but then you take a screenshot to upload it to iTunes and: the horror! You realize the awful truth. Some texture borders seems crappy and pixelated.

Oh, you forgot to turn on the anti-aliasing. That’s easy to solve. Except that… wait, there is no anti-aliasing in OpenGL ES 1.1!  Damn!

Well, we’ve been there too. While we were porting Cube X Words to the iPad, the 3D dice that looked awesome in Mac OS, looked just like a BMP drawn in MS Paint in the iPad. So we did what every self-respecting developer does first: we googled for an answer, but alas!, we found none…

How to solve that? The hard way: mess with everything you’ve done in order to draw a 4X image and then scale it down. But, but… stretching a texture to 4X and then down looks bad, I have to re-do all my textures!  It sometimes works, it sometimes doesn’t, it surely hurts the performance and may end up looking like crap again…

By accident, we found an easier way. It involves a bit of modification to the textures and another bit to the code.

We found out that if you leave a couple of transparent pixels outside of your texture, when the projection is blended, it kind of anti-aliases the texture borders (since whenever OpenGL calculates the pixel’s color value, it mixes the color with the transparent part). So, voila! We just had to give our textures a bigger canvas, and make the sprites bigger accordingly. Just like this:

It worked like a charm. You can check it out in this screenshot. See that the rotated E’s border looks just fine.

Well, I hope this helps you too.

– Rula.

Tag Cloud