SFML Tutorial - Tạo cửa sổ trong SFML - Ep3

hardingadonis
Người tạo chủ đề
Không vào diễn đàn
New Member
Harding Adonis

Tổng số bài viết: 6
Số lần được cảm ơn: 2

SFML Tutorial - Tạo cửa sổ trong SFML - Ep3 Tác giả: hardingadonis

OK, xin chào mọi người. Trong các bài viết trước, mình đã hướng dẫn các bạn về xử lí thời gian trong SFML rồi. Bạn nào chưa xem thì xem tại đây nhé!

Xử lí thời gian trong SFML - Ep2

1. Tạo cửa sổ

Điều đầu tiên mà bạn muốn làm khi bắt đầu lập trình game đó là tạo một cửa sổ. Bởi vì nếu không tạo cửa sổ ra thì chẳng thể nào render đồ họa ra được. Và trong SFML, để tạo một cửa sổ, rất đơn giản. Chỉ cần 1 dòng code:

sf::Window window(sf::VideoMode(500, 300), "SFML Tutorial");
sf::sleep(sf::seconds(2.f));

Và kết quả là, chương trình sẽ tạo ra một cửa sổ với kích thước 500 * 300 pixels và tiêu đề là SFML Tutorial. Sau 2 giây thì sẽ tự biến mất.

Đây là cách tạo cửa sổ dùng constructor của class sf::Window. Ngoài ra ta còn có thể dùng hàm sf::Window::create().

sf::Window window;
window.create(sf::VideoMode(500, 300), "SFML Tutorial");
sf::sleep(sf::seconds(2.f));

Và kết quả cũng tương tự như trên.

1.1. VideoMode

Class sf::VideoMode là class chứa thông tin về chế độ video của cửa sổ bao gồm chiều dài, chiều cao, số bit trên mỗi pixel (cái này mặc định là 32, ngoài ra có thể tùy chỉnh). Ở đoạn code trên, mình đã gõ constructor của class sf::VideoMode. Mình đã truyền vào 2 thông số lần lượt là chiều dài và chiều cao. Nếu bạn muốn thay đổi kích thước của cửa sổ thí cứ tùy chỉnh cái này.

Các bạn hãy chạy đoạn code sau:

std::cout << sf::VideoMode::getDesktopMode().width << std::endl;
std::cout << sf::VideoMode::getDesktopMode().height << std::endl;
std::cout << sf::VideoMode::getDesktopMode().bitsPerPixel << std::endl;

Hàm sf::VideoMode::getDesktopMode() là một hàm static của class sf::VideoMode. Nó sẽ trả về 1 cái sf::VideoMode chứa thông tin của màn hình máy tính bao gồm chiều dài, chiều cao, số bit trên mỗi pixel.

Và kết quả tùy thuộc vào máy của bạn. Máy của mình nó hiện ra:

1600
900
32

1.2. Style

Đây là thông số thứ 3 khi tạo cửa sổ, dùng để chỉnh kiểu cửa sổ tạo ra.

Giá trị của enum	Mô tả
sf::Style::None	Cửa số sẽ không có phần viền bên ngoài và không thể kết hợp với các giá trị khác
sf::Style::Titlebar	Cửa sổ sẽ thêm thanh tiêu đề
sf::Style::Resize	Cửa sổ sẽ có nút phóng to thu nhỏ và cửa sổ có thể thay đổi kích thước
sf::Style::Close	Cửa số có nút đóng (dấu x màu đỏ)
sf::Style::Fullscreen	Cửa sổ sẽ mở toàn màn hình và không thể kết hợp với các giá trị khác
sf::Style::Default	Đây là sự kết hợp của Titlebar, Resize và Close

Khi ta không truyền tham số thứ 3 thì mặc định là sf::Style::Default.

Bây giờ ta sẽ thư lần lượt.

sf::Style::None

sf::Window window(sf::VideoMode(500, 300), "SFML Tutorial", sf::Style::None);
sf::sleep(sf::seconds(2.f));

sf::Style::Titlebar

sf::Window window(sf::VideoMode(500, 300), "SFML Tutorial", sf::Style::Titlebar);
sf::sleep(sf::seconds(2.f));

sf::Style::Resize

Ở bài sau mới demo được nhé !!!

sf::Window window(sf::VideoMode(500, 300), "SFML Tutorial", sf::Style::Resize);
sf::sleep(sf::seconds(2.f));

sf::Style::Close

sf::Window window(sf::VideoMode(500, 300), "SFML Tutorial", sf::Style::Close);
sf::sleep(sf::seconds(2.f));

sf::Style::Fullscreen

Cái này là toàn màn hình nhé.

sf::Window window(sf::VideoMode(500, 300), "SFML Tutorial", sf::Style::Fullscreen);
sf::sleep(sf::seconds(2.f));

sf::Style::Default

sf::Window window(sf::VideoMode(500, 300), "SFML Tutorial", sf::Style::Default);
sf::sleep(sf::seconds(2.f));

2. Vòng lặp chính

Bây giờ, ta đã tạo được cửa sổ rồi nhưng sau đó thì nó lại biến mất. Lí do đó là ta chỉ mới có tạo ra cửa sổ mà vẫn chưa code đoạn xử lí cho nó. Các bạn có thể hình dung như sau:

Hàm sf::Window::isOpen() sẽ trả về true nếu như cửa sổ của ta đang mở, và sẽ trả về false nếu như cửa sổ của ta đã đóng.

Theo đoạn code trong ảnh, nếu như cửa sổ của ta vẫn còn mở thì sẽ tiếp tục vòng lặp. Vòng lặp này gọi là vòng lặp chính (main loop). Trong vòng lặp gòm các công việc: handle event, update và render (các bước phải đúng trình tự).

Ở đây mình chỉ nói sơ qua vì sau này sẽ có bài viết hướng dẫn kĩ hơn.

2.1 Handle event (xử lí sự kiện):

Handle event (xử lí sự kiện) là bước ta sẽ xử lí các sự kiện.

Vd: khi ta nhấn một phím bất kì thì đó là một sự kiện, hoặc nếu ta nhấn chuột trái thì đó cũng là một sự kiện. Và khi ta xử lí được những sự kiện này thì ta sẽ có thể đến bước tiếp theo.

if (isPressKeyA())
{
    //   Do somethings
}

2.2 Update (cập nhật):

Tại đây chúng ta sẽ cập nhật lại các trạng thái của tất cả các thành phần trong chương trình.

Vd: Bạn có 1 game, trong đó có 1 player, vị trị lúc đầu là [1,1]. Nếu bạn thiết kế game khi nhấn phím A thì player sẽ qua trái thì đây chính là bước để cập nhật lại vị trí của player. Sau khi cập nhật lại thì vị trí của player là [0,1]

if (moveLeft)
{
    player.move(-1, 0);
}

2.3 Render:

Cái bước này là bước cực kì dễ. Bởi vì nó chỉ vẽ ra những gì ta muốn vẽ ra màn hình thôi.

Vd: Bạn có 1 bức ảnh, bạn muốn vẽ nó ra màn hình thì tại bước này bạn chỉ cần gọi hàm vẽ ra thôi.

window.draw(image);

Đó, rất là đơn giản :v.

OK, bài viết đến đây là hết rồi nhé !!!

4 năm 10 tháng trước #1

Vui lòng Đăng nhập hoặc Tạo tài khoản để tham gia cuộc hội thoại.

Thời gian tải trang: 0.248 giây

SFML Tutorial - Tạo cửa sổ trong SFML - Ep3

SFML Tutorial - Tạo cửa sổ trong SFML - Ep3 Tác giả: hardingadonis

Công cụ