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

SDL

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.

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.

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().

Zadanie 4

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

 



List do administratora Serwisu Edukacyjnego Nauczycieli I LO

Twój email: (jeśli chcesz otrzymać odpowiedź)
Temat:
Uwaga: ← tutaj wpisz wyraz  ilo , inaczej list zostanie zignorowany

Poniżej wpisz swoje uwagi lub pytania dotyczące tego rozdziału (max. 2048 znaków).

Liczba znaków do wykorzystania: 2048

 

W związku z dużą liczbą listów do naszego serwisu edukacyjnego nie będziemy udzielać odpowiedzi na prośby rozwiązywania zadań, pisania programów zaliczeniowych, przesyłania materiałów czy też tłumaczenia zagadnień szeroko opisywanych w podręcznikach.



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

©2017 mgr Jerzy Wałaszek

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