Bài 9 - Làm game đầu tiên - Tạo nhân vật. (Part 1)

Chào mọi người!

Cũng nhanh nhỉ, Blog đã được 14-15 bài rồi đấy. Chắc các bạn cũng đã nắm được một vài kỹ thuật cơ bản về Engine Cocos2d-x V3 này rồi. Với 1 chút kiến thức ấy liệu chúng ta có thể làm được game không. Tất nhiên là được chứ, tuy chỉ là game đơn giản thôi. 

Sau đây mình sẽ hướng dẫn các bạn làm 1 game đơn giản nhất nhé, game này hồi mình mới tìm hiểu về Cocos2dx cũng đã học và làm theo ( bài này nằm trong phần learn, các bạn có thể tìm trên trang chủ, không biết đã được cập nhật chưa. Bài hướng dẫn đó đã cũ rồi, nếu bạn copy code vào V3.0 chắc chắn sẽ ko chạy. Ngoài ra 1 lỗi nữa đó là phần phát hiện Physics quá phức tạp trong bản cũ. V3 sẽ cực kỳ đơn giản. Mình sẽ trình bày lại trong bài của mình nha).

Bài gốc cũ ở đây ( cho Cocos2d-x V2.2.3)

Mô tả 1 chút về game này như sau: Chúng ta có 1 Nhân vật chính và 1 đám quái, Nhân vật chính sẽ tiêu diệt đám quái bằng cách xả đạn về phía quái. Trò chơi có tính điểm đơn giản (mỗi chú nằm xuống được 1 điểm), và có cả màn GameOver, có thể chèn nhạc nền nếu muốn.

GOooooooooooooooooo!

B1 - Tạo Project, thêm Resource ảnh, âm thanh + v..v

Đầu tiên, bạn phải tạo 1 Project mới (bằng cmd nhé). Có một số bạn hỏi sao không tạo = VS2012, hay Eclipse cho trực quan. Mình cũng tìm hiểu rồi, hình như là ko có ( V3.0). Mà thôi, cách quái nào chả được. Dùng dòng lệnh thì trên hệ máy nào ( WIN, MAC, LINUX) cũng đều giống nhau nhé.

>cocos new firstgame -p com.vn.firstgame -l cpp -d f:/android/project

Bạn cần download thê Resource ( file ảnh ) rồi chép đè vào Resource của Project firstgame nhé. À, nếu bạn build cho Android thì chép vào Resource trong thư mục proj.android của firstgame. LINK đây

B2 - Tạo nhân vật

Nghe thì có vẻ ghê ghớm nhỉ, nhưng không có gì ngoài công việc thêm 1 Sprite hình ảnh vào trong Layer của chúng ta thôi. hehe. Các bạn làm như sau

1/ Nhân vật chính

Trong hàm bool HelloWorld::init(), các bạn xóa hết đi, chỉ chừa lại đoạn sau

    if ( !Layer::init() )

    {

        return false;

    }

    

----Xóa

----Xóa

return true;

Sau đó thêm vào trước lệnh return true; đoạn code sau đây ( mình giải thích ý nghĩa luôn )

// Lấy kích thước màn hình

Size winSize = Director::getInstance()->getWinSize(); 

// Tạo 1 Sprite, nhân vật của chúng ta

auto player = Sprite::create("Player.png");

// Đặt lên màn hình ở phía trái

player->setPosition( Point(player->getContentSize().width/2, winSize.height/2) );

// Thêm vào layer nằm trong Scene game

this->addChild(player,1);

// Gọi tới hàm gameLogic , hàm này có nhiệm vụ tạo ra đám quái với thời gian 1 giây 1 quái

this->schedule( schedule_selector(HelloWorld::gameLogic), 1.0 );

2/ Tạo Quái

Bạn mở file HelloWorld.h ra thêm vào đó 3 nguyên mẫu hàm sau

void addTarget();  

void gameLogic(float dt);

void spriteMoveFinished(cocos2d::Node* sender);

Sau đó bạn phải khai báo các hàm này trong HelloWorld.cpp như sau:

*

void HelloWorld::gameLogic(float dt)

{

    this->addTarget();

}

**

// Hàm này tạo ra Quái và di chuyển chúng nè

void HelloWorld::addTarget()

