[#1] Pixele, piksele
Nowy wątek. Bardzo zazdroszczę "jubi" i jego wzorowo rozwijanego wątku "Raytracing i Amiga". Bardzo pozytywny wątek i z tego co zauważyłem z dość sporym odzewem użytkowników. Zacząłem się zastanawiać dlaczego wcześniej nie powstawały podobne wątki dotyczące innych tematów. W rozmowie z selurem doszliśmy do wniosku że brakuje czegoś takiego o grafice. Amigowcy lubią tylko komentować i opluwać się wzajemnie? A jak trzeba zakasać rękawy to stodoła pusta?

Postaram się tutaj rozwijać tematy dotyczące pikselkowych prac. Moje wypociny może zachęcą kogoś do własnej pracy. Temat nie powinien być zbytnio zagmatwany ponieważ w dziedzinie pikselków nadal jestem "bardzo nisko".

Podstawy
Zapewne wielu z was widziało gry, z przed epoki dygitalizacji zdjęć i animacji ręcznie rysowane, nie posiadające zbyt dużo elementów trójwymiarowych. Temat nie wyklucza trójwymiarowości bo dobre umiejętności piksekowe przydają się także przy budowaniu tekstur do nowoczesnych gier.
Słowem wstępu, mamy pojedyncze punkty, w tym przypadku piksele, nie będziemy rozwodzić się na temat tego czy są idealnie kwadratowe czy też nie. Zależy kto jakie lubi i tyle ;) Otóż w całej sztuce chodzi o to by panować nad każdym punktem w określonej kompozycji. Za podstawę kompozycji wezmę sobie obraz 16x16 pikseli. Ktoś może zapytać, po co takie małe ale odpowiem że na początek wystarczy i przy tak małych umiejętnościach jak moje to i tak spore pole do popisu.
Zdarza się że młodzi programiści szukają roboczych pikselków do swoich próbnych prac. Można tu zajrzeć, a nóż widelec komuś się coś przyda. Zaczynam od "podstaw podstaw", potem będę przechodził do bardziej skomplikowanych tematów jak kolor, palety, antyaliasing itp.

Zaczynamy od podstaw 16x16 pikseli.

Jak widać na załączonym obrazku mamy siatkę, możliwe że naszego przyszłego bohatera gry. 16x16 nie oznacza że mamy tylko 16 lub 32 miejsca na kompozycję, jak widać jest to 16 linii po 16 punktów, a to daje nam już 256 miejsc na postawienie przynajmniej jednego koloru? Mało? Sporo!

No to zaczynamy!

Wow, ale się wystarałem... no dobra, jakiś postem już jest. Okazuje się, że sprawa od podszewki wygląda trochę inaczej. Piksel/kolor/element wisi na siatce w określonym miejscu i nie da się go zrobić np w połowie miejsca. Da się go przesunąć ale o 1 punkt w siatce. Do góry do dołu, koniec.

Ma to swoje ograniczenia.

minimalna przerwa to 1 piksel, nie da się bliżej ani lekko dalej. W przypadku kartki i ołówka nie mamy takich zmartwień. Dlatego też nie martwcie się jeśli nawet narysowany przez was bohater będzie super to w pikselkach może wyglądać troszkę inaczej. To nie błąd.

Mała rozdzielczość ma też swoje zalety, łatwo coś zaprojektować.

Kilka punktów, linii, i mamy facjatę przyszłego bohatera, może nawet i gry... ale na razie bohatera naszego obrazka.

Spędzając chwilę, doszedłem do wniosku, że ci pionierzy oni musieli przejść podobną drogę aby stworzyć te piękne klasyczne dzieła.


Pozdrawiam wszystkich. Ciąg dalszy może nastąpić, zależny od odzewu. Ciekawe czy podoba się wam taka forma?
Wklejajcie swoje piksele.

