Kongregate Button & Custom Panel Assets

The Kongregate Button should be placed somewhere in your UI. It’s the users primary access to their Kongregate account. This is where they will login or register, access forums, feedback/support, as well as several other Kongregate features. The button should display a count icon when the user has un-viewed Kongregate Notifications. Notifications occur when the user receives a private message or some other event happens that the user may address through the Kongregate panel. For example see Endless Boss Fight with Notification Count.

The Kongregate Button

The code samples below include where you may find assets to use for the Kongregate button. Work with your producer if you need these adjusted to better fit the style of your game. You want to display or enable this button when you receive the Kongregate API READY event. The handler for this button should invoke MobileServices.openKongregateWindow() (See API Docs for: Android, iOS, and Unity]

Access Notification Count

Use KongregateServices.getNotificationCount() to access the current unread Kongregate notification count. You want to retrieve this count and update the button UI when you receive either the USER_CHANGED or the new NOTIFICATION_COUNT_UPDATED event.

Notification Icon Assets

For iOS, Android, and Unity versions of the SDK, the assets for the button and notification count icon are included as a set of PNGs. This is for your convenience. The SDK does not use the assets directly, and you are free to repackage these assets to fit your pipeline.

Guild Chat Notification

If your game supports the Kongregate Guild API and Guild Chat, you may use this API to determine if the active user has unread Guild Chat Messages.

Use KongregateServices.HasUnreadGuildMessages to determine whether the user has unread Guild messages. Like the notification count, you want to retrieve this value when either the USER_CHANGED or the NOTIFICATION_COUNT_UPDATED events are fired.

When the user has guild chat, the game should render a blue circle over a Guild Chat Button or provide some other visual cue to indicate the user has unread messages. You may wire the button to open the K panel directly to Guild chat with:

KongregateAPI.GetAPI().Mobile.OpenKongregateWindow(Mobile.TARGET_GUILD_CHAT);
iOS Example

On iOS, the assets are included with the iOS bundle in various sizes here:

// The icon image view you overlay the Kongregate Button (initialization not shown)
@property(nonatomic)UIImageView *notificationCount;

// Update the notification count icon, invoked in response to USER_CHANGED and NOTIFICATION_COUNT_UPDATED events.
-(void)updateNotificationCount {
  int count = [KongregateAPI.instance.services getNotificationCount];
  if (count > 0) {
      NSString* mainBundlePath = [[NSBundle mainBundle] resourcePath];
      NSString* frameworkBundlePath = [mainBundlePath stringByAppendingPathComponent:@"KongregateSDK.bundle"];
      NSBundle* kongBundle = [NSBundle bundleWithPath:frameworkBundlePath];
      NSString* type = (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad) ? @"ipad" : @"iphone";
      NSString* imgPath = [kongBundle pathForResource:[NSString stringWithFormat:@"notification-%@-%i", type, count] ofType:@"png"];
      UIImage *image = [[UIImage alloc] initWithContentsOfFile:imgPath];
      self.notificationCount.image = image;
  }
  self.notificationCount.hidden = count <= 0;

  // update state of unread guild messages icon (if your game supports guilds)
  if ([KongregateAPI.instance.services hasUnreadGuildMessages]) {
    // show unread guild messages icon
  } else {
    // hide unread guild messages icon
  }
}
Android Example

On Android, the assets are included in the SDK here:

Sample layout with the notification count overlaying the Kongregate Button.

<LinearLayout>

<!-- Layout for your main menu activity -->

    <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="5dp"
            >
        <com.kongregate.android.api.KongregateButton
                android:id="@+id/kong_api_button"
                android:layout_width="72dp"
                android:layout_height="72dp"
                android:src="@drawable/kongregate_button"
                />
        <ImageView
                android:id="@+id/notification_count"
                android:layout_width="25dp"
                android:layout_height="25dp"
                android:gravity="center"
                android:layout_marginTop="4dp"
                android:layout_alignRight="@+id/kong_api_button"
                android:visibility="invisible"
                android:src="@drawable/notification_1"/>
    </RelativeLayout>

<!-- more layout for your main menu activity -->

</LinearLayout>

// Method invoked in response to `USER_CHANGED` and `NOTIFICATION_COUNT_UPDATED` events.
private void updateNoficationCount() {
    int notificationCount = mAPI.services().getNotificationCount();
    ImageView notificationCountView = (ImageView) findViewById(R.id.notification_count);
    notificationCountView.setImageResource(this.getResources().getIdentifier(
            "notification_" + Math.min(notificationCount,9), "drawable", this.getPackageName()));
    notificationCountView.setVisibility(notificationCount > 0 ? View.VISIBLE : View.INVISIBLE);

    // update state of unread guild messages icon (if your game supports guilds)
    if (mAPI.services().hasUnreadGuildMessages()) {
      // show unread guild messages icon
    } else {
      // hide unread guild messages icon
    }
}
Unity Example

After importing the custom package, the notification assets will be here:

Most likely you’ll want to move these into your scene and update the image in response to the USER_CHANGED and NOTIFICATION_COUNT_UPDATED events. For completeness, the KongregateGameObject-example.cs shows a programmatic approach.

void onGUI() {
  // draw the K button
  if (GUI.Button(new Rect(10,10,100,100), mKongButtonTexture)) {
    Debug.Log ("You clicked the Kong button!");
    kongregate.Mobile.OpenKongregateWindow();
  }
  // ...and notification count texture, if set
  if (mNotificationCountTexture) {
    GUI.Label(new Rect(90,20,50,50), mNotificationCountTexture);
  }
}

void UpdateNotificationCount() {
  // Draw the notification icon, if needed. Not currently supported by native rendering
  int notificationCount = KongregateAPI.GetAPI().Services.GetNotificationCount();
  if (notificationCount > 0) {
    mNotificationCountTexture = (Texture2D) Resources.Load ("Kongregate/notification_" + Math.Min(notificationCount,9), typeof(Texture2D));
  } else {
    mNotificationCountTexture = null;
  }

  // update state of unread guild messages icon (if your game supports guilds)
  if (KongregateAPI.GetAPI().Services.HasUnreadGuildMessages()) {
    // show unread guild messages icon
  } else {
    // hide unread guild message icon
  }
}

Customized Kongregate Panel Toolbar

The toolbar on the Kongregate panel may be customized to a degree. The tilable background and logo may be overriden. To override these assets simply include assets with the following names, and they will be used in the place of the ones included with the SDK.

Android

You must also provide the drawable resource to describe how the background should be rendered. For a basic repeating tile use the following.

/res/drawable/kongregate_custom_toolbar_background.xml

<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
        android:src="@drawable/kongregate_custom_toolbar_background_image"
        android:gravity="fill_horizontal|clip_vertical"
        android:tileMode="repeat" />

iOS

Unity (Android)

Place the above files under /Assets/Plugins/Android, for example:

Unity (iOS)

Place the above files under /Assets/Plugins/iOS, for example:

Custom Panel Transitions

When the K button is pressed the Kongregate Panel will animate on screen using the default transition animations for the OS. These defaults may be overridden with the KONGREGATE_OPTION_DEFAULT_PANEL_TRANSITION (Unity KongregateAPI.Settings.DefaultPanelTransition) option. Set this to one of the PANEL_TRANISITION_* options in MobileServices to override the default behavior.

KongregateAPI.Settings.DefaultPanelTransition = Kongregate.Mobile.PANEL_TRANSITION_SLIDE_FROM_LEFT;