{

    auto target = Sprite::create("Target.png");

    Size winSize = Director::getInstance()->getWinSize();

// Đoạn này tính toán vùng xuất hiện quái sao cho ko bị khuất quái vào viền màn hình

    int minY = target->getContentSize().height/2;

    int maxY = winSize.height

                          -  target->getContentSize().height/2;

    int rangeY = maxY - minY;

    int actualY = ( rand() % rangeY ) + minY;

//

// Đặt quái vào khoảng vị trí trên actualY (random)

    target->setPosition(Point(winSize.width + (target->getContentSize().width/2),actualY));

    this->addChild(target,1);

 //Tính toán tốc độ di chuyển của quái

    int minDuration = (int)2.0;

    int maxDuration = (int)4.0;

    int rangeDuration = maxDuration - minDuration;

    int actualDuration = ( rand() % rangeDuration )

                                        + minDuration;

// Di chuyển quái với 1 tốc độ nằm trong khoảng actualDuration , từ điềm xuất hiện tới điểm Point(0,y)

auto actionMove =  MoveTo::create( (float)actualDuration, Point(0 - target->getContentSize().width/2, actualY) );

// Kết thúc việc di chuyển của quái khi đã tới điểm cuối

 auto actionMoveDone =   CallFuncN::create(CC_CALLBACK_1(HelloWorld::spriteMoveFinished,this));

/

// Chạy 2 Action trên 1 cách tuần tự = lệnh Sequence sau

 target->runAction( Sequence::create(actionMove, actionMoveDone, NULL) );

}

Bạn hãy tham khảo bài về Sprite và các lệnh Action cơ bản ở bài trước nhé.

***

void HelloWorld::spriteMoveFinished(Node* sender)

{

// Hàm này có mỗi công việc là loại bỏ Target ( đang là Sprite) ra khỏi layer của game

// Ép kiểu Contrỏ Sprite của 1 Node*

  auto sprite = (Sprite *)sender;

  this->removeChild(sprite, true);    

}

B3 - Chạy thử

OK men, bây giờ các bạn có thể build và chạy trên window với lệnh sau

>cocos run -s f:android/project/firstgame -p win32

Kết quả đê, ra được thế này là thành công Part 1 nhé

Bạn hoàn toàn có thể build ra apk rồi cài trên Android nhé

>cocos compile -s f:android/project/firstgame -p android --ap 16 ( cho Android 4.1.2 trở lên)

Vậy là hết phần 1 rồi. Đơn giản quá phải không mọi người. Toàn là kiến thức cơ bản thôi mà. Ở bài sau chúng ta sẽ nghiên cứu xem làm thế nào để nhân vật chính bắn ra được viên đạn khi ta chạm vào màn hình, việc phát hiện ra sự kiện chạm màn hình sẽ phải làm như thế nào. Hẹn ở phần sau nhé, sẽ rất thú vị đây

Bài 10 : Làm game đầu tiên - Sự kiện chạm màn hình và bắn đạn ( Part 2)

More about →

Sprite và những Action cơ bản trong Cocos2d-x V3.0

Hi!

Chủ nhật ta lại một mình, buồn buồn ngồi viết Blog chơi, viết đi viết lại buồn ơi vẫn buồn

Đây là 1 bài về Sprite và một số Action trong Cocos2d-x V3 các bạn nhé, phần Tut này có Video hướng dẫn của nước ngoài tại Đây. Mình tổng hợp lại dưới dạng Text, tiện cho việc tra cứu.

Tạo 1 dự án mới tên Tutorial, hoặc helloworld, hoặc abc ...., trong hàm init() của nó

SPRITE:

Tạo Sprite, Đặt vị trí trên màn hình, thêm vào Layer

auto sprite = Sprite::create("sprite.png");
sprite->setPosition(Point(x,y));
this->addChild(sprite,1);


ACTION

