Game Studio
Liên kế mạng xã hội

Game Studio


UI Phần II: Thiết Kế UI Trong Cocos2d-x 3.x.x

Giới thiệu

Ở bài viết UI Phần I: Khái Niệm Và Một Số Đối Tượng Để Thiết Kế UI Trong Cocos2d-x 3.x.x, tôi đã giới thiệu cho các bạn UI là gì? Các thành phần của UI,… và đối tượng Label dùng trong thiết kế UI trong Cocos2d-x. Trong bài viết này, tôi sẽ giới thiệu thêm về một số đối tượng khác dùng thể thiết kế UI trong Cocos2d-x.

Tiền đề bài viết

Bài viết này là bài viết nằm trong những loại bài viết của tôi về tổng quan làm game 2D sử dụng Cocos2d-x 3.4.

Đối tượng hướng đến

Bài viết này tôi hướng đến những lập trình viên mới bắt đầu tìm hiểu và học tập làm game 2D bằng Cocos2d-x.

Menu Items và Menu

Trong một game thông thường, bạn sẽ thấy các mục như play, pause, about, ... Các mục này sẽ được gọi là Menu Item. Một Menu được tạo từ một hay nhiều Menu Items. Có tác dụng điều hướng game của bạn thông qua các tùy chọn của người chơi.

Khởi tạo Menu Item

Tạo một Menu Item sử dụng hình ảnh.

  1. // Menu Item sử dụng hình ảnh.
  2. // Khởi tạo Menu Item có tên là closeItem.
  3. auto closeItem = MenuItemImage::create("CloseNormal.png", "CloseSelected.png",
  4. CC_CALLBACK_1(HelloWorld::menuCloseCallback, this));
  5.  
  6. // Thiết lập vị trí của closeItem tại vị trí (100, 100).
  7. closeItem->setPosition(Vec2(100, 100));

Menu Item có hai trạng thái normal và selected.

  1. 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.
  2. selectedtrạng thái khi có các thao tác từ người chơi như tourch, mouse click. Khi người chơi hoàn thành thao tác thì Menu Item sẽ thực hiện một đoạn code. Ở đoạn code trên closeItem ở trạng thái selected sử dụng hình ảnh CloseSelcted.png.
  1. // Nhiệm vụ của đoạn code này là kết thúc trò chơi của bạn. Bạn có thể sử dụng nó với Menu Item exit.
  2. void HelloWorld::menuCloseCallback(Ref* pSender)
  3. {
  4. #if (CC_TARGET_PLATFORM == CC_PLATFORM_WP8) || (CC_TARGET_PLATFORM == CC_PLATFORM_WINRT)
  5. return;
  6. #endif
  7.  
  8. Director::getInstance()->end();
  9.  
  10. #if (CC_TARGET_PLATFORM == CC_PLATFORM_IOS)
  11. exit(0);
  12. #endif
  13. }

Bạn có thể tạo một 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.

  1. // Menu Item sử dụng văn bản.
  2. // Khởi tạo một Label có tên là myLabel.
  3. auto myLabel = Label::create("Close Item", "Arial", 24);
  4.  
  5. // Khởi tạo Menu Item có tên là closeItem.
  6. auto closeItemLabel = MenuItemLabel::create(myLael, CC_CALLBACK_1(HelloWorld::menuCloseCallback, this));
  7.  
  8. // Thiết lập vị trí của closeItem tại vị trí (100, 150).
  9. closeItemLabel->setPosition(Vec2(100, 150));

Khởi tạo Menu

Bạn có thể khởi tạo một Menu dễ dàng như sau:

  1. // Khởi tạo Menu có tên là menu.
  2. auto menu = Menu::create(closeItem, closeItemLabel, NULL);
  3. // Thêm menu vào Scene hiện tại.
  4. this->addChild(menu, 1);

hoặc

  1. // Khởi tạo một mảng Vector kiểu MenuItemLabel.
  2. Vector<MenuItem*> menuItems;
  3.  
  4. // Thêm Menu Item closeItem vào menuItems.
  5. menuItems.pushBack(closeItem);
  6. menuItems.pushBack(clostItemLabel);
  7.  
  8. // Tạo một Menu có tên là menu với mảng Vector menuItems.
  9. auto menu = Menu::createWithArray(menuItems);
  10. // Thêm vào Scence hiện tại của bạn.
  11. this->addChild(menu, 1);

Chú ý: Menu Item không thể được thêm vào Scene hiện tại của bạn, bạn phải thêm Menu Item mà bạn muốn sử dụng vào Menu, sau đó bạn thêm Menu vào Scene hiện tại của bạn.

Button

Là một đối tượng rất hay được sử dụng trong game. Khi người chơi chọn vào nó thì một điều gì đó xảy ra trong trò chơi của bạn như chuyển Scene hay thêm một Sprite,... Button có hai trạng thái là normal và selected. 

  1. #include "ui/CocosGUI.h"
  2.  
  3. auto button = Button::create("normal.png", "selected.png", "disabled.png");
  4.  
  5. button->setTitleText("Button Text");
  6.  
  7. button->addTouchEventListener([&](Ref* sender, Widget::TouchEventType type)
  8. {
  9. switch (type)
  10. {
  11. case ui::Widget::TouchEventType::BEGAN:
  12. break;
  13. case ui::Widget::TouchEventType::ENDED:
  14. std::cout << "Button 1 clicked" << std::endl;
  15. break;
  16. default:
  17. break;
  18. }
  19. });
  20.  
  21. this->addChild(button);

