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 trước nhất để thực hiện thử thách Code Game bằng Cocos2d-x trong tiếng nói lập trình C++ trong vòng 24h. Các bạn cùng theo dõi nhé.

Bạn Đang Xem: Hướng Dẫn Làm Game Pikachu Với Cocos2d-x (Phần 1)

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, 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 Không lấy phí, Diamond Dash, Idle Heroes, AFK Arena…

Cocos2d-x tương trợ 2 tiếng nói 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 diễn giải theo ý nghĩa khác là tiếng nói phổ quát nhất với những bạn mới mở màn lập trình.

Vì sao lựa chọn Cocos2d-x?

– Dễ cho những người mới mở màn, tương trợ C++11 API (auto, std::function, lambda…).

– Đa nền tảng – Với một 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 rất đầ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 nội dung bài viết này, mình sẽ làm một game Pikachu Onet Connect bằng Cocos2d-x.

2. Thiết lập cấu hình môi trường tự nhiên

Cá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. Tải về tại đây.

Thêm python 2 vào PATH. Nếu như 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+. Tải về tại đây.

Thêm đường dẫn đến bin của cmake vào PATH.

Tải về cocos2d-x phiên bản tiên tiến nhất tại đây.

Nội dung bài viết này sử dụng cocos2d-x 4.0.

Sau lúc tải về 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 như bạn chưa tồn tại 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 lúc đã cấu hình thiết lập 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 tiếng nói C++

-d FOLDER_PATH : PATH đến thư mục bạn muốn chứa project (có thể bỏ qua nếu tạo project ở thư mục đang hoạt động command promt)

PROJECT_NAME : tên project

Nế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 như bạn chưa tồn tại Visual Studio, chúng ta cũng có thể tải về bản tiên tiến nhất tại đây.

Trong nội dung 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:

Điều phối đến thư mục project

Tạo thư mục win32-build

Xem Thêm : Hướng Dẫn Sử Dụng Graph API

Điều phối tới thư mục win32-build

Dùng cmake để tạo project VS 2019 (Lưu ý là phải có -A Win32)

• Mở solution Pikachu2020.sln trong thư mục win32-build vừa tạo:

• Sau lúc đã mở solution bằng VS, chọn Build -> Build Solution:

• Đặt Pikachu2020 làm StartUp project. Set as StartUp project:

• Chọn Local Windows Debugger ở thanh dụng cụ phía trên hoặc bấm F5 để chạy project:

Tham khảo thêm về cấu hình thiết lập cocos2d-x tại đây

5. Kiểm soát và đ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 lớp học chính (các file .h và .cpp) sẽ tiến hành lưu trong thư mục Classes/. Những file này sẽ tiến hành sử dụng trên mọi nền tảng. Code dành riêng cho từng nền tảng sẽ tiến hành lưu ở các 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 lớp học mở màn chạy.

Kích thước hành lang cửa số được khái niệm trong file AppDelegate.cpp ở thư mục Classes/:

Bạn cũng có thể thay đổi kích thước hành lang cửa số giao diện game bằng phương pháp kiểm soát và đ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 hành lang cửa số game có cùng tỷ lệ với kích thước màn hình hiển thị thiết bị.

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í những vật lên. Mỗi vật trên cảnh đó đấy 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 người tiêu dùng thuộc lớp Scene chứa những những gì sẽ tiến hành hiển thị trên màn hình hiển thị sau thời điểm chạy lệnh director->runWithScene(scene). Các đối tượng người tiêu dùng thuộc các lớp thừa kế lớp Node sẽ tiến hành vẽ khi chúng được thêm vào một trong những scene nào đó.

Ở trong project đã có sẵn class HelloWorld thừa kế class Scene, đây đấy là hành lang cửa số hiển thị trên màn hình hiển thị khi chạy lớp học.

Có thể thấy trong scene HelloWorld có những node sau:

– auto thực đơn = Thực đơn::create(…)

• Đây là đối tượng người tiêu dùng kiểu Thực đơn. Thường dùng làm chứa các node dạng MenuItem, ví dụ như các 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 người tiêu dùng thuộc các class thừa kế MenuItem phải được đặt trong Thực đơn.

– auto label = Label::createWithTTF(…)

• Chữ tiêu đề “Hello World“

– auto sprite = Sprite::create(…)

• Ảnh biểu tượng của cocos “HelloWorld.png”

7. Scene Graph, z-order:

Bạn cũng 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 ra sao? 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ỉ gồm có việc xế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 trình diễn quan hệ cha con giữa các node. Trong scene HelloWorld, thực đơn, 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 thực đơn nên là con của thực đơn.

– z-order: Quyết định trật 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ẽ tiến hành sắp xếp theo trật 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, chúng ta cũng có thể thêm một thông số int vào hàm addChild với ý tức là z-order của node được thêm. Z-order mặc định là 0 nếu không được khái niệm.

Trong hàm HelloWorld::init():

this->addChild(thực đơn, 1); // thực đơn là con của scene, z-order = 1

auto thực đơn = Thực đơn::create(closeItem, NULL); // closeItem là con của thực đơn, z-order mặc định = 0

this->addChild(label, 1); // label là con của scene, z-order = 1

this->addChild(sprite, 0); // sprite là con của scene, z-order = 0

Xem Thêm : Ahrefs là gì? 13 Chỉ số và các tính năng hữu ích trong Ahrefs 2023

Cocos2d-x vẽ các node theo trật tự duyệt in-order: Khi duyệt đến một node cha:

– Duyệt những node con có mức giá trị z-order < 0, theo trật tự z-order tăng dần.

– Vẽ node cha.

– Duyệt những node con có mức giá trị z-order >= 0, theo trật tự z-order tăng dần.

Trật tự vẽ của scene HelloWorld: Scene -> sprite -> thực đơn -> closeItem -> label .

(scene và thực đơn 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ó có thể được vẽ đè lên các node được vẽ từ trước và cũng tồn tại 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 PLAY

Mì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 nhấn 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 screen play->setPosition((Vec2(visibleSize) – origin) / 2); // Add PLAY to thực đơn 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 có thể gắn cho nó một hàm callback. Hàm này sẽ tiến hành gọi mỗi lúc 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ẽ tiến hành 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 GameScene

Tiếp theo, mình sẽ tạo một Scene mới. Scene này sẽ dùng làm 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 kì chạy, nút trở về, …. 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 <HelloWorldScene.hvàgt; 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 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 về 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 thực đơn = Thực đơn::create(back, nullptr); this->addChild(thực đơn); 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”, tuần tự là ảnh ở trạng thái thường nhật và ảnh ở trạng thái được chọn (khi click chuột, bấm, …). Các bạn lưu ảnh ở thư mục 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à tôi đã 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 hình thành 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.

Ở những phần sau mình sẽ nói về phong thái xử lý sự kiện trong cocos2d-x, tạo bảng game, …

Code phần 1 của mình:

– https://github.com/s34vv1nd/Cocos2dx-Tutorials/tree/master/part1

Tài liệu tham khảo:

– https://docs.cocos2d-x.org/cocos2d-x/v4/en/