Cocos2dx là 1 trong những engine game khá thông dụng tuy đã thành lập từ siêu lâu. Bài bác này không chi tiết về engine để không dài dòng, dành cho chúng ta "mình cần sử dụng nó vì mình muốn nó"

*

Visual Studio 2017 (Các bạn dạng mới hơn không build được). Chiếc này các bạn tự tìm mua nhé, mình không post links crack đâu

*

Tắt screen console cũ đi nhằm windows cập nhật đường dẫn mới, kế tiếp có thể ban đầu vào quá trình chính: code ra bé game đầu tiên.

Bạn đang xem: Hướng dẫn cài đặt cocos2d-x

Chạy test

À mình đi hơi cấp tốc rồi, trước tiên chúng ta nên xem một số trong những ví dụ mẫu tuyệt đối hoàn hảo mà cocos đi kèm trong framework. Để coi cocos có thể làm gì và cung cấp được những gì. Đây cũng là code mẫu mã để các bạn đọc và tham khảo khi muốn làm một bản lĩnh gì đó. Trong trên đây có khá đầy đủ code để tạo ra một game xịn xò, tuy nhiên không phải ai ai cũng đủ kiên nhẫn để đọc hết tất cả các thử nghiệm trong đó.

Các chúng ta dùng VS Studio mở tệp tin E:Game
Devcocos2d-x-3.17.2uildcocos2d-win32.sln. Tìm tới bấm F5 để chạy thử. Hình ảnh test của cocos khi build thành công xuất sắc sẽ như sau

*

Tuy nhiên rất có thể các bạn sẽ gặp lỗi này cơ hội chạy: Compile error Cannot open libcurl.lib

Để fix chúng ta tiến hành build từng project trong solution theo máy tự sau (cái nào không có thì vứt qua)

libbox2dlibbulletlibrecastlib
Spinelibcocos2dlibluacocos2dlibjscocos2d

Sau đó ấn F5 để chạy lại. Chạy thử mặc định lúc chạy project này là cpp-test, các bạn có thể chạy thử js-test bằng cách chuột yêu cầu project js-tests->Set as Start
Up Project

*

Các bạn chơi thoải mái và dễ chịu trong chạy thử này trước lúc bắt tay vào tự sản xuất một project mang đến mình.

Tạo project

Trong thư mục E:Game
Dev bật hành lang cửa số console nhanh bằng phương pháp ấn vào thanh địa chỉ cửa hàng của Windows Explorer cùng gõ cmd -> Enter

cocos new First3DProject -l js -p com.chikido.myfirstproject
Chú thích:

First3DProject là tên gọi project bạn tạo. Cocos sẽ tạo một thư mục cùng tên trong Game
Dev với chứa toàn bộ mã nguồn cũng như tài nguyên của game bạn trong đấy-l js chỉ định ngữ điệu của project bạn là Javascript-p com.chikido.myfirstproject là tên gọi package khi chúng ta build ra android cho Android. Còn nếu như không quan tâm thì quăng quật trống cũng được

Đợi một tẹo mang lại cocos copy những thư viện đề xuất thiết, các bạn sẽ được một thư mục tựa như hình. Bao gồm các thư mục:

framework chứa các mã nguồn + tủ sách của cocos nhằm dịch ra các platform không giống nhausrc đựng mã nguồn javascript của trò chơi bạnres cất tài nguyên (hình ảnh, model, âm thanh...) của bạn
*

Để chạy thử, các bạn có những cách sau:

