Ten artykuł został stworzony dla starszych wersji GameMakera i może nie być aktualny.

Antyaliasing grafiki na przykładzie medalu

Poniedziałek, 29 Grudnia 2008, 14:39
Czas czytania 5 minut, 9 sekund
Napisałem ten poradnik dla tych, którzy myślą, że najlepszym "antialiasingiem" jest efekt "blur" oraz dla tych co zaczynają przygodę z pixelartem lub też dla tych co nie mają nic lepszego do roboty i się dokształcają.
ANTIALIASING NA PRZYKŁADZIE MEDALU

    Witam Cię szanowny czytelniku. Napisałem ten poradnik dla tych, którzy myślą, że najlepszym "antialiasingiem" jest efekt "blur" oraz dla tych co zaczynają przygodę z pixelartem lub też dla tych co nie mają nic lepszego do roboty i się dokształcają. Zaczynajmy!

    Najpierw stwórzmy jakiś obrazek. Nie bójcie się nie będzie on skomplikowany. Dajmy na to medal, najzwyklejszy w świecie złoty medal. Zaczynamy od lineartu. Być może większośc z was zrobiłaby to narzędziem kółko, ale dziś spróbujemy inaczej. Nauczę was sposób na robienie łuków, z których skonstruujemy koło. Wierzcie mi przyda wam się to.
A więc tworzymy obrazek o wymiarach 15x15 na przykład, i wyznaczamy środek. Możecie liczyć piksele lub też zrobić linię poziomą (wskażę ona nam wymiar obrazka) podzielić wymiar na pół i mamy środek obrazka względem osi X.
UWAGA: Wszystkie obrazki są powiększone x4, później x8!
Teraz robimy to samo tylko, że linia musi być pionowa.
Grafika: upload/gm/antyaliasing_tut2.png
Poprawiamy linię poziomą, aby była na środku obrazka względem osi Y.
Grafika: upload/gm/antyaliasing_tut3.png
Mamy środek. Usuwamy część linii, aby zostało nam coś takiego:
Grafika: upload/gm/antyaliasing_tut4.png
Zaczynamy robić łuk (dla ułatwienia będzie on zaznaczony na czarno):
Grafika: upload/gm/antyaliasing_tut5.png
Krok 1. Zaczynamy od lewego końca rysując kreskę na 1/6 całego obrazka, czyli 1/3 połowy. U nas będzie to 3 piksele (razem ze środkiem zaokrąglając w górę). To samo robimy z górnego końca (oczywiście muszą się one kierować we wspólną stronę).
Grafika: upload/gm/antyaliasing_tut6.png
Krok 2. Teraz kolejne linie będą miały długość połowy poprzedniej linii (także zaokrąglone w górę), czyli 3 po podzieleniu i zaokrągleniu daje nam 2 piksele. Rysujemy.
Grafika: upload/gm/antyaliasing_tut7.png
Krok 3. Teraz będą nam wychodzić same pojedyncze piksele więc rysujemy je tak, aby złączyć nasze elementy (u nas to będzie tylko jeden piksel).
Grafika: upload/gm/antyaliasing_tut8.png
Krok 4. Kopiujemy łuk i obracamy, a następnie łączymy tak, żeby powstało koło (pamiętajmy, że środek jest częścią wspólną łuków).
Grafika: upload/gm/antyaliasing_tut9.png

    Mamy już koło. Możecie teraz zobaczyć, że narzędziem ‘koło’ zrobilibyście identyczne ;D . Jednakże teraz wiecie jak robić łuk bez rysowania koła i babrania się w gumowanie. Zaczynamy malować.
