Phần lớn lập trình viên làm việc không phải vì tiền hoặc những lời tán dương, mà vì lập trình thực sự thú vị. Linus Torvalds
STDIO Nếu như đã từng chơi qua các game thuộc thể loại endless-running, bạn sẽ có cảm giác như là nhân vật của bạn đ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. Trong bài viết này tôi sẽ hướng dẫn các bạn cách tạo nên scrolling background trong cocos2d-x.
Nội dung bài viết

Giới thiệu

Nếu như đã từng chơi qua các game thuộc thể loại endless-running, bạn sẽ có cảm giác như là nhân vật của bạn đ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. Trong bài viết này tôi sẽ hướng dẫn các bạn cách tạo nên scrolling background trong cocos2d-x.

Tiền đề bài viết

Trong quá trình học tập và làm việc, tôi luôn muốn chia sẻ đến các bạn những kiến thức mà tôi tích lũy được dù là nhỏ nhất. Bài viết này là một trong số đó.

Đối tượng hướng đến

Dành cho các đối tượng đang trong quá trình học tập và bắt đầu tìm hiểu về cocos2d-x.

Scrolling background

Scrolling background chính 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. Hai 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 để phần kết thúc của nó hiện ra 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.

Lưu ý: Hai sprite này có thể giống nhau hoặc khác nhau tùy trường hợp.

Hiện thực

Ảnh minh họa (nguồn: từ 1 dự án game của STDIO).

ss_1

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 sence ta 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);
}

Lưu ý: 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.

Download demo

DOWNLOAD RESOURCES.zip

DOWNLOAD SOURCE_CODE.zip

Tổng kết

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ác bạn có thể tự hiện thực cho mình một scrolling background theo chiều ngang của màn hình.

Bạn cần hỗ trợ các dự án kết nối không dây?

Quí doanh nghiệp, cá nhân cần hỗ trợ, hợp tác các dự án IoT, kết nối không dây. Vui lòng liên hệ, hoặc gọi trực tiếp 0942.111912.

  • TỪ KHÓA
  • Arduino
  • ESP32
  • ESP8266
  • Wifi
  • Bluetooth
  • Zigbee
  • Raspberry Pi
THẢO LUẬN
ĐÓNG