Render Text (Metin Render Etme)

Bu bölümde oyuna son geliştirmeleri ekleyeceğiz: bir can sistemi, kazanma koşulu ve render edilmiş metin biçiminde geri bildirim. Bu bölüm, daha önce tanıtılan Text Rendering bölümünü yoğun şekilde kullanır; henüz okumadıysanız önce o bölümden geçmenizi öneririm.

Breakout'ta tüm metin render kodu, FreeType kütüphanesinin başlatılması, render yapılandırması ve gerçek render kodunu barındıran TextRenderer sınıfında kapsüllenir:

• TextRenderer: başlık, kod

• Text shader'ları: vertex, fragment

Metin oluşturucunun fonksiyon içerikleri metin render bölümündeki kodla neredeyse aynı; ancak ekrana glyph render eden kod biraz farklı:

void TextRenderer::RenderText(std::string text, float x, float y, float scale, glm::vec3 color)
{
    [...]
    for (c = text.begin(); c != text.end(); c++)
    {
        float xpos = x + ch.Bearing.x * scale;
        float ypos = y + (this->Characters['H'].Bearing.y - ch.Bearing.y) * scale;

        float w = ch.Size.x * scale;
        float h = ch.Size.y * scale;
        // her karakter için VBO güncelle
        float vertices[6][4] = {
            { xpos,     ypos + h,   0.0f, 1.0f },
            { xpos + w, ypos,       1.0f, 0.0f },
            { xpos,     ypos,       0.0f, 0.0f },

            { xpos,     ypos + h,   0.0f, 1.0f },
            { xpos + w, ypos + h,   1.0f, 1.0f },
            { xpos + w, ypos,       1.0f, 0.0f }
        };
        [...]
    }
}

Bunun biraz farklı olmasının nedeni, metin render bölümünde kullandığımızdan farklı bir ortografik projeksiyon matrisi kullanmamız. Metin render bölümünde tüm y değerleri aşağıdan yukarıya doğru sıralanırken Breakout oyununda tüm y değerleri yukarıdan aşağıya doğru sıralanır; 0.0 y koordinatı ekranın üst kenarına karşılık gelir. Bu nedenle dikey ofseti nasıl hesapladığımızı biraz değiştirmemiz gerekiyor.

RenderText'in y parametresinden aşağıya doğru render ettiğimizden dikey ofseti, bir glyph'in glyph alanının üstünden aşağıya ne kadar itildiği olarak hesaplıyoruz. FreeType'dan 'H', 'T' veya 'X' gibi bazı glyphlar her zaman bu üst kenara değer. Bu yüzden bu tepe glyph'lerin bearingY'ını söz konusu glyph'in bearingY'ından çıkararak kırmızı vektörün uzunluğunu hesaplıyoruz:

float ypos = y + (this->Characters['H'].Bearing.y - ch.Bearing.y) * scale;

Glyph dikey ofseti

ypos hesaplamasını güncellemek dışında, mevcut ortografik projeksiyon matrisiyle çarpıldığında tüm vertex'lerin hâlâ ön yüzlü kalmasını sağlamak için vertex sırasını da biraz değiştirdik (yüz ayıklama bölümünde tartışıldığı gibi).

TextRenderer'ı oyuna eklemek kolay:

TextRenderer  *Text;
  
void Game::Init()
{
    [...]
    Text = new TextRenderer(this->Width, this->Height);
    Text->Load("fonts/ocraext.TTF", 24);
}

Metin oluşturucu, buradan indirebileceğiniz OCR A Extended adlı bir fontla başlatılır.

---

Oyuncu Canları

Topu alt kenara ulaşır ulaşmaz oyunu sıfırlamak yerine oyuncuya birkaç ekstra şans vermek istiyoruz. Başlangıçta 3 can veririz; top alt kenara her değdiğinde can sayısı 1 azalır. Yalnızca can sayısı 0 olduğunda oyunu sıfırlıyoruz:

class Game
{
    [...]
    public:  
        unsigned int Lives;
}

Oyunun Update fonksiyonunu oyunu sıfırlamak yerine oyuncunun can sayısını azaltacak şekilde güncelliyoruz:

void Game::Update(float dt)
{
    [...]
    if (Ball->Position.y >= this->Height) // top alt kenara ulaştı mı?
    {
        --this->Lives;
        // oyuncu tüm canlarını kaybetti mi? : Oyun bitti
        if (this->Lives == 0)
        {
            this->ResetLevel();
            this->State = GAME_MENU;
        }
        this->ResetPlayer();
    }
}

Oyunu/seviyeyi sıfırlarken oyuncunun can sayısını da sıfırlamayı unutmayın:

void Game::ResetLevel()
{
    [...]
    this->Lives = 3;
}

Oyuncunun şu anki can sayısını göstermek için metin oluşturucuyu kullanıyoruz:

void Game::Render()
{
    if (this->State == GAME_ACTIVE)
    {
        [...]
        std::stringstream ss; ss << this->Lives;
        Text->RenderText("Lives:" + ss.str(), 5.0f, 5.0f, 1.0f);
    }
}

Hayat sayısı render

---

Seviye Seçimi

