STDIO
Tìm kiếm gần đây
    • Nội dung
    • QR Code
    • 0
    • 0
    • Sao chép

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

    Tìm hiểu về một số đối tượng dùng để thiết kế UI trong Cocos2d-x.
    23/01/2015
    27/09/2020
    6 phút đọc
    UI - Phần 2: Thiết Kế UI Trong Cocos2d-x 3.x.x

    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.

    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. 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 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.

    100/100
    60/100
    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

    0 Bình luận
    Lập Trình Game

    Lập Trình Game

    Kiến thức, kỹ thuật, kinh nghiệm lập trình game.

    Đề xuất

    UI - Phần 1: Khái Niệm Và Một Số Đối Tượng Để Thiết Kế UI Trong Cocos2d-x 3.x.x
    Tìm hiểu về khái niệm UI và các đối tượng thiết kế UI trong Cocos2d-x ...
    Xử Lý Sự Kiện Trong Cocos2d-x 3.x.x
    Bài viết nằm trong loạt bài viết chương trình Tự Học Cocos2d-x 3.x.x. ...

    Khám phá

    Lập Trình Hiệu Ứng Trong Cocos2d-x 3.x.x
    Bài viết nằm trong loạt bài viết của chương trình Tự Học Cocos2d-x ...
    Thành Phần Hoá Các Đối Tượng Trong Game Với Cocos2d-x
    Hướng dẫn thành phần hoá các đối tượng trong game với Cocos2d-x
    Giới Thiệu về Scene trong Cocos2d-x 3.x.x
    Tìm hiểu về Scene và các thao tác trong Cocos2d-x 3.x.x.
    Animation Trong Cocos2d-x 3.x.x
    Bài viết nằm trong loạt bài viết chương trình Tự Học Cocos2d-x 3.x.x. ...
    Trí Tuệ Nhân Tạo trong Games - Phần 1: Thiết Kế AI với FSM
    Khái niệm, vai trò của trí tuệ nhân tạo trong games và hiện thực một AI ...
    Hướng Dẫn Viết Game Zero Với Cocos2d-x - Phần 5: Hiện thực GameScene - Vẽ Suit
    Hướng dẫn khởi tạo một layer mới trong game và vẽ các suit với Cocos2d-x
    Hướng Dẫn Viết Game Zero Với Cocos2d-x - Phần 7: Hiện thực GameScene - Button
    Hướng dẫn gắn thêm các button vào game, và hiện thực hàm resetButton cho ...
    Khi bạn nhấn vào liên kết sản phẩm do STDIO đề xuất và mua hàng, STDIO có thể nhận được hoa hồng. Điều này hỗ trợ STDIO tạo thêm nhiều nội dung hữu ích. Tìm hiểu thêm.
    STDIO
    Trang chính
    Công ty TNHH STDIO

    30, Trịnh Đình Thảo, Hòa Thạnh, Tân Phú, Hồ Chí Minh
    +84 28.36205514 - +84 942.111912
    developer@stdio.vn

    383/1 Quang Trung, Phường 10, Quận Gò Vấp, Hồ Chí Minh
    Số giấy phép ĐKKD: 0311563559 do sở Kế hoạch và Đầu Tư TPHCM cấp ngày 23/02/2012

    ©STDIO, 2013 - 2020