Get best of the week

SDL 2.0 Siklus Pelajaran: Pelajaran 6 - Mengunduh Font dengan SDL_ttf

gambar

Dari penerjemah:

Ini adalah kelanjutan dari serangkaian terjemahan tutorial Twinklebear, tersedia dalam aslinya di sini . Terjemahan ini sebagian gratis dan mungkin berisi sedikit perubahan atau tambahan dari penerjemah. Terjemahan dari dua pelajaran pertama - kepengaranganPointer tidak validdan yang ketiga dan keempat untuk k1-801.

Daftar pelajaran:


Mengunduh font menggunakan SDL_ttf


Dalam tutorial ini, kita akan belajar cara menampilkan font font True Type menggunakan perpustakaan ekstensi SDL_ttf. Menginstal pustaka identik dengan menginstal SDL_image di Pelajaran 3 , tetapi alih-alih “gambar” kita cukup menulis “ttf” (pengguna Windows juga harus menyalin freetype dll yang disertakan). Jadi unduh SDL_ttf , lihat dokumentasi dan mulai tutorialnya!

Hal pertama yang perlu kita kerjakan dengan SDL_ttf adalah font ttf. Menggunakan BitFontMaker , penulis membuat font yang agak mengerikan yang dapat Anda unduh dari repositoritetapi jika Anda sudah memiliki font yang indah, Anda dapat menggunakannya. Font ini hanya menyediakan karakter ASCII sederhana, jadi jika Anda mencoba menampilkan karakter non-ASCII, kemungkinan besar Anda tidak akan berhasil. Kode untuk pelajaran ini akan ditulis berdasarkan pelajaran 5, seperti biasa Anda dapat mengunduhnya dari Github . Gambar, irisan sprite dan gambar akan diubah di tutorial ini.

Teks tampilan


SDL_ttf menyediakan beberapa cara untuk menampilkan font berbagai kecepatan dan kualitas, serta kemampuan untuk menampilkan karakter UTF8 dan Unicode. Dokumentasi memberikan gambaran yang baik tentang berbagai metode tampilan, jadi Anda harus membaca dan mempelajari lebih lanjut tentang mereka, kapan dan metode mana yang ingin Anda gunakan tergantung pada kualitas dan persyaratan kecepatan Anda. Dalam tutorial ini kita akan menggunakan TTF_RenderText_Blended, karena kita tidak memiliki batas waktu dan ingin teks kita menjadi indah. Berbagai fungsi tampilan teks menerima warna RGB SDL_Color , yang dapat kita gunakan untuk memilih warna teks yang akan digambar.

Sayangnya, SDL_ttf hanya dapat ditampilkan di permukaan, jadi Anda harus mengambil langkah ekstra setelah merender teks untuk membuat tekstur darinya sehingga kami bisa menggambar menggunakan renderer. Tentu saja, Anda masih perlu mengunduh font, yang akan kami gunakan, yang dilakukan menggunakan TTF_OpenFont , di mana Anda juga dapat menentukan ukuran font yang diinginkan.

Menulis Fungsi renderText


Untuk membuat hidup kita lebih mudah, kita akan membuat fungsi renderText yang akan menerima teks, file yang berisi font TTF, warna, ukuran yang diinginkan dan renderer untuk memuat tekstur terakhir. Fungsi membuka font, menampilkan teks, mengubahnya menjadi tekstur dan mengembalikan tekstur. Karena masalah dapat muncul, Anda perlu memeriksa setiap panggilan perpustakaan untuk kesalahan dan menanganinya dengan benar, misalnya, sumber daya bersih, kesalahan log dan kembali nullptr sehingga kami tahu bahwa sesuatu yang buruk telah terjadi. SDL_ttf melaporkan semua kesalahannya melalui SDL_GetError, sehingga Anda dapat terus menggunakan logSDLError untuk mencatat kesalahan.

Dengan mengingat persyaratan ini, mari tulis fungsi renderText:

