Tài liệu hướng dẫn lập trình game với cocos2d-x

Xin chào chúng ta, lúc này mình đã trình làng cho tới chúng ta hầu hết bước trước tiên nhằm thực hiện thử thách Code trò chơi bằngCocos2d-x trong ngôn từ thiết kế C++ trong tầm 24h. Các các bạn cùng quan sát và 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 trong engine cải tiến và phát triển game đa nền tảng: iOS, Android, macOS, Windows, Linux. Đây là một game engine được hàng ngàn lập trình sẵn viên thực hiện, cách tân và phát triển bên trên 25 ngàn game đồng ý, bao hàm nhiều tựa game lừng danh 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ữ điệu C++ cùng Lua, nhưng chủ yếu là C++. Mình lựa chọn cocos2d-x để gia công tutorials này cũng 1 phần bởi C++, phía trên nói cách khác là ngôn ngữ phổ biến độc nhất cùng với chúng ta bắt đầu bước đầu lập trình sẵn.

Tại sao gạn lọc Cocos2d-x?

- Dễ cho những người bắt đầu bước đầu, cung ứng 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 cùng thiết bị di động. Có thể kiểm tra với debug bên trên laptop rồi release bên trên căn nguyên di động.

- API phong phú cùng với rất đầy đủ các chức năng (sprites, actions, animations, particles, transitions, timers, events (touch, keyboard, accelerometer, mouse), sound, tệp tin IO, persistence, skeletal animations, 3D).

- Hoàn toàn FREE.

Trong bài viết này, bản thân đang làm một game Pikachu Onet Connect bằng Cocos2d-x.

2. Cài đặt môi trường

Các yêu thương cầu:

- Pykhông lớn 2.7.5+ (recommover 2.7.10). Lưu ý là Pythanh mảnh 2 chứ đọng chưa hẳn Pythuôn 3. Download tạiphía trên.

Thêm pyhạn hẹp 2 vào PATH. Nếu bạn gồm cả pyeo hẹp 2 và pythanh mảnh 3 thì phải để path của pynhỏ bé 2 trước path của pykhiêm tốn 3.

- CMake 3.6+. Download tạitrên đây.

Thêm băng thông đến bin của cmake vào PATH.

*

Download cocos2d-x phiên bạn dạng tiên tiến nhất tại đây.

Bài viết này áp dụng cocos2d-x 4.0.

Sau khi download cùng bung file, hãy chạy file setup.py để update PATH:

cd folder_giải_nén

python setup.py

*

Nếu các bạn chưa có NDK_ROOT tốt ANDROID_SDK_ROOT thì không sao cả, hãy nhận ENTER nhằm skip.

3. Tạo project game mới:

Sau lúc sẽ thiết đặt xong, chế tạo project bắt đầu bởi command prompt theo cú pháp:

cocos new -l cpp -d FOLDER_PATH PROJECT_NAME

-l cpp : chọn ngôn ngữ C++

-d FOLDER_PATH : PATH đến thư mục bạn có nhu cầu cất project (hoàn toàn có thể bỏ qua mất trường hợp chế tạo ra project sinh hoạt thư mục đang chạy commvà promt)

PROJECT_NAME : tên project

Nếu mong mỏi tạo nên game screen 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 chúng ta chưa tồn tại Visual Studio, bạn có thể tải về phiên bản mới nhất tại đây.

Trong bài viết này, mình đang chỉ dẫn sử dụng Visual Studio 2019 nhằm build với kiểm tra project.

Tạo project Visual Studio 2019 bởi cmake:

Điều hướng đến thỏng mục project

Tạo thỏng mục win32-build

Điều nhắm đến thư mục win32-build

Dùng cmake để tạo nên project VS 2019 (Lưu ý là buộc phải có -AWin32)

*

Mngơi nghỉ solution Pikachu20trăng tròn.sln trong folder win32-build vừa tạo:

*

Sau lúc sẽ msống solution bởi VS, chọn Build -> Build Solution:

*

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

*

Chọn Local Windows Debuggerlàm việc tkhô hanh mức sử dụng phía trên hoặc bnóng F5 nhằm chạy project:

*

Tham mê khảo thêm về thiết lập cocos2d-x tạiđây

5. Điều chỉnh size của sổ game:

Project được tạo thành từ câu lệnh cocos new được copy tự template sẵn. Code của chương trình chủ yếu (các tệp tin .h cùng .cpp) sẽ tiến hành giữ vào tlỗi mục Classes/. Những file này sẽ tiến hành áp dụng trên các gốc rễ. Code giành riêng cho từng nền tảng gốc rễ sẽ được giữ sinh sống các folder riêng rẽ (proj.apk, proj.ios_mac, proj.linux, proj.win32).