1/ MoveBy (di chuyển 1 sprite tới 1 điểm với 1 khoảng cho trước)
static MoveBy* create ( float duration, const Point & deltaPosition )
Ex:
auto action = MoveBy::create(3,Point(100,100);
sprite->runAction(action);

2/ MoveTo (di chuyển 1 sprite tới 1 điểm cho trước)
static MoveTo* create ( float duration, const Point & position )
Ex:

auto action = MoveTo::create(3,Point(100,100);
sprite->runAction(action);

3/ JumpBy (Nhảy tới 1 điểm với 1 khoảng cho trước, cùng với chiều cao và bước nhảy)
static JumpBy* create ( float duration, const Point & position, float height, int jumps )
Ex:
auto action =  JumpBy::create(3,Point(100,100),50,5);
sprite->runAction(action);

4/ JumpTo (Nhảy tới 1 điểm cho trước, cùng với chiều cao và bước nhảy)

static JumpTo* create ( float duration, const Point & position, float height, int jumps )
auto action =  JumpTo:create(3,Point(100,100),50,5);
sprite->runAction(action);

* Lưu ý: trong các hàm trên tuy cùng 1 Point(100,100), nhưng hoàn toàn khác nhau, 1 cái thì là điểm tọa độ trong loại hàm Func_TO, 1 loại là đoạn (x,y) trong loại hàm Func_BY

5/ BezierBy ( Di chuyển sprite theo 1 đường "cong" tạo bởi 3 điểm đầu, giữa và cuối )
static BezierBy * create (float t, const ccBezierConfig &c)
ccBezierConfig  là 1 cấu trúc 3 điểm định nghĩa như sau:
struct ccBezierConfig {
Point controlPoint_1;
Point controlPoint_2;
Point endPosition;
};

Ex:
ccBezierConfig  bezier;
bezier.controlPoint_1 = Point(100,100);
bezier.controlPoint_2 = Point(200,-200);
bezier.endPosition = Point(40,400);
auto action = BezierBy::create(3,bezier);
sprite->runAction(action);

6/ BezierTo  ( Di chuyển sprite theo 1 đường "cong" tạo bởi 3 điểm đầu, giữa và cuối )
static BezierTo * create (float t, const ccBezierConfig &c)

Ex:
ccBezierConfig  bezier;
bezier.controlPoint_1 = Point(100,100);
bezier.controlPoint_2 = Point(200,-200);
bezier.endPosition = Point(40,400);
auto action = BezierBy::create(3,bezier);
sprite->runAction(action);

* Lưu ý: Dù cùng 1 ccBezierConfig, nhưng BezierTo và BezierBy di chuyển trên màn hình sẽ khác nhau, do tọa độ Point trong ccBezierConfig là khác nhau về bản chất. Các bạn cần lưu ý điều này.

7/ Place (Đặt Sprite tại 1 tọa độ xác định trên màn hình
static Place* create(const Point & pos)
EX:
auto action = Place::create(Point(100,100));
sprite->runAction(action);

8/ ScaleBy (Thay đổi kích thước sprite theo 1 tỷ lệ xác định)
static ScaleBy* create ( float duration, float s )
static ScaleBy* create ( float duration, float sx, float sy )
static ScaleBy* create ( float duration, float sx, float sy, float sz )

EX:
auto action = ScaleBy::create(4,3); sprite->runAction(action);
auto action = ScaleBy::create(4,3,5); sprite->runAction(action);

9/ ScaleTo ( Thay đổi kích thước sprite theo 1 tỷ lệ xác định);
static ScaleTo * create ( float duration, float s )
static ScaleTo * create ( float duration, float sx, float sy )
static ScaleTo * create ( float duration, float sx, float sy, float sz )

EX:
auto action = ScaleTo ::create(4,3); sprite->runAction(action);
auto action = ScaleTo ::create(4,3,5); sprite->runAction(action);

* 2 lệnh ScaleTo, ScaleBy, kết quả khá giống nhau

10/ RotateBy ( Quay Sprite theo 1 góc xác định)
static RotateBy* create ( float duration, float deltaAngle )
static RotateBy* create ( float duration, float deltaAngleZ_X, float deltaAngleZ_Y )
Ex:
auto action = RotateBy::create(3,45); sprite->runAction(action);

11/ RotateTo ( Quay Sprite theo 1 góc xác định)
static RotateTo* create ( float duration, float deltaAngle )
static RotateTo* create ( float duration, float deltaAngleZ_X, float deltaAngleZ_Y )
Ex:
auto action = RotateTo::create(3,45); sprite->runAction(action);

12/ TintBy (Chuyển màu của Sprite sang 1 màu nhất định)
static TintBy* create ( float duration, GLshort deltaRed, GLshort deltaGreen, GLshort deltaBlue )
Ex:
auto action = TinBy::create(3, 255,200,100); sprite->runAction(action);
* Cách này chuyển màu khá nhanh và không mượt như cách dưới

13/ TintTo (Chuyển màu của Sprite sang 1 màu nhất định)
static TintTo* create ( float duration, GLshort deltaRed, GLshort deltaGreen, GLshort deltaBlue )
Ex:
auto action = TintTo::create(3, 255,200,100); sprite->runAction(action);
* Màu biến thiên mượt hơn cách trên

14/ FadeTo ( Tạo hiệu ứng Fade cho sprite với độ Opacity nhất định)
static FadeTo* create ( float duration, GLubyte opacity )
Ex:
auto action = FadeTo::create(3,55); sprite->runAction(action)
Opacity từ 0 tới ~ 255 ??

15/ FadeIn ( Tạo Fade - hiện dần 1 sprite)
static FadeIn * create (float d)
Ex:
sprite->setOpacity(0);
auto action = FadeIn::create(5);sprite->runAction(action);

16/ FadeOut ( Làm mờ dần 1 sprite )
static FadeOut * create (float d)
Ex:
auto action = FadeOut ::create(5);sprite->runAction(action);

17/ Repeat ( Nhắc lại 1 Action với số lần xác định)

static Repeat* create ( FiniteTimeAction * action, unsigned int times )

Ex:

auto action = Repeat:create(RotateBy::create(2,45),8); sprite->runAction(action);

18/ RepeatForever ( Nhắc lại 1 Action với số lần vô hạn)

static RepeatForever * create (ActionInterval *action)

Ex:

auto action = RepeatForever :create(RotateBy::create(2,45)); sprite->runAction(action);

Các bạn có thể tra cứu Hàm cocos2d-x V3 ở đây nhé

TOBE CONTINUED (2)...

More about →