Tài liệu hướng dẫn lập trình game với cocos2d x Informational, Commercial
Xin chào các bạn, hôm nay mình sẽ giới thiệu tới các bạn những bước đầu tiên để thực hiện thử thách Code Game bằng Cocos2d-x trong ngôn ngữ lập trình C++ trong vòng 24h. Các bạn cùng theo dõi nhé. Show 1. Cocos2d-x là gì?Cocos2d-x là một engine phát triển game đa nền tảng: iOS, Android, macOS, Windows, Linux. Đây là một game engine được hàng triệu lập trình viên sử dụng, phát triển trên 25 nghìn game chính thức, bao gồm nhiều tựa game nổi tiếng như: Piano Tiles - Don't Tap the White Tile, Hill Climbing Racing, FLow Free, Diamond Dash, Idle Heroes, AFK Arena… Cocos2d-x hỗ trợ 2 ngôn ngữ C++ và Lua, nhưng chủ yếu là C++. Mình chọn cocos2d-x để làm tutorials này cũng một phần vì C++, đây có thể nói là ngôn ngữ phổ biến nhất với các bạn mới bắt đầu lập trình. Tại sao lựa chọn Cocos2d-x? - Dễ cho người mới bắt đầu, hỗ trợ C++11 API (auto, std::function, lambda…). - Đa nền tảng – Với 1 source code có thể chạy trên cả desktop và mobile. Có thể test và debug trên máy tính rồi release trên nền tảng mobile. - API phong phú với đầy đủ các tính năng (sprites, actions, animations, particles, transitions, timers, events (touch, keyboard, accelerometer, mouse), sound, file IO, persistence, skeletal animations, 3D). - Hoàn toàn FREE. Trong bài viết này, mình sẽ làm một game Pikachu Onet Connect bằng Cocos2d-x. 2. Cài đặt môi trườngCác yêu cầu: - Python 2.7.5+ (recommend 2.7.10). Lưu ý là Python 2 chứ không phải Python 3. Download tại đây. Thêm python 2 vào PATH. Nếu bạn có cả python 2 và python 3 thì phải để path của python 2 trước path của python 3. - CMake 3.6+. Download tại đây. Thêm đường dẫn đến bin của cmake vào PATH. Download cocos2d-x phiên bản mới nhất tại đây. Bài viết này sử dụng cocos2d-x 4.0. Sau khi download và giải nén, hãy chạy file
Nếu bạn chưa có NDK_ROOT hay ANDROID_SDK_ROOT thì không sao cả, hãy nhấn ENTER để skip. 3. Tạo project game mới:Sau khi đã cài đặt xong, tạo project mới bằng command prompt theo cú pháp:
0 : chọn ngôn ngữ C++
1 : PATH đến folder bạn muốn chứa project (có thể bỏ qua nếu tạo project ở folder đang chạy command promt)
2 : tên project Nếu muốn tạo ra game màn hình dọc, thêm ‘
3’ Ví dụ:
4 4. Build và test game với Visual Studio:Nếu bạn chưa có Visual Studio, bạn có thể download bản mới nhất tại đây. Trong bài viết này, mình sẽ hướng dẫn sử dụng Visual Studio 2019 để build và test project.
Điều hướng đến thư mục project Tạo thư mục win32-build Điều hướng tới thư mục win32-build Dùng cmake để tạo project VS 2019 (Lưu ý là phải có -A Win32)
Tham khảo thêm về cài đặt cocos2d-x tại đây 5. Điều chỉnh kích thước của sổ game:Project được tạo ra từ câu lệnh
5 được copy từ template sẵn. Code của chương trình chính (các file
6 và
8. Những file này sẽ được sử dụng trên mọi nền tảng. Code dành riêng cho từng nền tảng sẽ được lưu ở các folder riêng (
9). Class
0 (
Kích thước cửa sổ được định nghĩa trong file
2 ở folder
8: Bạn có thể thay đổi kích thước cửa sổ giao diện game bằng cách điều chỉnh các thông số (chiều ngang, chiều dọc) của
4. * Không nên thay đổi
5,
6,
7. * Nên để kích thước cửa sổ game có cùng tỷ lệ với kích thước màn hình thiết bị. 6. Scene và NodeHãy tưởng tượng Scene là một cảnh của game, trên một cảnh ta có thể đặt, sắp xếp, bố trí các vật lên. Mỗi vật trên cảnh đó chính là một Node, đó có thể là Label (Chữ), Image (Ảnh), Sprite (Ảnh động), và nhiều hơn thế. Một đối tượng thuộc lớp Scene chứa những những gì sẽ được hiển thị trên màn hình sau khi chạy lệnh
8. Các đối tượng thuộc các lớp thừa kế lớp Node sẽ được vẽ khi chúng được thêm vào một scene nào đó. Ở trong project đã có sẵn
9 thừa kế
0, đây chính là cửa sổ hiển thị trên màn hình khi chạy chương trình. Có thể thấy trong scene
1 có những node sau: -
2
-
5
-
0
-
1
7. Scene Graph, z-order:Bạn có thể thắc mắc: Nếu 2 node được đặt cùng một vị trí thì sao? Chúng sẽ xếp chồng lên nhau như thế nào? Node nào ở trên, node nào ở dưới? Việc sắp xếp bố trí các Node trong một Scene không chỉ bao gồm việc sắp đặt vị trí trên không gian tọa độ 2 chiều (Ox, Oy), bạn còn phải quan tâm đến scene graph và z-order. - Scene Graph: là một đồ thị cây biểu diễn quan hệ cha con giữa các node. Trong scene HelloWorld, menu, label và sprite được add trực tiếp vào scene nên là con của scene, nhưng closeItem được add trực tiếp vào menu nên là con của menu. - z-order: Quyết định thứ tự những node con của cùng một node cha.
Trong hàm HelloWorld::init():
2 // menu là con của scene, z-order = 1
3 // closeItem là con của menu, z-order mặc định = 0
4 // label là con của scene, z-order = 1
5 // sprite là con của scene, z-order = 0 Cocos2d-x vẽ các node theo thứ tự duyệt in-order: Khi duyệt đến một node cha: - Duyệt những node con có giá trị z-order < 0, theo thứ tự z-order tăng dần. - Vẽ node cha. - Duyệt những node con có giá trị z-order >= 0, theo thứ tự z-order tăng dần. Thứ tự vẽ của scene HelloWorld: Scene -> sprite -> menu -> closeItem -> label . (scene và menu không có hình dạng nên sẽ ko thấy được trên màn hình) Khi một node được vẽ, nó có thể được vẽ đè lên các node được vẽ từ trước và cũng có thể sẽ bị đè lên bởi những node được vẽ sau. 8. Tạo thêm Node và Scene8.1 Tạo nút PLAYMình sẽ xóa sprite và tạo một nút PLAY giữa cửa sổ HelloWorld, mình muốn khi bấm vào nút này màn hình sẽ chuyển sang cửa số chơi game. Tạo nút mới trong hàm
6 như sau:
Với các node thuộc class thừa kế
4 (
8,
6,
0…), ta có thể gắn cho nó một hàm
1. Hàm này sẽ được gọi mỗi khi node được kích hoạt (click chuột, bấm, …). Mỗi lần ta click vào chữ PLAY, hàm callback
2 sẽ được gọi. Tạm thời mình để hàm này in ra 1 dòng log với nội dung “PLAY”. 8.2 Tạo GameSceneTiếp theo, mình sẽ tạo một Scene mới. Scene này sẽ dùng để chứa những yếu tố hiển thị khi mình đang chơi game, ví dụ như bảng chơi Pikachu, thanh thời gian chạy, nút trở về, …. Trước tiên, mình tạo
3: GameScene.h:
GameScene.cpp:
Đây là một Scene trống, khi vẽ ra sẽ chỉ có nền đen. 8.3 Chuyển SceneMình muốn khi bấm nút PLAY, màn hình sẽ chuyển từ
1 sang
5 nên mình có thể sửa lại hàm
1 của nút PLAY như sau:
Hoặc, một cách cool hơn, sử dụng hiệu ứng
7(nhiều hiệu ứng hơn tại đây)
Tương tự như nút PLAY, mình sẽ tạo một nút BACK để quay lại scene
8từ
5. Lần này mình sẽ sử dụng
6. GameScene.cpp:
Hàm khởi tạo MenuItemImage::create() như ở trên nhận vào 2 ảnh "back1.png" và "back2.png", lần lượt là ảnh ở trạng thái bình thường và ảnh ở trạng thái được chọn (khi click chuột, bấm, ...). Các bạn lưu ảnh ở folder Resource/ của project và sử dụng khi cần tạo Image, Sprite, ... Ảnh back1.png và back2.png của mình: Và đây là kết quảKết luận:Như vậy là mình đã giới thiệu về game engine Cocos2d-x và những khái niệm, yếu tố cơ bản nhất của nó. Đây là một trong những game engine có nhiều người dùng nhất và đã góp phần tạo dựng nên nhiều tựa game nổi tiếng. Sau bài này mình hy vọng các bạn nắm được cách tạo một scene, tạo và thêm node vào scene. Mình khuyến khích cách bạn thử tạo scene với nhiều node ở nhiều vị trí khác nhau để thử nghiệm xem chúng tương tác (chồng lên nhau, che khuất nhau…) với nhau như nào. Nếu có bất kỳ vấn đề gì hãy comment dưới bài post này. |