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