Hướng dẫn cơ bản về Sprite Kit

Đây là hướng dẫn cơ bản giúp bạn có thể có cái nhìn đầu tiên về Sprite Kit.

 

* Điều kiện để bắt đầu:

– Bạn cần phải có:

+ Xcode 5: Xcode là công cụ phải có để bắt đầu làm việc. Đối với Sprite Kit, chúng ta cần phải có Xcode 5 để có được Sprite Kit và hỗ trợ IOS 7. Chuyện này khá là đơn giản nếu bạn sở hữu một máy Mac, Bạn chỉ việc lên AppStore dành cho Mac và download về phiên bản mới nhất vì Apple đã chính thức phát hành Xcode miễn phí vào ngày 20-09-2013.

+ IOS 7: Đây là phiên bản thấp nhất mà Sprite Kit được tích hợp nên bạn cần phải cập nhật IOS 7 cho các iDevices của bạn để bắt đầu làm việc với Sprite Kit.

 

* Các kiến thức cần phải có:

– Lập trình với Sprite kit bạn cần phải hiểu rõ được cấu trúc của nó:

+ Đối với Sprite Kit, chương trình sẽ được chia thành các cảnh (scene) để xử lý những tác vụ nằm trong cảnh đó. Mỗi cảnh lại chứa những đối tượng game (Sprite) được xử lý trong scene.

+ Mỗi đối tượng dù là gì đi nữa vẫn là một sprite để dễ quản lý:

 

– Sprite sử dụng cho những trường hợp sau:

+ Những đối tượng game (character, monster, items,…)

+ Chữ

+ Hình thể phức tạp

+ Video

 

* Bắt đầu:

 

– Đầu tiên dĩ nhiên phải tạo một project mới để làm việc. Với Xcode 5, mọi thứ được làm lại với phong cách phẳng (Flat Design) của Apple nhìn rất gọn nhẹ và đơn giản.

– Bạn sẽ có được một Project như sau:

Image

– Hãy tập trung vào những thứ sau để hiểu rõ chương trình:

+ LKViewController:

 

– (void)viewDidLoad

{

   [super viewDidLoad];

 

   // Setting dành cho view của chương trình

   SKView * skView = (SKView *)self.view;

   skView.showsFPS = YES;

   skView.showsNodeCount = YES;

   skView.multipleTouchEnabled = NO;

   // Tạo scene và set mode cho scene

   SKScene * scene = [LKMyScene  sceneWithSize:skView.bounds.size];

   scene.scaleMode = SKSceneScaleModeAspectFill;

   // Hiển thị scene trên view

   [skView presentScene:scene];

}

 

=> Một view của chương trình thường sẽ hoàn toàn trống như thế. Chúng ta cần phải tạo ra một cảnh game (Scene) để thêm vào các đối tượng và bắt đầu một game. Ở đây, chúng ta sẽ ép view của viewController thành một SKView để bắt đầu game.

=> showFPS và showNodeCount chỉ được hiển thị khi bạn đang làm việc với chương trình để xem các biểu hiện của chương trình. Khi phát hành chính thức bạn cần phải bỏ nó đi.

 

+ LKMyScene.m:

 

-(id)initWithSize:(CGSize)size {

   if (self = [super initWithSize:size]) {

       /* Thêm vào dòng chữ tiêu đề trong lúc khới tạo chương trình */

       self.backgroundColor = [SKColor colorWithRed:0.15 green:0.15 blue:0.3 alpha:1.0];

       SKLabelNode *myLabel = [SKLabelNode labelNodeWithFontNamed:@”Chalkduster”];

       myLabel.text = @”Lapkan Tutorial!”;

       myLabel.fontSize = 30;

       myLabel.position = CGPointMake(CGRectGetMidX(self.frame), CGRectGetMidY(self.frame));

       [self addChild:myLabel];

   }

   return self;

}

 

=> Khởi tạo Scene với dòng tiêu đề sẵn có.

 

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {

   for (UITouch *touch in touches) {

       CGPoint location = [touch locationInNode:self];

       int i = arc4random() % 6;

       SKSpriteNode *sprite = [SKSpriteNode spriteNodeWithImageNamed:  [NSString stringWithFormat: @”Ipod_stars_0%i.png”, i]];

       sprite.size = CGSizeMake(50, 50);

       sprite.name = @”star”;

       sprite.position = location;

       SKAction *action = [SKAction rotateByAngle:M_PI duration:1];

       [sprite runAction:[SKAction repeatActionForever:action]];

       [self addChild:sprite];

   }

}

 

=> Mỗi khi có một sự kiện chạm vào màn hình thì sẽ ngẫu nhiên sinh ra một ngôi sao có màu khác nhau.

 

Lệnh cập nhật dành cho scene (update):

 

-(void)update:(CFTimeInterval)currentTime {

   [self enumerateChildNodesWithName:@”star” usingBlock:^(SKNode *node, BOOL *stop)

    {

        node.position = CGPointMake(node.position.x – 5, node.position.y);

    }];

}

 

=> Chương trình sẽ tự động cho ngôi sao bay sang trái sau mỗi frame được tạo.

Image

* Kết luận:

– Vậy chúng ta có thể làm ra một chương trình mà khi chạm vào màn hình sẽ tạo ra một ngôi sao có màu sắc ngẫu nhiên và di chuyển về phía bên trái của màn hình.

– Ở những phần sau, tôi sẽ nâng cấp chương trình lên với khả năng tuỳ biến cao hơn.

Source Code: https://docs.google.com/file/d/0B38uO5_VDZL4bEt4Q1E3cE01bTg

Tagged: , , , , , , , ,

One thought on “Hướng dẫn cơ bản về Sprite Kit

  1. Quyet Phan March 14, 2014 at 2:30 am Reply

    Cảm ơn những chia sẻ của bạn nhé.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: