พัฒนาเกมบน iOS (iPhone/iPod/iPad) ตอนที่ 6 การเชื่อมต่อกับ OpenFeint

บทความนี้เป็นบทความที่ตีพิมพ์ในนิตยสาร Pantip Guide ฉบับที่ 55 (เม.ย. - มิ.ย.) โดยเป็นการสอนพัฒนาเกมบนระบบปฏิบัติการ iOS (iPhone / iPod / iPad) ซึ่งในตอนนี้จะอธิบายกล่าวถึงการเชื่อมต่อกับโซเชียลเน็ตเวิร์คเกมอย่าง OpenFeint ...

    สวัสดีท่านผู้อ่านทุกท่านครับ สำหรับในบทความตอนนี้ผมจะเขียนถึงการเชื่อมต่อกับโซเชียลเน็ตเวิร์คอย่าง OpenFeint ซึ่งนับว่าเป็นโซเชียลเน็ตเวิร์คสำหรับเกมที่ได้รับความนิยมมากพอสมควร โดย OpenFeint นี้สามารถใช้ได้ทั้งแพลตฟอร์มที่เป็น iOS และ Android โดยผู้เล่นเกมสามารถสร้าง Profile ของผู้เล่นเอง มี Leader board สำหรับเกมนั้นๆ มีการสร้างระบบการได้รับ Achievements และยังสามารถแนะนำเพื่อนผ่านทาง facebook หรือ twitter ได้อีกด้วย

    เริ่มต้นหากเราต้องการเชื่อมต่อ OpenFeint เข้ากับเกมของเรา จะต้องเข้าไปลงทะเบียนเป็นนักพัฒนาในเว็บ www.openfeint.com (ไม่เสียค่าใช้จ่าย) โดยเลือกที่ Developers ดังรูปที่ 1 และเมื่อเราลงทะเบียนเรียบร้อยแล้วถ้าเราเลือกที่เมนู Application Information เราจะได้ Product key และ Product secret ดังรูปที่ 2

รูปที่ 1 เว็บไซต์ www.openfeint.com

รูปที่ 2 Product key และ Product secret

    สมมุติในตัวอย่างนี้ให้สร้าง Leaderboard สำหรับเก็บข้อมูลคะแนนสูงสุดของผู้เล่นเกม ดังนั้นเราต้องสร้าง Leaderboard โดยจากรูปที่ 2 ด้านบนมีหัวข้อ Features ให้เลือกแล้วต่อมาเลือกหัวข้อ Leaderboards แล้วสร้าง Leaderboard ของเกมโดยการกดปุ่ม Add Leaderboard เราก็จะได้ Unique ID ของแต่ละบอร์ด

จากนั้นดาวน์โหลด SDK เพื่อใช้สำหรับพัฒนา โดยเวอร์ชันที่เสถียรล่าสุดคือ OpenFeint iOS 2.12.5 และเมื่อแตกไฟล์ออกมาจะได้โฟลเดอร์ ดังรูปที่ 3 โดยจะมีโฟลเดอร์ตัวอย่างการใช้งาน ไอคอน และ SDK ที่ใช้สำหรับพัฒนา และจะเห็นไฟล์ readme.html ซึ่งจะมีวิธีการติดตั้งและการใช้งานต่างๆ

รูปที่ 3 โฟลเดอร์ไฟล์ที่ unzip

    ขั้นตอนต่อไปเป็นการเชื่อมต่อเกมเรากับ OpenFeint ในกรณีที่มีโปรเจคเกมอยู่แล้วก็ไม่ต้องสร้างโปรเจคใหม่ แต่สมมุติในตัวอย่างนี้เราสร้างโปรเจคใหม่ใช้ชื่อว่า iOSGame06 จากนั้นให้ลากโฟลเดอร์ OpenFeint.framework ไปไว้ในโปรเจคโดยเอาไว้ที่โฟลเดอร์ Frameworks ใน Xcode ทางด้านซ้ายมือ

    จากนั้นลากไฟล์ OFResourcesxxx.bundle ไปไว้ในโปรเจค โดยเลือกไฟล์ใดไฟล์หนึ่งจาก 5 ไฟล์ ซึ่งจะแตกต่างกันในเรื่องการใช้งาน ดังนี้

OFResources_iPhone_Landscape.bundle สำหรับเกมบนไอโฟนที่เป็นแนวนอนอย่างเดียว
OFResources_iPhone_Portrait.bundle สำหรับเกมบนไอโฟนที่เป็นแนวตั้งอย่างเดียว
OFResources_iPhone_Universal.bundle สำหรับเกมบนไอโฟนที่เป็นทั้งแนวตั้งและแนวนอน
OFResources_iPad.bundle สำหรับเกมบนไอแพด
และ OFResources_Universal.bundle ใช้ได้ทุกรูปแบบข้างต้น

รูปที่ 4 นำไฟล์เข้าในโปรเจค

