iOS Game Developer Tutorial: เงื่อนไขใน Cocos2D กับการสร้าง Game Over

หน้าจอ Game Over เช่นกันถ้ามีการจบเกมก็จะปรากฏคำว่า "You Win!”

เทคนิคการสร้างเงื่อนไขให้กับเกมด้วย Cocos2D บน iOS สำหรับแสดงหน้าจอ Game Over เมื่อศัตรูเดินมาชนตัวละครในเกมของเราอย่างง่ายก่อนหน้านี้เราได้พัฒนาแอพพลิเคชันประเภทเกมบน iOS ด้วย Cocos2D ให้ตัวละครสามารถ ยิงกระสุนใส่ศัตรูในเกมได้แล้วในบทเรียนต่อมาจะเป็นการสร้างเงื่อนไขให้เกมมีความสมบูรณ์มากขึ้นนั่นคือการสร้างเงื่อนไขเพิ่มให้เกิดเหตุการณ์บางอย่างเช่น “Game Over” กรณีที่ศัตรูเคลื่อนที่มาโดนตัวละครหรือ “Player” ของเรา

เริ่มต้นให้เราสร้างไฟล์ขึ้นมาใหม่ตั้งชื่อว่า “GameOverScene” โดยเลือกประเภทของไฟล์ให้เป็น Objective-C Class เพื่อที่จะทำการเพิ่มหน้าจอ Game Over เวลาที่โดนศัตรูเคลื่อนที่มาโดน

เลือกประเภทของไฟล์ให้เป็น Cocoa Touch และ "Objective-C Class” — เลือกประเภทของไฟล์ให้เป็น Cocoa Touch และ “Objective-C Class”

ตั้งชื่อว่า "GameOverScene” โดยเลือกให้เป็น NSObject — ตั้งชื่อว่า “GameOverScene” โดยเลือกให้เป็น NSObject

ให้ไปที่แก้ไขไฟล์ GameOverScene.h จากเดิมที่มีคำสั่งปรากฏอยู่ว่า

#import <Foundation/Foundation.h>
@interface GameOverScene : NSObject
@end

#import <Foundation/Foundation.h>

@interface GameOverScene : NSObject

@end

ให้ทำการเปลี่ยนเป็น

#import "cocos2d.h"
@interface GameOverLayer : CCLayerColor {
    CCLabelTTF *_label;
}
@property (nonatomic, retain) CCLabelTTF *label;
@end

@interface GameOverScene : CCScene {
    GameOverLayer *_layer;
}
@property (nonatomic, retain) GameOverLayer *layer;
@end

#import "cocos2d.h"

@interface GameOverLayer : CCLayerColor {

CCLabelTTF *_label;

}

@property (nonatomic, retain) CCLabelTTF *label;

@end

@interface GameOverScene : CCScene {

GameOverLayer *_layer;

}

@property (nonatomic, retain) GameOverLayer *layer;

@end

ต่อมาให้ไปแก้ไขไฟล์ GameOverScene.m จากเดิมที่เป็นคำสั่งชุดนี้

#import "GameOverScene.h"
@implementation GameOverScene
@end

#import "GameOverScene.h"

@implementation GameOverScene

@end

ให้กลายเป็น

#import "GameOverScene.h"
#import "MenuScene.h"
@implementation GameOverScene
@synthesize layer = _layer;
- (id)init {    
    if ((self = [super init])) {
        self.layer = [GameOverLayer node];
        [self addChild:_layer];
    }
    return self;
}

- (void)dealloc {
    [_layer release];
    _layer = nil;
    [super dealloc];
}
@end

@implementation GameOverLayer
@synthesize label = _label;
-(id) init
		{
    if( (self=[super initWithColor:ccc4(255,255,255,255)] )) {
        
        CGSize winSize = [[CCDirector sharedDirector] winSize];
        self.label = [CCLabelTTF labelWithString:@"" fontName:@"Arial" fontSize:32];
        _label.color = ccc3(0,0,0);
        _label.position = ccp(winSize.width/2, winSize.height/2);
        [self addChild:_label];        
        [self runAction:[CCSequence actions:
                         [CCDelayTime actionWithDuration:3],
                         [CCCallFunc actionWithTarget:self selector:@selector(gameOverDone)],nil]];        
    }	
    return self;
}

- (void)gameOverDone {    
    [[CCDirector sharedDirector] replaceScene:[MenuScene  scene]];    
}

- (void)dealloc {
    [_label release];
    _label = nil;
    [super dealloc];
}
@end

#import "GameOverScene.h"

#import "MenuScene.h"

@implementation GameOverScene

@synthesize layer = _layer;

- (id)init {

if ((self = [super init])) {

self.layer = [GameOverLayer node];

[self addChild:_layer];

}

return self;

}

- (void)dealloc {

[_layer release];

_layer = nil;

[super dealloc];

}

@end

@implementation GameOverLayer

@synthesize label = _label;

-(id) init

{

if( (self=[super initWithColor:ccc4(255,255,255,255)] )) {

CGSize winSize = [[CCDirector sharedDirector] winSize];

self.label = [CCLabelTTF labelWithString:@"" fontName:@"Arial" fontSize:32];

_label.color = ccc3(0,0,0);

_label.position = ccp(winSize.width/2, winSize.height/2);

[self addChild:_label];

[self runAction:[CCSequence actions:

[CCDelayTime actionWithDuration:3],

[CCCallFunc actionWithTarget:self selector:@selector(gameOverDone)],nil]];

}

return self;

}

