obrazek obrazekobrazekobrazekobrazek
obrazek
Prezentowane materiały są przeznaczone dla uczniów szkół ponadgimnazjalnych.
Autor artykułu: mgr Jerzy Wałaszek,  wersja1.0

 ©2008 mgr Jerzy Wałaszek
I LO w Tarnowie

obrazek

Tworzenie grafiki SDL

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

01 - Instalacja biblioteki SDL dla Dev-C++
02 - Powierzchnia graficzna w SDL - stawianie punktów
03 - Tworzenie biblioteki graficznej mylib

Pliki biblioteczne i projektowe do pobrania: Parametry dla konsolidatora
mylib.h
mylib.cpp
main.cpp		 -lmingw32
-mwindows
-lSDLmain
-lSDL

Opis funkcji bibliotecznych

Na tej lekcji poznasz pierwsze funkcje biblioteki mylib, które rysują piksele oraz linie poziome i pionowe.

Stawianie punktów graficznych i rysowanie linii poziomych i pionowych

obrazek

Począwszy od tej lekcji na początku rozdziału będziemy umieszczali linki do aktualnych plików biblioteki mylib.h, mylib.cpp, szablonu aplikacji main.cpp oraz do opisu funkcji bibliotecznych. Pliki mylib.h oraz mylib.cpp należy przekopiować do katalogu c:\dev-cpp\include i dołączyć do projektu. Szablon main.cpp należy skopiować do głównego pliku projektu. Natomiast w treści artykułu znajdzie się opis nowych funkcji graficznych warz z przykładami zastosowania oraz zadaniami do samodzielnej pracy.

Każda biblioteka graficzna musi posiadać zestaw podstawowych narzędzi graficznych. Na początek zdefiniujemy cztery podstawowe funkcje graficzne.

W pliku mylib.cpp umieszczono następujące definicje (uwaga - nie jest to zawartość pliku mylib.cpp - skorzystaj z linku na początku artykułu):

 

mylib.cpp 
// Wyświetla punkt w danym kolorze
//--------------------------------

void plot(Uint32 x, Uint32 y, Uint32 color)
{
  *((Uint32 *) screen -> pixels + y * screen->w + x) = color;
}

// Wyświetla linię poziomą
//------------------------

void hline(Uint32 x, Uint32 y, Uint32 len, Uint32 color)
{
  Uint32 * p = (Uint32 *) screen -> pixels + y * screen->w + x;
  for(Uint32 i = 0; i < len; i++) *p++ = color;
}

// Wyświetla linię pionową
//------------------------

void vline(Uint32 x, Uint32 y, Uint32 len, Uint32 color)
{
  Uint32 * p = (Uint32 *) screen -> pixels + y * screen->w + x;
  for(Uint32 i = 0; i < len; i++)
  {
    *p = color;
    p += screen->w;
  }
}

// Zwraca kolor wg składowych RGB
//-------------------------------

Uint32 rgb(Uint32 x, Uint32 y, Uint32 R, Uint32 G, Uint32 B)
{
  return ((R & 0xff) << 16) | ((G & 0xff) << 8) | (B & 0xff);
}

 

Aby uzyskać dostęp do tych funkcji z poziomu programu głównego, musimy w pliku nagłówkowym umieścić prototypy funkcji (uwaga: nie jest to zawartość całego pliku mylib.h - skorzystaj z linku na początku artykułu):

 

mylib.h 
void plot(Uint32 x, Uint32 y, Uint32 color);
void hline(Uint32 x, Uint32 y, Uint32 len, Uint32 color);
void vline(Uint32 x, Uint32 y, Uint32 len, Uint32 color);
Uint32 rgb(Uint32 x, Uint32 y, Uint32 R, Uint32 G, Uint32 B)

 

Opis funkcji

plot(x,y,color)

Zapala piksel na współrzędnych x,y w kolorze color. Kolor jest 32 bitowy wg opisu podanego w rozdziale o powierzchniach graficznych. Oś OY jest skierowana w dół ekranu - na przykład punkt o współrzędnych 0,0 znajduje się w lewym górnym rogu powierzchni graficznej. Punkty nie mogą wykraczać poza obszar bufora, zatem:

0 ≤ x < screen→w  oraz  0 ≤ y < screen→h

hline(x,y,len,color)

Rysuje linię poziomą rozpoczynającą się w punkcie x,y (lewy koniec), o długości len pikseli w kolorze color. Linia w całości musi mieścić się w obszarze powierzchni graficznej, czyli:

0 ≤ x < screen→w,   0 ≤ y < screen→h oraz 0 ≤ x + len < screen→w

vline(x,y,len,color)

