Xin chào những bạn, thời điểm ngày hôm nay mình sẽ ra mắt tới những bạn những bước tiên phong để thực thi thử thách Code Game bằngCocos2d-x trong ngôn từ lập trình C + + trong vòng 24 h. Các bạn cùng theo dõi nhé .Bạn đang xem : Tài liệu hướng dẫn lập trình game với cocos2d-x
1. Cocos2d-x là gì?
Cocos2d-x là một engine tăng trưởng 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, tăng trưởng trên 25 nghìn game chính thức, gồm có 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ường
Các nhu yế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 setup.py để update PATH:
cd folder_giải_nén
python setup.py
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 đã setup xong, tạo project mới bằng command prompt theo cú pháp :cocos new – l cpp – d FOLDER_PATH PROJECT_NAME- l cpp : chọn ngôn từ C + +- d FOLDER_PATH : PATH đến thư mục bạn muốn chứa project ( hoàn toàn có thể bỏ lỡ nếu tạo project ở thư mục đang chạy command promt )PROJECT_NAME : tên projectNếu muốn tạo ra game màn hình hiển thị dọc, thêm ‘ — portrait ’Ví dụ :cocos new – l cpp – d D : / MyProjects — portrait Pikachu2020
4. Build và test game với Visual Studio:
Nếu bạn chưa có Visual Studio, bạn hoàn toàn có thể tải về 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 .Tạo project Visual Studio 2019 bằng cmake:Tạo project Visual Studio 2019 bằngĐ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ó -AWin32)
Pikachu2020.sln trong folder win32-build vừa tạo:Mở solutiontrong foldervừa tạo :
Sau khi đã mở solution bằng VS, chọn Build -> Build Solution:
Đặt Pikachu2020 làm StartUp project. Set as StartUp project:
Local Windows Debuggerở thanh công cụ phía trên hoặc bấm F5 để chạy project:Chọnở thanh công cụ phía trên hoặc bấmđể chạy project :
Tham khảo thêm về thiết lập 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 cocos new được copy từ template sẵn. Code của chương trình chính ( những file. h và. cpp ) sẽ được lưu trong thư mục Classes /. 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 ở những thư mục riêng ( proj.android, proj. ios_mac, proj.linux, proj. win32 ) .Class AppDelegate ( AppDelegate. h, AppDelegate. cpp ) là class được gọi khi chương trình mở màn chạy .Kích thước hành lang cửa số được định nghĩa trong file AppDelegate. cpp ở thư mục Classes / :
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 designResolutionSize.
* Không nên thay đổi smallResolutionSize, mediumResolutionSize, largeResolutionSize.
* 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ị.Xem thêm : # 1 Cách Chơi Đế Chế Qua Mạng Lan Win 10 Đơn Giản Nhất, # 1 Cách Chơi Aoe Qua Mạng Lan Win 10
6. Scene và Node
Hã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ộtNode, đócó thể là Label (Chữ), Image (Ảnh), Sprite (Ảnh động), và nhiều hơn thế.
Một đối tượng người dùng thuộc lớp Scene chứa những những gì sẽ được hiển thị trên màn hình hiển thị sau khi chạy lệnh director -> runWithScene ( scene ). Các đối tượng người tiêu dùng thuộc những 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 class HelloWorldthừa kế class Scene, đây chính là hành lang cửa số hiển thị trên màn hình hiển thị khi chạy chương trình .Có thể thấy trong scene HelloWorld có những node sau :- auto menu = Menu :: create ( … )Đây là đối tượng kiểu Menu. Thường dùng để chứa các node dạng MenuItem, ví dụ như các nút bấm để chuyển Scene, Play, Quit, Settings, About, …Đây là đối tượng người tiêu dùng kiểu Menu. Thường dùng để chứa những node dạng MenuItem, ví dụ như những nút bấm để chuyển Scene, Play, Quit, Settings, About, …- auto closeItem = MenuItemImage :: create ( … )Biểu tượng đóng ứng dụng thuộc class MenuItemImage – thừa kế class MenuItem. Các đối tượng thuộc các class thừa kế MenuItem phải được đặt trong Menu.Biểu tượng đóng ứng dụng thuộc class MenuItemImage – thừa kế class MenuItem. Các đối tượng người dùng thuộc những class thừa kế MenuItem phải được đặt trong Menu .- auto label = Label :: createWithTTF ( … )Chữ tiêu đề “Hello World“Chữ tiêu đề “ Hello World “- auto sprite = Sprite :: create ( … )Ảnh biểu tượng của cocos “HelloWorld.png”Ảnh hình tượng của cocos “ HelloWorld. png ”
7. Scene Graph, z-order:
Bạn hoàn toàn có thể vướng 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.
Những node con của một scene hay của một node cha sẽ được sắp xếp theo thứ tự z-order không giảm. Nếu 2 node có z-order bằng nhau, node được thêm vào trước sẽ đứng trước.Khi thêm một node vào scene hoặc một node khác, bạn có thể thêm một tham số int vào hàm addChild với ý nghĩa là z-order của node được thêm. Z-order mặc định là 0 nếu không được định nghĩa.Những node con của một scene hay của một node cha sẽ được sắp xếp theo thứ tự z-order không giảm. Nếu 2 node có z-order bằng nhau, node được thêm vào trước sẽ đứng trước. Khi thêm một node vào scene hoặc một node khác, bạn hoàn toàn có thể thêm một tham số int vào hàm addChild với ý nghĩa là z-order của node được thêm. Z-order mặc định là 0 nếu không được định nghĩa .Trong hàm HelloWorld :: init ( ) :this -> addChild ( menu, 1 ) ; / / menu là con của scene, z-order = 1auto menu = Menu :: create ( closeItem, NULL ) ; / / closeItem là con của menu, z-order mặc định = 0this -> addChild ( label, 1 ) ; / / label là con của scene, z-order = 1this -> addChild ( sprite, 0 ) ; / / sprite là con của scene, z-order = 0
Cocos2d-x vẽ những 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 .
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 hiển thị )Khi một node được vẽ, nó hoàn toàn có thể được vẽ đè lên những node được vẽ từ trước và cũng hoàn toàn có thể sẽ bị đè lên bởi những node được vẽ sau .
8. Tạo thêm Node và Scene
8.1 Tạo nút PLAYMình sẽ xóa sprite và tạo một nút PLAY giữa hành lang cửa số HelloWorld, mình muốn khi bấm vào nút này màn hình hiển thị sẽ chuyển sang cửa số chơi game .Tạo nút mới trong hàm HelloWorld :: init ( ) như sau :bool HelloWorld :: init ( ) { … / / Add label ” PLAY ” with callback HelloWorld :: play auto play = MenuItemLabel :: create ( Label :: createWithTTF ( ” PLAY “, ” fonts / Marker Felt. ttf “, 40 ), CC_CALLBACK_1 ( HelloWorld :: play, this ) ) ; / / Assert that play is not null CCASSERT ( play ! = nullptr, ” problem loading fonts / Marker Felt. ttf ” ) ; / / Position PLAY in the middle of màn hình hiển thị play -> setPosition ( ( Vec2 ( visibleSize ) – origin ) / 2 ) ; / / Add PLAY to menu menu -> addChild ( play ) ; return true ; } void HelloWorld :: play ( Ref * pSender ) { auto gameScene = GameScene :: createScene ( ) ; Director :: getInstance ( ) -> replaceScene ( TransitionFade :: create ( 0.5, gameScene, Color3B ( 0, 255, 255 ) ) ) ; } Với những node thuộc class thừa kế MenuItem ( MenuItemLabel, MenuItemImage, MenuItemSprite … ), ta hoàn toàn có thể gắn cho nó một hàm callback. 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 HelloWorld :: play ( Ref * ) 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 hạn chạy, nút trở lại, …. Trước tiên, mình tạo class GameScene :GameScene. h :# pragma once # include ” cocos2d. h ” USING_NS_CC ; class GameScene : public Scene { public : static Scene * createScene ( ) ; virtual bool init ( ) ; CREATE_FUNC ( GameScene ) ; } ; GameScene. cpp :# include ” GameScene. h ” # include Scene * GameScene :: createScene ( ) { return GameScene :: create ( ) ; } bool GameScene :: init ( ) { / / super init ( ) if ( ! Scene :: init ( ) ) return false ; return true ; } Đây là một Scene trống, khi vẽ ra sẽ chỉ có nền đen .8.3 Chuyển Scene Mình muốn khi bấm nút PLAY, màn hình hiển thị sẽ chuyển từ HelloWorld sang GameScene nên mình hoàn toàn có thể sửa lại hàm callback của nút PLAY như sau :void HelloWorld :: play ( Ref * pSender ) { Director :: getInstance ( ) -> replaceScene ( GameScene :: createScene ( ) ) ; } Hoặc, một cách cool hơn, sử dụng hiệu ứng TransitionFade ( nhiều hiệu ứng hơn tạiđây )void HelloWorld :: play ( Ref * pSender ) { auto gameScene = GameScene :: createScene ( ) ; Director :: getInstance ( ) -> replaceScene ( TransitionFade :: create ( 0.5, gameScene, Color3B ( 0, 255, 255 ) ) ) ; } Tương tự như nút PLAY, mình sẽ tạo một nút BACK để quay lại scene HelloWorld từ GameScene. Lần này mình sẽ sử dụng MenuItemImage .GameScene. cpp :
bool GameScene::init(){// super init()if (!Scene::init()) return false;auto visibleSize = Director::getInstance()->getVisibleSize();Vec2 origin = Director::getInstance()->getVisibleOrigin();auto back = MenuItemImage::create(“back1.png”, “back2.png”,CC_CALLBACK_1(GameScene::back, this));CCASSERT(back != nullptr, “Fail to load BACK images”);auto menu = Menu::create(back, nullptr);this->addChild(menu);menu->setPosition(origin);back->setPosition(origin + Vec2(back->getContentSize().width / 2, visibleSize.height – back->getContentSize().height / 2));return true;}void GameScene::back(Ref* pSender) {auto homeScene = HelloWorld::createScene();Director::getInstance()->replaceScene(TransitionFade::create(0.5, homeScene, Color3B(0, 255, 255)));}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 đã trình làng 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 thêm phần tạo dựng nên nhiều tựa game nổi tiếng .Sau bài này mình kỳ vọng những 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ể yếu tố gì hãy comment dưới bài post này .Ở những phần sau mình sẽ nói về cách giải quyết và xử lý sự kiện trong cocos2d-x, tạo bảng game, …