Ở thư mục cội project, nhảy commandline cùng chạy lệnh cocos run -p win32 hoặc cocos run -p android. (Không khuyến khích giải pháp này vị nó không hiện tại log tương tự như có một trong những lỗi mình không biết cách fix
*

Một số lỗi bao gồm thể gặp phải

Lần đầu chạy cocos của chính mình cực kì khó khăn do nó báo lỗi tùm lum cả. Sau đây là một số lỗi tất cả thể chạm mặt trong quá trình chạy Hello World

"C:Program" is not recognized as an internal or external command, operable program or batch file.

Lỗi này vì tool parse của cocos không cân xứng với kiểu mẫu lệnh bên trên windows command line.Tìm file E:/Game
Dev/cocos2d-x-3.17.2/tools/cocos2d-console/plugins/plugin_compile/project_compile.py, tìm về dòng 1113 với sửa 2 block code thành

# nâng cấp projects if need
Upgrade: command
Upgrade = " ".join(< """%s"" % command
Path, ""%s"" % sln_file, "/Upgrade"" >) self._run_cmd(command
Upgrade) # build the project commands = " ".join(< """%s"" % command
Path, ""%s"" % sln_file, "/Build "%s"" % build_mode, "/Project "%s""" % project_name >) self._run_cmd(commands)

*

CMake was unable lớn find a build program corresponding lớn "Ninja"

Khi mở project bằng android studio gồm thể chúng ta gặp lỗi này, mua Ninja như phần sẵn sàng là ổn.

Còn nữa nhưng mình xem nhẹ rồi thì các bạn có thể contact với mình để mình update thêm nhé

Xây dựng một Scene 3D

Cuối cùng cũng mang đến với phần "chính" của nội dung bài viết này. Bọn họ sẽ thêm một bé nhỏ gái (wjbu intensifies) đáng yêu và dễ thương vào cảnh và cần sử dụng camera của cocos nhằm soi mọi khía cạnh

*
*

Camera

Để hoàn toàn có thể nhìn nhỏ xíu gái rõ hơn, chúng ta cần kiểm soát và điều chỉnh camera (vị trí, góc nhìn) lại. Chú ý là kể từ lúc điều chỉnh camera thì toạ độ trên màn hình sẽ không còn là toạ độ 2d nữa cơ mà sẽ là toạ độ 3 chiều. Các chúng ta cũng có thể tạm hiểu qua hình minh hoạ vẽ bằng Paint

*

Thêm các dòng sau vào sau cùng phần trên:

let camera = cc.director.get
Running
Scene().get
Default
Camera(); camera.set
Position3D(cc.math.vec3(0, 200, 500)); camera.look
At(cc.math.vec3(0, 0, 0));Chúng ta mang camera của cảnh bằng hàm get
Default
Camera(). Vì bản thân camera cũng là một đối tượng 3D nên bạn có thể đặt vị trí mang đến nó. địa chỉ (0, 200, 500) vẫn là địa chỉ chếch lên trên cùng lùi ra xa so với nhỏ xíu gái. Hàm look
At sẽ auto xoay camera nhắm đến điểm đã định. Đến trên đây thì chúng ta có thể thấy nhỏ nhắn ở một góc khác rộng so với góc nhìn "phẳng" thời điểm trước.

*

OKAY! Đến đây coi như đã xong cảnh rồi. Tuy nhiên xong xuôi demo như này còn có vẻ hơi ngán nên bọn họ hãy cùng vọc thêm cách để soi được nhiều góc hơn nhé

*

Có thể các các bạn sẽ thắc mắc vì sao lại là this.set
Position3D(...), this.look
At(...). Đây là một trong những "tính năng" của javascript. Khi bạn gọi một hàm với hàm bind(object
A), hàm đó sẽ được gọi trong văn cảnh của object
A (chính là camera của chúng ta).

Tóm gọn lại, đoạn code trên sẽ tạo một thuộc tính mang tên _total
Time mang đến camera. Tạo nên một hàm được hotline mỗi khung người và cho camera call nó, hàm kia sử dụng thời gian được lưu để đưa thành toạ độ trong không gian cho camera. Hết

*

Xin chào những bạn, từ bây giờ mình sẽ trình làng tới chúng ta những bước đầu tiên để triển khai thử thách Code trò chơi bằng
Cocos2d-x trong ngôn ngữ lập trình C++ trong vòng 24h. Chúng ta cùng theo dõi nhé.

1. Cocos2d-x là gì?

Cocos2d-x là 1 trong những engine trở nên tân tiến game nhiều nền tảng: i
OS, Android, mac
OS, Windows, Linux. Đây là một trong những game engine được hàng ngàn lập trình viên sử dụng, phát triển trên 25 nghìn game chủ yếu thức, bao hàm nhiều tựa game nổi tiếng như: Piano Tiles - Don"t Tap the trắng Tile, Hill Climbing Racing, FLow Free, kim cương Dash, Idle Heroes, AFK Arena…

Cocos2d-x cung ứng 2 ngữ điệu C++ và 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 có thể nói rằng là ngôn ngữ thông dụng nhất với chúng ta mới ban đầu lập trình.

Tại sao tuyển lựa Cocos2d-x?

- Dễ cho 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 rất có thể chạy trên cả desktop cùng mobile. Có thể test và debug trên máy tính xách tay rồi release trên gốc rễ mobile.

- API phong phú với khá đầy đủ các công dụng (sprites, actions, animations, particles, transitions, timers, events (touch, keyboard, accelerometer, mouse), sound, tệp tin IO, persistence, skeletal animations, 3D).

- trọn vẹn FREE.

Trong 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 thương cầu:

- Python 2.7.5+ (recommend 2.7.10). Xem xét là Python 2 chứ chưa phải Python 3. Tải về tạiđây.

Thêm python 2 vào PATH. Nếu như khách hàng có cả python 2 với 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 băng thông đến bin của cmake vào PATH.

*

Download cocos2d-x phiên phiên bản mới độc nhất tại đây.

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

Sau khi download và giải nén, hãy chạy file setup.py nhằm update PATH:

cd folder_giải_nén

python setup.py

*

Nếu bạn chưa có NDK_ROOT tốt ANDROID_SDK_ROOT thì ko có gì cả, hãy thừa nhận ENTER nhằm skip.

3. Chế tác project trò chơi mới:

Sau lúc đã thiết lập 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 muốn chứa project (có thể bỏ qua nếu chế tạo ra project nghỉ ngơi folder đang hoạt động command promt)

PROJECT_NAME : thương hiệu project

Nếu muốn tạo thành game screen dọc, thêm ‘--portrait’

Ví dụ:

cocos new -l cpp -d D:/My
Projects --portrait Pikachu2020

*

4. Build và chạy thử game cùng với Visual Studio:

Nếu bạn chưa xuất hiện Visual Studio, chúng ta có thể download bản mới tốt nhất tại đây.

Trong bài viết này, mình đã hướng dẫn áp dụng Visual Studio 2019 để build và thử nghiệm project.

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

Điều tìm hiểu thư mục project

tạo nên thư mục win32-build

Điều hướng về thư mục win32-build

sử dụng cmake để tạo nên project VS 2019 (Lưu ý là phải tất cả -AWin32)

*

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

*

Sau khi vẫn mở solution bởi VS, lựa chọn Build -> Build Solution:

*

Đặt Pikachu2020 có tác dụng Start
Up project. Set as Start
Up project
:

*

Chọn Local Windows Debuggerở thanh công cụ bên trên hoặc bấm F5 nhằm chạy project:

*

Tham khảo thêm về setup cocos2d-x tạiđây

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

Project được tạo ra từ câu lệnh cocos new được copy trường đoản cú template sẵn. Code của chương trình bao gồm (các file .h và .cpp) sẽ được lưu trong thư mục Classes/. đa số file này sẽ tiến hành sử dụng trên những nền tảng. Code dành riêng cho từng gốc rễ sẽ được lưu giữ ở các thư mục riêng (proj.android, proj.ios_mac, proj.linux, proj.win32).

Class App
Delegate (App
Delegate.h, App
Delegate.cpp) là class được call khi chương trình ban đầu chạy.

Kích thước hành lang cửa số được có mang trong file App
Delegate.cpp ở thư mục Classes/:

*

Bạn có thể biến đổi kích thước hành lang 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 design
Resolution
Size.

* Không nên chuyển đổi small
Resolution
Size, medium
Resolution
Size, large
Resolution
Size.

* Nên để form size cửa sổ game bao gồm cùng phần trăm với form size màn hình thiết bị.

6. Scene với Node

Hãy tưởng tượng Scene là một trong cảnh của game, bên trên một cảnh ta có thể đặt, sắp đến 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ế nữa thế.

Một đối tượng người sử dụng thuộc lớp Scene chứa gần như những gì sẽ tiến hành hiển thị trên màn hình hiển thị sau lúc chạy lệnh director->run
With
Scene(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 trong 1 scene làm sao đó.

Ở vào project đã bao gồm sẵn class Hello
Worldthừa kế class Scene, đây chính là cửa sổ hiển thị trên screen khi chạy chương trình.

Có thể thấy vào scene Hello
World bao hàm node sau:

- auto menu = Menu::create(…)

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

- tự động close
Item = Menu
Item
Image::create(…)

Biểu tượng đóng ứng dụng thuộc class Menu
Item
Image – quá kế class Menu
Item. Các đối tượng thuộc những class thừa kế Menu
Item phải được đặt trong Menu.

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

Chữ title “Hello World“

- tự động hóa sprite = Sprite::create(…)

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

*

7. Scene Graph, z-order:

Bạn có thể thắc mắc: ví như 2 node được đặt và một vị trí thì sao? bọn chúng sẽ xếp ck lên nhau như thế nào? Node nào ở trên, node làm sao ở dưới?

Việc chuẩn bị xếp sắp xếp các Node vào một Scene ko chỉ bao hà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 xem xét scene graph cùng z-order.

- Scene Graph: là một trong đồ thị cây màn trình diễn quan hệ cha con giữa các node. Vào scene Hello
World, menu, label với sprite được showroom trực tiếp vào scene yêu cầu là bé của scene, nhưng close
Item được địa chỉ trực tiếp vào menu đề xuất là nhỏ của menu.

- z-order: ra quyết định thứ tự những node bé của cùng một node cha.

Những node nhỏ của một scene hay của một node phụ thân sẽ được sắp xếp theo sản phẩm tự z-order ko giảm. Ví như 2 node bao gồm z-order bằng nhau, node được cung cấp trước đã đứng trước.Khi thêm một node vào scene hoặc một node khác, chúng ta có thể thêm một thông số int vào hàm add
Child với ý nghĩa sâu sắc là z-order của node được thêm. Z-order khoác định là 0 nếu không được định nghĩa.

Trong hàm Hello
World::init():

this->add
Child(menu, 1); // menu là bé của scene, z-order = 1

auto menu = Menu::create(close
Item, NULL); // close
Item là nhỏ của menu, z-order khoác định = 0

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

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

*

Cocos2d-x vẽ những node theo thiết bị tự chú ý in-order: lúc duyệt mang đến một node cha:

- Duyệt đông đảo node con có giá trị z-order = 0, theo thiết bị tự z-order tăng dần.

Thứ tự vẽ của scene Hello
World: Scene -> sprite -> thực đơn -> close
Item -> label
.

(scene với menu không tồn tại hình dạng cần sẽ ko tìm ra trên màn hình)

Khi một node được vẽ, nó hoàn toàn có thể được vẽ đè lên các node được vẽ từ bỏ trước và cũng hoàn toàn có thể sẽ bị đè lên vì chưng những node được vẽ sau.

8. Sản xuất thêm Node cùng Scene

8.1 sinh sản nút PLAY

Mình đang xóa sprite và sản xuất một nút PLAY giữa hành lang cửa số Hello
World, bạn thích khi nhấp chuột nút này màn hình sẽ đưa sang cửa số nghịch game.

Tạo nút bắt đầu trong hàm Hello
World::init() như sau:

bool Hello
World::init() ... // add label "PLAY" with callback Hello
World::play tự động hóa play = Menu
Item
Label::create(Label::create
With
TTF("PLAY", "fonts/Marker Felt.ttf", 40), CC_CALLBACK_1(Hello
World::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->set
Position((Vec2(visible
Size) - origin) / 2); // địa chỉ cửa hàng PLAY to lớn menu menu->add
Child(play); return true;void Hello
World::play(Ref *p
Sender) tự động game
Scene = Game
Scene::create
Scene(); Director::get
Instance()->replace
Scene( Transition
Fade::create(0.5, game
Scene, Color3B(0, 255, 255)));Với những node ở trong class thừa kế Menu
Item (Menu
Item
Label, Menu
Item
Image, Menu
Item
Sprite…), ta có thể gắn đến nó một hàm callback. Hàm này sẽ tiến hành 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 Hello
World::play(Ref*) sẽ tiến hành gọi. Tạm thời mình để hàm này in ra 1 mẫu log với ngôn từ “PLAY”.

*

8.2 tạo Game
Scene

Tiếp theo, mình sẽ tạo nên một Scene mới. Scene này sẽ dùng để chứa mọi yếu tố hiển thị khi mình đang đùa game, ví như bảng chơi Pikachu, thanh thời gian chạy, nút trở về, …. Trước tiên, mình chế tạo class Game
Scene:

Game
Scene.h:

#pragma once#include "cocos2d.h"USING_NS_CC;class Game
Scene : public Scenepublic:static Scene* create
Scene();virtual bool init();CREATE_FUNC(Game
Scene);;Game
Scene.cpp:

#include "Game
Scene.h"#include Scene* Game
Scene::create
Scene()return Game
Scene::create();bool Game
Scene::init()// super init()if (!Scene::init()) return false;return true;Đây là 1 trong những Scene trống, lúc vẽ ra vẫn chỉ gồm nền đen.

8.3 chuyển Scene

Mình ao ước khi bấm nút PLAY, màn hình hiển thị sẽ chuyển từ Hello
World sang trọng Game
Scene đề xuất mình có thể sửa lại hàm callback của nút PLAY như sau:

void Hello
World::play(Ref* p
Sender) Director::get
Instance()->replace
Scene(Game
Scene::create
Scene());Hoặc, một cách cool hơn, sử dụng hiệu ứng Transition
Fade (nhiều hiệu ứng hơn tạiđây)

void Hello
World::play(Ref* p
Sender) auto game
Scene = Game
Scene::create
Scene(); Director::get
Instance()->replace
Scene( Transition
Fade::create(0.5, game
Scene, Color3B(0, 255, 255)));Tương từ như nút PLAY, mình sẽ tạo nên một nút BACK để quay trở lại scene Hello
World từ bỏ Game
Scene. Lần này mình sẽ sử dụng Menu
Item
Image.

Game
Scene.cpp:

bool Game
Scene::init()// super init()if (!Scene::init()) return false;auto visible
Size = Director::get
Instance()->get
Visible
Size();Vec2 origin = Director::get
Instance()->get
Visible
Origin();auto back = Menu
Item
Image::create("back1.png", "back2.png",CC_CALLBACK_1(Game
Scene::back, this));CCASSERT(back != nullptr, "Fail khổng lồ load BACK images");auto menu = Menu::create(back, nullptr);this->add
Child(menu);menu->set
Position(origin);back->set
Position(origin + Vec2(back->get
Content
Size().width / 2, visible
Size.height - back->get
Content
Size().height / 2));return true;void Game
Scene::back(Ref* p
Sender) auto home
Scene = Hello
World::create
Scene();Director::get
Instance()->replace
Scene(Transition
Fade::create(0.5, home
Scene, Color3B(0, 255, 255)));Hàm khởi chế tạo Menu
Item
Image::create() như sinh sống trên dấn vào 2 ảnh "back1.png" và "back2.png", thứu tự là ảnh ở trạng thái thông thường và hình ảnh ở tâm lý được chọn (khi click chuột, bấm, ...). Chúng ta lưu hình ảnh ở folder Resource/ của project và sử dụng khi cần 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 đã giới thiệu về trò chơi engine Cocos2d-x và rất nhiều khái niệm, nhân tố cơ phiên bản nhất của nó. Đây là giữa những game engine có khá nhiều người cần sử dụng nhất cùng đã góp phần tạo dựng nên nhiều tựa game nổi tiếng.

Xem thêm: Xu Hướng 12/2022 # Bán Cá Thần Tiên Ai Cập, Thần Tiên 3 Vạch,

Sau bài xích này bản thân hy vọng chúng ta nắm được biện pháp tạo một scene, tạo thành và thêm node vào scene. Mình khích lệ cách các bạn thử tạo scene với khá nhiều node ở nhiều vị trí khác biệt để thí điểm xem chúng liên can (chồng lên nhau, đậy khuất nhau…) cùng nhau như nào. Nếu như có bất kỳ vấn đề gì hãy phản hồi dưới bài bác post này.

Ở các phần sau mình vẫn nói về cách xử lý sự kiện trong cocos2d-x, sản xuất bảng game, …