Rysuje linię pionową rozpoczynającą się w punkcie x,y (górny koniec), o długości len pikseli w kolorze color. Linia w całości musi mieścić się w obszarze powierzchni graficznej, czyli:

0 ≤ x < screen→w,   0 ≤ y < screen→h oraz 0 ≤ y + len < screen→h

rgb(R,G,B)

Oblicza wartość koloru na podstawie składowych R - czerwonej, G - zielonej i B - niebieskiej. Wynik rgb() można wstawić wszędzie tam, gdzie wymagane jest podanie koloru. Składowe kolorów powinny być w zakresie od 0 do 255. Wartości większe są obcinane.

 

Ćwiczenia

Zadanie 1

Na środku ekranu narysuj pełny kwadrat o boku równym 16 pikseli w kolorze żółtym.

obrazek

Rozwiązanie:

Wykorzystujemy szablon main.cpp do stworzenia aplikacji SDL. Kod będziemy wprowadzać w zaznaczonym miejscu szablonu.

Zadanie możemy rozwiązać na kilka różnych sposobów. Wszystkie sprowadzają się do znalezienia punktu środkowego ekranu, a następnie narysowaniu wokół tego punktu kwadratu odpowiedniej wielkości. Współrzędne środka ekranu znajdziemy za pomocą prostych wyrażeń:

        współrzędna x :  screen→w >> 1
        współrzędna y:  screen→h >> 1

Zwróć uwagę, iż zamiast dzielenia przez 2 stosujemy operator przesunięcia bitowego >>. Przesunięcie bitowe jest prostszą od dzielenia operacją. Mikroprocesor wykonuje je o wiele szybciej. Wszystkie dane mikroprocesor przechowuje w postaci liczb binarnych. Przesunięcie o jedną pozycję w prawo bitów liczby binarnej odpowiada podzieleniu jej całkowitoliczbowo przez 2 (analogicznie w systemie dziesiętnym - przesunięcie o jedną pozycję cyfr liczby dziesiętnej odpowiada podzieleniu jej całkowitoliczbowo przez 10, np  247 → 24).

Wyznaczone współrzędne środka posłużą do obliczenia lewego górnego narożnika kwadratu:

        x narożnika : x środka - 7
        y narożnika : y środka - 7

Mając współrzędne narożnika możemy narysować nasz kwadrat:

// Obliczamy współrzędne lewego górnego narożnika kwadratu

    Uint32 xn = (screen->w >> 1) - 7;
    Uint32 yn = (screen->h >> 1) - 7;
    
// rysujemy kwadrat wypełniając jego wnętrze żółtymi pikselami

    for(Uint32 y = yn; y < yn + 16; y++)
      for(Uint32 x = xn; x < xn + 16; x++)
        plot(x,y,0xFFFF00);

 

// Obliczamy współrzędne lewego górnego narożnika kwadratu

    Uint32 xn = (screen->w >> 1) - 7;
    Uint32 yn = (screen->h >> 1) - 7;
    
// rysujemy kwadrat wypełniając jego wnętrze pikselami z R i G na max

    for(Uint32 y = yn; y < yn + 16; y++)
      for(Uint32 x = xn; x < xn + 16; x++)
        plot(x,y,rgb(0xFF,0xFF,0));

 

// Obliczamy współrzędne lewego górnego narożnika kwadratu

    Uint32 xn = (screen->w >> 1) - 7;
    Uint32 yn = (screen->h >> 1) - 7;
    
// rysujemy kwadrat wypełniając jego wnętrze liniami poziomymi

    for(Uint32 y = yn; y < yn + 16; y++)
      hline(xn,y,16,0xFFFF00);

 

// Obliczamy współrzędne lewego górnego narożnika kwadratu

    Uint32 xn = (screen->w >> 1) - 7;
    Uint32 yn = (screen->h >> 1) - 7;
    
// rysujemy kwadrat wypełniając jego wnętrze liniami pionowymi

    for(Uint32 x = xn; x < xn + 16; x++)
      vline(x,yn,16,0xFFFF00);

Zadanie 2

Wypełnij okienko gradientem przechodzącym płynnie z koloru czerwonego po lewej stronie w kolor zielony po prawej stronie. Zastosuj odpowiednio funkcję plot() lub vline(). Uzależnij kolor piksela od jego pozycji na powierzchni graficznej.

obrazek

Zadanie 3

Wypełnij okienko gradientem pionowym, który zmienia się od koloru żółtego u góry do koloru niebieskiego u dołu. Zastosuj funkcje plot() lub hline().

obrazek

Zadanie 4

Zaprojektuj aplikację SDL tworzącą następującą grafikę:

obrazek

 

   I Liceum Ogólnokształcące   
im. Kazimierza Brodzińskiego
w Tarnowie
©2023 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