Class AppDelegate (AppDelegate.h, AppDelegate.cpp) là class được Hotline Lúc chương trình bắt đầu chạy.

Kích thước hành lang cửa số được định nghĩa vào file AppDelegate.cpp làm việc thư mục Classes/:

*

quý khách hàng hoàn toàn có thể đổi khác form size hành lang cửa số hình ảnh 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 biến hóa smallResolutionSize, mediumResolutionSize, largeResolutionSize.

* Nên nhằm form size hành lang cửa số game có cùng Phần Trăm cùng với form size screen trang 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ới Node

Hãy tưởng tượng Scene là 1 chình ảnh của game, trên một chình họa ta hoàn toàn có thể đặt, thu xếp, bố trí những vật dụng lên. Mỗi vật bên trên cảnh đó đó là mộtNode, đócó thể là Label (Chữ), Image (Ảnh), Sprite (Hình ảnh động), cùng những chưa dừng lại ở đó.

Một đối tượng người sử dụng thuộc lớp Scene chứa mọi hồ hết gì sẽ tiến hành hiển thị trên screen sau khoản thời gian chạy lệnh director->runWithScene(scene). Các đối tượng người sử dụng ở trong những lớp thừa kế lớp Node sẽ được vẽ Khi chúng nhận thêm vào một trong những scene như thế nào kia.

Tại trong project sẽ gồm sẵn class HelloWorldthừa kế class Scene, trên đây chính là hành lang cửa số hiện trên screen Khi chạy chương trình.

cũng có thể thấy trong scene HelloWorld gồm có node sau:

- tự động hóa menu = Menu::create(…)

Đây là đối tượng người tiêu dùng kiểu dáng Menu. Thường dùng để đựng những node dạng MenuItem, ví dụ như những nút ít bấm nhằm gửi Scene, Play, Quit, Settings, About, ...

- auto closeItem = MenuItemImage::create(…)

Biểu tượng đóng góp ứng dụng ở trong class MenuItemImage – vượt kế class MenuItem. Các đối tượng người tiêu dùng trực thuộc những class vượt kế MenuItem buộc phải được đặt vào Menu.

- tự động hóa label = Label::createWithTTF(…)

Chữ title “Hello World“

- auto sprite = Sprite::create(…)

Hình ảnh hình tượng của cocos “HelloWorld.png”

*

7. Scene Graph, z-order:

quý khách hàng có thể thắc mắc: Nếu 2 node được đặt và một địa chỉ thì sao? Chúng đang xếp ông chồng lên nhau như thế nào? Node nào ngơi nghỉ trên, node như thế nào làm việc dưới?

Việc thu xếp bố trí các Node vào một Scene không chỉ bao hàm câu hỏi sắp đặt địa điểm bên trên không khí tọa độ 2 chiều (Ox, Oy), bạn còn phải quan tâm đến scene graphz-order.

- Scene Graph: là 1 trong những vật thị cây màn biểu diễn quan hệ tình dục cha con thân những node. Trong scene HelloWorld, menu, label và sprite được add trực tiếp vào scene đề nghị là con của scene, dẫu vậy closeItem được add thẳng vào thực đơn đề xuất là bé của menu.

- z-order: Quyết định đồ vật tự hầu như node bé của cùng một node phụ vương.

Những node nhỏ của một scene giỏi của một node cha sẽ được sắp xếp theo vật dụng trường đoản cú z-order không sút. Nếu 2 node gồm z-order đều nhau, node được cung ứng trước đang đứng trước.Khi thêm một node vào scene hoặc một node không giống, chúng ta có thể thêm 1 tsay mê số int vào hàm addChild với ý nghĩa là z-order của node được thêm. Z-order khoác định là 0 nếu như không được tư tưởng.

Trong hàm HelloWorld::init():

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

tự động menu = Menu::create(closeItem, NULL); // closeItem là bé của menu, z-order mặc định = 0

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

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

*

Cocos2d-x vẽ các node theo thứ từ chuẩn y in-order: Lúc lưu ý cho một node cha:

- Duyệt hầu hết node nhỏ có giá trị z-order = 0, theo thứ từ z-order tăng ngày một nhiều.

Thứ đọng trường đoản cú vẽ của scene HelloWorld: Scene -> sprite -> thực đơn -> closeItem -> label .

(scene với thực đơn không có bản thiết kế buộc phải đã ko thấy được trên màn hình)

Lúc một node được vẽ, nó có thể được vẽ đè lên các node được vẽ tự trước và cũng rất có thể sẽ bị đè lên vị đầy đủ node được vẽ sau.

8. Tạo thêm Node cùng Scene

8.1 Tạo nút ít PLAY