Kullanıcı GAME_MENU oyun durumundayken oynanacak seviyeyi seçme kontrolünü vermek istiyoruz. W veya S tuşlarıyla seviyeler arasında geçiş yapabilir; Enter tuşuyla GAME_MENU durumundan GAME_ACTIVE durumuna geçiş yapılır:

if (this->State == GAME_MENU)
{
    if (this->Keys[GLFW_KEY_ENTER])
        this->State = GAME_ACTIVE;
    if (this->Keys[GLFW_KEY_W])
        this->Level = (this->Level + 1) % 4;
    if (this->Keys[GLFW_KEY_S])
    {
        if (this->Level > 0)
            --this->Level;
        else
            this->Level = 3;   
    }
}

Menü durumunda oyuncuya talimat ve seçilen seviyeyi arka planda gösteriyoruz:

void Game::Render()
{
    if (this->State == GAME_ACTIVE || this->State == GAME_MENU)
    {
        [...] // oyun render kodu
    }
    if (this->State == GAME_MENU)
    {
        Text->RenderText("Press ENTER to start", 250.0f, Height / 2, 1.0f);
        Text->RenderText("Press W or S to select level", 245.0f, Height / 2 + 20.0f, 0.75f);
    }
}

Seviye seçim ekranı

W veya S tuşuna basıldığında oyunun birden fazla kare boyunca tuş basışını kaydetmesi nedeniyle seviyeler hızla kayar. Bunu çözmek için GUI sistemlerinde yaygın bir numarayı kullanıyoruz: yalnızca basılı tuşları kaydetmekle kalmaz, bir kez işlenen ve bırakılana kadar tekrar işlenmeyen tuşları da saklarız:

class Game
{
    [...]
    public:  
        bool KeysProcessed[1024];
}

void Game::ProcessInput(float dt)
{
    if (this->State == GAME_MENU)
    {
        if (this->Keys[GLFW_KEY_ENTER] && !this->KeysProcessed[GLFW_KEY_ENTER])
        {
            this->State = GAME_ACTIVE;
            this->KeysProcessed[GLFW_KEY_ENTER] = true;
        }
        if (this->Keys[GLFW_KEY_W] && !this->KeysProcessed[GLFW_KEY_W])
        {
            this->Level = (this->Level + 1) % 4;
            this->KeysProcessed[GLFW_KEY_W] = true;
        }
        if (this->Keys[GLFW_KEY_S] && !this->KeysProcessed[GLFW_KEY_S])
        {
            if (this->Level > 0)
                --this->Level;
            else
                this->Level = 3;
            this->KeysProcessed[GLFW_KEY_S] = true;
        }
    }
    [...]
}

GLFW'nin tuş callback fonksiyonunda tuş bırakıldığında işlenmiş değerini sıfırlıyoruz:

void key_callback(GLFWwindow* window, int key, int scancode, int action, int mode)
{
    [...]
    if (key >= 0 && key < 1024)
    {
        if (action == GLFW_PRESS)
            Breakout.Keys[key] = true;
        else if (action == GLFW_RELEASE)
        {
            Breakout.Keys[key] = false;
            Breakout.KeysProcessed[key] = false;
        }
    }
}

---

Kazanma Koşulu

Oyuncu tüm solid olmayan blokları yıktığında oyunu kazanır. GameLevel sınıfında bunun için bir fonksiyon oluşturduk:

bool GameLevel::IsCompleted()
{
    for (GameObject &tile : this->Bricks)
        if (!tile.IsSolid && !tile.Destroyed)
            return false;
    return true;
}

Bu koşulu oyunun Update fonksiyonunda kontrol edip true döndürdüğünde oyun durumunu GAME_WIN olarak değiştiriyoruz:

void Game::Update(float dt)
{
    [...]
    if (this->State == GAME_ACTIVE && this->Levels[this->Level].IsCompleted())
    {
        this->ResetLevel();
        this->ResetPlayer();
        Effects->Chaos = true;
        this->State = GAME_WIN;
    }
}

GAME_WIN durumunda oyuncuyu tebrik edip yeniden başlatma veya çıkış seçeneği sunuyoruz:

void Game::Render()
{
    [...]
    if (this->State == GAME_WIN)
    {
        Text->RenderText(
            "You WON!!!", 320.0, Height / 2 - 20.0, 1.0, glm::vec3(0.0, 1.0, 0.0)
        );
        Text->RenderText(
            "Press ENTER to retry or ESC to quit", 130.0, Height / 2, 1.0, glm::vec3(1.0, 1.0, 0.0)
        );
    }
}

void Game::ProcessInput(float dt)
{
    [...]
    if (this->State == GAME_WIN)
    {
        if (this->Keys[GLFW_KEY_ENTER])
        {
            this->KeysProcessed[GLFW_KEY_ENTER] = true;
            Effects->Chaos = false;
            this->State = GAME_MENU;
        }
    }
}

Kazanma ekranı

Ve işte bu kadar! Üzerinde aktif olarak çalıştığımız Breakout oyununun son parçası. Deneyin, zevkinize göre özelleştirin ve herkese gösterin!

Oyunun son kaynak kodu: başlık, kod.

Ek Okuma

• 70+ Best Free Fonts for Designers: Kişisel veya ticari kullanım için projelerinizde kullanabileceğiniz büyük bir font listesi.