Tworzenie grafiki do gry platformowej (2)

Klikipedia - klikowa encyklopedia
Skocz do: nawigacji, wyszukiwarki
Slimaczek.jpg
Pierwotna wersja tego artykułu pochodzi z 3. numeru Ślimaczka (zobacz oryginalny artykuł).


Autor.jpg
Autorem tego artykułu jest
pepe9donkey

Witam w kolejnej odsłonie prostego w każdym calu kursu. Dziś zajmiemy się czymś, co wielu z nas sprawia kłopoty, mimo, iż jest przecież tak proste do wykonania. Mam na myśli tło...

Wprowadzenie

Wielu początkujących, i nie tylko początkujących klikowców uważa tło za zbędny luksus w platformówce, a to przecież jeden z najistotniejszych jej elementów graficznych. Nie wystarczy prosty gradient, by nadać grze satysfakcjonujący kształt.

Zastanówmy się najpierw, co chcemy uzyskać. Powiedzmy, że chcemy wykonać tło (np. góry), do jakiegoś leśnego etapu. No dobrze, powiedzmy, że to będą skaliste, szare góry, za którymi widnieć będzie nasz ukochany, niebiesko-niebieski gradient.

Realizacja

Krok 1

Prosty kurs, więc wybierzmy równie prostą metodę. Aby lepiej wszystko pokazać, postanowiłem narysować małe góry, ot takie w sam raz dla gry w oknie o wielkości 320x200. Na początku, od niechcenia (jak zwykle), zaznaczam kontury naszego tła.

graf1.gif

Krok 2

Tutaj pojawia się pierwszy problem. Nasze tło musimy dopasować do stylu, w jakim utrzymana jest reszta grafiki. Możemy zdecydować się na gruby kontur (taki, jaki opisywałem w poprzedniej odsłonie kursu), lub na cienki. Dla gier o małej rozdzielczości (320x200 lub 520x340) proponuję użycie cienkiego konturu, a do gier o większym oknie - grubszego. W tym punkcie również poprawiam niedoskonałości oraz dla konturu cienkiego - usuwam zbędne piksele, a dla grubszego - od niechcenia przejeżdżam jeszcze jedną warstwę.

graf2.gif graf3.gif

Krok 3

Pora wypełnić nasze skały kolorem. Wybrałem niezbyt ciemny odcień szarego, ponieważ chcę, by moja platformówka utrzymana była w wesołych tonacjach.

graf7.gif graf4.gif

Krok 4

W kolejnym kroku rozjaśniam nasze tła. Zdecydowałem się na odważne rozjaśnienie, chcąc nadać skałom niemal bajkowego klimatu. Wybieram zatem odcień o dwa "oczka" ;) jaśniejszy i również o dwa - ciemniejszy. Jaśniejszym kolorem tworzę linię równoległą do prawej krawędzi i wypełniam ją. Wcięcia akcentuję mocniej, poprzez ostre, śmiałe linie w głąb skały. Podobnie robię z ciemnym kolorem.

graf8.gif graf5.gif

Krok 5

Nasze tła zaczynają już nabierać kształtów. Pora na ostatni krok. W nim dodaję na środku skały jeszcze jedną "ostrą", jasną oraz drugą - ciemną, plamę. Dodatkowo dorzucam jeszcze losowo kilka ciemnych lub jasnych pikseli.

graf9.gif graf6.gif

Krok dodatkowy

A to bonusowy punkt dla tych, którzy uważają powyższe kontury za zbyt śmiałe i ostre. Nic bowiem nie stoi na przeszkodzie, by je złagodzić, a zajmie nam to jedynie kilka chwil.

graf10.gif

Zakończenie

Efekt nienajgorszy, nieprawdaż? Weźcie również pod uwagę to, że te dwie skały rysowałem jakieś 3 minuty i jak już pisałem kilka razy - od niechcenia. Morał z tego taki, że każdy, nawet najgorszy grafik - klikowiec, mając kilka chwil, może nabazgrać proste tło, które wzbogaci jego produkcję. Nie zakładajcie z góry, że nie potraficie rysować - takie tło narysuje każdy.

Zanim się jednak rozstaniemy, rzućcie okiem na jeszcze kilka przykładów wykorzystania tej metody. Do zobaczenia!

graf14.gif graf12.gif

Zobacz też