Grafika Komputerowa – Materiały Laboratoryjne

Grafika Komputerowa – Materiały Laboratoryjne
Laboratorium 9 – Inkscape: tworzenie grafik do gier (część II)
Wstęp
W ramach dzisiejszych zajęć poznasz techniki tworzenia pseudotrójwymiarowych elementów do gier
komputerowych.
Zaczynajmy więc!
Ćwiczenie 1 – Budynki
Zadanie: Stwórz budynek, który będzie elementem tła do gry
Celem tego ćwiczenia jest stworzenie od podstaw takiego budynku, jak na rysunku poniżej:
Rysowanie budynku rozpoczynamy od narysowania dachu. Będzie to równoległobok. Możesz go
narysować na kilka sposobów: albo rysując prostokąt i odpowiednio go deformując albo rysując go
odręcznie przy pomocy narzędzia pióro (pamiętaj, żeby zamknąć rysowany kształt, tj. aby dociągnąć
rysowaną linię do z powrotem do pierwszego węzła).
Pamiętaj o wykorzystaniu prowadnic (pionowych bądź poziomych) w celu dopasowania położenia
rogów rysowanego kształtu.
Mamy już dach naszego budynku. Teraz, rysując przy pomocy narzędzia Pióro linie równoległe bądź
prostopadłe do naszego dachu, stwórz ogólny kształt budynku:
opracowanie: mgr inż. Maciej Laskowski
Grafika Komputerowa – Materiały laboratoryjne
Gdy masz już główny kształt budynku, dobrze jest zaznaczyć wszystko (np. używając Ctrl+A) i zamienić
kontury na ścieżki (menu Ścieżka -> Kontur w ścieżkę). Pozwoli to na łatwą modyfikację kształtów.
Teraz na dużym zbliżeniu dokonaj niezbędnych poprawek – usuń nadmiarowe węzły, dopasuj do
siebie zakończenia linii. Manipulując szerokością poszczególnych linii nadaj głębię kratom w oknach.
Odpowiednio modyfikując proste wykonaj zaokrąglenia u dołu krat (możesz też wykorzystać do tego
odpowiednio położone elipsy).
Teraz możesz zaznaczyć wszystkie ścieżki i je złączyć (menu Ścieżka -> Część wspólna).
W razie potrzeby możesz również pousuwać nadmiarowe węzły na złączeniach (nie jest to
wymagane, ale uprości rysunek).
Teraz mamy już gotowy kształt naszego budynku.
opracowanie: mgr inż. Maciej Laskowski
Grafika Komputerowa – Materiały laboratoryjne
Czas narysować drzwi. Przy pomocy linii prostych narysuj poszczególne deski w drzwiach. W razie
potrzeby zamień narysowane kontury w ścieżki i dokonaj edycji węzłów.
Nasz dom wygląda teraz tak:
Teraz nadszedł czas na dość pracochłonną część – spróbujemy nadać naszemu domkowy odpowiedni,
„zużyty” wygląd, np. pokruszony tynk odsłaniający cegły czy pęknięcia. Znowu – możesz dokonać tego
na kilka sposobów, albo przy użyciu Pióra, Ołówka czy też korzystając z gotowych kształtów (np.
zmodyfikowanych prostokątów). Pamiętaj, że możesz wykorzystać prowadnice do łatwiejszego
dopasowania do siebie elementów.
Po tym kroku nasz domek mógłby wyglądać np. tak:
Nasz domek w zasadzie jest gotowy.
Jednak jeśli się zastanowić, to czegoś na rysunku może brakować – skoro są kraty w oknach, to może
warto byłoby założyć jeszcze kłódkę na drzwi? Narysuj ją przy użyciu odpowiednich narzędzi (Pióro,
Ołówek). Nie musi być to zbyt dokładny rysunek, gdyż kłódka jest tylko detalem, nie zaś głównym
elementem. Pamiętaj jednak, aby kłódka była dość duża, tak aby można ją było łatwo zauważyć.
opracowanie: mgr inż. Maciej Laskowski
Grafika Komputerowa – Materiały laboratoryjne
Kolory na powyższym rysunku zostały zmienione celowo.
W tym momencie nasz domek jest już gotowy.
Jednak aby wykorzystać go w grze, przydałoby się dodać jeszcze kolor.
Stwórz nową warstwę – nazwij ją Kolor i umieść pod warstwą, na której znajduje się domek.
Warstwę, na której znajduje się domek nazwij Szkic i zablokuj (kliknij na ikonkę kłódki).
Teraz narysuj kształt, który wypełnisz kolorem. Pamiętaj o wyłączeniu konturu. Pamiętaj również
o tym, że poszczególne kształty (i ich wypełnienia) mogą przykrywać się nawzajem, co oznacza, że nie
musisz ich zbyt dokładnie dopasowywać – w razie potrzeby bowiem wystarczy jakiś element
przesunąć niżej (Page Down) bądź wyżej (Page Up).
Aby zasymulować oświetlenie użyj gradientu.
opracowanie: mgr inż. Maciej Laskowski
Grafika Komputerowa – Materiały laboratoryjne
Dodanie gradientu to jednak nie wszystko: dobrze jest dodać cień. Wykonanie go jest bardzo proste:
wybierz element, który powinien być nieco zacieniony, zduplikuj wypełniający go kształt – i zmień
kolor wypełnienia duplikatu na czarny, z kanałem alfa ustawionym na niską wartość (np. 50).
Dodatkowo, dodaj cień za budynkiem – narysuj równoległobok, a następnie zmodyfikuj jego kształt
tak, aby odpowiadał kształtowi budynku. Teraz wystarczy przesunąć ten równoległobok na sam spód
rysunku (klawisz End), a następnie wypełnić go czarnym kolorem, z kanałem alfa ustawionym na
ok. 130 i rozmyciem ustawionym na np. 5.
Voila! Nasz domek jest już gotowy.
Prześlij wynik swojej pracy na adres mailowy prowadzącego
Disclaimer:
W
niniejszych
materiałach
wykorzystano
grafiki
pochodzące
howto.nicubunu.ro/inkscape_rpg_map_elements, będące własnością ich twórców.
ze
strony
opracowanie: mgr inż. Maciej Laskowski