Tạo cửa sổ trong SFML - Ep3
C++
38
game
11
sfml
6
game_programming
6
White

Harding Adonis viết ngày 10/06/2019

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é!

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

Đâ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

Có nghĩ là màn hình máy của mình có kích thước 1600 * 900 pixels và số bit trên mỗi pixel là 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, ResizeClose

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

    alt text

  • sf::Style::Titlebar

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

    alt text

  • sf::Style::Resize

    • Ở bài sau mới có thể demo được nhé :laughing:
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));
    

    alt text

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

alt text
Mặc định như trên.

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:
alt text
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é !!!

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Harding Adonis

6 bài viết.
16 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
2 0
Bài viết này mình chỉ nói sơ lược về SFML và vài project mình đã làm với nó thôi nhé. Các bài viết sau mình sẽ chỉ rõ cách cài đặt cũng như dùng SF...
Harding Adonis viết 6 tháng trước
2 0
White
2 0
OK xin chào mọi người, ở bài viết trước mình đã giới thiệu sơ lược về SFML rồi. Và bây giờ mình sẽ hướng dẫn các bạn cài đặt SFML vào project. Lin...
Harding Adonis viết 6 tháng trước
2 0
White
1 2
OK, xin chào mọi người, ở bài viết trước mình đã hướng dẫn các bạn cài SFML cho project Visual Studio. Và bây giờ, mình sẽ hướng dẫn các bạn cài đặ...
Harding Adonis viết 6 tháng trước
1 2
Bài viết liên quan
White
2 0
OK xin chào mọi người, ở bài viết trước mình đã giới thiệu sơ lược về SFML rồi. Và bây giờ mình sẽ hướng dẫn các bạn cài đặt SFML vào project. Lin...
Harding Adonis viết 6 tháng trước
2 0
White
1 0
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 cách cài SFML vào project rồi. Bạn nào chưa xem thì xem tại đây nhé (...
Harding Adonis viết 6 tháng trước
1 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
6 bài viết.
16 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!