พัฒนาเกมบน 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 ยังมีฟังก์ชันการใช้งานอื่นๆ อีกเพียบ เข้าใจว่าผู้อ่านคงพอศึกษาต่อเพิ่มเติมเองได้แล้วนะครับ ลองดูครับ!

 

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

 

Leave a Reply