iOS Game Developer Tutorial: เงื่อนไขใน Cocos2D กับการสร้าง Game Over
เทคนิคการสร้างเงื่อนไขให้กับเกมด้วย Cocos2D บน iOS สำหรับแสดงหน้าจอ Game Over เมื่อศัตรูเดินมาชนตัวละครในเกมของเราอย่างง่ายก่อนหน้านี้เราได้พัฒนาแอพพลิเคชันประเภทเกมบน iOS ด้วย Cocos2D ให้ตัวละครสามารถ ยิงกระสุนใส่ศัตรูในเกมได้แล้วในบทเรียนต่อมาจะเป็นการสร้างเงื่อนไขให้เกมมีความสมบูรณ์มากขึ้นนั่นคือการสร้างเงื่อนไขเพิ่มให้เกิดเหตุการณ์บางอย่างเช่น “Game Over” กรณีที่ศัตรูเคลื่อนที่มาโดนตัวละครหรือ “Player” ของเรา
- iOS Game Developer Tutorial: รู้จักกับ Cocos2D เครื่องมือสร้างเกม
- iOS Game Developer Tutorial: สร้างเมนู และหน้า Title ของเกมบน Cocos2D
- iOS Game Developer Tutorial: วางภาพ Spriteตัวละครลงในเกมด้วย Cocos2D
- iOS Game Developer Tutorial: การเรียกใช้ Collision Detect ผ่าน Cocos2D
เริ่มต้นให้เราสร้างไฟล์ขึ้นมาใหม่ตั้งชื่อว่า “GameOverScene” โดยเลือกประเภทของไฟล์ให้เป็น Objective-C Class เพื่อที่จะทำการเพิ่มหน้าจอ Game Over เวลาที่โดนศัตรูเคลื่อนที่มาโดน
เลือกประเภทของไฟล์ให้เป็น Cocoa Touch และ “Objective-C Class”
ตั้งชื่อว่า “GameOverScene” โดยเลือกให้เป็น NSObject
ให้ไปที่แก้ไขไฟล์ GameOverScene.h จากเดิมที่มีคำสั่งปรากฏอยู่ว่า
|
1 2 3 |
#import <Foundation/Foundation.h> @interface GameOverScene : NSObject @end |
ให้ทำการเปลี่ยนเป็น
|
1 2 3 4 5 6 7 8 9 10 11 12 |
#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 จากเดิมที่เป็นคำสั่งชุดนี้
|
1 2 3 |
#import "GameOverScene.h" @implementation GameOverScene @end |
ให้กลายเป็น
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
#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 ให้เป็นรูปแบบดังนี้
|
1 2 3 4 5 |
@interface PlayScene : CCLayer { NSMutableArray *_targets; NSMutableArray *_projectiles; int _projectilesDestroyed; } |
ในไฟล์ PlayScene.m ให้ทำการ Import ส่วนของ Header ของหน้าจอ GameOverScene ลงไปโดยใช้คำสั่ง
|
1 2 |
#import "PlayScene.h" #import "GameOverScene.h" |
ต่อมาให้ทำการแก้ไขฟังก์ชัน update() โดยทำการแก้ไขคำสั่งใน ส่วนของ targetsToDelete จากเดิมคือส่วนของบรรทัดนี้
|
1 2 3 4 |
for (CCSprite *target in targetsToDelete) { [_targets removeObject:target]; [self removeChild:target cleanup:YES]; } |
ให้ทำการแก้ไขให้เป็น เพื่อเป็นการบอกว่า ถ้าจำนวนศัตรู โดนยิงไป 30 ตัวแล้วเราจะชนะเกมนี้โดยปรากฏคำว่า “You Win!”
|
1 2 3 4 5 6 7 8 9 10 |
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() จากเดิมคือคำสั่ง
|
1 2 3 4 5 6 7 8 9 10 |
-(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]; } } |
ให้ทำการแก้ไขเป็น
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
-(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 เช่นกันถ้ามีการจบเกมก็จะปรากฏคำว่า “You Win!”
สิ่งที่ได้จากบทเรียนนี้คือ: การสร้างเงื่อนไขของเกมให้เกิดเหตุการณ์เพิ่มขึ้นตามเงื่อนไขที่กำหนดไว้เช่นการชนะเกม และ จบเกม
ในบทเรียนต่อไปเป็นการเพิ่มเสียงประกอบ และเปลี่ยนฉากกราฟิกเวลา Game Over หรือ Win!
Source Code ของเกมสามารถดาวน์โหลดได้ที่นี่!
Sample Code XCode Game Development by Daydev
NO COMMENTS