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 
@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

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

#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

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

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

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

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

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

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];
	   }
        }

เช่นกันถ้าหากว่าเกมดำเนินไปเข้าเงื่อนไขที่ตัวศัตรูพุ่งมาโดนตัวผู้เล่นต้องมีการแสดงผลหน้าจอ 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];
        
        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