Grafika: upload/gm/antyaliasing_tut10.png
Wypełniamy koło jakimś złotym kolorkiem. Kontury zamalowujemy na jakiś ciemno-złoty.
Grafika: upload/gm/antyaliasing_tut11.png
Teraz robimy wewnątrz robimy wgłębienie o kształcie koła. Tu już jeśli chcecie możecie użyć narzędzia "koło" (jeżeli używasz painta radzę zrobić je w trybie obramowania, a potem wypełnić), ale kto chce może spróbować wyżej wymienionego sposobu. Cieniujemy (opiszę krokami):
Grafika: upload/gm/antyaliasing_tut12.pngGrafika: upload/gm/antyaliasing_tut13.png
Krok 1. Ustalmy, że światło pada z górnego lewego rogu. Cieniujemy wgłębienie, a ponieważ to jest wgłębienie to górna, lewa część będzie nieoświetlona, a dolna prawa tak. Dobieramy odpowiednie kolory. Cień powinien być "pomarańczowniejszy" ( w tym wypadku), a oświetlenie mniej nasycone (bledsze).
Grafika: upload/gm/antyaliasing_tut14.png
Krok 2. Cieniujemy teraz pozostałą część. Nasz medal nie będzie idealnie płaski tylko leciutko wygięty, a więc padać na niego będzie światło. Dobieramy jaśniejszy kolor tak jak poprzednio i zamalowujemy 3/4 medalu tak, aby dolna, prawa część była lekko ciemniejsza.
Grafika: upload/gm/antyaliasing_tut15.png
Krok 3. Dobieramy kolor jeszcze jaśniejszy i malujemy nim lewą, górną część. Zmieniamy kolor tła na czarny, aby łatwiej nam było dalej pracować z tymi jasnymi kolorami.
Grafika: upload/gm/antyaliasing_tut16.png
Krok 4. Czas na "łagodzenie" konturów, czyli tam gdzie pada więcej światła, kontury są jaśniejsze. Dzięki temu nasz medal będzie jeszcze ładniejszy.
Grafika: upload/gm/antyaliasing_tut17.png

    Nasz medal gotowy, ale jak widzicie jest trochę kanciasty przez to, że piksele są kwadratowe. Nadchodzi pora na oczekiwany z pewnością antialiasing. Teraz mamy dwie opcje robimy AA z pomocą kanału alpha (przeźroczystość) lub bez. Jeżeli macie tylko painta, to niestety musicie sobie radzić bez. Na czarnym tle AA robi się trudniej szczególnie bez przeźroczystości, ale żółty jest słabo widoczny na białym tle, więc tutaj przewagę ma czarne tło. Robi się to tak:
Grafika: upload/gm/antyaliasing_tut18.png
Krok 1. Dobieramy ciemny złoty i stawiamy piksele przy najdłuższych liniach prostych (chodzi oczywiście o zewnętrzne linie).
Grafika: upload/gm/antyaliasing_tut19.png
Krok 2. Dobieramy jeszcze ciemniejszy i ponownie stawiamy go obok poprzednich pikseli, a także w pozostałych "wolnych miejscach"
Grafika: upload/gm/antyaliasing_tut20.png
Krok 3. Robimy jeszcze ciemniejszy i stawiamy go (jakby to wam wytłumaczyć hmm…) na miejscach o współrzędnych (pierwszy piksel to (0,0)): (1,1), (13,1), (1,13) i (13,13). Myślę, że zrozumiecie o co mi chodzi.
Grafika: upload/gm/antyaliasing_tut21.png
Krok 4. Balansujemy kolory tak aby nie były zbyt ciemne, ani tez zbyt jasne. Możemy teraz porównać medale:
Grafika: upload/gm/antyaliasing_tut15.pngGrafika: upload/gm/antyaliasing_tut22.png
Grafika: upload/gm/antyaliasing_tut17.pngGrafika: upload/gm/antyaliasing_tut23.png
Widzicie różnicę? Jakąś na pewno, lecz to tylko jeden rodzaj antyaliasingu. Zapoznam was teraz z AA linii (już bez tłumaczenia, za to pokażę kolejne "etapy" tworzenia AA)
Grafika: upload/gm/antyaliasing_tut24.pngGrafika: upload/gm/antyaliasing_tut25.png

Dziękuję za uwagę mam nadzieję, że spodobał się wam ten artykuł, oraz że nauczyliście się czegoś przydatnego.
Komentarze (łącznie 34, wyświetlam 1 - 15):
Mimek (Pon., 29 Gru. 08, 15:49)
#1

Super art :) Dziękujemy ZeroXbotowi i liczymy na więcej :)

Tymon (Pon., 29 Gru. 08, 15:53)
#2

Przykład monety akurat słaby, wszystko, ale nie na czarnym tle. Akurat w pierwszym przykładzie z tą linią zblurowałeś grafikę. Drugi przykład jest super. =)

ZeroXbot (Pon., 29 Gru. 08, 15:53)
#3

Postaram się. Już nawet mam pomysł ;)

P
Pental (Pon., 29 Gru. 08, 15:56)
#4

Ej no, artykuł fajny ;) . Dam tą 10 :P .

ZeroXbot (Pon., 29 Gru. 08, 15:58)
#5

Przepraszam, że tak doubluje, ale jak pisałem nie było koment Tymona. Tak wiem tu nie chodziło głównie o medal (on to mi cos nie wyszedł właśnie). Pozatym nie rozumiem o co chodzi ze 'wszystko'. Co do linii to NIE blurowałem. tak wyszło ;P

Tymon (Pon., 29 Gru. 08, 15:59)
#6