Ostatnia aktualizacja: 03.09.2014 08:26:23 przez Koyot1222
[wyróżniony] [#2] Re: Pixele, piksele

@Koyot1222, post #1

Super! Dalej! Wincyj! OK
[wyróżniony] [#3] Re: Pixele, piksele

@_arti, post #2

Fajnie się zaczęło - pixele rulez :) Czekam na więcej!
[wyróżniony] [#4] Re: Pixele, piksele

@Koyot1222, post #1

Super, czekam na więcej.
[#5] Re: Pixele, piksele

@Koyot1222, post #1

Świetnie pomysł Więcej więcej więcej, czekamy pomysł
[#6] Pixele, piksele

@asman, post #4

Zatem lecimy dalej ;)

Dlaczego w ogóle 16x16 pikseli? Bo 16x16 to liczba magiczna! ... No nie zupełnie.
Wynika to z prostych mechanicznych zależności, wszystkie normalne programy oraz urządzenia (karty graficzne itp) zwykle przyjmują grafikę w formatach "kwadratowych" 16x16, 32x32, 64x64 i wyższe. Podobnie nowoczesne teksturki, zazwyczaj to także kwadraty im większe tym niby lepsze.
Ale wracajmy do tematu.

Projektując obrazek pełnoekranowy, pole gry, musimy zwrócić uwagę na pełną rozdzielczość naszego urządzenia. Amiga "classic" to zwykle znienawidzony Pal, który do prostych gier i obrazków zupełnie wystarcza, jest to około 320pikseli w długości i 256 pikseli wysokości.



Bardziej popularnym formatem na świecie jest 320x240 i nic nie stoi na przeszkodzie aby nasze szerokoekranowe prace przystosowywać do tego formatu. Klasyk tez to wyświetli :D Hurraaa!



Jak widać format jest trochę niższy od klasycznego PALu. To nie przeszkadza.
Ale co z bohaterem obrazka? Nie za mały?


No może nie za wielki, ale smutno mu będzie bez innych elementów.


Okazuje się że jak na górze ekranu przyszła by jakaś tablica do zliczania punktów, logo albo ksywa grupy, a na ekranie pojawiło by się więcej rzeczy np demo fraktal albo wektorowy sześcian to miejsca jest... wystarczająco co najwyżej.
Ale wracając do naszego bohatera "Inwadera" Spróbuję skupić się na temacie "prostej" gry popularnie nazywanej "shump" lub "shoter", u nas pod trzepakiem zwanej "strzelajki".
Interesuje was ten temat? Myśle, że dużo ciekawsza od candi-sweet-main-stream odskocznia, podziałać w materii pikselkowej raczej... da się.

Jak widać miejsca wystarczy:

Pozdrawiam, CDN.
[#7] Re: Pixele, piksele

@Koyot1222, post #1

Kurczę super, uwielbiam pixelki. Continue pls
[#8] Re: Pixele, piksele

@Koyot1222, post #1

Pozdrawiam wszystkich. Ciąg dalszy może nastąpić, zależny od odzewu. Ciekawe czy podoba się wam taka forma?

Bardzo mi się podoba. Ten potworek świetny, kojarzy mi się z edytorem sprajtów na Commodore 64.

Bardzo chętnie przyjąłbym lekcje pikselkowania od Ciebie!

Zdarza się że młodzi programiści szukają roboczych pikselków do swoich próbnych prac.

Zgadza się. Już sobie wyobrażam tego stworka w grze labiryntowej.
[#9] Re: Pixele, piksele

@Hexmage960, post #8

Zdarza się że młodzi programiści szukają roboczych pikselków do swoich próbnych prac.


Zgadza się. Już sobie wyobrażam tego stworka w grze labiryntowej.


Albo np. w jakimś klonie np. pac-mana lub strzelanki w stylu galaxian.
[wyróżniony] [#10] Re: Pixele, piksele

@Hexmage960, post #8

Bardzo fajny pomysł, do tego pokazany w ciekawej formie. Warto przypominać czym była sztuka tworzenia grafiki piksel po pikselu, jakże inna od dzisiejszego podejścia i pracy dzisiejszymi narzędziami.

Jeśli zajrzysz do książek o historii gier z przełomu lat 70-tych/80-tych to zobaczysz nawet że często taka grafika powstawała najpierw na kartce papieru, a dopiero potem była przenoszona do komputera piksel po pikselu - tak duże znaczenie miał pojedynczy punkt.

Tu przykład z książki "Atari Inc. Business is fun", grafika do gry Video Pinball. W tym przypadku "klocki" miały rozmiary 8x8 pikseli.

[#11] Re: Pixele, piksele

@jubi, post #10

Zgadzam się. W erze kiedy tak naprawdę nie istniały dobre, ba nawet wystarczające edytory graficzne, zaprojektowanie wszystkiego na kartce papieru było niezbędne.
Przykładów jest wiele, np min. PACMAN:

Takich przykładów jest wiele, nadal mogą być doskonałym źródłem inspiracji.
Dziś wybór dobrego edytora nie nastręcza wiele trudności, są ogólnie dostępne, niektóre nawet za darmo. Dostęp do monitora na którym piksele będą wyglądać jak piksele też nie jest trudny.
Sam wspominam chwile kiedy próbowałem rysować na podłączonym ("czinczem")do Amigi starym 14 calowym telewizorze "SANYO". "Otake" czasy to były.

Wrócę do tematu "Invadera", pozwolę sobie zamieścić kolejny slajd...

"Ciemność, ciemność widzę(...)" Wydaje mi się że kolor ciemny... bo rożne były odcienie tła starych gier. Wynikał z możliwości ówczesnych maszyn, a raczej monitorów. Ciemne tło pewnie waliło mniej po oczach niż jasne przy odświeżaniu ekranu rzędu 15klatek na sekundę.
Tworzymy bohatera...

Mnie osobiście "nie leży" taka kolorystyka, ale podejrzewam że w latach 70tych, bylo by to normą.
Zrobimy z Gandalfa białego, szarego.

Chyba lepiej. Ja osobiście preferuje w ogóle do pracy szare tło. Nie męczy wzroku, oczy się nie przyzwyczajają, łatwo wyłapać kontrast.

łatwo zauważyć że nasz bohater wygląda mało... bojowo, jak na bohatera, może przyszłej gry. Trzeba temu zaradzić...

Chyba trochę lepiej ;) i tu kolejne spostrzeżenie. Wcześniej pisałem że w pikselarcie ważny jest każdy piksel/punkt naszej kompozycji. Jak widać zmiana tylko kilku punktów daje niezwykły efekt. Rzadko zdarza się aby w sztuce zmiana tak niewielu elementów sprawiała tak łatwo zauważalne różnice.
Dla wzmocnienia efektu dodam obrys.

Po co ten obrys? Nie jest konieczny ale... Przy pracach z małą ilością użytych kolorów, każda dodatkowa barwa jest na wagę złota. W przypadku kiedy w tle planujemy dodawać kolejne szczegóły, lub rozważymy nawet zmianę na chwilę tła, to okaże się że nasz bohater zniknie.

Jeśli to zamierzony efekt... ok. Jeśli nie, można zrobić prosty obrys.
Teraz nie zniknie ani na czerni ani na szarości... iiiii... będzie też widoczny na bieli.
Przy obrysach mnie osobiście denerwuje czasem jedna rzecz.

Za dużo tej bieli. Dlatego też przeprojektuję stwora.

Ciut lepiej. Ale skoro mamy jeszcze jeden kolor w zanadrzu, dorzucimy trochę trójwymiarowości. Taki trochę oszukany rzut (top-down) lekko z góry.

I efekt końcowy:



"Przybywamy z kosmosu,
zniszczymy waszą ortografię!"



Jeśli macie jakieś pytania, albo chcieli byście abym coś opisał co pominąłem, to proszę zamieszczać te informacje.
Pozdrawiam, CDN. Piksele RULEZ!

Ostatnia aktualizacja: 04.09.2014 08:36:45 przez Koyot1222
[#12] Re: Pixele, piksele

@Koyot1222, post #11

Aż chce się usiąść i rysować!
[#13] Re: Pixele, piksele

@Koyot1222, post #11

Fajnie się czyta i ogląda. No to teraz czas na więcej kolorów, cieniowanie, dithering i antialiasing!
[#14] Re: Pixele, piksele

@slay, post #13

Chyba będzie można wyjść od budowania palety... Pomyślę.
[#15] Re: Pixele, piksele

@slay, post #13

Ale zanim kolory, najpierw koła i okręgi.
Z netu wygrzebałem ściągawki, z których korzystam jak potrzebuję. Przyznam się, nie są one moje.

Czasem zdarza się, że potrzebujemy szybko narysować coś kolistego i nie wychodzi. Przydaje się zapamiętać przynajmniej sposób budowania okręgu do 32x32, potem zawsze można zerkać do ściągawki ;) Szybko można zauważyć, że najważniejsza część łuku koła to powielone potem ok 22,5 stopnia.

Ostatnia aktualizacja: 04.09.2014 13:11:14 przez Koyot1222
[#16] Re: Pixele, piksele

@Koyot1222, post #15

Podałeś ściągawki tylko w miniaturowej formie, podlinkuj wersje pełne :)

Bardzo przyjemnie się to czyta i mimo, że coś tam trochę mazałem pikselami, to pewne spostrzeżenia są dla mnie nowe.
[#17] Re: Pixele, piksele

@Koyot1222, post #15

Coraz bardziej mi się podoba ten wątek OK. Tak jak powiedział _arti aż się chce coś porysować/potworzyć i coś w tym kierunku robię :). I trzeba by powiedzieć coś także o liniach, i tych prostych, i tych krzywych. link
[#18] Re: Pixele, piksele

@teh_KaiN, post #16

Przepraszam, nie sprawdziłem czy obrazki są odnośnikami. Mój błąd.
Poprawne linki:
link obrazek 1
link obrazek 2

Temat jest praktycznie wstępem do budowania linii w technice pikselków. Postaram się niedługo rozwinąć ten temat ;)
[#19] Re: Pixele, piksele

@Koyot1222, post #18

Fajnie że zacząłeś ten wątek, miło poczytać. Zastanawiam się tylko po co te ściągi z kółek i okręgów,
coś nie tak z algorytmami rysowania figur w programach malarskich, czy może chodzi o rozkminienie
wszystkiego od podstaw?

Na zachętę dla przyszłych artystów - ponad trzy minuty Deluxe Painta *

Ostatnia aktualizacja: 06.09.2014 21:48:56 przez Radek_Cz
[#20] Re: Pixele, piksele

@Radek_Cz, post #19

Podejrzewam że z tymi kółkami i okręgami może być trochę jak z fotografią. Że owszem możesz używać auto focusa i innych automatów i zrobić dobre zdjęcie, jednak nie będzie ono tak dobre jak ręcznie dobrane ustawienia wszystkiego w aparacie przez dobrego i doświadczonego fotografa który wie co w danej sytuacji działać będzie lepiej. Jeśli nie, to w końcu jest to pixel art czyli każdy piksel malowany odręcznie (i jeśli ktoś jest purystą pixel artu to taka lekcja na pewno się przyda).
[wyróżniony] [#21] Re: Pixele, piksele

@Koyot1222, post #18

fajny temat :) ciągnij dalej !
może w przyszłości też przygotuję poradnik z historią (growo/scenowego) pikselowania
temat trochę był wałkowany, ale o pikselach nigdy za dużo
fajnie też imo podać kilka linków do b. dobrych tutoriali
anyway - czekam na więcej :)

btw - ten okrąg 12x12 i 14x14 z 1 linka lepiej narysować troszkę inaczej
[#22] Re: Pixele, piksele

@Radek_Cz, post #19

Dokładnie. Tak jak napisałem wcześniej.
Niektóre rzeczy dobrze jest troszkę samemu niektóre rzeczy ogarnąć ;)
Z pikselkowych klimatów dobry jest jeszcze Flairs - Truckers Delight
[#23] Re: Pixele, piksele

@jokov, post #21

12x12, Faktycznie, wg zasady łuku i każdej części o 1 piksel mniejszej lub większej.
[#24] Re: Pixele, piksele

@asman, post #17

"coś w tym kierunku robię :)"
Super! Wklejaj!

Co do prostych, stawianie linii padających do siebie pod kątem 90 stopni nie stwarza wielkich problemów. Siatka w tym przypadku pikselków trzyma się dość dobrze. W niskiej rozdzielczości dość łatwo jest malować linie proste.

Wszelkie odchylenia byłby bardzo widoczne.
Problem zaczyna się kiedy pojawiają się linie pod innym kątem niż pod kątem prostym.
Jak widać nie unikniemy "poszarpania"

Linie pod kątem 45 stopni wyglądają jeszcze całkiem sympatycznie, prawdziwy koszmar zaczyna się kiedy linie zaczynają biec w różnych kierunkach pod rożnymi kątami.
W najprostszej technice nie unikniemy poszarpania.

Patrząc jednak na oba obrazki dojść można do wniosku że całość wygląda nie najgorzej jeśli "przejścia" wykonane są z podobnej ilości pikseli. Lub podobnej ilości składowych linii w tym przypadku 2-1-2-1...

łatwo zauważyć że przy takim kontraście oko całkiem dobrze toleruje przejścia o różnicy 1 pikselka.
Stosując te zasadę można szybko tworzyć proste liniowe obrysy które pomimo swoje kanciastości są mniej lub bardziej przyjemne dla oka.

Tak jak napisałem wcześniej, każdy piksel jest na wagę złota, ładne linie to niestety dodatkowy czas spędzony na ich poprawianiu. Efekt końcowy może być bardziej zadowalający.

Czego starajmy się unikać...

Ja np. nie lubię kiedy linie pikseli dublują się o ile wygląda to świetnie przy prostych o tyle uważam, że pod kątem daje brzydkie wrażenie pogrubienia linii. Zbyt duży przeskok w elementach składowych linii tez jest łatwo zauważalny i bywa brzydki. Łuk wyprowadzony pod katem pojedynczych pikseli też nie jest łukiem, chyba że to zamierzony efekt.


CDN... :)

Ostatnia aktualizacja: 08.09.2014 11:26:49 przez Koyot1222
[#25] Re: Pixele, piksele

@Koyot1222, post #24

robi się ciekawiej :)
[#26] Re: Pixele, piksele

@jokov, post #25

No, weszły wreszcie kolorki ;)
[wyróżniony] [#27] Re: Pixele, piksele

@Koyot1222, post #24

Poprosiłeś kolegę Asmana o wklejenie swoich grafik, może ja pokażę co ostatnio rysowałem w Deluxe Paincie. Jest to sceneria katakumbowa do mojego klonu gry Sokoban.

Po zastanowieniu postanowiłem napisać tę grę, by działała już na Amidze 500. Silnik jest w trakcie budowy. I jeszcze raz nawiążę tu do kolegi Asmana - dużo czerpię z jego szkółki programistycznej, szczególnie podoba mi się jego styl programowania.

Mam do Ciebie pytanie: czy masz zamiar rozwinąć ten wątek w mini kurs pikselkowania? Bardzo przydałaby się rada profesjonalisty.

[#28] Re: Pixele, piksele

@Hexmage960, post #27

Prośba o wklejanie prac była i jest bardzo ogólna. Bardzo bym się cieszył gdyby wszyscy chętnie czytający wątek, raz na jakiś czas coś wklejali ;)
Wiem, że niektórzy mogą martwić się o kradzież ich najlepszych pomysłów. W tym wątku starajmy się jednak podejść do pikseli jak do zabawy.
Mój profesor od malarstwa powiedział kiedyś "malujcie to co macie namalować ale czyńcie to z zabawy, potem, po studiach, nigdy nie będziecie mieli już na to czasu".

Czy mam zamiar rozwinąć wątek w szkółkę? Nie, raczej nie. Nie jestem dobry w pikselach, mam małe doświadczenie i do tego jestem przekonany, że moje prace są kiepskie. Lubię prace nad pikselami i staram się pracować od czasu do czasu nad nimi.
Dlatego też wątek będzie zawsze tylko luźnym zbiorem moich spostrzeżeń i kamieni na mojej drodze. Nie mogę zrobić szkółki bo na wielu rzeczach nadal się nie znam.

Chciałbym aby ten wątek był luźny i lekki w formie. Ma okazywać piksel jako dobre narzędzie odprężenia, wyrażenia swojej wrażliwości itp a do tego żeby był ciągle rozrywką bez technicznych zawiłości. Jestem przekonany, że w tej dziedzinie praca bardzo dużo daje, nie artystyczne umiejętności, talent ani zrozumienie matematycznych zależności.

"BTW" bardzo fajny zrzut.
[#29] Re: Pixele, piksele

@_arti, post #26

Temat "Invadera".
Zrobiłem na szybko kilka koncepcyjnych szkiców przyszłych stworów. Sugerowałem sie filmami SF z lat 60-70. Zombie-alieny ;) Jak wam się podobają? Dają rade? Zaprojektowałem je pod kątem rozbijania, fajnie było by zrobić animkę jak te ich zombie-mózgi się "rozplaskują" od strzałów, jakieś części mechaniczne mogą od nich odpadać. Mają obowiązkowe mechaniczne macki, odnóża... ?

Jest z czego czerpać inspirację dla ewentualnych przyszłych bohaterów. Gdzieś po głowie chodzi mi wygląd statku... ale to na później ;) CDN
[#30] Re: Pixele, piksele

@Koyot1222, post #28

No co Ty, jesteś super w pikselkach. Masz charakterystyczny styl, który bardzo mi się podoba. Ja mam żal tylko, że nie mogłem dokończyć naszych projektów od strony programistycznej. Jednakże pewne wydarzenia z ostatnich dni w moim życiu pozwoliły mi zacząć działanie z prawdziwego zdarzenia. Po szczegóły odsyłam na swoją stronę domową.

Myślę, że spokojnie mógłbyś udzielać rad adeptom malarstwa. W każdym razie ten wątek jest bardzo fajny, chętnie tu zaglądam.
Na stronie www.PPA.pl, podobnie jak na wielu innych stronach internetowych, wykorzystywane są tzw. cookies (ciasteczka). Służą ona m.in. do tego, aby zalogować się na swoje konto, czy brać udział w ankietach. Ze względu na nowe regulacje prawne jesteśmy zobowiązani do poinformowania Cię o tym w wyraźniejszy niż dotychczas sposób. Dalsze korzystanie z naszej strony bez zmiany ustawień przeglądarki internetowej będzie oznaczać, że zgadzasz się na ich wykorzystywanie.
OK, rozumiem