Skip to content

Game CutTree

Sử dụng sách Beginning C++ Game Programming, quyển này ưu điểm là dành cho C++ very beginner và sử dụng SFML để làm game. SFML là library nên gần như các code đều rất gần với C++ nguyên bản chứ không như các Game Engine khác (Như Unreal Engine hay Esenthel).

1 SFML Game development

Tôi chuyển qua sách https://github.com/SFML/SFML-Game-Development-Book để hiểu rõ hơn về cấu trúc và cách làm game, vì sách Beginning C++ programming không thật sự tối ưu với các code. Có lẽ tác giả không phải C++ kinh nghiệm? Nhiều đoạn code rất khó hiểu.

Sách này sẽ hướng dẫn làm dạng game Shoot-em-up, điều khiển aircraft.

Để tạo 1 game bằng SFML trước tiên tạo 1 dàn bài cho game, bao gồm các thành phần như sau

2 Game CutTree

2.1 Dàn ý của SFML

#include <iostream>
#include <SFML/Graphics.hpp>

using namespace sf;

int main()
{
    // Create video mode "object" from SFML
    sf::VideoMode vm(1920, 1080);// Nếu đã dùng namespace sf thì chỉ cần viết sf::VideoMode vm(1920, 1080);

    // Render Window game
    sf::RenderWindow window(vm, "CutTree Game",sf::Style::Fullscreen);

    while (window.isOpen()) // Khi màn hình Window Game còn mở thì thực hiện các lệnh dưới đây
    {
        //Player keyboard input

        //Update scene

        //Draw scene

        //Clear everything from last scene

        //Show everything we just draw
    }
    return 0;
}

2.2 Chuẩn bị assets, spites

2.2.1 Tạo Sprite tĩnh như background

Sau khi Tạo Video Mode cho game thì cần phải có các asset và vật thể của game, gọi là sprite

    // Tạo object Texture cho background của Game
    Texture textureBackground;

    // Load ảnh từ computer lên object Texture
    textureBackground.loadFromFile("graphics/background.png");

    // Tạo object là Sprite, được gọi là vật thể, có thể là nhân vật, có khả năng di chuyển. Texture chỉ là vỏ bề ngoài của các Sprite này
    Sprite spriteBackground;

    // Attach texture to sprite
    spriteBackground.setTexture(textureBackground); //Bây giờ thì vật thể spriteBackground đã được mặc một bộ quần áo là textureBackground

    // Set position for spriteBackground
    spriteBackground.setPosition(0, 0);

Trong SFML thì hệ toạ độ như sau:

Tức là spriteBackground được đặt tại toạ độ gốc. Nếu background này có độ phân giải là 1920x1080 thì sẽ full màn hình, vì VideoMode đã được set là 1920x1080

Để hiển thị Sprite ra màn hình thì cần dùng lệnh Draw

        //Draw spritebackground vào window
        window.draw(spriteBackground);
        //Show everything we just draw
        window.display();

Kết quả được như sau

2.2.2 Tạo sprite có animation

Bây giờ sẽ tạo 1 sprite là Bee có khả năng di chuyển (animation)

Texture textureBee;
textureBee.loadFromFile("graphics/bee.png");
Sprite spriteBee;
spriteBee.setTexture(textureBee);
spriteBee.setPosition(0, 800); // sẽ đi từ bên trái màn hình x= 0, từ phía dưới y = 800 (max là 1080)

// variable khai báo Bee có active hay không
bool beeActive = false;

// Speed of Bee
float beeSpeed = 0.0f;

Để tính toán speed của Bee thì cần dựa vào chiều dài của màn hình, tức là 1920px.
1 sprite Bee có kích thước vd là 100px. Bây giờ đã có quảng đường, để có speed cần phải có thể thời gian.

SFML có function là Clock. Khai báo biến này trước. Và Time cần phải được update liên tục khi Window Open

Để các vòng lặp có random speed khác nhau thì cần sử dụng seed random (srand)

        // Set up Bee. 
        if (!beeActive)//!beeActive==true, tức là nếu Bee đứng im (active=False) thì thực hiện các lệnh sau
        {//Nếu active=fasle thì reset vị trí của Bee
            //Random Speed của Bee
            srand((int)time(0)); // srand là set seed for rand(), time(0) là current time. 
            // Nếu không dùng seed rand thì kết quả rand() sẽ giống như nhau trong các vòng lặp
            beeSpeed = (rand() % 200 + 200); // Speed sẽ là 0--> 199 + 200px trên mỗi giây, là 200 - 399

            // Set Position của Bee sau mỗi Frame
            srand((int)time(0) * 10);
            float height = (rand() % 1350) + 500;
            spriteBee.setPosition(1880, height); // set Bee ở bên phải màn hình
            beeActive = true;

        }else //Move the bee
        {
            spriteBee.setPosition(
                spriteBee.getPosition().x - beeSpeed * dt.asSeconds(), // vị trí x sẽ được - speed * time. Đi từ phải qua trái
                spriteBee.getPosition().y);// vị trí của y sẽ không đổi
            //Nếu đi hết màn hình
            if (spriteBee.getPosition().x < 0) beeActive = false; // Cho Bee về lại vị trí ban đầu
        }

2.3 Tạo GUI control

Tạo New Game, Pause, Exit cho Game

2.3.1 Add text, font

Cần phải khai báo các library khác để hiển thị text ra màn hình chứ không ra terminal nữa

#include <sstream> //Library này giúp print text ra màn hình của game

    // Add font Text
    Font font;
    font.loadFromFile("fonts/KOMIKAP_.ttf");

    Text messageText;
    Text scoreText;

    messageText.setFont(font); // Choose font for this text
    scoreText.setFont(font);

    // Assign the actual message
    messageText.setString("Press Enter to start!");
    scoreText.setString("Score = 0");

    messageText.setCharacterSize(75);
    scoreText.setCharacterSize(75);

    // Set position of Text
    messageText.setPosition(1920 / 2.0f, 1080 / 2.0f);
    scoreText.setPosition(20, 20);

Game này tạm thời OK rồi. Bây giờ sẽ nhảy qua làm Game dạng Top-down. Mình skip qua Game Pong vì thấy hơi chán. Nhưng cũng bỏ qua học OOP, hy vọng ko ảnh hưởng quá lớn.

The following pages link to this page:



Created : Mar 15, 2022