Cocos2d-x: Sử dụng Coco Studio để xây dựng UI cho game (Phần 1)

Hôm nay chúng ta sẽ tìm hiểu một chút về Cocos Studio, công cụ UI Editor của Cocos2d-x trong việc xây dựng các giao diện cho game.

Hiện tại trong phạm vi bài viết này, mình đang sử dụng:

- Coco Studio 2.0.2, phiên bản cho Mac OS, tải ở trang chủ Cocos2d-x

- Cocos2d-x 3.3rc0 (để Cocos2d-x có thể load được các file của Coco Studio 2.0.2 export ra, chúng ta cần phải sử dụng Cocos2d-x bản 3.3)

- Xcode 6.1

Giả sử đến đây chúng ta đã xong các bước cài đặt, thiết lập môi trường hoạt động cho Cocos2d-x.

Trong phạm vi bài viết này, chúng ta sẽ tìm hiểu việc tạo UI cho một Scene: MainMenuScene, các bài viết tiếp theo chúng ta sẽ tiếp tục tìm hiểu về UIWidget, Animation....

Chúng ta bắt đầu với giao diện của Coco Studio 2.0.2

Đây là giao diện làm việc của Coco Studio

• Bên trái là danh sách các "Control" và Resource
• Bên phải là thanh Propertise của mỗi đối tượng được chọn trên vùng làm việc
• Ở giữa là vùng làm việc chính, các đối tượng: sprite, node... sẽ được add vào và thao tác ở đây
• Bên dưới: quay, scale vùng làm việc
• Bên trên: cho phép chúng ta chọn kích thước của scene, run Simulator, publish

Khởi tạo dự án

Import các file resource

Chọn kích thước của Scene, scale lại vùng làm việc để dễ quan sát

Thao tác

Thêm một đối tượng Sprite từ thanh công cụ bên trái

Chọn ảnh cho Sprite và thiết lập các thuộc tính

Tiếp tục đối với các Sprite và các đối tượng UI khác, chúng ta có được một MainMenuScene

Click Run để chạy Simulator

Publish dự án

File MainMenuScene.csb được sinh ra cùng với các file resource liên quan được lưu trong res.

Khởi tạo dự án Cocos2d-x

Sau khi khởi tạo dự án, run Xcode và copy toàn bộ các file được publish từ Coco Studio ở trên vào dự án Cocos2d-x

Tạo lớp MainMenuScene

#include "cocos2d.h"

#include "ui/CocosGUI.h"

using namespace cocos2d;

using namespace ui;

class MainMenuScene : public cocos2d::Layer

{

public:

    static cocos2d::Scene* createScene();

    

    virtual bool init();

    

    CREATE_FUNC(MainMenuScene);

};

Add đường dẫn resource vào SearchPath

Trong lớp AppDelegate

   Size screenSize = director->getVisibleSize();

    

    glview->setDesignResolutionSize(640, 960, ResolutionPolicy::NO_BORDER);

    director->setContentScaleFactor(screenSize.width / 640);

    

    searchPaths.push_back("asset");

    

    fileUtils->setSearchPaths(searchPaths);

    // create a scene. it's an autorelease object

    auto scene = MainMenuScene::createScene();

    // run

    director->runWithScene(scene);

Đọc nội dung file MainMenuScene.csb để khởi tạo cho lớp MainMenuScene

Trong hàm init() của MainMenuScene, chúng ta sẽ đọc nội dung của file .csb để khởi tạo UI

#include "MainMenuScene.h"

#include <cocostudio/CocoStudio.h>

using namespace cocostudio; 

bool MainMenuScene::init()

{

    //////////////////////////////

    // 1. super init first

    if ( !Layer::init() )

    {

        return false;

    }

    

    Node *sceneLayout = CSLoader::getInstance()->createNode("MainMenuScene.csb");

    float scale = Director::getInstance()->getContentScaleFactor();

    this->addChild(sceneLayout);

    

    return true;

}

Build và Run dự án trên iPhone 4 Simulator