Grafika Komputerowa Materiały Laboratoryjne Laboratorium 8 Inkscape i symulacja 3D oraz tworzenie elementów do gier Wstęp W ramach dzisiejszych zajęć poznasz techniki tworzenia obrazów pseudotrójwymiarowych elementów do gier komputerowych. oraz Zaczynajmy więc! Ćwiczenie 1 Elementy planszy do gier Zadanie: Stwórz elementy planszy do gier Stwórz na początek kwadrat i wypełnij go brązowym kolorem. Zduplikuj kwadrat, zmień kolor duplikatu na zielony i zmień jego rozmiar i położenie tak, aby rysunek wyglądał tak, jak poniżej: Na rysunku dodaj trzeci kwadrat w kolorze jasnego brązu i zaokrąglij jego rogi (modyfikując wedle uznania parametry Rx i Ry), Następnie dodaj jeszcze kilka czworokątów z zaokrąglonymi rogami. Nadaj im różne kolory wypełnień. Przekształć stworzone powyżej kwadraty w ścieżki i przy pomocy narzędzia do edycji węzłów zmodyfikuj ich kształt. opracowanie: mgr inż. Maciej Laskowski
Czas zająć się narysowaniem trawy. Zaczniemy od narysowania zielonego prostokąta (w tym samym kolorze, co trawa) i zdeformowania go tak, żeby rysunek wyglądał mniej więcej tak: Następnie przesuń go w górę, zduplikuj kilkakrotnie i rozmieść pod różnymi kątami. Warto też poeksperymentować z rozmiarem obiektów. Dobrze wyglądałaby jeszcze jasna trawa na samej górze, no nie? Dodaj więc jasnozielony prostokąt na górę tworzonego obiektu. Zadanie samodzielne Opracuj w ten sam sposób 4-5 elementów naszej dekoracji dzięki temu wzór nie będzie wyglądał na zbyt powtarzalny. Przykład: Zadanie: Opracuj wzór skrzynki Najpierw narysuj kwadrat w dowolnym, dość jasnym kolorze. Następnie zduplikuj kwadrat dwa razy. Zmień kolor jednego z obiektów na ciemny odcień koloru podstawowego i zmodyfikuj położenie i rozmiar wszystkich elementów tak, aby wyglądały w ten sposób:
Nasza skrzynka powinna się składać z desek odpowiedni duplikując i zmieniając rozmiary prostokątów stwórz strukturę naszej skrzyni: Dzięki prostej zabawie kolorami (i zduplikowaniu wcześniej kilku obiektów) możemy uzyskać efekt głębi: Mamy już podstawową strukturę naszej skrzyni. Można pomyśleć jeszcze o dodanie kilku elementów dekoracyjnych, np.: Elementy stworzone w tym ćwiczeniu mogą być wykorzystane do stworzenia planszy do gry platformowej: Zadanie samodzielne Stwórz 3 elementy dekoracji w podobnej konwencji.
Ćwiczenie 2 Box 3D Zadanie: Zbuduj obrazek pudełka kartonowego Kroki: Wykorzystaj narzędzie Bezier tool (B). Za jego pomocą narysuj pochylony kwadrat (wciśnięty Ctrl powoduje rysowanie pionowych/poziomych linii). Następnie skopiuj i odbij figurę w poziomie. Dorysuj romb powyżej aby zamknąć kostkę. W celu dokładnego dopasowania pozycji narożników możesz posłużyć się liniami prowadnic (guide). Prowadnice wyciąga się z linijek znajdujących się u góry i z lewej strony obszaru roboczego. Wypełnij kostkę czarnym kolorem
Kolejnym etapem jest spasowanie ścian tak aby ich narożniki znalazły się w tym samym miejscu. W tym celu wykorzystujemy narzędzie edit path by nodes z włączonym parametrem snap to cusp node Chwytając za narożnik wybranego boku możemy przyciągnąć go do narożnika boku sąsiedniego. Wykorzystując to samo narzędzie dzielimy górny bok na dwie części: Zaznacz (z Shift) dwa narożniki lewej dolnej krawędzi boku i wciśnij przycisk + dodania nowego noda.(można zmienić kolor wypełnienia boku aby lepiej widzieć podział).
Tak samo podziel prawą górną krawędź. Grafika Komputerowa Materiały laboratoryjne Następnie mając zaznaczone obydwa nowe nody klikamy przycisk break apart selected nodes i odsuwamy rozdzielone nody od siebie. Dla każdej pary nowo powstałych węzłów klikamy przycisk join selected endnodes with a new segment, aby domknąć prostokąt. Następnie dosuwamy węzły na miejsce. Stosując kombinację Ctrl+Shift+K rozdzielamy ścieżki na dwa obiekty. Kolejnym etapem będzie zniekształcenie boków pudełka. Dodaj do krawędzi bocznych i dolnych pudełka dodatkowe węzły, a następnie zmień ich typ na symetryczny. Zmieniając położenie węzłów i ich punktów kontrolnych wprowadź delikatne
zniekształcenia Efekt końcowy powinien być zbliżony do poniższego Na tym etapie będziemy potrzebowali zachować stan pudełka na nowej warstwie Wybierz Warstwa -> Warstwy aby otworzyć panel warstw Wykorzystując menu kontekstowe (prawy klawisz myszy na nazwie warstwy) powiel bieżącą warstwę a następnie nadaj im nazwy wg rysunku
Klikając w oczko schowaj warstwę box Obiekt na warstwie box_tlo należy sprowadzić do jednego kształtu. Upewnij się że jest wybrana warstwa box_tlo i zaznacz wszystkie elementy pudełka. Następnie wybierz polecenie Ścieżka -> Suma W efekcie powinniśmy otrzymać obiekt poniższego kształtu W przypadku gdy w obiekcie pojawiły się niepotrzebne węzły, świadczy to o niedokładnym dopasowaniu węzłów ścian. Należy teraz skorygować kształt usuwając niepotrzebne węzły. Gdy wszystko jest w porządku, blokujemy kłódką warstwę box_tlo i wracamy do warstwy box. Kolejny etap to wypełnienie gradientem boków pudełka W tym celu otwieramy panel Obiekt -> Wypełnienie i kontur Wybieramy wypełnienie gradientem radialnym i ustawiamy za pomocą narzędzia edycji węzłów jego
spozycjonowanie i skalę Gradient jest przejściem między kilkoma kolorami. Dobór kolorów możemy wykonać klikając przycisk modyfikuj. Z listy rozwijanej wybieramy kolory kolejnych punktów. W naszym przypadku początku i końca. Pudło ma być kartonowe, więc wybieramy jaśniejszy i ciemniejszy odcień szarobrązowego. Ogólnie zakładamy, że nasze pudło jest oświetlone z góry światłem umieszczonym nieco na lewo i z przodu pudełka.należy więc dobrać odpowiednio kolory kolejnych ścian pudełka. Przy tworzeniu wypełnienia gradientowego dla wieka napotykamy na problem. Rozdzieliliśmy je na dwa obiekty, które Inkscape chce wypełniać indywidualnie. Ustawienie gradientu w jednym nie wpływa na drugi. Rozwiązaniem jest dopasowanie ustawień obu gradientów do siebie (ten sam wybrany zestaw kolorów i takie samo ustawienie punktów kontrolnych). Bardzo pomaga przy tym automatyczne przyciąganie punktów kontrolnych do siebie
Pozostaje ostatnia ściana: oraz usunięcie obramówek (konturów) Mamy już pudełko, ale jest zbyt sterylne. Należy dodać efekty cieniowań i odbarwień.
Połysk narożnika uzyskamy za pomocą trójramiennej gwiazdy: Zamieniamy gwiazdę na ścieżkę: Ścieżka -> obiekt w ścieżkę i dopasowujemy końce gwiazdy do krawędzi pudełka. W parametrach wypełnienia zwiększamy wartość Rozmycia aż do osiągnięcia odpowiedniego efektu Za pomocą narzędzia Beziera dorysuj ciemne kształty symulujące wgniecenia.
Ustaw dla tych kształtów znaczne rozmycie wypełnienia Wykorzystując narzędzie Efekty -> Modyfikuj ścieżkę -> Generuj Fraktale możemy z prostych kształtów wytworzyć skomplikowane krawędzie
Dodając kilka takich obiektów uzyskamy efekty plam na kartonie. Efekt dopełni zastosowanie wypełnienia liniowym gradientem od czarnego do przezroczystości. Pudełko jest nadal zbyt gładkie. Trzeba nadać mu chropowatość tektury. W tym celu wykorzystamy wypełnienie teksturą. Powiel warstwę box_tlo i nadaj mu nazwę box_tekstura. Umieść tą warstwę na samej górze. Ustaw kolor obiektu na tej warstwie na biały. Następnie zaimportuj plik rust.jpg, przeskaluj obrazek i umieść za białym obiektem
Zaznacz obiekt i teksturę. Wykorzystując polecenie Obiekt -> Maska -> Ustaw przypisz teksturę do obiektu. Ustaw krycie warstwy na kilkanaście %
Etap następny: Nakładamy logo na bok. Otwórz plik rss.svg i skopiuj z niego logo rss. Z pomocą kształtów loga zbuduj obiekt podobny do poniższego Skopiuj boczną ścianę lub odrysuj od niej kształt. Z pomocą kombinacji Ctrl+Shift przeskaluj ten kształt do środka aby był mniejszy od pudełka. Ustaw czarną krawędź i puste wypełnienie. Obiekt ten (ramka) posłuży nam jako referencja przy modyfikowaniu kształtu loga. Samo logo musimy położyć na ścianie. W tym celu wybierz Ścieżka -> Edytor efektów ścieżki. Aby otworzyć okno edycji efektów. Dla zaznaczonego obiektu loga (skonwertowanego na ścieżkę) wybierz z rozwijanego menu efekt Deformacja obwiedni.
Klikaj kolejno ikonki edytuj w obszarze roboczym aby dopasowywać linie obwiedni do wzorca Końcowy efekt
Efekt rozświetlenia logo Zadania samodzielne 1. Dodaj taśmę zaklejającą pudełko. Nie zapomnij o dodaniu połysku taśmy i o postrzępionym brzegu końca taśmy 2. Dodaj cień korzystając z warstwy box_tlo. 3. Dodaj nalepkę adresową i logo/nadruk ostrożnie szkło