Từng bước tìm hiểu làm game với Spritekit - Phần 1

Bài đăng này đã không được cập nhật trong 2 năm

Xin chào các bạn. Như tiêu đề, loạt bài này sẽ ghi lại việc mình tìm hiểu spritekit là gì cho đến khi hoàn thành game trên iOS nhé. Loạt bài này sẽ có 2 phần chính. 1 tổng quát và 2 viết game thực tế. Trong phần 1 mình cùng làm quen với spritekit, cấu trúc 1 game với spritekit, các đối tượng phải biết trong spritekit và animation trong spritekit.

Spritekit là gì

Là một thư viện dành cho lập trình game trên iOS.

Bắt đầu

Tạo một project game mới với Xcode và run thử xem sao nhé. spritekitbasic Text Hello, World! sẽ hiện ra, mỗi khi ấn chuột sẽ xuất hiện 1 ô vuông quay tròn và text bị hiệu ứng fade. Toàn bộ phần nội dung này ở trong file GameScene.swift và mình sẽ tìm hiểu dần nhé.

Scene, Node

Trong spritekit thì có 2 khái niệm cần phải biết đó là màn chơi là Scene và đối tượng(nhân vật, vật thể trong game) là Node. Như ở ví dụ trên thì Node là dòng chữ Hello, World! và những ô vuông xoay tròn mỗi khi click chuột. Scene chính là màn hình chứa các node đó.

Position

Position là toạ độ của node. Các bạn hiểu như hình dưới nhé. Góc dưới cùng bên trái của scene có toạ độ (0, 0)

Physics

Đại loại là lực hút của trái đất

Vector

Điều chỉnh hướng di chuyển của Node.

SKAction

Tạo animation.

Thay đổi Node mặc định

Thay vì hình vuông xoay xoay thì mình thử thêm node khác bằng 1 con pokemon nhé. Thêm 1 folder mới có tên là images trong project bằng cách chuột phải vào project và chọn new group, sau đó kéo thả 1 ảnh bất kỳ vào folder images. Sau đó khai báo node tại function didMove() bằng : var alakazam = SKSpriteNode(imageNamed: "alakazam") Thay đổi size ảnh: alakazam.size = CGSize(width: 500, height: 500) Hoặc tăng kích tthước gấp đôi: alakazam.size = CGSize(width: alakazam.size.width*2, height: alakazam.size.height*2) set lại toạ độ chính giữa màn hình: alakazam.position = CGPoint(x: self.frame.width/2, y: self.frame.height/2) Thêm node vào scene self.addChild(alakazam) Kết quả:

Điều hướng màn hình

Tại cửa sổ Simulation bạn điều hướng màn hình ngang dọc bằng cách vào menu HardwareHardware > Rotate Left (hoặc Rotate Righ) Nhưng vừa run app lên màn hình tự xoay ngang luôn bằng cách bỏ chọn portrait như hình dưới: