Getting AdMob ads to work with cocos2D

cocos2d for iPhone is a popular framework for building 2D games for iOS. Integrating AdMob ads into cocos2d apps has gotten significantly easier with the latest version of the framework; This blog post will show you three things to keep in mind using v0.99.5b3 or higher of the cocos2d framework. It is assumed that you already have some familiarity with cocos2d.

Initialization

Create and initialize a GADBannerView in the RootViewController class. You can put this code into a new method knowing that it will be called from the AppDelegate after the view hierarchy has been set up. This code adds to the standard banner view example in the docs.

- (void)initGADBanner {

  // NOTE:
  // Add your publisher ID here and fill in the GADAdSize constant for
  // the ad you would like to request.
  bannerView_ = [[GADBannerView alloc] initWithAdSize:kGADAdSizeBanner];
  bannerView_.adUnitID = @"PUBLISHER_ID_HERE";
  bannerView_.delegate = self;
  [bannerView_ setRootViewController:self];

  [self.view addSubview:bannerView_];
  [bannerView_ loadRequest:[self createRequest]];
  // Use the status bar orientation since we haven't signed up for
  // orientation change notifications for this class.
  [self resizeViews];
}

Performance Considerations

Notice the addSubview: in initGADBanner:. Why did we add the GADBannerView directly to the RootViewController’s hierarchy instead of the cocos2d scene’s hierarchy? cocos2d scenes are OpenGL views, whereas our GADBannerView is a UIWebView wrapped in a native UIView. OpenGL views will usually be refreshed often, whereas our GADBannerView will be mostly static. Placing our GADBannerView on top of the OpenGL view therefore can lead to a performance decrease as the device will have more drawing to do.

You can test if this performance decrease is significant for your specific project by logging the frame rate when you place the ad within the OpenGL view and outside of it. The performance cost is usually only significant when you are dealing with very complex hierarchies.

View Layout

Since we’ve decided to place our GADBannerView into the RootViewController’s view hierarchy, we also need to now make sure to resize our cocos2d view to make space for our GADBannerView. The resizeViews: in initGADBanner: is called for this purpose. The implementation for resizeViews: is below. The main OpenGL view which encompasses all of the cocos2d scenes can be grabbed using the +sharedDirector object. The code below assumes you’re going to display the ad at the top of your screen, and have a device that’s in landscape.

- (void)resizeViews: {
  // If the banner hasn't been created yet, no need for resizing views.
  if (!bannerView_) {
    return;
  }
  // If ad is not showing, no need to resize views.
  BOOL adIsShowing = [self.view.subviews containsObject:bannerView_];
  if (!adIsShowing) {
    return;
  }

  // Frame of the main RootViewController which we call the root view.
  CGRect rootViewFrame = self.view.frame;
  // Frame of the main RootViewController view that holds the cocos2d view.
  CGRect glViewFrame = [[CCDirector sharedDirector] openGLView].frame;
  CGRect bannerViewFrame = bannerView_.frame;
  CGRect frame = bannerViewFrame;
  // The updated x and y coordinates for the origin of the banner.
  CGFloat yLocation = 0.0;
  CGFloat xLocation = 0.0;

  // Move the root view underneath the ad banner.
  glViewFrame.origin.y = bannerViewFrame.size.height;
  // The superView has not had its width and height updated yet so use those
  // values for the x and y of the new origin respectively. The game is in
  // landscape.
  xLocation = (rootViewFrame.size.height -
                        bannerViewFrame.size.width) / 2.0;
 
  frame.origin = CGPointMake(xLocation, yLocation);
  bannerView_.frame = frame;


  // The super view's frame hasn't been updated so use its width
  // as the height. Assume device is in landscape.
  glViewFrame.size.height = rootViewFrame.size.width -
                                      bannerViewFrame.size.height;
  glViewFrame.size.width = rootViewFrame.size.height;

  [[CCDirector sharedDirector] openGLView].frame = glViewFrame;
}

With that, you should now see AdMob ads show up in your cocos2d application. Look out for a follow-up to this blog post where we will discuss how to handle autorotation. As always, feel free to direct any questions you have to our forum or join us for our upcoming hangout.

 - Raj Parameswaran, AdMob Team