STDIO
Tìm kiếm gần đây
    • Nội dung
    • QR Code
    • 0
    • 0
    • Sao chép

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

    Tìm hiểu về action của Sprite trong Cocos2d-x 3.x.x.
    23/01/2015
    29/09/2020
    7 phút đọc
    Action Cho Sprite Trong Cocos2d-x 3.x.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 đó 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):

    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ì 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, delaymoveTo, phần sau bài viết sẽ đề cập.
    • Dòng 9: Chạy Action Sequence.

    Ví dụ trên cho 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à 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);
    

    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);

    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);
    

    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ừ trong suốt đế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 trong suốt) đượ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.

    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);
    

    Animation

    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.

    Cocos2d-x hỗ trợ nhiều cho 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.

    // 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 khởi tạo một Function, nhờ đó có thể truyền Function vô Sequences.

    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à: jumpcallbackJumprotatecallbackRotate.

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

    // 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 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 sử dụng phương thức reverse(). Có thể Reverse cả Sequence và Spawn.

    // 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());
    

    Tham khảo

    http://www.cocos2d-x.org

    0 Bình luận
    Lập Trình Game

    Lập Trình Game

    Kiến thức, kỹ thuật, kinh nghiệm lập trình game.

    Đề xuất

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

    Khám phá

    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 ...
    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 ...
    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
    Tìm hiểu về khái niệm UI và các đối tượng thiết kế UI trong Cocos2d-x ...
    Sprite Sheet Trong Cocos2dx 3.x.x
    Giới thiệu khái niệm, tác dụng, cách tạo và sử dụng Sprite Sheets trong ...
    Làm Thế Nào Để Tạo Fixtures Cho Vật Có Hình Dạng Phức Tạp Trong Cocos2d-x?
    Hướng dẫn sử dụng phần mềm Physics Editor dùng để tạo Fixtures cho vật ...
    Xử Lý Với File PLIST trong Cocos2d-x 3.x.x
    Giới thiệu những đặc điểm, cách xử lý và ứng dụng của file PLIST trong ...
    Giới Thiệu về Scene trong Cocos2d-x 3.x.x
    Tìm hiểu về Scene và các thao tác trong Cocos2d-x 3.x.x.
    Vẽ Sprite Sử Dụng Mặt Nạ (Cocos2d-x 2.x)
    Hướng dẫn tạo hiệu ứng vẽ sprite sử dụng mặt nạ cho vòng ma thuật trong ...
    Khi bạn nhấn vào liên kết sản phẩm do STDIO đề xuất và mua hàng, STDIO có thể nhận được hoa hồng. Điều này hỗ trợ STDIO tạo thêm nhiều nội dung hữu ích. Tìm hiểu thêm.
    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
    developer@stdio.vn

    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