Menu Items và Menu
Trong 1 game thông thường, sẽ có các mục như play, pause, about, ... Các mục này sẽ được gọi là Menu Item. 1 Menu được tạo từ 1 hay nhiều Menu Items. Có tác dụng điều hướng game thông qua các tùy chọn của người chơi.
Khởi tạo Menu Item
Tạo 1 Menu Item sử dụng hình ảnh.
// Menu Item sử dụng hình ảnh. // Khởi tạo Menu Item có tên là closeItem. auto closeItem = MenuItemImage::create("CloseNormal.png", "CloseSelected.png", CC_CALLBACK_1(HelloWorld::menuCloseCallback, this)); // Thiết lập vị trí của closeItem tại vị trí (100, 100). closeItem->setPosition(Vec2(100, 100));
Menu Item có hai trạng thái normal và selected.
- normal: trạng thái của Menu Item khi chưa có thao tác của người chơi lên Menu Item này. Ở đoạn code trên closeItem ở trạng thái normal sử dụng hình ảnh
CloseNormail.png
. - selected: trạng thái khi có các thao tác từ người chơi như touch, mouse click. Khi người chơi hoàn thành thao tác thì Menu Item sẽ thực hiện 1 đoạn code. Ở đoạn code trên closeItem ở trạng thái selected sử dụng hình ảnh
CloseSelcted.png
.
// Nhiệm vụ của đoạn code này là kết thúc trò chơi. Có thể sử dụng nó với Menu Item exit. void HelloWorld::menuCloseCallback(Ref* pSender) { #if (CC_TARGET_PLATFORM == CC_PLATFORM_WP8) || (CC_TARGET_PLATFORM == CC_PLATFORM_WINRT) return; #endif Director::getInstance()->end(); #if (CC_TARGET_PLATFORM == CC_PLATFORM_IOS) exit(0); #endif }
Có thể tạo 1 Menu Item sử dụng văn bản. Khi ở trạng thái normal, Menu Item sẽ có cỡ chữ bằng với lúc thiết lập, trạng thái selected cỡ chữ sẽ to hơn so với trạng thái normal.
// Menu Item sử dụng văn bản. // Khởi tạo 1 Label có tên là myLabel. auto myLabel = Label::create("Close Item", "Arial", 24); // Khởi tạo Menu Item có tên là closeItem. auto closeItemLabel = MenuItemLabel::create(myLael, CC_CALLBACK_1(HelloWorld::menuCloseCallback, this)); // Thiết lập vị trí của closeItem tại vị trí (100, 150). closeItemLabel->setPosition(Vec2(100, 150));
Khởi tạo Menu
Có thể khởi tạo 1 Menu dễ dàng như sau:
// Khởi tạo Menu có tên là menu. auto menu = Menu::create(closeItem, closeItemLabel, NULL); // Thêm menu vào Scene hiện tại. this->addChild(menu, 1);
hoặc
// Khởi tạo 1 mảng Vector kiểu MenuItemLabel. Vector<MenuItem*> menuItems; // Thêm Menu Item closeItem vào menuItems. menuItems.pushBack(closeItem); menuItems.pushBack(clostItemLabel); // Tạo 1 Menu có tên là menu với mảng Vector menuItems. auto menu = Menu::createWithArray(menuItems); // Thêm vào Scence hiện tại. this->addChild(menu, 1);
Chú ý: Menu Item không thể được thêm vào Scene hiện tại, phải thêm Menu Item muốn sử dụng vào Menu, sau đó thêm Menu vào Scene hiện tại.
Button
Là 1 đối tượng rất hay được sử dụng trong game. Khi người chơi chọn vào nó thì 1 sự kiện xảy ra trong trò chơi như chuyển Scene hay thêm 1 Sprite,... Button có hai trạng thái là normal và selected.
#include "ui/CocosGUI.h" auto button = Button::create("normal.png", "selected.png", "disabled.png"); button->setTitleText("Button Text"); button->addTouchEventListener([&](Ref* sender, Widget::TouchEventType type) { switch (type) { case ui::Widget::TouchEventType::BEGAN: break; case ui::Widget::TouchEventType::ENDED: std::cout << "Button 1 clicked" << std::endl; break; default: break; } }); this->addChild(button);
Phân tích
- Dòng 1: Trong Cocos2d-x, khi muốn sử dụng các đối tượng để thiết kế UI (ngoại trừ Label) phải include
ui/CocosGUI.h
. - Dòng 3: Khởi tạo
Button
có tên làbutton
. - Dòng 5: Đặt giá trị Title cho
button
. - Dòng 7 - 17: Xử lý sự kiện của người chơi (Ở đây là EventTouch) lên
button
. Tìm hiểu hiểu rõ hơn trong bài viết Xử Lý Sự Kiện Trong Cocos2d-x 3.x.x. - Dòng 19: Thêm
button
vào Scene hiện tại.
Ở 1 phần nào đó, Button có nhiều điểm giống với Menu Item, nhưng khác biệt ở chỗ là có thể thêm trực tiếp Button vào Scene hiện tại không như Menu Item phải thêm gián tiếp qua Menu chứa nó.
Như đã thấy ở ví dụ trên. Button được tạo thành từ ba tấm hình đồ họa trông như ở dưới và có tên lần lượt là: normal.png
, selected.png
, disable.png
.
Trên Screen Button button sẽ được thấy như sau.
CheckBox
Nếu muốn người lựa chọn 1 tùy chọn gì đó chỉ có hai phương án là có hoặc không? CheckBox giải quyết vấn đề này. CheckBox có các trạng thái normal, selected và disabled.
// Thêm thư viện CocosGUI.h. #include "ui/CocosGUI.h" // Khởi tạo 1 CheckBox có tên là checkbox. auto checkbox = CheckBox::create("checkbox_normal.png", "checkbox_normal_press.png", "checkbox_active.png", "checkbox_normal_disable.png", "checkbox_active_disable.png"); // Thiết lập sự kiện từ người chơi với checkbok. checkbox->addTouchEventListener([&](Ref* sender, Widget::TouchEventType type) { switch (type) { case ui::Widget::TouchEventType::BEGAN: break; case ui::Widget::TouchEventType::ENDED: std::cout << "checkbox 1 clicked" << std::endl; break; default: break; } }); // Thêm checkbox vào Scene hiện tại. this->addChild(checkbox);
Ở ví dụ trên. CheckBox checkbox
được tạo thành từ ba tấm hình đồ họa trông như ở dưới và có tên lần lượt là: checkbox_normal.png
, checkbox_normal_press
.png
, checkbox_active.png
, checkbox_normal_display
, checkbox_active_display
.
Trên Screen Checkbox checkbox sẽ được thấy như sau.
LoadingBar
Trong game nếu muốn tải lên 1 số file audio lên trước, trong quá trình chờ đợi có thể thiết lập 1 LoadingBar để nhằm thể hiện mức độ hoàn thành việc tải game.
// Thêm thư viện CocosGUI.h #include "ui/CocosGUI.h" // Khởi tạo 1 LoadingBar có tên là loadingBar. loadingBar sử dụng hình ảnh loadingBar.png auto loadingBar = LoadingBar::create("loadingBar.png"); // Thiết lập hướng của tiến trình. Ở đay là từ phải qua trái. loadingBar->setDirection(LoadingBar::Direction::RIGHT); // Đặt mức độ hoàn thành loadingBar ở mức 25/100 loadingBar->setPercent(25); // Đặt mức độ hoàn thành loadingBar ở mức 35/100 loadingBar->setPercent(35); // Thêm LoadingBar vào Sence hiện tại. this->addChild(loadingBar);
Loading bar đạt mức hoàn thành 100/100, 60/100 và 80/100.
Slider
Thiết lập giá giá trị bằng cách di chuyển 1 chỉ số như volume của background music hay độ khó của game,...
// Thêm thư viện CocosGUI.h #include "ui/CocosGUI.h" // Khởi tạo 1 Slider có tên là slider. auto slider = Slider::create(); // slider->loadBarTexture("Slider_Back.png"); slider->loadSlidBallTextures("SliderNode_Normal.png", "SliderNode_Press.png", "SliderNode_Disable.png"); slider->loadProgressBarTexture("Slider_PressBar.png"); // Thiết lập sự kiện từ người chơi với slider. slider->addTouchEventListener([&](Ref* sender, Widget::TouchEventType type) { switch (type) { case ui::Widget::TouchEventType::BEGAN: std::cout << "slider moved" << std::endl; break; default: break; } }); // Thêm slider vào Scene hiện tại. this->addChild(slider);
TextField
Trong game nếu muốn 1 nơi dùng để lưu trữ các điểm số cao nhất, cần phải thiết lập 1 vùng dùng để người chơi gõ vào để thể hiện số điểm đó là của ai. TextField sẽ giải quyết làm điều này.
// Thêm thư viện CocosGUI.h #include "ui/CocosGUI.h" // Khởi tạo 1 TextField có tên là textField với font chữ Arial và kích cỡ chữ là 30. auto textField = TextField::create("","Arial",30); textField->setPasswordEnabled(true); // Thiết lập số người ký tự tối đo cho người chơi có thể nhập vào cho TextField //textField->setMaxLength(10); // Thiết lập sự kiện của người chơi với textField. textField->addTouchEventListener([&](Ref* sender, Widget::TouchEventType type) { std::cout << "editing a TextField" << std::endl; }); // Thêm testField vào Scene hiện. this->addChild(textField);
Chú ý
Button
, CheckBox
, LoadingBar
, Slider
, TextField
. Tất cả các đối tượng dùng để thiết kế UI đều nằm trong namespace cocos2d::ui
. Vậy nên muốn sử dụng chúng cần phải khai báo.
// using namespace cocos2d::ui;
Tham khảo
http://www.cocos2d-x.org