วิธีการเขียนเกมด้วย Sprite Kit บน iPhone สำหรับสร้างเกม 2D กับการควบคุมตำแหน่งของตัวละครให้เคลื่อนไปมาเมื่อมีการแตะหน้าจอในตำแหน่งแนวดิ่งได้อย่างง่ายครับเป็นการเขียนโปรแกรม Objective C ให้สามารถเคลื่อนตำแหน่งของตัวละครได้อย่างง่ายดายครับ เมื่อมีการแตะหน้าจอตำแหน่งต่างๆ ครับ
เริ่มต้นพัฒนา
สร้าง New Project ขึ้นมาใหม่เป็น SpriteKit Game ครับ
ตั้งชื่อ Project ให้เรียบร้อยหลังจากนั้นก็เริ่มกันได้เลยครับ
ในตัวอย่างนี้จะใช้ player.png มาเป็นตัวละครครับ โดยผมไปหาภาพมาจากเว็บไซต์ http://design.tutsplus.com ดังนี้
ต่อมาปรับแนวตั้งแนวนอนของ แอพพลิเคชันของเราครับ ผมจะเน้นไปที่การวางเกมในแนวนอนก่อนแล้วกัน เลือกเครื่องหมายถูกออกไปจาก Portrait ครับ
สร้าง ตัว Player หรือตัวละครเกมของเราก่อน เปิดไฟล์ MyScene.h ขึ้นมาครับ ประกาศตัวแปรตามนี้
|
1 2 3 4 5 6 |
#import <SpriteKit/SpriteKit.h> @interface MyScene : SKScene @property (nonatomic) SKSpriteNode * hero; @end |
เพิ่ม Synthesize ตัวแปร hero ที่ MyScene.m ครับ แก้ไขส่วนของ header ใหม่เป็นดังนี้
|
1 2 3 4 5 6 7 8 |
#import "MyScene.h. @interface MyScene()<SKPhysicsContactDelegate> @end @implementation MyScene @synthesize hero; |
คำสั่ง initWithSize() ก็จะต้องเป็นแบบนี้นะครับ
|
1 2 3 4 5 6 7 8 9 10 11 12 |
-(id)initWithSize:(CGSize)size { if (self = [super initWithSize:size]) { self.backgroundColor = [SKColor whiteColor]; self.physicsWorld.gravity = CGVectorMake(0,0); self.physicsWorld.contactDelegate = self; //เตรียม Add Hero } return self; } |
ต่อมาประกาศส่วนของ SceneDelegate ขึ้นมาทั้ง Hero และ BG ครับ เป็น Static Const
|
1 2 3 4 |
#import "MyScene.h" static const uint32_t heroCategory = 0x1 << 0; static const uint32_t obstacleCategory = 0x1 << 1; |
รอบนี้เราจะเพิ่ม เมธอดมาแทนที่ให้โหลดภาพกราฟิกของ Player เข้าไปเรียกใช้ เมธอด addHero() เพื่อเป็นการเรียกแสดงแบบ OOP ครับ สร้างเมธอด addHero() ดังนี้
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
-(void)addHero { //initalizing spaceship node hero = [SKSpriteNode spriteNodeWithImageNamed:@"player"]; [hero setScale:0.5]; hero.physicsBody = [SKPhysicsBody bodyWithRectangleOfSize:hero.size]; hero.physicsBody.categoryBitMask = heroCategory; hero.physicsBody.dynamic = YES; hero.physicsBody.contactTestBitMask = obstacleCategory; hero.physicsBody.collisionBitMask = 0; hero.name = @"hero"; hero.position = CGPointMake(120,160); [self addChild:hero]; } |
เป็นการโหลด ภาพ player.png เข้าไปเก็บไว้ในตัวแปร hero และมีการสร้าง Class ของเมธอดมันโดยเฉพาะใน addHero() ครับ
ไปที่ไฟล์ ViewController.m อีกครั้ง เคลียร์ไฟล์ ViewController ในส่วนของไฟล์ทั้งหมดให้เป็นตามนี้ครับ
|
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 48 49 50 51 52 53 54 55 |
#import "ViewController.h" #import "MyScene.h" @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; } - (void)viewWillLayoutSubviews { [super viewWillLayoutSubviews]; // Configure the view. SKView * skView = (SKView *)self.view; if (!skView.scene) { skView.showsFPS = YES; skView.showsNodeCount = YES; // Create and configure the scene. SKScene * scene = [MyScene sceneWithSize:skView.bounds.size]; scene.scaleMode = SKSceneScaleModeAspectFill; // Present the scene. [skView presentScene:scene]; } } - (BOOL)shouldAutorotate { return YES; } - (NSUInteger)supportedInterfaceOrientations { if ([[UIDevice currentDevice] userInterfaceIdiom] == UIUserInterfaceIdiomPhone) { return UIInterfaceOrientationMaskAllButUpsideDown; } else { return UIInterfaceOrientationMaskAll; } } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Release any cached data, images, etc that aren't in use. } @end |
กลับมาที่ ไฟล์ MyScene.m ให้แก้ไขส่วนของ
|
1 |
-(id)initWithSize:(CGSize)size { } |
ตามนี้ครับ
|
1 2 3 4 5 6 7 8 9 10 11 |
-(id)initWithSize:(CGSize)size { if (self = [super initWithSize:size]) { self.backgroundColor = [SKColor whiteColor]; self.physicsWorld.gravity = CGVectorMake(0,0); self.physicsWorld.contactDelegate = self; [self addHero]; // เรียก add Hero } return self; } |
ลอง Run ดูรอบแรกก่อนว่ามีอะไรติดขัดไหม
ต่อมาเราจะทำให้มันเคลื่อนไหวไปตามตำแหน่งที่ แตะหน้าจอครับ เปิดไฟล์ MyScene.h ขึ้นมา ประกาศตัวแปรเพิ่มดังนี้
|
1 2 |
@property (strong,nonatomic) SKAction * actionMoveUp; @property (strong,nonatomic) SKAction * actionMoveDown; |
กลับไปเพิ่ม Synthesize ใน MyScene.m ตามนี้ครับ
|
1 2 |
@synthesize actionMoveDown; @synthesize actionMoveUp; |
แก้ไข MyScene.m ส่วนของเมธอด addHero() ให้เป็นดังนี้ครับ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
-(void)addHero { //initalizing spaceship node hero = [SKSpriteNode spriteNodeWithImageNamed:@"player"]; [hero setScale:0.5]; hero.physicsBody = [SKPhysicsBody bodyWithRectangleOfSize:hero.size]; hero.physicsBody.categoryBitMask = heroCategory; hero.physicsBody.dynamic = YES; hero.physicsBody.contactTestBitMask = obstacleCategory; hero.physicsBody.collisionBitMask = 0; hero.name = @"hero"; hero.position = CGPointMake(120,160); [self addChild:hero]; actionMoveUp = [SKAction moveByX:0 y:30 duration:.2]; actionMoveDown = [SKAction moveByX:0 y:-30 duration:.2]; } |
เพิ่ม เมธอด -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event ขึ้นมาตามด้วยคำสั่งต่อไปนี้ครับ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event { /* Called when a touch begins */ UITouch *touch = [touches anyObject]; CGPoint touchLocation = [touch locationInNode:self.scene]; if(touchLocation.y >hero.position.y){ if(hero.position.y < 270){ [hero runAction:actionMoveUp]; } }else{ if(hero.position.y > 50){ [hero runAction:actionMoveDown]; } } } |
ถ้าการแตะหน้าจอนั้น ตำแหน่งของ hero เราในแกน y อยู่น้อยกว่า 270 จะทำให้ตัวละคร hero เราเลื่อนไปข้างบนด้วย Action ที่ชื่อ actionMoveUp ครับ เช่นกันถ้าตำแหน่งสูงกว่า 50 ของความสูงหน้าจอก็จะเลื่อนลงด้วย actionMoveDown ครับ
ทดสอบ Run ตัวแอพพลิเคชันของเราดูครับ
ไม่ยากอีกแล้วครับ หวังว่าคงจะลองทำตามกันดูได้อย่าง ไหลลื่นนะครับ Source Code นั้นยังไม่ให้ครับ เพราะคิดว่าจะ ทำทีเดียวพร้อมกับฉาก Background เลื่อนในบทความต่อไปเลยดีกว่า
อ่านต่อที่: เขียนเกมบน iPhone ด้วย Sprite Kit การสร้างฉาก Background ให้เลื่อนได้
