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
Buttoncó 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
buttonvà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
