Hướng dẫn sử dụng SpriteKit, Tiles Map để làm 1 game level giống Mario

Mình viết hướng dẫn này lại bằng tiếng việt để rèn luyện kỹ năng trình bày cũng như giúp các bạn nào lười đọc tiếng anh tham khảo luôn.

Link gốc ở đây nhé:
http://www.raywenderlich.com/62049/sprite-kit-tutorial-make-platform-game-like-super-mario-brothers-part-1

Resource game: Bạn vào link gốc để tìm nhé.

Bạn sẽ cần một ít kiến thức cơ bản của SpriteKit để tìm hiểu bài này, mình thấy bài này khá cơ bản và hay: http://www.raywenderlich.com/42699/spritekit-tutorial-for-beginners

Ok, let's go !

1. Các thành phần của game: Bạn cứ tưởng tượng game cũng giống như một thế giới và các thành phần (đối tượng) trong game cũng tương tự như một đối tượng trong thế giới của bạn. Vậy thế giới của bạn sẽ bao gồm những phần sau:

- Thế giới: nói chung là cái thế giới :D, nó chứa toàn bộ các đối tượng khác mà bạn có thể tươngr tượng ra => Đối tượng Scene
- Bản đồ: là khung cảnh chi tiết, bản đồ chi tiết của trò chơi (ví dụ như thế giới là hồ Hoàn Kiếm thì bản đồ sẽ là hồ, các cây, ghế đá, ...). Trong game mario này thì bản đồ chính là bầu trời, đám mây, tường, vật cản, ...
- Nguời chơi: là đối tượng chơi của mình => Mario . Chủ yếu mình lập trình xử lý xoay quanh anh này

2. Bản đồ game thì bạn có thể lập trình bằng tay cho từng đối tượng (gọi là Sprite) hoặc sử dụng một phần mềm bên thứ 3 để vẽ cho nhanh (và xcode sẽ gọi để sử dụng). Ở đây họ dùng JSTileMap  để thực hiện việc đọc và xử lý bản đồ, còn việc biên tập bản đồ thì dùng Tiled map editor.

Bản đồ của mình gồm 3 lớp khác nhau:
- hazards: bẫy => Mario đụng vô mấy cái này là chết
- walls: tường => Mario sẽ không thể di chuyển xuyên qua những đối tượng này
- background: nền => Game nào cũng có layer này, nó chứa những đối tượng mang tính chất minh hoạ, ko tham gia vào game :D

3. Hãy thêm bản đồ vào thế giới:

Mở GameLevelScene.m và thêm thư viện sau:

#import "JSTileMap.h"

Tiếp tục khởi tạo đối tượng bản đồ ngay sau thẻ @implementation: (tạo 1 private interface)

@interface GameLevelScene() @property (nonatomic, strong) JSTileMap *map; @end

Tiếp theo bạn sẽ thêm bản đồ vào trong thế giới của bạn bằng cách thêm dòng code sau vào initWithSize: in the if (self = [super initWithSize:size]) {:

self.backgroundColor = [SKColor colorWithRed:.4 green:.4 blue:.95 alpha:1.0];   self.map = [JSTileMap mapNamed:@"level1.tmx"]; [self addChild:self.map];

Hãy build và bạn sẽ thấy một khung cảnh tĩnh lặng ^^. Good job ! Bạn đã hoàn thành một phần công việc rồi đó

4. Thêm người chơi vào ...