Sirluki Opublikowano 5 Lipca 2008 Udostępnij Opublikowano 5 Lipca 2008 Nie wszystkie grafiki są widoczene. Do ostatnich podałem tylko linki ze względu na ograniczenie ilości grafik. Witam, postanowiłem napisać mały tutorial odnośnie tworzenia budynków w rzucie izometrycznym. Wiem, że kiedyś powstał już podobny, stworzony przez KubęGM, ale postanowiłem napisać jeszcze jeden. Zaczynamy :) 1. ! Punkt pierwszy, a zarazem najtrudniejszy. Podstawą w tworzeniu budynków sposobem który przedstawię, jest dobór odpowiednich "kątów" pod jakimi będzie rysowany budynek. Od tych właśnie kątów, zależy jak będzie widziany budynek w grze. Bardziej z boku, z góry, niżej czy wyżej. Dlatego też, ja podczas tworzenia tutoriala wybrałem takie "kąty": Na obrazku przedstawione są te właśnie "kąty" (wszystkie możliwe!) za pomocą pikseli, które się po prostu powtarzają. Jak już powiedziałem, najważniejszą rzeczą jest ich odpowiedni dobór, aby obrazek był odpowiednio dobrze widoczny w grze. Warto również podkreślić, że na podstawie tych "kątów" będzie tworzona reszta grafiki do gry, więc ich wybór i dobre ustawienie jest niezwykle ważne, a w dalszych pracach może być już nie do poprawienia. Zatem, kąty dobrane, obrazek wygląda tak: 2. Drugi punkt nie jest już tak istotny jak pierwszy, ale znacząco wpływa na końcowy efekt naszego budynku. Mianowicie poprawiamy drobne elementy jak np. dach - aby nie sprawiał wrażenia grubości jednego piksela, poszerzamy go o takie same kąty, jakich użyliśmy właśnie do stworzenia tego dachu (poprzednie elementy dachu można po prostu kopiować, aby niepotrzebnie się nie męczyć z ponownym dobieraniem tych kątów). Ja w swoim obrazku zrobiłem na przedniej ścianie też kilka pasków grubości dwóch pikseli, to już tylko kwestia wyobraźni - będą one służyły jako drewniane belki w ścianie. 3. Punkt trzeci - kolory. Chyba najprostszy ze wszystkich. Wystarczy odpowiednio wypełnić kolorami budynek - bez dachu! . Dach, to trochę bardziej skomplikowana sprawa. Opiszę to w następnych punktach. Należy jednak pamiętać, aby jedna ściana, była kilka tonów ciemniejsza niż druga. Światło nie pada z dwóch stron, dlatego też taka zasada. 4. Teraz dach. Jedna z trudniejszych czynności podczas tworzenia budynku. Oczywiście można by go po prostu zakolorować jednym kolorem, jak resztę budynku, ale by to po prostu brzydko wyglądało, więc dach wykonamy w trochę inny sposób. 4a. Pierwszą czynnością, jaką trzeba wykonać podczas tworzenia dachu, jest namalowanie kilku nieskomplikowanych (wręcz banalnych) kafelek. W powiększeniu wyglądają one mniej wiecej tak: 4b. Drugą czynnością jest ich kopiowanie. Po prostu należy je kopiować - jedna obok drugiej tak, aby razem pokryły nam całą powierzchnię jednej części naszego dachu. Czyli tak: 4c. Dach (część na której nie chcemy tych kafelek), oraz przestrzeń wokół obrazka wypełniamy jakimś kolorem. Ja wybrałem dość jaskrawy, widoczny zielony. Następnie zaznaczamy cały obrazek, i wklejamy go na nasze połączone kafelki. Zaznaczamy opcję "rysuj nieprzeźroczyste" w Paincie po czym usuwamy zieloną otoczkę z obrazka i oto nasza część dachu po wykonaniu wszystkich czynności: Wykonanie drugiej części dachu jest identyczne jak tej, więc myślę, że nie ma sensu tłumaczyć jeszcze raz tej samej rzeczy :) Teraz nasz obrazek wygląda tak: 5. Ale co to za budynek bez okien? Wykonanie ich jest banalnie proste. Wystarczy na podstawie określonych kątów zrobić niewielką ramę i wypełnić ją niebieskim kolorem. Ja dodałem jeszcze ledwo widoczne zasłony w tle dla efektu wizualnego. Okno w powiększeniu wygląda tak: Teraz umieszczanie tych okien na obrazie. Zwykłe kopiuj - wklej. Ale należy pamiętać, aby je inteligentnie rozmieścić na budynku, tzn. akurat tutaj każde okno bardzie na prawo, jest odrobinę niżej położone: http://img295.imageshack.us/img295/473/10xt5.png 6. http://img295.imageshack.us/img295/1672/11js7.png W szóstym punkcie przybliżę wykonanie drzwi. Również opierając się na wskazanych wcześniej kątach tworzymy ramę drzwi a czynności z ich wypełnieniem, są identyczne jak przy wykonywaniu dachu. Tworzymy kilka desek, z których będą składać się nasze drzwi. Ramę z zieloną otoczką naklejamy na stworzone wcześniej deski (zielona otoczka jest po to, aby w razie gdyby deski były większe niż drzwi, nie trudzić się z usuwaniem niepotrzebnych pikseli). Dla poprawy drzwi, można również dorobić dwa zawiasy po lewej stronie i klamkę - po prawej. Obrazek z drzwiami wygląda teraz tak: http://img295.imageshack.us/img295/9269/12cs3.png 7. DODATKI! Aby nasz obrazek lepiej się prezentował niezbędne są dodatki. Uznałem, że obrazek będzie pełnił funkcje karczmy, więc to dlatego dodałem tą "chorągiewkę" nad drzwiami. Uznałem również, że ładnie będą się prezentować pnie drzewa, leżące pod tym wydłużeniem dachu. Wykonanie tych dodatków, jest również banalnie proste - wystarczy cały czas wzorować się na obranych kątach i podczas układania nowych elementów odnosić się do nich. http://img295.imageshack.us/img295/6761/13fb7.png 8. Punkt 8 i ostatni - cieniowanie. Cieniowanie można wykonać w każdym programie graficznym, ale ja do tego użyłem Paint Shop Pro. Po pierwsze, należy obrać z której strony mają padać promienie słoneczne. Ja ustaliłem je "za" budynkiem, mniej/więcej tak: http://img295.imageshack.us/img295/645/14ms9.png Co by tutaj więcej o cieniowaniu tłumaczyć - to kwestia wyobraźni. Myślę, że każdy wie jak będzie padał cień z obrazka w zależności od ustawienia słońca. 9. Koniec :) Tak wygląda efekt końcowy naszego obrazka: http://img368.imageshack.us/img368/2877/15fs2.png Za pomocą tego tutoriala, można stworzyć również kilka innych budynków (korzystając z kątów jakich użyliśmy przy pierwszym obrazku - więc mniej roboty) - ja zrobiłem kościół. Oto efekt: http://img112.imageshack.us/img112/3828/16wu5.png THE END :) Odnośnik do komentarza Udostępnij na innych stronach Więcej opcji udostępniania...
Feynorn Opublikowano 5 Lipca 2008 Udostępnij Opublikowano 5 Lipca 2008 Świetna robota :thumbsup: Zawsze miałem wielki problem z robieniem grafik, a to jest na prawdę dobrze zrobione. Jeszcze dzisiaj spróbuję zrobić jakąś chałupkę w rzucie izometrycznym B) Odnośnik do komentarza Udostępnij na innych stronach Więcej opcji udostępniania...
lenin Opublikowano 5 Lipca 2008 Udostępnij Opublikowano 5 Lipca 2008 Dobry ;) może się kiedyś przydać. btw skoro światło znajduje się za domem, to czemu ta flaga nad drzwiami rzuca cień na dom? Odnośnik do komentarza Udostępnij na innych stronach Więcej opcji udostępniania...
Vianom Opublikowano 5 Lipca 2008 Udostępnij Opublikowano 5 Lipca 2008 Jest pare niedociągnięć np. okna imo troche nie pasują ale ogólnie jest bardzo dobrze. :thumbsup: Odnośnik do komentarza Udostępnij na innych stronach Więcej opcji udostępniania...
Marmot Opublikowano 5 Lipca 2008 Udostępnij Opublikowano 5 Lipca 2008 Domek całkiem wporzo, ale ten kościół to tragedia ;p . Fatalnie wygląda xd . Odnośnik do komentarza Udostępnij na innych stronach Więcej opcji udostępniania...
Konrad-GM Opublikowano 5 Lipca 2008 Udostępnij Opublikowano 5 Lipca 2008 A czy te cieniowanie nie powinno być pixel po pixelku? :3 Odnośnik do komentarza Udostępnij na innych stronach Więcej opcji udostępniania...
Exigo Opublikowano 6 Lipca 2008 Udostępnij Opublikowano 6 Lipca 2008 Dobry tutorial.. :thumbsup: Tylko nie ma w tym za dużo pixelartu, i powoduje to że dodanie 'złożonych' efektów do zwykłych paintowych linii i wypełnienia jakoś niesmacznie wygląda... lepiej było by zrobić ręcznie. ;) Sposób dobry, ale wykonanie fatalne... widać że kombinowałeś z pixelartem, ale nie wyszło. Okna i dachówek nie będę komentował. Ale i tak polecam tutek. :thumbsup: Odnośnik do komentarza Udostępnij na innych stronach Więcej opcji udostępniania...
Sirluki Opublikowano 6 Lipca 2008 Autor Udostępnij Opublikowano 6 Lipca 2008 Dobry ;) może się kiedyś przydać. btw skoro światło znajduje się za domem, to czemu ta flaga nad drzwiami rzuca cień na dom? Tzn. to nie jest tak "centralnie" za domem. Chciałem tylko zobrazować, jak powinno wyglądać padanie cienia :) Jest pare niedociągnięć np. okna imo troche nie pasują ale ogólnie jest bardzo dobrze. :thumbsup: Rzeczywiście jest parę niedociągnięć. Ale myślę, że ogólnie dość dobrze wyszło i zostawię tak jak jest :) A czy te cieniowanie nie powinno być pixel po pixelku? :3 Dlaczego zaraz piksel po pikselu? Nigdzie nie napisałem, że całość to pikselart więc po co utrudniać sobie życie, skoro można skorzystać z gotowego narzędzia? :) Dzięki wszystkim za komentarze :D Chciałem jeszcze pokazać, że za pomocą użytych "kątów" można próbować układać również bardziej skomplikowane figury - jak np. tutaj piec czy kowadło. Chata kowala: (nie cieniowałem, aby każdy szczegół był dobrze widoczny) PS. Proszę nie zwracać uwagi na okna :) Odnośnik do komentarza Udostępnij na innych stronach Więcej opcji udostępniania...
Exigo Opublikowano 6 Lipca 2008 Udostępnij Opublikowano 6 Lipca 2008 Dlaczego okna są takie "wygięte" ? No dobra... postaram się nie zwracać uwagi. No to... dlaczego drzwi są tak "wygięte"? Odnośnik do komentarza Udostępnij na innych stronach Więcej opcji udostępniania...
Sirluki Opublikowano 6 Lipca 2008 Autor Udostępnij Opublikowano 6 Lipca 2008 Dlaczego okna są takie "wygięte" ? No dobra... postaram się nie zwracać uwagi. No to... dlaczego drzwi są tak "wygięte"? Wiedziałem :P Bo są zrobione jak samo jak okna - to obcięte koło, a to nie pasuje do tego rzutu :) Odnośnie tych "bardziej" skomplikowanych kształtów, zobaczcie jeszcze port rybacki: I koniecznie muszę podkreślić, że każdy następny budynek jest wykonywany na tych "kątach" które obrełem w pierwszym poście ;) I jeszcze jeden dodatek, stajnia: Odnośnik do komentarza Udostępnij na innych stronach Więcej opcji udostępniania...
Misiek999 Opublikowano 6 Lipca 2008 Udostępnij Opublikowano 6 Lipca 2008 Artykuł jest nawet spoko, a port rybacki roksi :] Odnośnik do komentarza Udostępnij na innych stronach Więcej opcji udostępniania...
Snake Opublikowano 6 Lipca 2008 Udostępnij Opublikowano 6 Lipca 2008 Bardzo dobry tutorial, dobrze opisane... good ;D A domek ładnie wygląda ;p btw. Bo są zrobione jak samo jak okna - to obcięte koło, a to nie pasuje do tego rzutu w PSP jak narysujesz koło (Q) to potem przyłącz na obj selection tool (O) i gdy najedziesz na te punkty, którymi zmienia się rozmiar obiektu to przytrzymaj CTRL / SHIFT / CTRL + SHIFT i kliknij - możesz sobie dostosować kształt obiektu koła do rzutu ;d to samo masz na raster deform (D), ale to jak operujesz na rastrowych warstwach a nie wektorowych ;p Odnośnik do komentarza Udostępnij na innych stronach Więcej opcji udostępniania...
Sirluki Opublikowano 6 Lipca 2008 Autor Udostępnij Opublikowano 6 Lipca 2008 Bardzo dobry tutorial, dobrze opisane... good ;D A domek ładnie wygląda ;p btw. w PSP jak narysujesz koło (Q) to potem przyłącz na obj selection tool (O) i gdy najedziesz na te punkty, którymi zmienia się rozmiar obiektu to przytrzymaj CTRL / SHIFT / CTRL + SHIFT i kliknij - możesz sobie dostosować kształt obiektu koła do rzutu ;d to samo masz na raster deform (D), ale to jak operujesz na rastrowych warstwach a nie wektorowych ;p :D O tym nie wiedziałem, rzeczywiście można tym idealnie dopasować kształt koła :) Dzięki wielkie. Odnośnik do komentarza Udostępnij na innych stronach Więcej opcji udostępniania...
I am Lord Opublikowano 6 Lipca 2008 Udostępnij Opublikowano 6 Lipca 2008 Robisz/wymyślasz doskonałe figury ale pixelArt to jest raczej słaby nie cieniowałeś krawędzi ( wszystkie są czarne ) no i rzut mi nie przypada do gustu. Odnośnik do komentarza Udostępnij na innych stronach Więcej opcji udostępniania...
Sirluki Opublikowano 6 Lipca 2008 Autor Udostępnij Opublikowano 6 Lipca 2008 Robisz/wymyślasz doskonałe figury ale pixelArt to jest raczej słaby nie cieniowałeś krawędzi ( wszystkie są czarne ) no i rzut mi nie przypada do gustu. Fakt, pixelart nie jest moją mocną stroną, ale kiedy tworzyłem ten tutorial, do głowy mi nie przeszło o pixelarcie. Chciałem zrobić przykład prostego rysowania budynków, które w miarę względna będą się prezentowały w grze. A co do rzutu - tak jak powiedziałem w pierwszym poście - to zależy od doboru tych "kątów", wybrałem taki a nie inny, ponieważ chciałem, żeby wiele elementów było widocznych. :) Niemniej dzięki bardzo :) Odnośnik do komentarza Udostępnij na innych stronach Więcej opcji udostępniania...
zalu Opublikowano 6 Lipca 2008 Udostępnij Opublikowano 6 Lipca 2008 super tutorial ach mieć takiego grafika w teamie... Odnośnik do komentarza Udostępnij na innych stronach Więcej opcji udostępniania...
TuxMan Opublikowano 6 Lipca 2008 Udostępnij Opublikowano 6 Lipca 2008 Niezłe. Normalnie zaj**iste :D. Tylko mieć takiego grafika, jak powedział zalu, to team robiłby świetne gry :thumbsup: Odnośnik do komentarza Udostępnij na innych stronach Więcej opcji udostępniania...
Marrac Opublikowano 6 Lipca 2008 Udostępnij Opublikowano 6 Lipca 2008 Tylko mieć takiego grafika, jak powedział zalu, to team robiłby świetne gry :thumbsup: No nie wiem. 8 letnie dziecko jako programista z dobrym grafikiem dużo nie zrobi :| A co do tutoriala. Jest dobry.Ładnie opisany. Na pewno komuś się przyda ;p Odnośnik do komentarza Udostępnij na innych stronach Więcej opcji udostępniania...
Feynorn Opublikowano 6 Lipca 2008 Udostępnij Opublikowano 6 Lipca 2008 Tylko mieć taiego grafika, jak powedział zalu, to team robiłby świetne gry :thumbsup: Jeszcze żeby sam zaproponował wspólny team :lol: xD Szukajcie takie cuda się zdarzają, a ja jestem żywym przykładem :thumbsup: Odnośnik do komentarza Udostępnij na innych stronach Więcej opcji udostępniania...
Micanser Opublikowano 6 Lipca 2008 Udostępnij Opublikowano 6 Lipca 2008 Niby dobre ale efekt cienia jest niedopasowany, taki zbyt płynny do takiego stylu rysowania. Nie lepiej było by rysować grafiki troche od innym kątem? (takim jaki jest zazwyczaj w tutorialach rysowania izometrii) Odnośnik do komentarza Udostępnij na innych stronach Więcej opcji udostępniania...
RaV Royal Opublikowano 7 Lipca 2008 Udostępnij Opublikowano 7 Lipca 2008 Ej ziomki, jaką funkcją pocieniować takiego picta w PS'ie??? Mój outcome: Odnośnik do komentarza Udostępnij na innych stronach Więcej opcji udostępniania...
Yoda Opublikowano 7 Lipca 2008 Udostępnij Opublikowano 7 Lipca 2008 Tylko mieć takiego grafika, jak powedział zalu, to team robiłby świetne gry thumbsup.gif Co ma grafik to umiejętności programistycznych teamu? 0_. Odnośnik do komentarza Udostępnij na innych stronach Więcej opcji udostępniania...
Marmot Opublikowano 7 Lipca 2008 Udostępnij Opublikowano 7 Lipca 2008 @RaV Royal: Pocieniuj ręcznie ołówkiem, bo takie cienie jak zaprezentował Sirluki tak pasują do jego obrazka jak siekiera do świętej panienki. Odnośnik do komentarza Udostępnij na innych stronach Więcej opcji udostępniania...
Sirluki Opublikowano 7 Lipca 2008 Autor Udostępnij Opublikowano 7 Lipca 2008 Ej ziomki, jaką funkcją pocieniować takiego picta w PS'ie??? Mój outcome: Mi się wydaje, że to cieniowanie jednak pasuje do obrazka :P A co do bardziej skomplikowanych figur, które można stworzyć, za pomocą tych dobranych kątów, to zobaczcie to: To już nie kwestia umiejętności, tylko odpowiedniego doboru kątów i wyobraźni :) Odnośnik do komentarza Udostępnij na innych stronach Więcej opcji udostępniania...
RaV Royal Opublikowano 7 Lipca 2008 Udostępnij Opublikowano 7 Lipca 2008 Ale to chyba Photoshop CS3... Odnośnik do komentarza Udostępnij na innych stronach Więcej opcji udostępniania...
Marmot Opublikowano 7 Lipca 2008 Udostępnij Opublikowano 7 Lipca 2008 @Sirluki: Ani trochę nie pasuje ;p . Cały rysunek w pixelarcie, bez antyaliasingu, a tu nagle wyjeżdżasz z ładnym, płynnym cieniowaniem, które z pixelartem nic wspólnego nie ma. Rysując trzeba się zdecydować na jeden konkretny styl, bo takie mieszanki badziewnie wyglądają ;p . Jednak, tamten domek wyszedł Ci bardzo ładnie nie patrząc na te cienie ;p . Odnośnik do komentarza Udostępnij na innych stronach Więcej opcji udostępniania...
Bartek (Kamrat) Opublikowano 7 Lipca 2008 Udostępnij Opublikowano 7 Lipca 2008 A mi się to cieniowanie podoba. Odnośnik do komentarza Udostępnij na innych stronach Więcej opcji udostępniania...
Maximal Opublikowano 7 Lipca 2008 Udostępnij Opublikowano 7 Lipca 2008 Cały rysunek w pixelarcie, bez antyaliasingu, a tu nagle wyjeżdżasz z ładnym, płynnym cieniowaniem, które z pixelartem nic wspólnego nie ma. Rysując trzeba się zdecydować na jeden konkretny styl, bo takie mieszanki badziewnie wyglądają ;p .Nie pierdziel, towarzyszu Marmocie. ;P Nie liczą się środki, tylko efekt. A ten, jak słusznie zauważyłeś, jest w porządku. =) Odnośnik do komentarza Udostępnij na innych stronach Więcej opcji udostępniania...
Sirluki Opublikowano 7 Lipca 2008 Autor Udostępnij Opublikowano 7 Lipca 2008 Ale to chyba Photoshop CS3... Yyy, mówiąc w PS miałeś na myśli Photo Shopa? Więc tym się nie wzoruj. To narzędzie z Paint Shop Pro. :) Odnośnik do komentarza Udostępnij na innych stronach Więcej opcji udostępniania...
Marmot Opublikowano 7 Lipca 2008 Udostępnij Opublikowano 7 Lipca 2008 Nie pierdziel, towarzyszu Marmocie. ;P Nie liczą się środki, tylko efekt. A ten, jak słusznie zauważyłeś, jest w porządku. =) Efekt jest dobry, zanim zostało użyte cieniowanie, które tutaj kompletnie nie pasuje. Pasowałoby, gdyby np. cały dom posiadał zantyaliasowane kontury, to wtedy by to nawet jakoś współgrało, ale w obecnej chwili, cień kompletnie nie pasuje do reszty rysunku. Odnośnik do komentarza Udostępnij na innych stronach Więcej opcji udostępniania...
Rekomendowane odpowiedzi
Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto
Jedynie zarejestrowani użytkownicy mogą komentować zawartość tej strony.
Zarejestruj nowe konto
Załóż nowe konto. To bardzo proste!
Zarejestruj sięZaloguj się
Posiadasz już konto? Zaloguj się poniżej.
Zaloguj się