ขั้นตอนต่อไปให้เราเลือกที่ชื่อโปรเจคด้านซ้ายมือ และไปที่ Build Settings ให้หาพารามิเตอร์ที่ชื่อ Other Linker Flags โดยใส่ค่าเป็น -ObjC -all_load ดังรูปที่ 5

รูปที่ 5 ปรับค่าพารามิเตอร์

สำหรับ OpenFeint จำเป็นต้องใช้เฟรมเวิร์คอื่นๆ เพิ่มเติม เราจึงต้องใส่เฟรมเวิร์คที่จำเป็นเข้าไปในโปรเจค โดยเฟรมเวิร์คที่จำเป็นมีดังนี้
- AddressBook
- AddressBookUI
- CFNetwork
- CoreGraphics
- CoreLocation
- CoreText
- Foundation
- GameKit
- libsqlite3.0.dylib
- libz.1.2.3.dylib
- MapKit
- MobileCoreServices
- QuartzCore
- Security
- SystemConfiguration
- UIKit

    ในการเพิ่มเฟรมเวิร์ค สำหรับคนที่ใช้ Xcode 4 ให้เลือกที่โปรเจคด้านซ้ายมือ และด้านขวามือให้เลือกแท็บ Build Phases และในรายการให้เลือกที่ Link Binary With Libraries พอขยายออกมาจะมีปุ่ม + อยู่ด้านล่างซ้าย ดังรูปที่ 6 และให้เลือกเฟรมเวิร์คให้ครบตามข้างต้น

รูปที่ 6 การเพิ่มเฟรมเวิร์ค

ขั้นตอนต่อไปเราจะเขียนคำสั่งสำหรับการเรียกใช้งาน โดยเริ่มต้นจากสร้าง Objective-C Class ชื่อ SampleOFDelegate โดยในไฟล์ SampleOFDelegate.h ให้ใส่คำสั่งดังนี้

#pragma once

#import "OpenFeint/OpenFeintDelegate.h"

@interface SampleOFDelegate : NSObject< OpenFeintDelegate >

- (void)dashboardWillAppear;
- (void)dashboardDidAppear;
- (void)dashboardWillDisappear;
- (void)dashboardDidDisappear;
- (void)userLoggedIn:(NSString*)userId;
- (BOOL)showCustomOpenFeintApprovalScreen;

@end

และในไฟล์ SampleOFDelegate.m ให้ใส่คำสั่งดังนี้

#import "SampleOFDelegate.h"
#import "OpenFeint/OpenFeint+UserOptions.h"

@implementation SampleOFDelegate

- (void)dashboardWillAppear
{
}

- (void)dashboardDidAppear
{
}

- (void)dashboardWillDisappear
{
}

- (void)dashboardDidDisappear
{
}

- (void)offlineUserLoggedIn:(NSString*)userId
{
	NSLog(@"User logged in, but OFFLINE. UserId: %@", userId);
}

- (void)userLoggedIn:(NSString*)userId
{
	NSLog(@"User logged in. UserId: %@", userId);
}

- (BOOL)showCustomOpenFeintApprovalScreen
{
	return NO;
}

@end

สำหรับในไฟล์ AppDelegate.m ที่มีอยู่แล้วให้เพิ่มคำสั่งในเมธอด applicationWillTerminate ดังนี้

- (void)applicationWillTerminate:(UIApplication *)application {
	CCDirector *director = [CCDirector sharedDirector];
	
	[[director openGLView] removeFromSuperview];
	
	[viewController release];
	
	[window release];
	
	[director end];
	
    [[NSUserDefaults standardUserDefaults] synchronize]; // Add for OpenFeint
}

ขั้นตอนต่อไปเป็นการเรียกให้ OpenFeint แสดงผล โดยตัวอย่างนี้เป็นตัวอย่างง่ายๆ โดยจะให้ทัชที่หน้าจอแล้วเรียก OpenFeint มาแสดงผลพร้อมกับส่งค่า score ของผู้เล่นเกม โดยไปที่ HelloWorldLayer.h ให้เพิ่มคำสั่งให้เป็น ดังนี้

#import "cocos2d.h"

@class SampleOFDelegate;//Add for OpenFeint

// HelloWorldLayer
@interface HelloWorldLayer : CCLayer
{
    SampleOFDelegate *ofDelegate;//Add for OpenFeint
    UIWindow *window;//Add for OpenFeint
}

@property (nonatomic, retain) IBOutlet UIWindow *window;//Add for OpenFeint

// returns a CCScene that contains the HelloWorldLayer as the only child
+(CCScene *) scene;

@end

ไฟล์ HelloWorldLayer.m ในส่วนของ Import the interfaces ให้ใส่คำสั่งดังนี้

// Import the interfaces
#import "HelloWorldLayer.h"

#import "OpenFeint/OpenFeint.h"
#import "SampleOFDelegate.h"
#import "OpenFeint/OFHighScore.h"
#import "OpenFeint/OFLeaderboard.h"
#import "OpenFeint/OpenFeint+Dashboard.h"

และในส่วน implementation ให้ใส่คำสั่งดังนี้

// HelloWorldLayer implementation
@implementation HelloWorldLayer

