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

    Nội dung

    Action Cho Sprite Trong Cocos2d-x 3.x.x

    23/01/2015
    06/04/2017
    Action Cho Sprite 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. Bài viết có nội dung giới thiệu về khái niệm những Acction cơ bản của Sprite và các ví dụ minh họa những Action cơ bản của Sprite trong Cocos2d-x 3.x.x.

    Giới thiệu

    Trong bài viết Giới Thiệu Về Sprite Trong Cocos2d-x 3.x.x, tôi đã giới thiệu cho bạn về cách khởi tạo và một số thuộc tính cơ bản của Sprite, nhưng những thuộc tính của Sprite rất đơn sơ và vẫn chưa đáp ứng nhu cầu cho người lập trình game. Trong bài viết này tôi và các bạn sẽ tìm hiểu về Action Sprite trong Cocos2d-x 3.4.

    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 được tài trợ bởi STDIO.

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

    Action là gì?

    Là một lớp đối tượng được xây dựng trong Cocos2d-x nhằm mục đích thay đổi thuộc tính Sprite (Node) sau một khoảng thời gian nhất định.

    Ví dụ

    //  Khởi tạo một Sprite có tên là spriteSins.
    auto spriteSins = Sprite::create(“sins.png”);
    
    // Đặt vị trí ban đầu cho spriteSins là x=100 và y=100.
    spriteSins->setPossition(Vec2(100, 100);
    
    // Di chuyển spriteSins đến vị trí (200, 200) sau 2 giây.
    auto moveTo = MoveTo::create(2, Vec2(200, 200));
    

    Sau khi khởi tạo một Action, để chạy Action đó, bạn sử dụng phương thức runAction()

    spriteSins->runAction(moveTo);
    

    Dưới đây là hình minh họa spriteSins được khởi tạo (bên trái) và sau 2 giây sau (bên phải)

    ss_1

    Các Action cơ bản có hai loại là By To. Để biết sự khác biệt giữa chúng thì bạn hãy xem một ví dụ ngay sau đây.

    auto spriteSins = Sprite::create("sins.png");
    spriteSins->setPossition(Vec2(100, 100);
    
    auto moveBy = MoveBy::create(2, Vec2(200, 200));
    
    auto moveTo = MoveTo::create(2, Vec2(200, 200));
    
    auto sequencesSpriteSins= Sequence::create(moveBy, delay, moveTo, nullptr);
    spriteSins->runAction(sequencesSpriteSins);
    

    Giải thích

    • Dòng 1: Khởi tạo Sprite có hình ảnh gốc là sins.png và có tên là spriteSins.
    • Dòng 2: Đặt vị trí ban đầu cho spriteSins tại vị trí (100, 100).
    • Dòng 4: Action cơ bản Move với loại By. Lúc này spriteSins sẽ di chuyển tới vị trí mới với một khoảng (x,y), Ở đây vị trí mới của spriteSins là (300, 300).
    • Dòng 6: Action cơ bản Move với loại To. Lúc này spriteSIns sẽ di chuyển tới vị trí mới (x, y). Ở đây vị trí mới của spriteSins là (200, 200).
    • Dòng 8: Khởi tạo Sequence bao gồm Action moveBy, delay và moveTo. Tôi sẽ nói về nó ở phần sau của bài viết.
    • Dòng 9: Chạy Action Sequence.

    ss_2

    Qua ví dụ trên, tôi đã cho bạn thấy sự khác biệt giữa các loại Action cơ bản. Tùy vào mục đích mà bạn sử dụng sao cho hợp lý.

    Action cơ bản của Sprite trong Cocos2d-x

    Các Action cơ bản của Sprite như là một hành động đơn lẻ, có một mục tiêu duy nhất.

    Move

    Làm di chuyển một Sprite(Node) sau một thời gian nhất định.

    // Di chuển spriteSins tới vị trí x=300 và y=200 sau 2 giây.
    auto moveTo = MoveTo::create(2, Vec2(300, 200));
    
    // Chạy Action moveTo
    spriteSins->runAction(moveTo);
    
    // Di chuyển spriteSins lên sang phải 300 pixel và lên trên 200 pixel sau 2 giây,
    auto moveBy = MoveBy::create(2, Vec2(300, 200));
    
    // Chạy Action moveBy
    spriteSins->runAction(moveBy);
    

    ss_3

    Rotate

    Là Action mà Sprite(Node) quay một góc xác định sau một khoảng thời gian xác định.

    //  Xoay spriteSins tới góc 40.0 thuận chiều kim đồng hồ sau 2 giây.
    auto rotateTo = RotateTo::create(2.0f, 40.0f);
    
    // Chạy Action rotateTo
    spriteSins->runAction(rotateTo);
    
    // Xoay spriteSins thêm một góc 40.0 thuận chiều kim đồng hồ sau 2 giây.
    auto rotateBy = RotateBy::create(2.0f, 40.0f);
    
    // Chạy Action rotateBy
    spriteSins->runAction(rotateBy);

    ss_4

    Scale

    Là Action mà Sprite(Node) được phóng to hay thu nhỏ sau một khoảng thời gian xác định.

    // Phóng to Sprite lên gấp 3 sau 2 giây.
    auto scaleBy = ScaleBy::create(2.0f, 3.0f);
    mySprite->runAction(scaleBy);
    
    // Phóng to Sprite, tăng giá trị X(bề ngang) lên 5 lần và giá trị Y(bề dọc) lên 3 lần sau 2 giây
    auto scaleBy = ScaleBy::create(2.0f, 5.0f, 3.0f);
    mySprite->runAction(scaleBy);
    
    // Phóng to Sprite thêm gấp 3 sau 2 giây.
    auto scaleTo = ScaleTo::create(2.0f, 3.0f);
    mySprite->runAction(scaleTo);
    
    // Phóng to Sprite, tăng thêm giá trị X(bề ngang) lên 5 lần và thêm giá trị Y(bề dọc) lên 3 lần sau 2 giây
    auto scaleTo = ScaleTo::create(2.0f, 5.0f, 3.0f);
    mySprite->runAction(scaleTo);
    

    ss_5

    Fade In và Fade Out

    Là một Action mà làm thay đổi Opacity của một Sprite(Node) từ 0-255(từ minh bạch đến đục hoàn toàn) được gọi là Fade In và ngược lại từ 255-0(từ đục dần đến minh bạch) được gọi là Fade Out sau một khoảng thời gian xác định.

    // Fade in sprite sau 1 giây.
    auto fadeIn = FadeIn::create(1.0f);
    spriteSins->runAction(fadeIn);
    
    // Fade out sprite sau 2 giây.
    auto fadeOut = FadeOut::create(2.0f);
    spriteSins->runAction(fadeOut);

    Dưới đây là hình minh họa Fade In(bên phải) và face out(bên trái) của sprite.

    ss_6

    Tint

    Tùy chỉnh diễn biến thay đổi màu của một Sprite(Node) trong một thời gian xác định.

    // Khởi tạo Sprite
    auto spriteSins= Sprite::create("sins.png");
    
    // Tint của spritesSins tới 1 giá trị màu RGB xác định sau 2 giây.
    auto tintTo = TintTo::create(2.0f, 120.0f, 232.0f, 254.0f);
    spriteSins->runAction(tintTo);
    
    // Tint của spriteSins thêm 1 khoảng màu RGB sau 2 giây.
    auto tintBy = TintBy::create(2.0f, 120.0f, 232.0f, 254.0f);
    spriteSins->runAction(tintBy);
    

    ss_7

    Animation

    Bạn có thể tìm hiểu về animation trong bài viết Animation trong Cocos2d-x 3.x.x.

    Easing

    Là một hiệu ứng làm cho Sprite(Node) di chuyển trơn tru với một vận tốc nhất định. Bỏ qua tốc độ, giảm bớt các Action của Sprite(Node) thì nó luôn luôn bắt đầu và kết thúc tại cùng một thời điểm. Dưới đây là hình minh họa một số đồ thị di chuyển.

    ss_8

    Cocos2d-x hỗ trợ nhiều hầu hết các đồ thị di chuyển như bên trên. Và cũng rất dễ dàng để sử dụng chúng.

    // Khởi tạo 1 sprite
    auto spriteSins= Sprite::create("sins.png");
    
    // Tạo ra một Action moveBy
    auto move = MoveBy::create(2, Vec2(200, 200));
    auto move_back = move->reverse();
    
    // Khởi tạo BounceIn Ease Action
    auto moveEaseIn = EaseBounceIn::create(move->clone() );
    
    // Thời gian trễ giữa các Action
    auto delay = DelayTime::create(0.25f);
    
    // Khởi tạo Sequence của Action
    auto seq = Sequence::create(moveEeseIn, delay, move_ease_in_back,delay->clone(), nullptr); // ??
    
    // Chạy sequence
    spriteSins->runAction(RepeatForever::create(seq));

    Sequences

    Bao gồm bất kì các Action của đối tượng, Function hay Sequences được thực hiện tuần tự(được truyền vô trước thì được thực hiện trước). Làm sao để có thể truyền một Function vào một Sequences? Trong Cocos2d-x 3.4, CallFunc cho phép bạn khởi tạo một Function, nhờ đó bạn có thể truyền Function vô Sequences.

    ss_9

    Giải thích

     Mô hình thực thi Action trong Sequences với action1, action2, action3 lần lượt là thứ tự truyền vô Sequences. Ngay sau khi thực hiện Action 1 thì sẽ thực hiện ngay Action 2 và tương tự với Action 3.

    // Khởi tạo Sprite
    auto spriteSins= Sprite::create("sins.png");
    
    // Khởi tạo một vài Action
    // Action JumpBy
    auto jump = JumpBy::create(0.5, Vec2(0, 0), 100, 1);
    
    // Action Rotateto
    auto rotate = RotateTo::create(2.0f, 10);
    
    // Khởi tạo một vài Function
    // In ra màn hình console dòng chữ "Jumped!".
    auto callbackJump = CallFunc::create([]()
    {
        log("Jumped!");
    });
    
    // In ra màn hình console dòng chữ "Rotate!".
    auto callbackRotate = CallFunc::create([]()
    {
        log("Rotated!");
    });
    
    // Khởi tạo Sequence với các Action và Function.
    auto sequenceSpriteSins= Sequence::create(jump, callbackJump, rotate, callbackRotate, nullptr);
    
    // Chạy Sequence
    spriteSins->runAction(sequenceSpriteSins);
    

    Thứ tự của các Action trong Sequence trên là: jump → callbackJump → rotate → callbackRotate

    Spawn

    Tương tự Sequence, Spwan thì  Actions sẽ đồng thời thực hiện cùng một lúc, khác với Sequence là Actions xảy ra theo  tuần tự. Bạn có thể kết hợp Spawn với Sequence để tạo nên các Action mới, đa dạng cho mục đích với Sprite của bạn. Dưới đây là hình minh họa mô hình thực thi Action trong Sqawn với action1, action2, action3 lần lượt là thứ tự truyền vô Spawn.

    ss_10

    // Khởi tạo Sprite
    auto spriteSins = Sprite::create("sins.png");
    
    // Khởi tạo Action MoveBy
    auto moveBy = MoveBy::create(10, Vec2(200,200));
    
    // Khởi tạo Action FaceTo
    auto fadeTo = FadeTo::create(2.0f, 120.0f);
    
    // Chạy Spawn
    auto spa = Spawn::createWithTwoActions(moveBy, fadeTo);
    
    spriteSins->runAction(spa);
    
    

    Reverse

    Sau khi bạn khởi tạo và chạy một Action, để chạy ngược lại Action đó thì được gọi là Reverse. Để sử dụng Reverse bạn sử dụng phương thức reverse(). Bạn có thể Reverse cả Sequence và Sqawn.

    // Khởi tạo Sprite
    auto spriteSins= Sprite::create("sins.png");
    // spriteSins đặt tại vị trí (100, 100)
    spriteSins->setPosition(100, 100);
    
    // Khởi tạo một số Action.
    // MoveBy, spriteSins sẽ có vị trí mới là (300, 300) sau 2 giây.
    auto moveBy = MoveBy::create(2.0f, Vec2(200,200));
    // ScaleBy. spriteSins sẽ phóng to lên gấp 3 lần sau 2 giây.
    auto scaleBy = ScaleBy::create(2.0f, 3.0f);
    // Delay, làm thời gian chậm trễ 2 giây.
    auto delay = DelayTime::create(2.0f);
    
    // Khởi tạo một Sequence
    auto seq= Sequence::create(moveBy, delay, scaleBy, nullptr);
    
    // chạy seq
    spriteSins->runAction(seq);
    
    // Reverse seq
    spriteSins->runAction(seq->reverse());
    

    Tổng kết

    Trong bài viết này tôi đã hoàn thành việc giới thiệu các Action cơ bản của Sprite 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.

    Tham khảo

    http://www.cocos2d-x.org

    Thảo luận

    Đăng nhập

    Bài viết liên quan

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

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

    Giới thiệu tổng quan về khái niệm cơ bản, một số cách dùng để khởi tạo một sprite, các thuộc tính của sprite và cũng như các thao tác cơ bản với các thuộc tính của sprite ...

    Trương Xuân Đạt

    23/01/2015

    Animation 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. Trong bài viết này sẽ giới thiệu nội dung về khái niệm Animation, các loại Animation hiện có và một ...

    Trương Xuân Đạt

    23/01/2015

    Sprite Sheet Trong Cocos2dx 3.x.x

    Sprite Sheet Trong Cocos2dx 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. Sprite Sheet là một trong những phương pháp tiêu chuẩn trong ngành công nghiệp games nhằm sẽ quản ...

    Trương Xuân Đạt

    23/01/2015

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

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

    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

    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

    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

    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

    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

    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