STDIO
Tìm kiếm gần đây

    Nội dung

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

    23/01/2015
    05/04/2017
    UI - Phần 2: Thiết Kế UI Trong Cocos2d-x 3.x.x
    Ở 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.

    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 :: www.stdio.vn/articles/read/211-ui-phan-1-khai-niem-va-mot-so-doi-tuong-de-thiet-ke-ui-trong-cocos2d-x-3xx, 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ằm trong những loạt bài viết của chương trình Tự Học Cocos2d-x 3.x.x:: www.stdio.vn/programs/content/2/lap-trinh-game-voi-cocos2dx của Stdio.vn :: www.stdio.vn.

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

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

    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.

    // Menu Item sử dụng văn bản.
    // Khởi tạo một 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

    Bạn có thể khởi tạo một 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 một 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 một 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 của bạn.
    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.

    ss_12

    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. 

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

    ss_3

    Trên Screen Button button sẽ được thấy như sau.

    ss_4

    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.

    // Thêm thư viện CocosGUI.h.
    #include "ui/CocosGUI.h"
    
    // Khởi tạo một 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 của bạn.
    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.

    ss_5

    Trên Screen Checkbox checkbox sẽ được thấy như sau.

    ss_6

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

    // Thêm thư viện CocosGUI.h
    #include "ui/CocosGUI.h"
    
    // Khởi tạo một 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 của bạn.
    this->addChild(loadingBar);

    Loading bar đạt mức hoàn thành 100/100, 60/100 và 80/100.

    ss_7

    ss_8

    ss_9

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

    // Thêm thư viện CocosGUI.h
    #include "ui/CocosGUI.h"
    
    // Khởi tạo một 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 của bạn.
    this->addChild(slider);

    ss_10

    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.

    // Thêm thư viện CocosGUI.h
    #include "ui/CocosGUI.h"
    
    // Khởi tạo một 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 tại của bạn.
    this->addChild(textField);

    ss_11

    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.

    //
    using namespace cocos2d::ui;

    Tổng kết

    Với phần 2, tôi đã hoàn thành giới thiệu các thành phần cơ bản để thiết kế UI trong Cocos2d-x 3.x.x. Mọi thắc mắc bạn có thể bình luận tại bài viết hoặc liên hệ với Trương Đạt :: www.stdio.vn/users/index/11/truong-dat.

    Tham khảo

    http://www.cocos2d-x.org

    Thảo luận

    Đăng nhập

    Bài viết liên quan

    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

    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

    UI không chỉ có phục vụ trong ngành công nghiệp game mà còn phục vụ cho rất nhiều ngành công nghiệp khác. Một game có một UI và một ý tưởng tốt sẽ rất hấp dẫn người chơi. ...

    Trương Xuân Đạt

    23/01/2015

    Kỹ Thuật Popup Với Cocos2d-x 3.x.x

    Kỹ Thuật Popup Với Cocos2d-x 3.x.x

    Trong quá trình xây dựng và phát triển lại Sins. Bản thân tôi và nhóm phát triển luôn được học tập và phát triển về kiến thức lập trình game, đặc biệt là với Cocos2d-x ...

    Trương Xuân Đạt

    23/01/2015

    Tạo Tilemap Trong Cocos2d-x 3.x.x

    Tạo Tilemap 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 của Stdio.vn. Trong bài viết này sẽ giới thiệu khái niệm, các thành phần, cách tạo một bản đồ với phần ...

    Trương Xuân Đạt

    23/01/2015

    Trí Tuệ Nhân Tạo Trong Games - Phần 1: Thiết Kế AI Với FSM

    Trí Tuệ Nhân Tạo Trong Games - Phần 1: Thiết Kế AI Với FSM

    Giới thiệu về khái niệm, vai trò của trí tuệ nhân tạo trong games. Giới thiệu về FSM, sơ đồ, các thành phần cơ bản. Hiện thực một AI đơn giản được thiết kế với FSM. Ví dụ ...

    Trương Xuân Đạt

    23/01/2015

    Xử Lý Sự Kiện Trong Cocos2d-x 3.x.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. Trong bài viết sẽ giới thiệu khái niệm các loại sự kiện trong cocos2d-x và các ví dụ hiện thực các ...

    Trương Xuân Đạt

    23/01/2015

    Lập Trình Hiệu Ứng Trong Cocos2d-x 3.x.x

    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 3.x.x. Trong bài viết sẽ giới thiệu khái niệm về lập trình hiệu ứng, thuộc tính, và ví dụ về sử dụng ...

    Trương Xuân Đạt

    23/01/2015

    Giới Thiệu Về Scene Trong Cocos2d-x 3.x.x

    Giới Thiệu Về Scene Trong Cocos2d-x 3.x.x

    Bài biết này trong loạt bài viết trong chương trình Tự Học Cocos2d-x 3.x.x. Scene là một thành phần luôn luôn có trong project trò chơi, scene là gì? làm sao để có thể ...

    Trương Xuân Đạt

    23/01/2015

    Xử Lý Với File PLIST Trong Cocos2d-x 3.x.x

    Xử Lý Với File PLIST Trong Cocos2d-x 3.x.x

    Trong việc xây dựng, thiết kế project games của bạn, có nhiều tính toán, kỹ thuật, tính năng bạn phải sử dụng file để thao tác nhằm tăng hiệu suất của chương trình, giúp ...

    Lê Viết Duy

    14/06/2017

    Giới Thiệu Audio Trong Cocos2d-x 3.x.x

    Giới Thiệu Audio Trong Cocos2d-x 3.x.x

    Giới thiệu về đối tượng Simple Audio Engine trong cocos2d-x 3.x.x. Các khái niệm cơ bản về audio trong game với cocos2d-x: back ground music, sound effect. Các thao tác ...

    Trương Xuân Đạt

    23/01/2015

    Socket.IO Với Cocos2d-x

    Socket.IO Với Cocos2d-x

    Trong các bài viết trước trong chương trình tự học lập trình games với Cocos2d-x của STDIO. Tôi và các tác giả khác đã giới thiệu các khái niệm, ví dụ về các thành phần ...

    Lê Viết Duy

    11/06/2017

    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
    [email protected]

    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