Phân tích

  • Dòng 1: Trong Cocos2d-x 3.4, khi bạn muốn sử dụng các đối tượng để thiết kế UI(ngoại trừ Label) bạn phải including 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. Chúng ta sẽ tìm hiểu rõ hơn trong bài viết Giới Thiệu Event Trong Cocos2d-x 3.x.x. 
  • Dòng 19: Thêm button vào Scene hiện tại của bạn.

Ở một phần nào đó, Button có nhiều điểm giống với Menu Item, nhưng khác biệt ở chỗ là bạn có thể thêm trực tiếp Button vào Scene hiện tại không như Menu Item được thêm gián tiếp qua Menu chứa nó.

Như bạn đã 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 bạn muốn người lựa chọn một tùy chọn gì đó chỉ có hai phương án là có hoặc không? CheckBox sẽ giúp bạn giải quyết vấn đề này. CheckBox có thể có các trạng thái normal, selected disabled.

  1. // Thêm thư viện CocosGUI.h.
  2. #include "ui/CocosGUI.h"
  3.  
  4. // Khởi tạo một CheckBox có tên là checkbox.
  5. auto checkbox = CheckBox::create("checkbox_normal.png",
  6. "checkbox_normal_press.png",
  7. "checkbox_active.png",
  8. "checkbox_normal_disable.png",
  9. "checkbox_active_disable.png");
  10.  
  11. // Thiết lập sự kiện từ người chơi với checkbok.
  12. checkbox->addTouchEventListener([&](Ref* sender, Widget::TouchEventType type)
  13. {
  14. switch (type)
  15. {
  16. case ui::Widget::TouchEventType::BEGAN:
  17. break;
  18. case ui::Widget::TouchEventType::ENDED:
  19. std::cout << "checkbox 1 clicked" << std::endl;
  20. break;
  21. default:
  22. break;
  23. }
  24. });
  25.  
  26. // Thêm checkbox vào Scene hiện tại của bạn.
  27. 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 trò chơi của bạn, nếu bạn muốn tải lên một số file audio lên trước, trong quá trình chờ đợi đó bạn có thể thiết lập một LoadingBar để nhằm thể hiện mức độ hoàn thành việc tải lên đó. 

  1. // Thêm thư viện CocosGUI.h
  2. #include "ui/CocosGUI.h"
  3.  
  4. // Khởi tạo một LoadingBar có tên là loadingBar. loadingBar sử dụng hình ảnh loadingBar.png
  5. auto loadingBar = LoadingBar::create("loadingBar.png");
  6. // Thiết lập hướng của tiến trình. Ở đay là từ phải qua trái.
  7. loadingBar->setDirection(LoadingBar::Direction::RIGHT);
  8.  
  9. // Đặt mức độ hoàn thành loadingBar ở mức 25/100
  10. loadingBar->setPercent(25);
  11.  
  12. // Đặt mức độ hoàn thành loadingBar ở mức 35/100
  13. loadingBar->setPercent(35);
  14.  
  15. // Thêm LoadingBar vào Sence hiện tại của bạn.
  16. 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 một chỉ số như volume của background music hay độ khó của game,...

  1. // Thêm thư viện CocosGUI.h
  2. #include "ui/CocosGUI.h"
  3.  
  4. // Khởi tạo một Slider có tên là slider.
  5. auto slider = Slider::create();
  6.  
  7. //
  8. slider->loadBarTexture("Slider_Back.png");
  9. slider->loadSlidBallTextures("SliderNode_Normal.png", "SliderNode_Press.png", "SliderNode_Disable.png");
  10. slider->loadProgressBarTexture("Slider_PressBar.png");
  11.  
  12. // Thiết lập sự kiện từ người chơi với slider.
  13. slider->addTouchEventListener([&](Ref* sender, Widget::TouchEventType type)
  14. {
  15. switch (type)
  16. {
  17. case ui::Widget::TouchEventType::BEGAN:
  18.  
  19. std::cout << "slider moved" << std::endl;
  20. break;
  21. default:
  22. break;
  23. }
  24. });
  25.  
  26. // Thêm slider vào Scene hiện tại của bạn.
  27. this->addChild(slider);

TextField

Trong trò chơi của bạn, bạn muốn một nơi dùng để lưu trữ các điểm số cao nhất, bạn sẽ cần phải thiết lập một nơi dùng để người chơi gõ vào để thể hiện số điểm đó là của ai. TextField sẽ giúp bạn làm điều này.

  1. // Thêm thư viện CocosGUI.h
  2. #include "ui/CocosGUI.h"
  3.  
  4. // Khởi tạo một TextField có tên là textField với font chữ Arial và kích cỡ chữ là 30.
  5. auto textField = TextField::create("","Arial",30);
  6.  
  7. textField->setPasswordEnabled(true);
  8.  
  9. // 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
  10. //textField->setMaxLength(10);
  11.  
  12. // Thiết lập sự kiện của người chơi với textField.
  13. textField->addTouchEventListener([&](Ref* sender, Widget::TouchEventType type)
  14. {
  15. std::cout << "editing a TextField" << std::endl;
  16. });
  17.  
  18. // Thêm testField vào Scene hiện tại của bạn.
  19. this->addChild(textField);

Chú ý

Button, check box, loading bar, slider, text field. 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 khi bạn muốn sử dụng chúng bạn cần khai báo.

  1. //
  2. using namespace cocos2d::ui;

Tham khảo

http://www.cocos2d-x.org

Theo: Stdio