How to add rewarded video ads to your SpriteKit game with Chartboost 📈

chartboost-ad

I hate ads in games. I hate them in apps. I hate them on the web. I hate them anywhere really. I’m sure you do too.

They’re annoying, they clutter the view, they obnoxiously clamour for your attention, and in app and game development they’re often an afterthought or the last thing added so they tend to feel out of place.

Unfortunately, in today’s market where nobody wants to pay even $1 for an app or game, developers are left with few options to try and gain some income from their work.

Video reward ads to me seem like a good compromise. Yes, you’re still showing the user an obnoxious ad, but you’re not shoving it in their face. When they see it, they’re ready for it and most importantly, you’re giving them the choice to view it.

So, if you’re interested in implementing this type of ad in your iOS SpriteKit game, here’s how (note: I’m using Chartboost in this example, but there are other options out there):

Go to ChartBoost’s website and create an account.

Once you’re logged in with your new account, create an App (iOS) and a Campaign. For details on how to do this, see this page.

On your Dashboard, select your app, go to App Settings, choose Basic Settings and note your App ID and App Signature:

chartboost-dashboard

Download the Charboost iOS SDK and extract it.

Create a new Xcode project -> SpriteKit game.

Drag and drop the Chartboost.framework you extracted above into your new project project.

In your project settings, go to the Build Phases tab, and under Link Binary With Libraries add the following frameworks if you don’t have them yet: UIKit, CoreGraphics, StoreKit, Foundation:

chartboost-libs

We need to create a Bridging Header because Chartboost uses Objective-C code. In Xcode still, click File -> New -> File… and select Header File. Name the file YOUR_GAME_NAME-Bridging-Header.h where YourGameName is the name of your Xcode project.

Select this new file in Xcode, and add the following:

#ifndef YourGameName_Bridging_Header_h
#define YourGameName_Bridging_Header_h

#import <UIKit/UIKit.h>
#import <Chartboost/Chartboost.h>
#import <CommonCrypto/CommonDigest.h>
#import <AdSupport/AdSupport.h>

#endif

#ifndef YourGameName_Bridging_Header_h

#define YourGameName_Bridging_Header_h

#import <UIKit/UIKit.h>

#import <Chartboost/Chartboost.h>

#import <CommonCrypto/CommonDigest.h>

#import <AdSupport/AdSupport.h>

#endif

Under your project’s Build Settings, add the name of your Bridging Header file in the Objective-C Bridging Header field:

bridingheader

In your AppDelegate.swift, add the following in your application… DidFinishLaunchingWithOptions replacing “YOUR_APP_ID” and “YOUR_APP_SIG” with the ones you noted in Step 3.

Chartboost.startWithAppId(“YOUR_APP_ID”, appSignature: “YOUR_APP_SIG”, delegate: nil)

1	Chartboost.startWithAppId(“YOUR_APP_ID”, appSignature: “YOUR_APP_SIG”, delegate: nil)

Now, in our GameScene we’re going to add a “Watch Ad” button. When the user taps on it, we’ll fetch and display a video ad. Open your GameScene.swift file and delete all the placeholder stuff in didMoveToView and touchesBegan.

In didMoveToView, let’s create a simple SKLabelNode to use as a button.

let videoButton = SKLabelNode(text:"Watch video")
videoButton.position = CGPoint(x:CGRectGetMidX(self.frame), y:CGRectGetMidY(self.frame))
videoButton.name = “videoButton”
self.addChild(videoButton)

let videoButton = SKLabelNode(text:"Watch video")

videoButton.position = CGPoint(x:CGRectGetMidX(self.frame), y:CGRectGetMidY(self.frame))

videoButton.name = “videoButton”

self.addChild(videoButton)

Now let’s make sure we’re listening for this in touchesBegan. Add the following:

override func touchesBegan(touches: Set<UITouch>, withEvent event: UIEvent?) {
  for touch in touches {
    let location = touch.locationInNode(self)
    let nodes = self.nodesAtPoint(location)
    for node in nodes {
      if let nodeName = node.name {
        if nodeName == "videoContinueButton" {
          videoButtonTapped()
        }
      }
    }
  }
}

override func touchesBegan(touches: Set<UITouch>, withEvent event: UIEvent?) {

for touch in touches {

let location = touch.locationInNode(self)

let nodes = self.nodesAtPoint(location)

for node in nodes {

if let nodeName = node.name {

if nodeName == "videoContinueButton" {

videoButtonTapped()

}

Let’s create the method that is called when our videoButton is tapped and tell Chartboost to show the video ad. Places this somewhere in GameScene.swift:

func videoButtonTapped() {
  Chartboost.showRewardedVideo(CBLocationMainMenu)
}

func videoButtonTapped() {

Chartboost.showRewardedVideo(CBLocationMainMenu)

}

Launch your app in the iOS Simulator, tap the button and you should now have an ad!

videoad2

Delegates

But how do you know when the user finished watching the ad, or when they closed it, or if the ad even displayed at all? Luckily, Chartboost offers several delegate functions to handle these things. In your GameScene.swift, add the following:

Chartboost.setDelegate(self)

1	Chartboost.setDelegate(self)

Then, just add the following delegate methods (or only the ones you’ll use) at the bottom of your GameScene.swift class:

extension GameScene: ChartboostDelegate {

  func didPrefetchVideos() {
  }

  func shouldDisplayRewardedVideo(location: String!) -> Bool {
    return true
  }

  func didDisplayRewardedVideo(location: String!) {
  }

  func didCacheRewardedVideo(location: String!) {
  }

  func didFailToLoadRewardedVideo(location: String!, withError error: CBLoadError) {
    print("Failed to load rewarded video: \(error)")
  }

  func didDismissRewardedVideo(location: String!) {
  }

  func didCloseRewardedVideo(location: String!) {
  }

  func didClickRewardedVideo(location: String!) {
  }

  func didCompleteRewardedVideo(location: String!, withReward reward: Int32) {
  }

  func willDisplayVideo(location: String!) {
  }

}

extension GameScene: ChartboostDelegate {

func didPrefetchVideos() {

}

func shouldDisplayRewardedVideo(location: String!) -> Bool {

return true

}

func didDisplayRewardedVideo(location: String!) {

}

func didCacheRewardedVideo(location: String!) {

}

func didFailToLoadRewardedVideo(location: String!, withError error: CBLoadError) {

print("Failed to load rewarded video: \(error)")

}

func didDismissRewardedVideo(location: String!) {

}

func didCloseRewardedVideo(location: String!) {

}

func didClickRewardedVideo(location: String!) {

}

func didCompleteRewardedVideo(location: String!, withReward reward: Int32) {

}

func willDisplayVideo(location: String!) {

}