Tworzenie grafiki SDL

Poprzednie tematy, które należy przerobić przed przystąpieniem do tej lekcji

Instalacja biblioteki SDL dla Dev-C++

Na tej lekcji opisujemy powierzchnie graficzną, z której będziemy korzystali w czasie pracy z biblioteką SDL. Postaraj się dobrze zrozumieć przedstawione tutaj informację.

Powierzchnia graficzna w SDL

obrazek

Podstawowym obiektem danych w środowisku SDL jest struktura SDL_Surface. Definiuje ona powierzchnię graficzną, po której możemy rysować. Struktura SDL_Surface posiada wiele pól danych. Na tej lekcji będziemy korzystać tylko z trzech pól o nazwach:

  1. pixels - pole to zawiera wskaźnik bufora graficznego przechowującego treść obrazu
  2. w - zawiera szerokość w pikselach bufora graficznego
  3. h - zawiera wysokość w pikselach bufora graficznego

Bufor obrazowy może przechowywać piksele w różnych formatach. Umawiamy się, iż będziemy stosować format 32-bitowy. Oznacza to, iż. każdy punkt obrazu będzie kodowany w buforze obrazowym za pomocą 32 bitów lub 4 bajtów. Taka postać danych jest najkorzystniejsza dla procesorów Pentium, które są zoptymalizowane na dane 32-bitowe. Drugą zaletą jest to, iż piksele 32 bitowe mogą kodować dowolny kolor.

32 bity piksela dzielą się na 4 pola 8 bitowe.

b31 b30 b29 b28 b27 b26 b25 b24 b23 b22 b21 b20 b19 b18 b17 b16 b15 b14 b13 b12 b11 b10 b9 b8 b7 b6 b5 b4 b3 b2 b1 b0
alfa R-czerwony G-zielony B-niebieski

Bity b7...b0 zawierają informację o natężeniu składowej niebieskiej.

Bity b15...b8 zawierają informację o natężeniu składowej zielonej.

Bity b23...b16 zawierają informację o natężeniu składowej czerwonej.

Bity b31...b24 zawierają informację o przezroczystości piksela - tzw. kanał alfa.

Kolor piksela określany jest przez natężenie składowych czerwonej (R - ang. red), zielonej (G - ang. green) oraz niebieskiej (B - ang. blue). Taki sposób definiowania koloru nosi nazwę modelu RGB. Składowe kolorów podstawowych są liczbami 8 bitowymi NBC i przyjmują wartości w zakresie od 0 do 255. Wygodniej jednakże jest posługiwać się kodem szesnastkowym. W kodzie szesnastkowym mamy przykładowo:

00 - natężenie 0, czyli brak składowej
33 - natężenie 1/5
66 - natężenie 2/5
80 - natężenie 1/2 - połowa natężenia składowej
99 - natężenie 3/5
CC - natężenie 4/5
FF - natężenie 1 - pełne natężenie składowej

Oczywiście możliwe są również wartości pośrednie. Kod szesnastkowy piksela składamy z kodów szesnastkowych poszczególnych składowych RGB. Na przykład:

piksel składowe kolor
 R   G   B 
FF0000 FF 00 00  
00FF00 00 FF 00  
0000FF 00 00 FF  
FFFF00 FF FF 00  
FF00FF FF 00 FF  
FFFFFF FF FF FF  
666666 66 66 66  
000000 00 00 00  

Jeśli składowe RGB posiadają równe wartości, to otrzymujemy odcienie szarości. Jak łatwo policzyć przyjęty model RGB pozwala przedstawić:

256 × 256 × 256 = 16777216 kolorów

Jest to o wiele więcej, niż rozróżnia oko człowieka. Dlatego ten sposób kodowania barw nosi nazwę True Color - Pełny Kolor.

obrazek

System RGB został przyjęty z uwagi na sposób wyświetlania kolorów przez współczesne monitory. Popatrz na ekran swojego monitora przez lupę o dużym powiększeniu. Zobaczysz, iż składa się on z olbrzymiej ilości grup trzykolorowych punktów. W skład każdej takiej triady wchodzi punkt czerwony, zielony i niebieski. Składowe koloru piksela sterują właśnie intensywnością świecenia punktów w triadzie. W ten sposób otrzymujemy na ekranie różne barwy wynikowe.

Sam obraz zbudowany jest z pikseli, czyli punktów o danym kolorze. Słowo piksel pochodzi z języka angielskiego i oznacza picture element, czyli niepodzielny element obrazu. Na monitorze piksel może być odwzorowany przez kilka triad punktów RGB - zależy to od aktualnej rozdzielczości obrazu.

Piksele na obrazie tworzą poziome linie, zwane liniami skanującymi (ang. scan line). Obraz zbudowany jest z serii linii skanujących. W każdej linii znajduje się określona liczba pikseli. Umówmy się, iż wielkość obrazu będziemy określali podając liczbę pikseli w linii skanującej oraz liczbę linii skanujących. Na przykład zapis:

800 × 600

oznacza 800 pikseli w linii skanującej oraz 600 linii skanujących. Ilość pikseli w linii nazwiemy szerokością obrazu. Szerokość obrazu przechowuje pole w struktury SDL_Surface.

Ilość linii nazwiemy wysokością obrazu. Wysokość obrazu przechowuje pole h struktury SDL_Surface.

Dostęp do pikseli

32 bitowe kody pikseli przechowywane są w buforze obrazowym, który wskazuje pole pixels struktury SDL_Surface. Bufor obrazowy zorganizowany jest liniowo - przechowuje piksele kolejnych linii skanujących obrazu. Pierwsza linia skanująca jest górną linią obrazu. Zatem pierwszy piksel w buforze odpowiada pikselowi umieszczonemu w lewym górnym narożniku obrazu. Ostatni piksel w buforze odpowiada pikselowi leżącemu w prawym dolnym narożniku obrazu. w pierwszych pikseli w buforze obrazu odpowiada zawartości pierwszej linii skanującej. Następne w pikseli to zawartość drugiej linii skanującej, itd.

Mając dane współrzędne x i y piksela na obrazie (oś OY jest skierowana w dół) adres piksela obliczamy następująco:

pixels + 4 * w * y + 4 * x

W SDL do pikseli będziemy stosować typ danych Uint32, który oznacza 32-bitową liczbę całkowitą bez znaku. Operacje na wskaźnikach w C++ uwzględniają wielkość wskazywanych obiektów. Dlatego powyższe wyrażenie możemy uprościć:

(Uint32 *)pixels + w * y + x

Ponieważ adres jest rzutowany na wskaźnik do typu Uint32, to C++ automatycznie przeskaluje o 4 czynniki (w * y) oraz x. Dlatego opuściliśmy mnożnik 4 w wyrażeniu. Znając adres piksela w buforze obrazowym możemy go odczytać lub zapisać nową wartością. W ten sposób postawimy na obrazie punkt o pożądanym kolorze.

Po tym krótkim wstępie "teoretycznym" możemy przystąpić do tworzenia biblioteki własnych procedur graficznych dla SDL oraz programów w tym środowisku.

 


   I Liceum Ogólnokształcące   
im. Kazimierza Brodzińskiego
w Tarnowie

©2024 mgr Jerzy Wałaszek

Dokument ten rozpowszechniany jest zgodnie z zasadami licencji
GNU Free Documentation License.

Pytania proszę przesyłać na adres email: i-lo@eduinf.waw.pl

W artykułach serwisu są używane cookies. Jeśli nie chcesz ich otrzymywać,
zablokuj je w swojej przeglądarce.
Informacje dodatkowe