W sensie "wszystko byle nie to". Możesz w sumie zawsze poprawić i komuś wysłać by zedytował. =)

P
Pental (Pon., 29 Gru. 08, 16:04)
#7

Chciałem tylko dodać, że jak Tymon mówi super, to coś musi być na prawdę dobre :D .

E
Egzekutor (Pon., 29 Gru. 08, 16:06)
#8

Takie coś to chyba wie każdy 4/10 słabiutko

Tymon (Pon., 29 Gru. 08, 16:07)
#9

Egzekutor. No właśnie nie, pokaż mi przykład dobrze wykonanego AA w Twoim wykonaniu.

P
Pental (Pon., 29 Gru. 08, 16:07)
#10

Egzekutor, każdy without u. Więc won się uczyć, a jak taki mądry, sam napisz arta :) .

P
Pental (Pon., 29 Gru. 08, 16:09)
#11

Ale Tymon ma racje, ostatnia linia w drugim przykładzie jest fachowo wykonana :) . Tymon, powtórzyłeś wyrazy :) .

P
Pental (Pon., 29 Gru. 08, 16:10)
#12

Przepraszam za kolejny komentarz pod rząd, ta przed ostatnią :P . Ostatnia ma za jasne pxelki obok :) .

Matthew (Pon., 29 Gru. 08, 16:24)
#13

o lol, nie wiedziałem, że tak się robi AA, tj. robiłem tak, ale myślałem, że to mój własny sposób :D Tylko czy te piksele służące do AA nie powinny być jaśniejsze?

Tymon (Pon., 29 Gru. 08, 16:27)
#14

W AA chodzi o to by pixel zAAowany nie był grubszy od normalnie postawionego pixela.

Skromnie przyznam, że dobrym przykładem AA jest to:
hurkel.gmclan.org/.../sunshine.gif
Albo każda praca Pandy na PJ:
pixeljoint.com/p/2396.htm

ZeroXbot (Pon., 29 Gru. 08, 16:36)
#15

No w sumie to mogę to poprawić nawet zaraz z tymi monetami. a może zrobie w ogóle coś innego? Nie wiem pomyślę...

Najnowsze wersje GameMakera:

Stabilna
2024.2.0.132 • 2024.2.0.163
wydana 51 dni temu
LTS
2022.0.2.51 • 2022.0.2.49
wydana 190 dni temu
Beta
2024.400.0.549 • 2024.400.0.567
wydana  wczoraj
= IDE, = Runtime
Użytkownicy online
1 użytkownik aktywny:
gości: 1,
(~ostatnie 15 minut)
Discord
33 użytkownicy online na discordzie:
Kysiu, s..., Alice, DungeonFairy🧚, Carl-bot, p..., Dominator2v, Grela, Kowu, Kuzyn, m..., r..., LadyLush, lethian, Moldis, Arrekin, Dyno, Deusald, debil debilowski, Morro, 🧁Cupcake🧁, Miłosz, Ulti, m..., bagno, Sporek, l..., Alkapivo, moeglich, Draczeq, Kandif, Cosplyfanka, TobiasM (Morgo)
Shoutbox
gnysek (20:44, 11.04.24)
Niektórzy dlatego wybierają GMEdit. Ale ja liczę na Code Editor 2, tylko na razie zbyt zbugowany jest.
Tymon (16:11, 11.04.24)
Stitch dla mnie osobiście jest lepszy bo nie musze kopać się z interfejsem GMa i mogę tylko pisać kod.
Tymon (16:05, 11.04.24)
Yes. Obecny nie jest taki zły, jak zainstalowałem najnowszą stabilną to w porównaniu z tym czego używałem... 10 lat temu...? Wszystko wydaje się lepsze.
gnysek (22:48, 10.04.24)
bscotch/stitch ? Ja czekam na fixy do nowego edytora, bo wszystko wydaje się dziś lepsze od tego obecnego :D
Tymon (19:54, 10.04.24)
Hm, Stitch okazuje się całkiem dobrą alternatywą dla wbudowanego edytora
Wojo (22:16, 08.04.24)
siemano huder myślałem, że zniknąłeś całkiem z gmclanu bo na discordzie cie nie ma :D
I am Lord (00:37, 05.04.24)
O dzięki :D
gnysek (09:58, 02.04.24)
Znalazłem na podstawie jego postów: youtube.com/@Jakim_
I am Lord (20:16, 01.04.24)
Ktoś ogarnia jakie konto miał Jakim na YT?
gnysek (16:07, 29.03.24)
Nowy Edytor kodu jednak po świętach
Starsze wpisy znajdziesz w Archiwum.
Ankieta
Ile zarobiłeś do tej pory na grach stworzonych w GM?