Trong bài này chúng ta sẽ nói về tại sao và cách implement Leaderboard của GameCenter vào app của bạn.
Tại Sao GameCenter Đang Trở Lại Mạnh Mẽ
Bạn có thể làm game iPhone không cần scoreboard, nhưng leaderboard giúp game cảm thấy cạnh tranh hơn, như thể mọi người đang cạnh tranh nhau trên toàn thế giới.
Thay vì tự tạo và quản lý backend, GameCenter Leaderboard cho bạn scale với traffic vô hạn, bỏ qua toàn bộ trang login authorization, lấy Image, Name, và bạn bè chơi cùng game – tất cả mà người dùng không cần nhập gì.
Đặc biệt với iOS 16, Apple đầu tư nhiều hơn để cải thiện nó, và thúc đẩy việc dùng app hơn, như qua Push Notifications khi bạn bè vượt điểm bạn trong game.
Trong hành trình học SwiftUI, tôi đã tạo và publish app, vì IMO đó là cách tốt nhất để học.
Không có nhiều tài liệu cập nhật về cách làm nhiều thứ này, đặc biệt không có với SwiftUI hay async/await trong Swift. Vậy tôi tổng hợp và đơn giản hóa cho mọi người xây dựng app tuyệt vời. Mời bạn mời tôi test app của bạn!
Yêu cầu trước:
- Cần tài khoản Apple Developer trả phí
- Phải tạo App Id cho app trong phần provisioning profiles của Apple Developer Portal
- Phải tạo App trong portal iTunes Connect
Cách Implement iOS Leaderboard Trong 6 Bước
Phần lớn logic code leaderboard nằm trong file này nếu bạn muốn bỏ qua. Các bước như sau:
1. Tạo Leaderboard Trên App Store Connect
Sau khi tạo app trên App Store Connect thành công, vào tab Services cho app -> đảm bảo bạn ở trang GameCenter.
Thêm leaderboard mới bằng dấu "+", có thể là "Classic" (điểm không bao giờ reset) hoặc "Recurring" (điểm reset theo cài đặt tần suất).
Hầu hết game thích recurring leaderboard để leaderboard không bị rối bởi điểm cao cũ không thể đạt được.
LeaderboardID bạn nhập ở đây là ID cần dùng ở mọi nơi trong code yêu cầu nó.
2. Thiết Lập Xác Thực GameCenter
Trước tiên, cần authenticate user với GameCenter để bất kỳ chức năng nào hoạt động.
Dùng code sau để làm điều đó, cơ bản đảm bảo bạn (GKLocalPlayer.local) được xác thực, hoặc in error nếu có:
func authenticateUser() { GKLocalPlayer.local.authenticateHandler = { vc, error in guard error == nil else { print(error?.localizedDescription ?? "") return } } } Nếu user được xác thực, bạn sẽ thấy popup nhỏ trong UI. Nếu không, user sẽ được dẫn đến trang login GameCenter.
3. Hiển Thị Item Leaderboard Trong UI
Để lấy data từ GameCenter ViewController leaderboards (GKLeaderboard), bạn cần dùng loadLeaderboards.
Bạn có thể đổi function loadEntries từ .global sang .friends để chỉ lấy bạn bè.
Bạn cũng có thể lấy ảnh từng player bằng cách lặp qua mỗi player và thực hiện loadPhoto.
Dùng NSRang(1...5), bạn chọn số player hiển thị. Điều này kéo 5 user điểm cao nhất từ leaderboard và trả về none nếu không có user, như khi cycle refresh cho recurring Leaderboard.
Đây là ví dụ lấy data từ leaderboard nếu tận dụng async-await:
func loadLeaderboard() async { playersList.removeAll() Task{ var playersListTemp : [Player] = [] let leaderboards = try await GKLeaderboard.loadLeaderboards(IDs: [leaderboardIdentifier]) if let leaderboard = leaderboards.filter ({ $0.baseLeaderboardID == self.leaderboardIdentifier }).first { let allPlayers = try await leaderboard.loadEntries(for: .global, timeScope: .allTime, range: NSRange(1...5)) if allPlayers.1.count > 0 { try await allPlayers.1.asyncForEach { leaderboardEntry in var image = try await leaderboardEntry.player.loadPhoto(for: .small) playersListTemp.append(Player(name: leaderboardEntry.player.displayName, score:leaderboardEntry.formattedScore, image: image)) print(playersListTemp) playersListTemp.sort{ $0.score < $1.score } } } } playersList = playersListTemp } } 
4. Gọi Chức Năng Trong SwiftUI Khi View/Trang Xuất Hiện
Bạn có thể tận dụng function lifecycle onAppear của view để gọi authenticate và load, hoặc cũng có thể làm khi tap button nếu thích:
.onAppear(){ if !GKLocalPlayer.local.isAuthenticated { authenticateUser() } else if playersList.count == 0 { Task{ await loadLeaderboard() } } } 5. Tải Điểm Đã Gửi
Để tải điểm, bạn cần gửi chúng. Function submitScore giúp bạn với điều đó.
- Biến
flightsClimbednên chứa điểm bạn muốn gửi. - GameKit đảm bảo chỉ hiển thị điểm tốt nhất của bạn trong vòng đời leaderboard.
leaderboardIdchứa giá trị bạn nhập thủ công trong App Store Connect:
func leaderboard() async{ Task{ try await GKLeaderboard.submitScore( flightsClimbed, context: 0, player: GKLocalPlayer.local, leaderboardIDs: ["com.tfp.stairsteppermaster.flights"] ) } calculateAchievements() }6. Hiển Thị GameCenter ViewController Portal
Khi đăng nhập GameCenter, một icon nhỏ phiền toái xuất hiện góc trên phải màn hình. Khi tap vào, bạn được dẫn đến GameCenter ViewController. May mắn là bạn có thể ẩn nó nếu không phù hợp design, dùng GKAccessPoint.shared.isActive = false.
Vì GameCenter UI là UIKit ViewController chứ không phải SwiftUI View đơn giản, bạn cần tạo UIViewControllerRepresentable trước (như bạn thấy ở đây), để launch GameCenter bằng button khác,
Sau khi thêm file đó vào project, bạn có thể hiển thị GameCenter portal đơn giản bằng: GameCenterView(format: gameCenterViewControllerState) nơi gameCenterViewControllerState giúp bạn đến trang chi tiết trong GameCenter.
Lưu Ý Khi Dùng GameCenter Leaderboards:
- Simulator Debugging – Với lý do nào đó authenticate GameCenter cực chậm trên simulator, nên có thể tạo mock data khi dùng simulator.
- Challenges – Không thể programmatically gửi GameKit Challenges cho bạn bè nữa do deprecation. Thay vào đó, phải làm thủ công trong GameCenter dashboard của user đối với GameKit Achievements. Cũng không có cách xem challenges đã gửi.
- Achievements – Leaderboards khác với GameKit Achievements, tính toán và hiển thị khác, nhưng dễ hơn. Cũng có thể kéo vào app, như bạn thấy dưới:
Kết Luận
Bạn có thể thử app Stair Master Climber iPhone Health & Fitness miễn phí open-source mà tôi chia sẻ ở trên. Tôi rất muốn biết ý kiến bạn để chúng ta học cùng nhau.
Tự do liên hệ tôi qua social media hoặc email nếu có câu hỏi.