Bài 4: Hello World. Bài code đầu tiên

Hi mọi người!

Dạo này không hiểu sao ốm yếu quá, ít có thời gian nghiên cứu. Nay sức khỏe đã tạm ổn, mình sẽ tiếp tục giới thiệu với các bạn bài đầu tiên về code. Mà không biết còn ai thắc mắc về cách cài đặt không?

Hiện tại đến thời điểm mình sửa bài này (7-11-2014, đã có Cocos2d-x 3.2 RC0) rồi. Và mình khuyên các bạn là chỉ nên tải và sử dụng các phiên bản có đuôi RC.x trở lên cho tới stable ( thường là ko ghi gì sau đuôi ví dụ 3.1.1 ) chứ ko nên sử dụng các bản Alpha.x hoặc Beta.x vì chúng vẫn còn trong giai đoạn thử nghiệm sẽ mắc nhiều lỗi không đáng có. Và khi mình update các phiên bản ( chỉ việc copy vào thư mục chưa Engine thôi - nội dung trong thư mục engine cũ thì xóa đi ) hầu như không gặp bất kỳ lỗi nào khi compile, run cả trên Win, hoặc Android. Chỉ gặp các lỗi liên quan tới code do thư viện của cocos2d-x có thay đổi 1 chút xíu ở phiên bản mới, sai đâu thì IDE sẽ báo ở đó để biết cách sửa thôi.

=> Cách cài đặt của các phiên bản Engine thế hệ 3.x là giống nhau ( tới thời điểm này ) nhé

Nếu các bạn đã từng học qua các loại ngôn ngữ lập trình, hẳn đã quen với loại bài viết Hello World, Your First Application rồi nhỉ. Ai đã tìm hiểu 1 chút rồi thì có thể xem nhanh qua phần này. Mình bắt đầu nhé.

A - Tạo và chạy thử Project

Đầu tiên, tạo một Project mới với tên Hello World bằng lệnh sau trong cmd

Run/cmd

>cocos new HelloWorld -p com.vn.HelloWorld -l cpp - d q:/android/myproject

Đợi khoảng 5 phút để nó tạo Project mới cho chúng ta

Xong rồi, vào Project mới tạo theo đường dẫn

Q:/android/myproject/helloworld, cấu trúc thư mục trong đó như sau:

Classes <- Quan trọng nhất nhé, nó chứa mã nguồn cpp hay lua tùy thuộc việc bạn chọn ngôn ngữ nào khi dùng lệnh new ở phía trên.

cocos2d <- thư viện của engine Cocos2d - x.

proj.android <- dành cho việc build ứng dụng apk cho Android mobile.

