Our thoughts in real time
April 24, 2012
Jumping Back (Into) Flash
On my previous project, I was busy delving into the relatively new world of Unity game scripting as my go-to solution for dynamic content. Now I'm working on a game that has me going back into the world of Flash, so I thought I would write a brief commentary on the differences I perceive between the two frameworks as it pertains to 2D game-crafting.
This is significant, as Flash has been around so long it's become common for many rich internet applications. Most modern browsers include the latest flash player without any extra effort from the user, and it has extensive documentation and 3rd party resources. The fact that a prospective user will almost certainly have to download the beefy Unity plugin before using a Unity web-application is perhaps its most significant drawback when deciding what framework to use. If your goal is more eye-balls, Flash is simply more prevalent.
Publishing aside, Unity and Flash have some interesting differences when it comes to developing interactive content. The first difference that comes to mind is the hierarchy of classes and objects used to organize game elements. In Unity, everything starts with an abstract class called a GameObject. Lights are GameObjects, as are cubes used in level structure and localized audio sources. In the 3D editor, you can drag and drop various GameObjects into the world and arrange them as you like. Things start to get interesting when you attach one or more components to these GameObjects. Components can be anything, and are usually some customized script that dictates what behavior the GameObject will exhibit. For example, I would create a player GameObject based on certain geometric shapes. Then, I might attach to the player a 'PlayerControl' script component that dictates how it moves around the game world.
In what I'm sure is mostly a grammatical irony, my time developing Flash (using Flex) has me looking at this basic hierarchy backwards. The basic structure in Flex is actually the component, be it a Label or a TextArea or whatever. Once these components are identified and added to the stage, I can extend them in AS3 and give them behavioral functions that dictate how they interact with the user or other components. Flash in general does have the edge when dealing with pure 2D in a game setting. I was able to manipulate 2D objects in Unity just fine, but only after designing a number of custom classes and work-around techniques.
Aesthetically, the Unity editor is much more in tune with the demands of game developing. Changes are logged in real time, and you can start the simulation from any point. This is opposed to to having to start the game from scratch each time with Flash. The Flex design preview is a nice tool to set the initial conditions of the components, but does little in the way of representing interactivity in the editor, which is a shame given the long load times you have to sit through when tweaking a Flex component.
I enjoyed working with Unity, and I would recommend it to anyone who might appreciate an aesthetically different approach to developing interactive applications (games or otherwise), but its practical use might be dictated by the circumstances of your target audience.
April 18, 2012
April 09, 2012
March 28, 2012
March 25, 2012
Picking an image from your Facebook photos in iOS
Apple provides a convinient class, UIImagePickerController, that easily allows your app to display a user interface to pick an image from the photo library. There are countless apps out there that utilize this class. Since this class manages all the user interactions, end-users of the apps that use it will find consistency when picking an image from photo library. Facebook iOS app, WhatsApp text messenger, Messages and Tweetbot are just a few popular apps that leverage this class. It'd be great had Apple provided a similar class for picking a photo from a Facebook account. This is particularly helpful for apps such as WhatsApp. I use WhatsApp more than I do Messages for texting. It's fun to be able to take a picture and send it to friends and family. But at times, I wanted to send a photo from my Facebook albums and I couldn't do that directly from WhatsApp. This is when the Facebook photo picker would come in handy. I googled around and couldn't find anything that was as simple to use as UIImagePickerController. There's PhotoPicker+ but it requires creating a developer account on their site and getting an app key (what's up with that?). Furthermore, its set of classes are far from being as simple as UIImagePickerController.
I decided to create a component that does exactly the same thing as UIImagePickerController but for picking a Facebook photo. I call it FacebookPhotoPickerController. If it takes the following 3 lines to pick an image from photo library:
UIImagePickerController *imagePickerController = [[UIImagePickerController alloc] init];
imagePickerController.delegate = self;
[self presentModalViewController:imagePickerController animated:YES];
it also takes as many, if not less, number of lines to pick from Facebook albums:
FacebookPhotoPickerController *fbPicker = [[FacebookPhotoPickerController alloc] initWithDelegate:self];
[self presentModalViewController:fbPicker animated:YES];
The delegate object has to implement FacebookPhotoPickerControllerDelegate protocol. If you look closely, this protocol is very similar to UIImagePickerControllerDelegate.
FacebookPhotoPickerController encapsulates the Facebook authentication process. It uses Facebook Connect SDK to perform in-app authentication. Once authenticated, the class will display a selection of the available Facebook photo albums. Tapping on an album will bring user to a thumbnail grid view of the album's photos. This thumbnail view is a component from Three20 library. If the album contains a large number of photos, the view will not load all of them at once. Instead, it will only load a certain number at a time until user initiates to load for more. This article discusses how Three20 can handle this type of lazy loading.
To demonstrate how you can use this class, I've created a sample app called FacebookPhotoBrowser. When you run it, you'll see two buttons: Facebook Photo and a camera icon. The camera icon is to pick image from your photo library.
Tapping on Facebook Photo will bring up a UI to pick an image from your Facebook account:
Tapping on a thumbnail will initiate the download process of the fullsize image from Facebook and pass its UIImage object to the delegate object.
You can download the sample app and the source code of FacebookPhotoPickerController here. Enjoy.
March 18, 2012
March 14, 2012
March 11, 2012
Thumbnail View of a Large Number of Photos with Three20
Three20 is an open-source library for iOS applications. It provides many handy features that make your iOS development life much easier. It's used in many popular iOS apps, including Facebook. One of the features that I'd like to discuss is the photo thumbnail view. Here's a screenshot of TTCatalog app, a sample app that comes with Three20 project.
There are many blogs that talk about how to use Three20 for displaying thumbnail view. I'm not going to repeat it here. Instead, I'll talk about how you can display a large number of thumbnails with "load more" at the bottom of the list. This kind of "paging" is commonly found in apps that have to deal with a large data set. For instance, the Mail app loads 50 messages at a time. A "Load More Messages..." will appear at the bottom of the list and if tapped, the app will load additional 50.
The main view controller of this component is called TTThumbsViewController. Typically you'd subclass this class to add more customizations. This controller depends on a model that is derived from TTModel class and a class that implements TTPhotoSource protocol. Each thumbnail is of class that implements TTPhoto.
I've created a simple app for this article. Its main purpose is to display photos of a Facebook album. Here are the three main classes:
@interface MyFacebookPhotosViewController : TTThumbsViewController <TTThumbsViewControllerDelegate>
@interface FacebookPhotoSource : TTModel <TTPhotoSource, FBRequestDelegate>
@interface FacebookPhoto : NSObject <TTPhoto>
TTThumbsViewController has all the logic to display "Load more" cell at the bottom of the list. It's up to the data source to "tell" the controller if there are more data to load. So, most of our works will be in FacebookPhotoSource class.
Two important methods in TTPhotoSource that tell TTThumbsViewController if "load more" needs to be present:
- (NSInteger)numberOfPhotos {
return 100;
} - (NSInteger)maxPhotoIndex {
return _photos.count-1;
}
numberOfPhotos tells the controller the total number of thumbnails in the data set. maxPhotoIndex tells the number of thumbnails that are currently displayed. So, as long as numberOfPhotos > maxPhotoIndex, the "load more..." cell will appear.
In this example, I hardcoded numberOfPhotos to return 100. I could've called a Facebook Graph API to retrieve the number of photos in an album and used that count as the return value. But that would make the sample app more complex and harder to follow. It's definitely not the intention of this discussion.
Let's take a look at another important function:
- (void)load:(TTURLRequestCachePolicy)cachePolicy more:(BOOL)more {
_loadState = loading;
// increment page count if loading more...
if (more)
_page++;
NSString *request = [NSString stringWithFormat:@"10150146071791729/photos?limit=%d&offset=%d", NUM_PHOTOS_PER_PAGE, _page*NUM_PHOTOS_PER_PAGE];
[_facebook requestWithGraphPath:request
andDelegate:self];
}
"more" argument will be YES if the controller is trying to load data when user tapped on "load more..." cell. We keep a page counter (_page) and use it to construct a query to Facebook. Here, I hardcoded another constant: album id (10150146071791729). The Facebook Graph API to obtain list of photos in an album is https://graph.facebook.com/{album_id}/photos. It also accepts limit and offset as additional arguments.
NUM_PHOTOS_PER_PAGE is defined as 24. Obviously, it can be any arbitrary number. But I picked 24 because it's exactly divisible by 4 (number of thumbs in portrait mode) and 6 (in landscape). That way, you won't have blank columns at the last row.
Here's how the sample app looks like:
When "Load More Photos..." cell is tapped:
You can download this sample app here. Enjoy.
March 09, 2012
Clustering your data on the Map. What should you use?
Web mapping services are become more popular as more applications are required to display a considerable amount of data on a map. Applications use a map view most of the time to show single points but clusters of data are becoming more popular.
Before moving forward with any of the web mapping services, it is better to understand what the application really needs from the map provider. In this case our system needs just two features:
· Clustering data
· Showing a single marker on the map
Based on the above criteria the evaluation has been focused on the following factors:
1. Ability to cluster a huge amount of data
2. Ease of implementation
3. Available API documentation and examples/tutorials
4. Number of features provided by the map services
5. Look and feel
Ability to cluster huge amount of data
Clustering services are provided by a subset of web mapping services: Google and Bing. Because only these two services are the only ones that provide clustering, we will not discuss the other web mapping services.
Google Cluster
Below is a sample of a Google cluster map. note the different colors for different cluster densities.
Bing Cluster
Here is an example of the Bing Cluster map. Note the differences in the UI from Google.
Google Cluster Implementation
Here is the code for the Google Map Clustering solution:
function initialize() {
var myOptions = {
center: new google.maps.LatLng(0, 0),
zoom: 2,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"),myOptions);
var markers = [];
for (var i = 0; i < 30000; i++) {
var location = data.locations[i];
var latLng = new google.maps.LatLng(location.x, location.y);
var marker = new google.maps.Marker({position: latLng});
markers.push(marker);
}
var markerCluster = new MarkerClusterer(map, markers);
};
google.maps.event.addDomListener(window, 'load', initialize);
Bing Cluster implementation
The Bing implementation requires a lot of code. Because of the huge amount of lines required more bugs can occur and this will may require time for investigating, debugging and fixing bugs.
To have a better idea of what Bing javascript code looks like please refer to:
http://www.bing.com/community/site_blogs/b/maps/archive/2011/03/01/bing-maps-v7-modular-design-and-client-side-clustering.aspx
API documentation and examples/tutorials
Both Google and Bing map have well done API documentation. Google has more examples and tutorials and its community support is really active with a forum and discussion groups. Google Map API looks like the most used one as well.
Number of features provided by the map services
Either Google or Bing offers a variety of services such as different map views, zooming and the ability to save users’ locations.
To better understand the difference between those maps please refer to:
http://en.wikipedia.org/wiki/Comparison_of_web_map_services
Google is the most supported one across all browsers and offer most of the services to several countries more than what Bing does.
Conclusion
Based on my evaluation, Google wins because of its simplicity and time required for implementing the solution. Another consideration was the ability to implement the same tool on a mobile device. Both Google and Bing are very flexible and they can easily adapt their selves to mobile devices, but Google Map API is the prevalent solution for native applications on both Android and iOS.
I am not covering the pricing of these technologies. The free usage is limited in both cases.
- Google free usage corresponds to: 25,000 api calls / day 1
- Bing free usage corresponds to: 125,000 sessions (user’s sessions)/ year 2
I hope this article helps you in your selection of a map cluster solution!
Giuseppe Macrì
1. http://code.google.com/apis/maps/faq.html#usagelimits
2. http://www.microsoft.com/maps/product/licensing.aspx
February 29, 2012
February 26, 2012
In-App Facebook Authentication on iOS
The official Facebook iOS SDK provides an easy way for any iOS applications to authenticate against a Facebook account. If you follow this tutorial, you'll be able to add facebook authentication in your app in less than 15 minutes. It's that simple. Once your app has been authenticated, it will possess both access token and expiration date. These two pieces of data will be used in subsequent communication with Facebook.
From your app's user's perspective, this authentication process involves the following steps:
1. Put the app in the background
2a. If Facebook app is not installed on the iOS device, launch Safari and open Facebook login page.
2b. If Facebook app is installed, launch Facebook app.
3. Once user logged in, either Safari or Facebook app will launch your app.
These steps seem to be fairly straight-forward. It's all done by authorize method:
if (![facebook isSessionValid]) {
[facebook authorize:nil];
}
However, some may find it annoying to experience multiple app-switching. And worse, the only place that your code gets a chance to receive access token and expiration date information is at the app delegate:
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
sourceApplication:(NSString *)sourceApplication annotation:(id)annotation {
return [facebook handleOpenURL:url];
}
If you have a complex app and the part that needs Facebook authentication is buried deep inside several layers of features, it may be challenging to directly pass this authentication information. These are just a few reasons to consider Facebook authentication that doesn't involve switching of apps. Such in-app facebook authentication can be found in several popular apps, such as Flipboard and Photogene.
Fortunately, Facebook iOS SDK has already provided this type of in-app authentication. It's just not being defined publicly. If you look at the source code, in particular Facebook.h, you'll see the method signature for authorize:
- (void)authorize:(NSArray *)permissions;
authorize calls a private method, authorizeWithFBAppAuth:
- (void)authorize:(NSArray *)permissions {
self.permissions = permissions;
[self authorizeWithFBAppAuth:YES safariAuth:YES];
}
To make an in-app authentication, you can simply call authorizeWithFBAppAuth with both parameters set to NO:
[self authorizeWithFBAppAuth:NO safariAuth:NO];
One way to modify this behavior is to subclass Facebook and override the authorize method. Another way is to directly call authorizeWithFBAppAuth. Since this is not a public method, you'll get a compiler warning. To suppress the warning, you can call it thru performSelector:
if ([_facebook respondsToSelector:@selector(authorizeWithFBAppAuth:safariAuth:)])
[_facebook performSelector:@selector(authorizeWithFBAppAuth:safariAuth:) withObject:NO withObject:NO];
Here's the screenshot of Facebook authorization dialog within an app:
February 22, 2012
February 09, 2012
A Quick Reference on Box-Shadows
Every few months I come across the need to add shadows to frontends, and it seems each time I have to go back and look up how these things work. I always take to the internet for a brush up on box shadows, but I seem to find more information than I'm looking for - I just want a quick cheat sheet, not the War and Peace of box-shadowing. So here's the cheat sheet I'll be using from now on to create the shadows I need.
The first thing to note is that for backwards and cross-browser support you'll need to write your box shadow css three times. Annoying! But its just a matter of writing the same css with different prefixes. Here's what it will look like:
-moz-box-shadow: 10px 5px 5px #888; -webkit-box-shadow: 10px 5px 5px #888; box-shadow: 10px 5px 5px #888;
Here's the CSS3 specification for box-shadow:
box-shadow: none |[, ] = inset? && [ (2,4)] && color
What? Lets break this down a bit.
First of all, the box-shadow specification tells us that we can have no shadow, one shadow, or a series of comma separated shadows.
Next we come to the shadow specification. First we have 'inset'. Inset is optional, so unless you specify inset, your shadows will always be offset from the element.
The next part (and this is where you'll do the bulk of your work) is the length. I always have trouble remembering this part of this definition - I know its a combination of 2-4 numbers, but what do the numbers refer to? Writing it out like this will help me remember it better:
length = horizontal offset, vertical offset, blur radius(optional), spread distance(optional)
or maybe:
length = HVBS
Someone more clever than me could come up with a little mnemonic device for this. Like, "Happy Valentine's, Big Sister" or "How Very Brilliant, Sartre"... I'll keep working on that bit.
The first two numbers are the required parameters, horizontal offset and vertical offset. Like it says in the names, these parameters define how far your shadow is offset from the original element. For horizontal offset, a positive number moves the shadow to the right, a negative number moves it to the left. For vertical offset, a positive number offsets the shadow below your element, and a positive number offsets it above.
Here's how you would create a shadow that is more horizontal than vertical:
#horizontal {
-moz-box-shadow: 10px 5px 5px 5px #888;
-webkit-box-shadow: 10px 5px 5px 5px #888;
box-shadow: 10px 5px 5px 5px #888;
}
And here's a shadow thats more vertical than horizontal:
#vertical {
-moz-box-shadow: 5px 10px 5px 5px #888;
-webkit-box-shadow: 5px 10px 5px 5px #888;
box-shadow: 5px 10px 5px 5px #888;
}
The blur radius is optional but to me this is the most important part of the shadow - its what makes your shadow look 'shadowy' and not just like an offset box. The higher the blur radius, the more blurred your shadow will be.
Here's an example of a shadow with and without a blur radius:
#blur {
-moz-box-shadow: 10px 5px 5px 0px #888;
-webkit-box-shadow: 10px 5px 0px 5px #888;
box-shadow: 10px 5px 5px 0px #888;
}
#no-blur {
-moz-box-shadow: 10px 5px 0px 0px #888;
-webkit-box-shadow: 10px 5px 0px 0px #888;
box-shadow: 10px 5px 0px 0px #888;
}
The spread distance is another optional parameter. Spread distance refers to the size of the shadow itself. A shadow with no spread distance will be the same size as the original element, a shadow with a positive spread distance will be larger, and a shadow with a negative spread will be smaller than the original element. To demonstrate this, here's a shadow without offset, but with spread distance:
#spread {
-moz-box-shadow: 0px 0px 5px 10px #888;
-webkit-box-shadow: 0px 0px 5px 10px #888;
box-shadow: 0px 0px 5px 10px #888;
}
#no-spread {
-moz-box-shadow: 0px 0px 5px 0px #888;
-webkit-box-shadow: 0px 0px 5px 0px #888;
box-shadow: 0px 0px 5px 0px #888;
}
The final part of the shadow specification is for the color. Since this is a cheat sheet about shadows, I'm going to presume you already know how to specify a color.
The specification allows you to combine shadows to create different effects. One of the things that it took me a while to figure out is how to add a shadow on only three sides of a element. Here's where adding multiple shadows to an element comes into play - in order to add shadow to three sides, we actually add three separate shadows, one for each side.
Below I've broken down exactly how each side is constructed, as well as the final product. Here you can also see I've added a negative spread distance to the shadow, so that its a little bit smaller than the element its shadowing.
#shadow-bottom {
-moz-box-shadow: 0px 7px 5px -5px blue;
-webkit-box-shadow: 0px 7px 5px -5px blue;
box-shadow: 0px 7px 5px -5px blue;
}
#shadow-right {
-moz-box-shadow: 7px 0px 5px -5px red;
-webkit-box-shadow: 7px 0px 5px -5px red;
box-shadow: 7px 0px 5px -5px red;
}
#shadow-left {
-moz-box-shadow: -7px 0px 5px -5px green;
-webkit-box-shadow: -7px 0px 5px -5px green;
box-shadow: -7px 0px 5px -5px green;
}
#shadow-three-sides {
-moz-box-shadow: 0px 7px 5px -2px blue, 7px 0px 5px -2px red, -7px 0px 5px -2px green;
-webkit-box-shadow: 0px 7px 5px -2px blue, 7px 0px 5px -2px red, -7px 0px 5px -2px green;
box-shadow: 0px 7px 5px -2px blue, 7px 0px 5px -2px red, -7px 0px 5px -2px green;
}
I hope other developers find this guide useful - give me a few months to forget and I'm sure I'll be referring back to it myself!
For more information about box-shadows I recommend:
