Monday, March 1, 2010

Tic-Tac-Toe Update

In Chapter 9 of More iPhone Development, we showed you how to add online play to program that already used GameKit to do network communication over Bluetooth. The code in that chapter is still correct, but the appearance of the online peer picker in the game always bothered me, since it was so different from that of GameKit's peer picker:

before.png

After writing up the technique in my last blog posting, I realized that I could use the same approach to make the appearance of the online peer picker more closely match the GameKit peer picker.

I haven't gotten it pixel perfect, and the code isn't written in such a way that you can just drop it into another project and use it (though I plan to do that at some point), I though some of you might be interested in seeing my progress, as well as seeing how the dialog presented earlier can be used in more complex scenarios.

Here is the current state of things:

after.png

As you can see from the screenshot, there are some differences in the size and placement of the views, and the translucency of the button. Plus, the background image doesn't dim in my version yet. But the overall appearance is much closer, and without the benefit of a side-by-side comparison, you'd be hard pressed to notice the difference. I plan on tweaking it a little, though it may be impossible to get a pixel-perfect match without using private APIs.

You can find the current version of the TicTacToe project right here. I'll also add it to the iPhone Bits repository on Google Code when I get a chance. Be forewarned that this is still a work in progress and the code is a little sloppier than what I normally place out here. All the functionality for the new peer browser is in TicTacToeViewController rather than in its own class, where it should be.



9 comments:

Niklas said...

Biggest difference is that you forgot to round the corners off on the inside square area...

Jeff LaMarche said...

Not so much forgot as haven't figured out a good way to do it yet. I think I have to use alpha and "cut a hole" in the black box, but the table view is in front of the box. Since I use the same black box for a "waiting" dialog, I would have to swap it out before resizing the box (download the app and try it if you don't know what I'm talking about), which would mean, swapping in a new picture, moving the tableview behind it, but making sure all other UI elements are still in front after the swap and resize.

Not impossible, but a lot of work for something so subtle. If I have time, I'd like to figure it out, but this version is, at least, a lot less jarring than the original.

DadGuy said...

Hey Jeff,

I was looking at some core animation stuff the other day and saw this same topic come up. You can use core animation to do the rounded corners. I forget the exact link I was looking at, but the first hit on google looks pretty good and should do what you're looking for:
http://stackoverflow.com/questions/1106861/round-corners-on-uitableview

Since just about everything is a CALayer underneath now, I think you simply need to change the table.layer.cornerRadius property on your table. Not sure what the compatibility is for older versions of the iPhone OS though.

Thanks for all the excellent samples you provide, they have been very helpful to me. =)

Jeff LaMarche said...

DadGuy:

You know, you're right. I still haven't fully adjusted to the fact that everything on the iPhone is layer-backed. I will give that a try, and I suspect it will work.

Jeff

睡衣 said...

I love readding, and thanks for your artical. ........................................

Asif Master said...

Its nice exersize for me.Will you please create a class diagram for tic tac toe.Plz send me on pri08master@hotmail.com

JeansPilot said...

JeansPilot offers the chance to buy a large variety of men’s and women’s jeans clothing from the world famous Italian Brands.
Online jeans clothing store looks for original fashion clothing sales and clearances of worldwide known designers. We participate in fashion auctions to get the lowest possible price for Top quality Clothes, Shoes and Accessories.
Buy Jeans

SEO Services Consultants said...

Nice information, many thanks to the author. It is incomprehensible to me now, but in general, the usefulness and significance is overwhelming. Thanks again and good luck! Web Design Company

h4ns said...

What youre saying is completely true. I know that everybody must say the same thing, but I just think that you put it in a way that everyone can understand. I also love the images you put in here. They fit so well with what youre trying to say. Im sure youll reach so many people with what youve got to say.

Arsenal vs Huddersfield Town live streaming
Arsenal vs Huddersfield Town live streaming
Wolverhampton Wanderers vs Stoke City Live Streaming
Wolverhampton Wanderers vs Stoke City Live Streaming
Notts County vs Manchester City Live Streaming
Notts County vs Manchester City Live Streaming
Bologna vs AS Roma Live Streaming
Bologna vs AS Roma Live Streaming
Juventus vs Udinese Live Streaming
Juventus vs Udinese Live Streaming
Napoli vs Sampdoria Live Streaming
Napoli vs Sampdoria Live Streaming
Fulham vs Tottenham Hotspur Live Streaming
Fulham vs Tottenham Hotspur Live Streaming
AS Monaco vs Marseille Live Streaming
AS Monaco vs Marseille Live Streaming
Alajuelense vs Perez Zeledon Live Streaming
Alajuelense vs Perez Zeledon Live Streaming
Technology News | News Today | Live Streaming TV Channels