/**
*      
* @param message ,   
* @param fontFile ,   
* @param color ,     
* @param fontSize  
* @param renderer ,     
* @return SDL_Texture,     nullptr,  -   
*/
SDL_Texture* renderText(const std::string &message, const std::string &fontFile,
        SDL_Color color, int fontSize, SDL_Renderer *renderer)
{
        // 
        TTF_Font *font = TTF_OpenFont(fontFile.c_str(), fontSize);
        if (font == nullptr){
                logSDLError(std::cout, "TTF_OpenFont");
                return nullptr;
        }       
        //       TTF_RenderText,
        //    
        SDL_Surface *surf = TTF_RenderText_Blended(font, message.c_str(), color);
        if (surf == nullptr){
                TTF_CloseFont(font);
                logSDLError(std::cout, "TTF_RenderText");
                return nullptr;
        }
        SDL_Texture *texture = SDL_CreateTextureFromSurface(renderer, surf);
        if (texture == nullptr){
                logSDLError(std::cout, "CreateTexture");
        }
        //   
        SDL_FreeSurface(surf);
        TTF_CloseFont(font);
        return texture;
}

Peringatan kinerja


Sangat penting untuk dicatat bahwa setiap kali kita ingin menampilkan teks, buka kembali dan tutup font, yang cocok dalam kasus kita, karena kita menampilkan teks sekali, tetapi jika kita ingin menampilkan banyak teks dan / atau terlalu sering, maka yang terbaik adalah menyimpannya. font terbuka sebanyak yang kita butuhkan. Versi renderText kami untuk kasus yang lebih sering ini akan menerima TTF_Font * alih-alih nama file font dan tidak akan membuka dan menutup, karena umur file font akan disesuaikan secara terpisah.

Inisialisasi SDL_ttf


Seperti halnya SDL, kita perlu menginisialisasi perpustakaan sebelum menggunakannya. Ini dilakukan menggunakan TTF_Init , yang akan mengembalikan 0 jika berhasil. Untuk menginisialisasi SDL_ttf, kami hanya memanggil fungsi ini setelah menginisialisasi SDL dan memeriksa nilai kembali untuk memastikan semuanya baik-baik saja.

if (TTF_Init() != 0){
        logSDLError(std::cout, "TTF_Init");
        SDL_Quit();
        return 1;
}

Menggunakan renderText


Dengan fungsi renderText kami yang nyaman, kami dapat menampilkan teks dalam satu panggilan sederhana. Untuk tutorial ini, tampilkan teks "Font TTF keren!" putih, ukuran 64 pada font yang kita unduh sebelumnya. Kemudian kita dapat meminta lebar dan tinggi dengan cara yang sama seperti untuk tekstur lainnya, dan menghitung koordinat x / y untuk menggambar pesan di tengah jendela.

const std::string resPath = getResourcePath("Lesson6");
//   "TTF fonts are cool!"
//   RGBA
SDL_Color color = { 255, 255, 255, 255 };
SDL_Texture *image = renderText("TTF fonts are cool!", resPath + "sample.ttf",
        color, 64, renderer);
if (image == nullptr){
        cleanup(renderer, window);
        TTF_Quit();
        SDL_Quit();
        return 1;
}
//    ,     
int iW, iH;
SDL_QueryTexture(image, NULL, NULL, &iW, &iH);
int x = SCREEN_WIDTH / 2 - iW / 2;
int y = SCREEN_HEIGHT / 2 - iH / 2;

Gambar teksnya


Pada akhirnya, kita dapat menggambar tekstur, seperti yang kita lakukan sebelum menggunakan fungsi renderTexture.

//:     
SDL_RenderClear(renderer);
//    ,     ,  
//    
renderTexture(image, renderer, x, y);
SDL_RenderPresent(renderer);

Jika semuanya berjalan sesuai rencana, Anda akan melihat sesuatu seperti ini:

gambar

Akhir pelajaran 6


Ini semua yang perlu Anda ketahui untuk mulai menggunakan SDL_ttf! Pastikan untuk memeriksa dokumentasi untuk melihat kemampuan perpustakaan ini. Seperti biasa, jika Anda memiliki masalah dengan pelajaran, Anda dapat menulis di komentar.

Penulis menjadi sibuk dengan proyek-proyek lain dan tidak bisa menulis pelajaran lagi, jadi ini adalah pelajaran terakhir dari siklus. Anda dapat menonton tutorial Lazy Foo atau membaca contoh dan dokumentasi dari wiki SDL .

More articles:


All Articles