proj.ios_mac  <- dành cho việc build ứng dụng cho Iphone và Mac OS ( Chỉ chạy được trên máy của Apple, hoặc máy cài Mac OS.

proj.linux <- dành cho việc build ứng dụng trên máy Linux.

proj.win32 <- dành cho việc build ứng dụng trên hệ điều hành Window 7, 8
proj.wp8-xaml <- dành cho việc build ứng dụng chạy trên Window phone 8

Resources <- chứa ảnh, font chữ, Map, định nghĩa vật lý,v.v...

.cocos-project.json <- chỉ định việc build project với ngôn ngữ nào, lua hay cpp.

CMakeLists.txt <- Danh sách thư viện phục vụ việc build project.

Tiếp theo chúng ta build và run thử trên Window nhé. Lệnh sau

>cocos run -s q:/android/myproject/helloworld -p win32

(gõ cocos run -h để được help)

Lưu ý: 

1/ Win mình xài là Win 7 32 bít, bạn nào xài XP, Win 7 -  64, Win 8 all, thì mình ko biết nhé. Các bạn thử xem thành công không. (Đã cài đặt và chạy trên win 7 - 64 ngon lành cành đào nhé.). Đã có nhiều bạn chạy Win8 OK rồi nhé

2/ Mình ko chắc xài máy ảo VMWare có chạy được không nhé

3/ Bạn có thể build thành ứng dụng .apk để chạy trên máy ảo Android, hoặc chơi máy thật luôn cho máu

>cocos compile -s q:/android/myproject/helloworld -p android --ap 16

--ap 16 là chỉ định dành cho android 4.1.2 trở lên

cài vào máy ảo

>adb install q:/android/myproject/helloworld/bin/debug/android/helloworld-debug-unligned.apk

hoặc
>cocos run -s q:/android/myproject/helloworld -p android --ap 16

Nếu không báo lỗi nào và xuất hiện ảnh như thế này, nghĩa là bạn đã thành công rồi đó. Mình cam đoan nếu các bạn cài đặt như bài trước của mình thì chắc chắn sẽ thành công.

B - Tìm hiểu Code

Bên trên mới là phần tạo và chạy thử thôi, còn trong phần này chúng ta cùng tìm hiểu những dòng lệnh đầu tiên

Các bạn vào thư mục Classes của Project, trong đó có 4 file

AppDelegate.h, AppDelegate.cpp

HelloWorldScene.h, HelloWorldScene.cpp

Mới đầu mình chỉ nên tìm hiểu 2 file HelloWorldScene.h, HelloWorldScene.cpp thôi nhé. 2 file bên trên có chức năng theo dõi thông số của ứng dụng thôi. Nhưng bạn không thể xóa 2 file này nhé

file HelloWorldScene.h

#ifndef __HELLOWORLD_SCENE_H__

#define __HELLOWORLD_SCENE_H__

#include "cocos2d.h"

class HelloWorld : public cocos2d::Layer

{

public:

    static cocos2d::Scene* createScene();

    virtual bool init();  

    

    void menuCloseCallback(cocos2d::Ref* pSender);

    

    CREATE_FUNC(HelloWorld);

};

#endif // __HELLOWORLD_SCENE_H__

cấu trúc rất giống 1 chương trình C++ phải không, thì nó chính là C++ mà, hehee

Trước khi tìm hiểu code, các bạn nên đọc qua, hoặc ôn lại kiến thức C++ chú nhé. Mình sẽ cố gắng giải thích các hàm chức năng hoặc các điểm mới trong cocos2dx 3 thôi

static cocos2d::Scene* createScene();  //tạo ra một cảnh mới

virtual bool init(); //Khởi tạo 1 đối tượng của lớp HelloWorld

void menuCloseCallback(cocos2d::Ref* pSender); //Nút Tắt ứng dụng

CREATE_FUNC(HelloWorld); //Chưa rõ lắm, nhưng tạm coi là cần phải có đi

file tiếp theo HelloWorldScene.cpp

#include "HelloWorldScene.h"

USING_NS_CC;

// hàm tạo 1 cảnh mới trả về con trỏ Scene*

Scene* HelloWorld::createScene()

{

  

    auto scene = Scene::create();  // tạo 1 đối tượng Scene

    

    auto layer = HelloWorld::create(); // tạo đối tượng HelloWorld

// thêm đối tượng HelloWorld vào Scene    scene->addChild(layer);

// trả về con trỏ scene

    return scene;

}

// khởi tạo đối tượng HelloWorld

bool HelloWorld::init()

{

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

    // kiểm tra khởi tạo lỗi

    if ( !Layer::init() )

    {

        return false;

    }

    

// Lấy kích thước màn, và điểm tọa độ gốc

    Size visibleSize = Director::getInstance()->getVisibleSize();

    Point origin = Director::getInstance()->getVisibleOrigin();

    //tạo nút đóng ứng dụng

    auto closeItem = MenuItemImage::create(

                                           "CloseNormal.png",

                                           "CloseSelected.png",

                                           CC_CALLBACK_1(HelloWorld::menuCloseCallback, this));

    

// Đặt vị trí nút đóng tại điểm tính theo công thức bên dưới

closeItem->setPosition(Point(origin.x + visibleSize.width - closeItem->getContentSize().width/2 ,

                                origin.y + closeItem->getContentSize().height/2));

    // Tạo menu chứa nút đóng ở bên trên, đặt vị trí

    auto menu = Menu::create(closeItem, NULL);

    menu->setPosition(Point::ZERO);

    this->addChild(menu, 1); // thêm menu vào đối tượng HelloWorld

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

   // Tạo 1 dòng Text với font arial cỡ 24 pixel

    

    auto label = LabelTTF::create("Hello World", "Arial", 24);

    

    // đặt vị trí Text

    label->setPosition(Point(origin.x + visibleSize.width/2,

                            origin.y + visibleSize.height - label->getContentSize().height));

    // Thêm text vào đối tượng HelloWorld

    this->addChild(label, 1);

    // tạo 1 đối tượng loại sprite ( là các đối tượng có thể di chuyển trong game)

    auto sprite = Sprite::create("HelloWorld.png");

    // Đặt sprite lên vị trí giữa màn hình

    sprite->setPosition(Point(visibleSize.width/2 + origin.x, visibleSize.height/2 + origin.y));

    // Thêm đối tượng Sprite vào HelloWorld

    this->addChild(sprite, 0);

    

   // giá trị trả về của hàm init()

    return true;

}

// Hàm đóng ứng dụng
void HelloWorld::menuCloseCallback(Ref* pSender)
{

Director::getInstance()->end(); // Kết thúc chương trình.

// Nếu là IOS thì gọi lệnh exit(0);#if (CC_TARGET_PLATFORM == CC_PLATFORM_IOS)

exit(0);

#endif

}

Tới đây, hẳn mọi người đã biết cách tạo và chạy thử 1 project thế nào rồi phải không. Lại còn biết được 1 phần code đơn giản nữa cơ đấy. Trong các bài sau nâng cao hơn sẽ giúp các bạn hiểu sâu hơn về Cocos2dx trong lập trình Game di động.

Bye bye!

Bài 5: Physics - Thế giới vật lý cơ bản của Cocos2d-x