STDIO
Tìm kiếm gần đây
    Nội dung
    0
    0
    Chia sẻ

    Scrolling Background trong Cocos2d-x 3.x

    Hướng dẫn cách tạo nên scrolling background trong Cocos2d-x.
    Ryan Lê

    Ryan

    18/02/2015 29/09/2020 2 phút đọc
    Scrolling Background trong Cocos2d-x 3.x

    Giới thiệu

    Nếu như đã từng chơi qua các game thuộc thể loại endless-running, sẽ có cảm giác như là nhân vật đang di chuyển trên một hành trình dài vô tận.

    Mà chính scrolling background là hiệu ứng tạo nên cảm giác này, bài viết này hướng dẫn cách tạo nên scrolling background trong Cocos2d-x.

    Scrolling background

    Scrolling background là sự di chuyển lặp đi lặp lại liên tục của một bức ảnh (background), tạo ra cảm di chuyển trên một hành trình dài bất tận cho người chơi.

    Ý tưởng

    Để hiện thực scrolling background cần khởi tạo 2 sprite, 2 sprite này chính là background của game. Sau đó sắp xếp sao cho 2 sprite cùng di chuyển qua màn hình của người chơi. Khi sprite này sắp kết thúc thì sprite còn lại sẽ nối tiếp di chuyển theo sao cho người chơi không nhìn thấy được sự kết thúc của một sprite, cứ như thế lặp đi lặp lại liên tục tạo thành scrolling background.

    * 2 sprite này có thể giống nhau hoặc khác nhau miễn là phần đồ họa của sprite kết thúc trước có thể nối liền sprite sau.

    Hiện thực

    Sprite

    Khởi tạo sprite

    Tạo 2 sprite và đặt vị trí như sau:

    background1 = Sprite::create("background1.png");
    background1->setAnchorPoint(Vec2(0, 0));
    background1->setPosition(Vec2(origin.x, origin.y));
    
    background2 = Sprite::create("background2.png");
    background2->setAnchorPoint(Vec2(0, 0));
    background2->setPosition(Vec2(origin.x, origin.y + background2->getContentSize().height));

    Hiện thực hàm update của scene

    Trong hàm update của scene, hiện thực như sau:

    background1->setPositionY(background1->getPositionY() - 
    						  (SCROLLING_BACKGROUND_SPEED*visibleSize.height));
    background2->setPositionY(background2->getPositionY() - 
    						  (SCROLLING_BACKGROUND_SPEED*visibleSize.height));
    
    if (background1->getPositionY() <= -background1->getContentSize().height)
    {
    	background1->setPositionY(background2->getPositionY() + 
    						background2->getContentSize().height);
    }
    
    if (background2->getPositionY() <= -background2->getContentSize().height)
    {
    	background2->setPositionY(background1->getPositionY() + 
    						background1->getContentSize().height);
    }

    * Các sprite (background) áp dụng cho bài viết này phải có chiều cao lớn hơn hoặc bằng với chiều cao của màn hình.

    Trên đây là một hướng dẫn về cách tạo hiệu ứng scrolling background theo chiều từ trên xuống, dựa vào đó có thể hiện thực cho mình một scrolling background theo chiều ngang của màn hình.

    Download code demo

    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.

    Khi bạn nhấn vào sản phẩm do chúng tôi đề xuất và mua hàng, chúng tôi sẽ nhận được hoa hồng. Điều này hỗ trợ chúng tôi có thêm kinh phí tạo 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 - 2021