- (void)gameOverDone {

[[CCDirector sharedDirector] replaceScene:[MenuScene scene]];

}

- (void)dealloc {

[_label release];

_label = nil;

[super dealloc];

}

@end

กลับไปเพิ่ม ตัวแปรสำหรับเคลียร์ค่ากระสุนของตัวเกมในไฟล์ PlayScene.h ให้เป็นรูปแบบดังนี้

@interface PlayScene : CCLayer {
    NSMutableArray *_targets;
    NSMutableArray *_projectiles;
    int _projectilesDestroyed;
}

@interface PlayScene : CCLayer {

NSMutableArray *_targets;

NSMutableArray *_projectiles;

int _projectilesDestroyed;

}

ในไฟล์ PlayScene.m ให้ทำการ Import ส่วนของ Header ของหน้าจอ GameOverScene ลงไปโดยใช้คำสั่ง

#import "PlayScene.h"
#import "GameOverScene.h"

1 2	#import "PlayScene.h" #import "GameOverScene.h"

ต่อมาให้ทำการแก้ไขฟังก์ชัน update() โดยทำการแก้ไขคำสั่งใน ส่วนของ targetsToDelete จากเดิมคือส่วนของบรรทัดนี้

for (CCSprite *target in targetsToDelete) {
[_targets removeObject:target];
[self removeChild:target cleanup:YES];								
}

for (CCSprite *target in targetsToDelete) {

[_targets removeObject:target];

[self removeChild:target cleanup:YES];

}

ให้ทำการแก้ไขให้เป็น เพื่อเป็นการบอกว่า ถ้าจำนวนศัตรู โดนยิงไป 30 ตัวแล้วเราจะชนะเกมนี้โดยปรากฏคำว่า “You Win!”

for (CCSprite *target in targetsToDelete) {
            [_targets removeObject:target];
            [self removeChild:target cleanup:YES];	
            _projectilesDestroyed++;
	   if (_projectilesDestroyed > 30) {
	     GameOverScene *gameOverScene = [GameOverScene node];
	     [gameOverScene.layer.label setString:@"You Win!"];
	     [[CCDirector sharedDirector] replaceScene:gameOverScene];
	   }
        }

for (CCSprite *target in targetsToDelete) {

[_targets removeObject:target];

[self removeChild:target cleanup:YES];

_projectilesDestroyed++;

if (_projectilesDestroyed > 30) {

GameOverScene *gameOverScene = [GameOverScene node];

[gameOverScene.layer.label setString:@"You Win!"];

[[CCDirector sharedDirector] replaceScene:gameOverScene];

}

เช่นกันถ้าหากว่าเกมดำเนินไปเข้าเงื่อนไขที่ตัวศัตรูพุ่งมาโดนตัวผู้เล่นต้องมีการแสดงผลหน้าจอ Game Over! ให้พิจารณาคำสั่งในฟังก์ชัน SpriteMoveFinished() จากเดิมคือคำสั่ง

-(void)spriteMoveFinished:(id)sender {
    CCSprite *sprite = (CCSprite *)sender;
    [self removeChild:sprite cleanup:YES];
    
    if (sprite.tag == 1) { // target
        [_targets removeObject:sprite];
    } else if (sprite.tag == 2) { // projectile
        [_projectiles removeObject:sprite];
    }
}

-(void)spriteMoveFinished:(id)sender {

CCSprite *sprite = (CCSprite *)sender;

[self removeChild:sprite cleanup:YES];

if (sprite.tag == 1) { // target

[_targets removeObject:sprite];

} else if (sprite.tag == 2) { // projectile

[_projectiles removeObject:sprite];

}

ให้ทำการแก้ไขเป็น

-(void)spriteMoveFinished:(id)sender {
    CCSprite *sprite = (CCSprite *)sender;
    [self removeChild:sprite cleanup:YES];
    
    if (sprite.tag == 1) { // target
        [_targets removeObject:sprite];
        
        GameOverScene *gameOverScene = [GameOverScene node];
		[gameOverScene.layer.label setString:@"You Lose :["];
		[[CCDirector sharedDirector] replaceScene:gameOverScene];
        
    } else if (sprite.tag == 2) { // projectile
        [_projectiles removeObject:sprite];
    }
}

-(void)spriteMoveFinished:(id)sender {

CCSprite *sprite = (CCSprite *)sender;

[self removeChild:sprite cleanup:YES];

if (sprite.tag == 1) { // target

[_targets removeObject:sprite];

GameOverScene *gameOverScene = [GameOverScene node];

[gameOverScene.layer.label setString:@"You Lose :["];

[[CCDirector sharedDirector] replaceScene:gameOverScene];

} else if (sprite.tag == 2) { // projectile

[_projectiles removeObject:sprite];

}

เพื่อเป็นการตรวจสอบว่า หากภาพ Sprite ของศัตรูหรือ Enemy พุ่งมาทับพิกัดของ Player แล้วให้เปลี่ยนหน้าเป็นจบเกมทันที

สิ่งที่ได้จากบทเรียนนี้คือ: การสร้างเงื่อนไขของเกมให้เกิดเหตุการณ์เพิ่มขึ้นตามเงื่อนไขที่กำหนดไว้เช่นการชนะเกม และ จบเกม
ในบทเรียนต่อไปเป็นการเพิ่มเสียงประกอบ และเปลี่ยนฉากกราฟิกเวลา Game Over หรือ Win!

Source Code ของเกมสามารถดาวน์โหลดได้ที่นี่!
Sample Code XCode Game Development by Daydev