Mình đã xóa sprite với chế tác một nút ít PLAY giữa hành lang cửa số HelloWorld, bạn muốn khi nhấn vào nút ít này screen vẫn gửi sang trọng cửa ngõ số chơi game.

Tạo nút new vào hàm HelloWorld::init() nlỗi sau:

bool HelloWorld::init() ... // Add label "PLAY" with callbaông chồng HelloWorld::play tự động 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 khổng lồ 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 nằm trong class thừa kế MenuItem (MenuItemLabel, MenuItemImage, MenuItemSprite…), ta hoàn toàn có thể lắp mang lại nó một hàm callbaông xã. Hàm này sẽ được hotline mỗi khi node được kích hoạt (bấm vào, bấm, …).

Mỗi lần ta clichồng vào chữ PLAY, hàm callbachồng HelloWorld::play(Ref*) sẽ được hotline. Tạm thời mình để hàm này in ra 1 chiếc log cùng với câu chữ “PLAY”.

*

8.2 Tạo GameScene

Tiếp theo, bản thân sẽ tạo nên một Scene bắt đầu. Scene này đã dùng để làm chứa hầu hết yếu tố hiển thị lúc bản thân đang chơi trò chơi, ví dụ như bảng nghịch Pikachu, tkhô nóng thời gian chạy, nút trngơi nghỉ về, …. Thứ nhất, bản thân chế tác class GameScene:

GameScene.h:

#pragma once#include "cocos2d.h"USING_NS_CC;class GameScene : public Scenepublic: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 trong những Scene trống, lúc vẽ ra đang chỉ gồm nền Đen.

8.3 Chuyển Scene

Mình ao ước Khi bnóng nút PLAY, màn hình đang gửi trường đoản cú HelloWorld sang GameScene bắt buộc mình hoàn toàn có thể sửa lại hàm callbaông chồng của nút PLAY như sau:

void HelloWorld::play(Ref* pSender) Director::getInstance()->replaceScene(GameScene::createScene());Hoặc, một giải pháp cool rộng, sử dụng hiệu ứng TransitionFade (những cảm giác rộng tạiđây)

void HelloWorld::play(Ref* pSender) tự động gameScene = GameScene::createScene(); Director::getInstance()->replaceScene( TransitionFade::create(0.5, gameScene, Color3B(0, 255, 255)));Tương tự nhỏng nút PLAY, bản thân sẽ tạo nên một nút BACK để quay lại scene HelloWorld từ bỏ GameScene. Lần này mình đang áp dụng MenuItemImage.

GameScene.cpp:

bool GameScene::init()// super init()if (!Scene::init()) return false;tự động visibleSize = Director::getInstance()->getVisibleSize();Vec2 origin = Director::getInstance()->getVisibleOrigin();auto bachồng = MenuItemImage::create("back1.png", "back2.png",CC_CALLBACK_1(GameScene::bachồng, this));CCASSERT(bachồng != nullptr, "Fail lớn load BACK images");auto thực đơn = 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 sản xuất MenuItemImage::create() nlỗi sinh sống trên thừa nhận vào 2 ảnh "back1.png" và "back2.png", theo lần lượt là ảnh ngơi nghỉ trạng thái bình thường với hình ảnh sống tâm lý được chọn (lúc bấm vào, bấm, ...). Các các bạn lưu ảnh sinh sống thư mục Resource/ của project và sử dụng Khi cần tạo ra Image, Sprite, ...

Hình ảnh back1.png với back2.png của mình:

*
*

Và đây là kết quả

*

Kết luận:

vì thế là mình đã ra mắt về game engine Cocos2d-x cùng những khái niệm, yếu tố cơ bạn dạng độc nhất của chính nó. Đây là 1 trong những giữa những game engine có nhiều người tiêu dùng độc nhất và đã góp phần chế tạo hình thành các tựa game danh tiếng.

Xem thêm: Hack Xu Miễn Phí, Hack Xu Không Cần Thẻ Nạp, Hack Xu 100% Thành Công 2014

Sau bài bác này mình hy vọng các bạn gắng được cách sản xuất một scene, tạo thành và thêm node vào scene. Mình khuyến nghị biện pháp các bạn test tạo ra scene với tương đối nhiều node nghỉ ngơi những vị trí khác biệt để xem sét coi bọn chúng liên can (chồng lên nhau, đậy tắt thở nhau…) với nhau nlỗi nào. Nếu có bất kỳ vụ việc gì hãy bình luận bên dưới bài post này.

Tại phần nhiều phần sau bản thân vẫn nói về cách giải pháp xử lý sự khiếu nại vào cocos2d-x, chế tạo bảng game, …


Chuyên mục: Thủ thuật game