COCOS2DX LÀ GÌ
Xin chào các bạn, từ bây giờ mình sẽ reviews tới chúng ta những bước thứ nhất để tiến hành thử thách Code trò chơi bằngCocos2d-x trong ngôn ngữ lập trình C++ trong khoảng 24h. Chúng ta cùng theo dõi nhé.
Bạn đang xem: Cocos2dx là gì
1. Cocos2d-x là gì?
Cocos2d-x là 1 trong engine phát triển game đa nền tảng: iOS, Android, macOS, Windows, Linux. Đây là 1 trong những game engine được hàng triệu lập trình viên sử dụng, cải cách và phát triển trên 25 nghìn game thiết yếu thức, 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, đá quí Dash, Idle Heroes, AFK Arena…
Cocos2d-x cung cấp 2 ngôn ngữ C++ với Lua, nhưng chủ yếu là C++. Mình chọn cocos2d-x để làm tutorials này cũng 1 phần vì C++, đây nói theo cách khác là ngôn ngữ phổ cập nhất với các bạn mới bắt đầu lập trình.
Tại sao gạn lọc Cocos2d-x?
- Dễ cho tất cả những người mới bắt đầu, cung ứng C++11 API (auto, std::function, lambda…).
- Đa nền tảng – với một source code hoàn toàn có thể chạy trên cả desktop với mobile. Có thể test với debug trên laptop rồi release trên gốc rễ mobile.
- API phong phú với rất đầy đủ các nhân tài (sprites, actions, animations, particles, transitions, timers, events (touch, keyboard, accelerometer, mouse), sound, file IO, persistence, skeletal animations, 3D).
- trọn vẹn FREE.
Trong nội dung bài viết này, mình sẽ làm một trò chơi Pikachu Onet Connect bằng Cocos2d-x.
2. Setup môi trường
Các yêu cầu:
- Python 2.7.5+ (recommend 2.7.10). để ý là Python 2 chứ chưa phải Python 3. Download 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 đặt path của python 2 trước path của python 3.
- CMake 3.6+. Tải về tạiđây.
Thêm băng thông đến bin của cmake vào PATH.
Download cocos2d-x phiên bạn dạng mới độc nhất tại đây.
Bài viết này thực hiện cocos2d-x 4.0.
Sau khi tải về và giải nén, hãy chạy tệp tin setup.py nhằm update PATH:
cd folder_giải_nén
python setup.py
Nếu bạn chưa xuất hiện NDK_ROOT tốt ANDROID_SDK_ROOT thì ko có gì cả, hãy dấn ENTER để skip.
3. Sinh sản project game mới:
Sau khi đã setup xong, tạo ra project mới bởi command prompt theo cú pháp:
cocos new -l cpp -d FOLDER_PATH PROJECT_NAME
-l cpp : chọn ngữ điệu C++
-d FOLDER_PATH : PATH đến folder bạn có nhu cầu chứa project (có thể bỏ lỡ nếu sản xuất project sinh sống folder đang chạy command promt)
PROJECT_NAME : thương hiệu project
Nếu muốn tạo nên game màn hình dọc, thêm ‘--portrait’
Ví dụ:
cocos new -l cpp -d D:/MyProjects --portrait Pikachu2020
4. Build và demo game cùng với Visual Studio:
Nếu bạn chưa có Visual Studio, bạn cũng có thể download bạn dạng mới tốt nhất tại đây.
Trong bài viết này, mình vẫn hướng dẫn thực hiện Visual Studio 2019 để build và kiểm tra project.
Tạo project Visual Studio 2019 bởi cmake:Điều đào bới thư mục project
chế tạo thư mục win32-build
Điều hướng về thư mục win32-build
cần sử dụng cmake để sinh sản project VS 2019 (Lưu ý là phải có -AWin32)
Sau khi đã mở solution bởi VS, lựa chọn Build -> Build Solution:
Đặt Pikachu2020 có tác dụng StartUp project. Set as StartUp project:
Tham khảo thêm về setup cocos2d-x tạiđây
5. Điều chỉnh form size của sổ game:
Project được tạo thành từ câu lệnh cocos new được copy từ bỏ template sẵn. Code của chương trình chính (các tệp tin .h với .cpp) sẽ tiến hành lưu trong folder Classes/. Số đông file này sẽ được sử dụng trên đều nền tảng. Code giành riêng cho từng căn cơ sẽ được lưu giữ ở 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 hotline khi chương trình bắt đầu chạy.
Kích thước cửa sổ được khái niệm trong tệp tin AppDelegate.cpp ở thư mục Classes/:
Bạn có thể thay đổi kích thước hành lang cửa số giao diện game bằng phương pháp điều chỉnh các thông số kỹ thuật (chiều ngang, chiều dọc) của designResolutionSize.
* Không nên chuyển đổi smallResolutionSize, mediumResolutionSize, largeResolutionSize.
* Nên để kích cỡ cửa sổ game có cùng phần trăm với kích thước màn hình thiết bị.
Xem thêm: Giải Mã Giấc Mơ: Nằm Mơ Thấy Bị Lạc Đường & Điềm Báo Lành Dữ Ra Sao
6. Scene cùng Node
Hãy tưởng tượng Scene là 1 trong những cảnh của game, bên trên một cảnh ta rất có thể đặt, chuẩn bị xếp, bố trí các thiết bị lên. Mỗi đồ vật trên cảnh đó đó là mộtNode, đócó thể là Label (Chữ), Image (Ảnh), Sprite (Ảnh động), và nhiều hơn nữa thế.
Một đối tượng người tiêu dùng thuộc lớp Scene chứa mọi những gì sẽ tiến hành hiển thị trên screen sau khi chạy lệnh director->runWithScene(scene). Các đối tượng người dùng thuộc những lớp vượt kế lớp Node sẽ được vẽ khi chúng được thêm vào một scene làm sao đó.
Ở vào project đã gồm sẵn class HelloWorldthừa kế class Scene, đây đó là cửa sổ hiển thị trên màn hình khi chạy chương trình.
Có thể thấy vào scene HelloWorld gồm có node sau:
- auto menu = Menu::create(…)
Đâ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ư các nút bấm để đưa Scene, Play, Quit, Settings, About, ...- tự động closeItem = MenuItemImage::create(…)
Biểu tượng đóng vận dụng thuộc class MenuItemImage – vượt kế class MenuItem. Các đối tượng người sử dụng thuộc các class quá kế MenuItem cần được đặt trong Menu.- tự động 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 rất có thể thắc mắc: nếu 2 node được đặt cùng một vị trí thì sao? bọn chúng sẽ xếp ông xã lên nhau như thế nào? Node như thế nào ở trên, node làm sao ở dưới?
Việc sắp tới xếp sắp xếp các Node vào một Scene không chỉ bao gồm việc sắp xếp vị trí trên không khí tọa độ 2d (Ox, Oy), chúng ta còn phải lưu ý đến scene graph với z-order.
- Scene Graph: là một trong những đồ thị cây màn trình diễn quan hệ thân phụ con giữa những node. Vào scene HelloWorld, menu, label và sprite được địa chỉ trực tiếp vào scene bắt buộc là con của scene, nhưng lại closeItem được showroom trực tiếp vào menu buộc phải là bé của menu.
- z-order: ra quyết định thứ tự số đông node nhỏ của cùng một node cha.
Những node bé của một scene hay của một node cha sẽ được thu xếp theo sản phẩm tự z-order ko giảm. Nếu như 2 node bao gồm z-order bằng nhau, node được chế tạo trước đang đứng trước.Khi thêm một node vào scene hoặc một node khác, bạn cũng có thể thêm một thông số int vào hàm addChild với ý nghĩa sâu sắc là z-order của node được thêm. Z-order mặc định là 0 nếu như không được định nghĩa.Trong hàm HelloWorld::init():
this->addChild(menu, 1); // thực đơn là nhỏ của scene, z-order = 1
auto thực đơn = Menu::create(closeItem, NULL); // closeItem là con của menu, z-order mang định = 0
this->addChild(label, 1); // label là nhỏ của scene, z-order = 1
this->addChild(sprite, 0); // sprite là con của scene, z-order = 0
Cocos2d-x vẽ những node theo thiết bị tự để mắt in-order: khi duyệt mang đến một node cha:
- Duyệt phần lớn node con có mức giá trị z-order = 0, theo đồ vật tự z-order tăng dần.
Thứ từ vẽ của scene HelloWorld: Scene -> sprite -> thực đơn -> closeItem -> label .
(scene cùng menu không tồn tại hình dạng bắt buộc sẽ ko tìm tòi trên màn hình)
Khi một node được vẽ, nó có thể được vẽ đè lên những node được vẽ tự trước cùng cũng rất có thể sẽ bị đè lên vì chưng những node được vẽ sau.
8. Tạo ra thêm Node và Scene
8.1 sản xuất nút PLAYMình sẽ xóa sprite và sản xuất một nút PLAY giữa cửa sổ HelloWorld, bạn thích khi bấm vào nút này màn hình sẽ chuyển sang cửa ngõ số nghịch game.
Tạo nút bắt đầu trong hàm HelloWorld::init() như sau:
bool HelloWorld::init() ... // showroom label "PLAY" with callback 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); // địa chỉ cửa hàng 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 các node nằm trong class quá 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ẽ được gọi. Tạm thời mình để hàm này in ra 1 mẫu log với văn bản “PLAY”.
Tiếp theo, mình sẽ khởi 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 đùa game, ví như bảng nghịch Pikachu, thanh thời hạn chạy, nút trở về, …. Trước tiên, mình sinh sản 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 Scene trống, khi vẽ ra đang chỉ tất cả nền đen.
8.3 chuyển SceneMình muốn khi bấm nút PLAY, màn hình hiển thị sẽ đưa từ HelloWorld quý phái GameScene đề nghị mình rất 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 biện pháp cool hơn, áp dụng hiệu ứng TransitionFade (nhiều cảm giác 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ẽ khởi tạo một nút BACK để quay trở lại scene HelloWorld tự GameScene. Lần này bản thân 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 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 chế tạo MenuItemImage::create() như nghỉ ngơi trên thừa nhận vào 2 hình ảnh "back1.png" với "back2.png", lần lượt là ảnh ở trạng thái bình thường và hình ảnh ở tâm trạng được lựa chọn (khi click chuột, bấm, ...). Chúng ta lưu hình ảnh ở thư mục Resource/ của project và thực hiện khi đề nghị tạo Image, Sprite, ...
Ảnh back1.png với back2.png của mình:
Và đây là kết quả
Kết luận:
Như vậy là bản thân đã reviews về game engine Cocos2d-x và phần đa khái niệm, nhân tố cơ phiên bản nhất của nó. Đây là một trong những game engine có rất nhiều người cần sử dụng nhất với đã đóng góp thêm phần tạo hình thành nhiều tựa trò chơi nổi tiếng.
Xem thêm: Cách Chơi 3Q Lên Cấp Nhanh, Hơn Game Thiếu Niên 3Q Với Bluestacks
Sau bài xích này mình hy vọng chúng ta nắm được cách tạo một scene, tạo thành và thêm node vào scene. Mình khích lệ cách chúng ta thử tạo ra scene với khá nhiều node ở những vị trí không giống nhau để nghiên cứu xem chúng tương tác (chồng lên nhau, đậy khuất nhau…) cùng nhau như nào. Ví như có bất kỳ vấn đề gì hãy phản hồi dưới bài xích post này.
Ở gần như phần sau mình đã nói về cách xử lý sự kiện trong cocos2d-x, sản xuất bảng game, …