@synthesize window;//Add for OpenFeint

ในการแสดงผล OpenFeint นั้นในเบื้องต้นต้องทำการปรับแต่งค่าของพารามิเตอร์ โดยจะต้องเปลี่ยนค่า Product key และ Secret key ของแต่ละคนซึ่งไม่เหมือนกัน ดังนั้นในเมธอด init ให้ใส่คำสั่งดังนี้

-(id) init
{
	// always call "super" init
	// Apple recommends to re-assign "self" with the "super" return value
	if( (self=[super init])) {
		NSDictionary* settings = [NSDictionary dictionaryWithObjectsAndKeys:
			[NSNumber numberWithInt:UIInterfaceOrientationLandscapeRight], 
			OpenFeintSettingDashboardOrientation,
			@"MyGame", OpenFeintSettingShortDisplayName,
			[NSNumber numberWithBool:YES], OpenFeintSettingEnablePushNotifications,
			[NSNumber numberWithBool:NO], OpenFeintSettingDisableUserGeneratedContent,
			[NSNumber numberWithBool:NO], OpenFeintSettingAlwaysAskForApprovalInDebug,
                                  
		#ifdef DEBUG
                                 [NSNumber numberWithInt:OFDevelopmentMode_DEVELOPMENT], OpenFeintSettingDevelopmentMode,
		#else
                                 [NSNumber numberWithInt:OFDevelopmentMode_RELEASE], OpenFeintSettingDevelopmentMode,
		#endif
                                  window, OpenFeintSettingPresentationWindow,
		#ifdef DEBUG
                                  [NSNumber numberWithInt:OFDevelopmentMode_DEVELOPMENT], OpenFeintSettingDevelopmentMode,
		#else
                                  [NSNumber numberWithInt:OFDevelopmentMode_RELEASE], OpenFeintSettingDevelopmentMode,
		#endif
                		  nil];	        
        
        ofDelegate = [SampleOFDelegate new];
        
        OFDelegatesContainer* delegates = [OFDelegatesContainer containerWithOpenFeintDelegate:ofDelegate];
        [OpenFeint initializeWithProductKey:@"ใส่ product key"
                    	andSecret:@"ใส่ secret key"
                             	andDisplayName:@"ใส่ชื่อเกม"
                                	andSettings:settings    // see OpenFeintSettings.h
                               	andDelegates:delegates]; // see OFDelegatesContainer.h
        
        self.isTouchEnabled = YES;
        }
        return self;
}

    จากนั้นสร้างเมธอด ccTouchesEnded เพื่อให้เมื่อเกิดเหตุการณ์ทัชหน้าจอแล้วให้ส่ง score ของผู้เล่น โดยในตัวอย่างนี้กำหนดค่าเป็น 600 คะแนน และพอส่งค่าก็ให้แสดงผล Leaderboard โดยในตัวอย่างนี้ ID ของ Leaderboard เป็น 908677 ซึ่งจะได้เป็นคำสั่งดังนี้

-(void)ccTouchesEnded:(NSSet *) touches withEvent:(UIEvent *) event
{
    OFHighScore *score = [[[OFHighScore alloc] initForSubmissionWithScore:600] autorelease];
    OFLeaderboard *leadboard = [[[OFLeaderboard alloc] initWithId:@"908677"] autorelease];
    [score submitTo:leadboard];
    
	[OpenFeint launchDashboardWithHighscorePage:(NSString*)@"908677"];
    
}

    เมื่อเสร็จแล้วและรันดูจะพบว่าขึ้นหน้าจอดังรูปที่ 7 จะพบว่ามีข้อความเตือนให้เราใส่ Offline configuration เพื่อใช้สำหรับการพัฒนา ตรงนี้ให้ไปดาวน์โหลดไฟล์จากเว็บ OpenFeint โดยเลือกหัวข้อ Offline Settings แล้วดาวน์โหลดไฟล์ ดังรูปที่ 8 และให้ลากไฟล์ที่ดาวน์โหลดมาไปไว้ในโปรเจคโดยลากไปไว้ในโฟลเดอร์ Supporting Files

รูปที่ 7 แสดงผล OpenFeint ขณะยังไม่มีไฟล์ Offline Settings

รูปที่ 8 ดาวน์โหลดไฟล์ Offline Settings

เป็นอันเสร็จเรียนร้อย ถ้าไม่มีอะไรผิดพลาดเมื่อเรากดรัน ก็จะได้ดังรูปที่ 9-11 จะเห็นว่ามีคะแนนของผู้เล่นเป็น 600 ซึ่งตรงกับคำสั่งที่เราส่งคะแนนสูงสุดของผู้เล่นไป

รูปที่ 9-11 แสดงผล OpenFeint

จริงๆ แล้ว OpenFeint ยังมีฟังก์ชันการใช้งานอื่นๆ อีกเพียบ เข้าใจว่าผู้อ่านคงพอศึกษาต่อเพิ่มเติมเองได้แล้วนะครับ ลองดูครับ!

มนตรี อินทโชติ