- 🟥 Wstęp. W czym pomoże ten poradnik?
- 🟦 Rozdział 1. Narzędzia.
- 🟫 Rozdział 2. Przygotuj plan działania.
- 🟨 Rozdział 3. Zaczynamy pracę!
- 🟩 Rozdział 4. Przygotowanie assetów
- 🟪 Rozdział 5. Edycja tekstur
- ⬛ Rozdział 6. Podsumowanie
🟥 Wstęp. W czym pomoże ten poradnik?
W tym poradniku dowiesz się jak przygotować moda graficznego do DSJ4 (choć nie tylko), który ma ręce i nogi. Wiele rzeczy, które były dla Ciebie czarną magią, staną się w jakimś stopniu jasne i zrozumiałe. Poradnik skierowany jest do osób, które są na początku drogi „grafika”, ale zachęcam wszystkich do lektury — może pr0sy też znajdą coś dla siebie.
Uniwersalność poradnika
Wskazówki, mechanizmy i schematy działania zebrane w tym poradniku możesz bez problemu przekładać na inne gry. Na warsztat biorę DSJ4, ale bez problemu możesz spróbować z tytułami takimi jak: Skoki Narciarskie 2006, Skoki Narciarskie 2005, bądź innymi, niekoniecznie skokowymi produkcjami. Informacje oparłem o własne doświadczenia z życia zawodowego i tego hobbystycznego, “modderskiego”. Miłej lektury i owocnego tworzenia.
🟦 Rozdział 1. Narzędzia.
Programy graficzne
Osobiście pracuję na pakiecie Adobe, (Photoshop, Illustrator) i je też zalecam.
Z darmowych alternatyw warte uwagi będą programy takie jak Photopea (całkiem udany klon Photoshopa online), Gimp, czy też Inkscape.
Programy pomocnicze
Do pracy z tekstem, kodem zalecam Visual Studio Code lub Notepad++. Przydatne mogą się również okazać Dokumenty Google.
Programy do pracy bezpośrednio z grą
Główne narzędzie, które będzie potrzebne to TexMod lub uMod.
Dzięki nim wyciągniesz i wrzucisz ponownie tekstury do gry. Zaletą TexModa jest prosta obsługa. Na korzyść uModa przemawia możliwość zmiany tekstur bez ponownego otwierania gry, czego brakuje temu pierwszemu. Osobiście pracuję w TexModzie.
🟫 Rozdział 2. Przygotuj plan działania.
Może Ci się wydawać to zbędne, ale tak – planowanie ma moc! Nawet te minimalne. Nie zaczniesz od środka, nie zgubisz się w swoim projekcie, a tym samym nie zniechęcisz się za szybko. Weź kartkę papieru i długopis, spisz wszystkie pomysły, które chcesz zrealizować.
Przygotuj sobie listę tekstur, które chcesz odświeżyć, wybierz kolorystykę, przeanalizuj patche graficzne innych twórców i wyciągnij wnioski. Na koniec zapisz sobie daty, do których planujesz skończyć daną teksturę i ostatecznie cały projekt. Wygląda na skomplikowane? Poniekąd tak jest, ale spokojnie,zobrazuję to odpowiednimi przykładami.
Strony, które mogą pomóc w planowaniu:
🔗https://trello.com/pl
🔗https://asana.com/pl
🟨 Rozdział 3. Zaczynamy pracę!
Inspiracja
Na początku nie bój się zainspirować. Grałeś w gry, przeglądałeś strony, których styl Ci się spodobał? Wróć do nich, poklikaj, zobacz, jak zachowują się przyciski po najechaniu na nie kursorem, przytrzymaj LPM na przycisku. Czy mają obramowania, zaokrąglenia, półprzezroczyste czy pełne? Zapewne tła na różnych ekranach są spójne, a kolory po prostu ze sobą grają? To efekt między innymi przemyślanego projektowania.
Wyciąganie tekstur i segregacja
Za pomocą TexModa wyciągnij interesujące Ciebie tekstury do wcześniej wskazanego folderu. Jeśli planujesz modyfikację dużej ilości tekstur, przygotuj sobie arkusz ze wszystkimi wyeksportowanymi teksturami. Nie zgubisz się w gąszczu nazw typu: DSJ4.EXE_0x16BEC6AD.jpg, dodaj teksturom odpowiednie opisy.
Sortowanie tekstur w folderze (opcjonalnie)
❗ UWAGA! Ten krok wymaga pilnowania poprawności ścieżek do plików. Domyślnie w pliku TexMod.log.
Stwórz odpowiednie foldery, dzięki którym szybko odnajdziesz się w swoim projekcie. Przykładowe drzewo projektu:
➡️ Mój patch graficzny/Assety
➡️ Mój patch graficzny/ Konkursy / Zakopane 20XX
– Plastron
– Belka i bandy
🟩 Rozdział 4. Przygotowanie assetów
Wybierz kolory, tła, zaprojektuj przyciski
Udało się znaleźć jakieś inspiracje? Jeśli nie wiesz gdzie szukać, mogę Ci pomóc paroma linkami. Do wyboru masz kilka zestawów. Co prawda są one przeznaczone do użytku w projektach WWW lub aplikacjach, ale nic nie stoi na przeszkodzie, by się nimi zainspirować.
Przyciski
🔗https://getbootstrap.com/docs/5.1/components/buttons/
🔗https://material.angular.io/components/button/overview
🔗https://bulma.io/documentation/elements/button/
Dobór kolorów
Jeśli nie masz głowy do doboru kolorów, strona www.coolors.co/generate zrobi to za Ciebie.
Spacją generujesz zestawy kolorów. Jeśli któryś się Tobie spodoba, możesz go zablokować ikoną kłódki i generować kolejne, pasujące do siebie kolory. Dodatkowo korzystając z opcji View shades, możesz wybrać kolor pokrewny. Udanego spamowania spacji.
Otoczenie
Jedną z czynności, która przyspieszy i usystematyzuje twoją pracę, jest wcześniejsze zebranie odpowiednich tekstur, których użyjesz do zbudowania własnego patcha graficznego. W internecie mamy dostępne pełne zbiory tzw. PBR textures. Zawierają one sporo różnych map, ale w przypadku DSJ4, będziesz potrzebować tej z oznaczeniem Diffuse i Ambient Occlusion (potrzebna w przypadku tych materiałów, które gra będzie “malować” (białe z fakturą). Zalecam pobieranie tekstur w rozdzielczości 1k, 2k, w formatach PNG lub JPG. W dalszej części zobaczysz dlaczego.
Lista popularnych stron z PBR textures:
🔗https://texturehaven.com/textures/
🔗https://www.textures.com/library
🔗https://cc0textures.com/list?sort=Popular
🔗https://www.sharetextures.com/
Logotypy firm
W przypadku tworzenia paczek z konkursów, często będziesz potrzebował logosów firm. W tej kwestii zalecam pobieranie ich w wektorowym formacie SVG. Programy graficzne jak Photoshop bez problemu je obsługują. Format ten daje taką przewagę, że jako “Obiekt inteligentny” dobrze się skaluje w obie strony, bez utraty jakości. Co za tym idzie – ładniej wygląda.
Proponowane strony
🔗 https://worldvectorlogo.com/
🔗 www.google.pl – fraza nazwa firmy logo svg
Zdjęcia na tło
Tutaj mamy potężny wybór stron, które oferują darmowe zdjęcia w dobrej rozdzielczości – tzw. stock photos. Wpisz odpowiednią frazę w szukajce i przy odrobinie szczęścia, jesteś w domu.
Lista popularnych stron ze stockami:
🔗Unsplash
🔗Pixabay
🔗Pexels
🔗Reshot
🔗Gratisography
❗ PROTIP: Dla zdjęć w tle w menu ustaw rozdzielczość 1920×1080.
🟪 Rozdział 5. Edycja tekstur
Zmiana rozmiaru (resize)
Dzięki powiększeniu tekstury dwukrotnie lub nawet czterokrotnie, jesteśmy w stanie uzyskać znacznie lepszy efekt. Tekstura (oczywiście jeśli będzie dobrej jakości) będzie ostrzejsza, a detale bardziej wyraźne. Poniżej przykład. Pamiętaj, że im większy format grafiki, tym większy rozmiar pliku, co może znacznie zwolnić ładowanie twojego patcha.
Wycinanie tła
Czasami zdarzy się tak, że będziesz musiał wyciąć tło np. przy tworzeniu drzewa. Wtedy z pomocą przychodzi technologia. Opcji jest kilka.
- ręcznie, przy pomocy lassa wielokątnego;
- przy pomocy magicznej różdżki, choć nie jest zazwyczaj zbyt dokładna;
- w nowych wersjach Photoshop, opcja Usuń tło, również potrafi zostawić sporo baboli zwłaszcza między gałązkami;
- przy pomocy AI
- https://www.remove.bg/
- https://spark.adobe.com/tools/remove-background
- inne strony pod frazą “remove bg ai”.
Kanał alfa (alpha channel)
Za Wikipedią “dodatkowy kanał, definiujący przezroczystość wyświetlanych informacji graficznych”. Dzięki tej opcji możesz zmienić zakres pikseli, które ma wyświetlić gra z danej tekstury np. zrobić przezroczyste liście na drzewach. Najłatwiej będzie pokazać na przykładzie.
-
- zlokalizuj miejsce włączenia/wyłączenia kanału alfa w twoim programie,
- włącz kanał alfa, na teksturze powinna pojawić się czerwona nakładka,
- narzędziem Gumka
- ➡️ w kolorze białym zamaluj piksele, które chcesz ukryć
- ➡️ w kolorze czarnym zamaluj piksele, które chcesz aby były widoczne
- ❗ PROTIP: jeśli zmienisz krycie np do 50%, zamalowane piksele wyświetlą się w przezroczystości jaką ustawiłeś!
- ➡️ zapisz w formacie TGA, inaczej nie zadziała
Przykład (zmiana rozmiaru „żółtej kropki” używając kanału alfa w Adobe Photoshop)
~
Seamless texture
Po polsku: tekstury bezszwowe — jeśli ułożysz je obok siebie, jedna w drugą przechodzi łagodnie, nie będzie widać łączeń pomiędzy sąsiednimi panelami. Niestety nawet w przypadku najlepiej wykonanych tekstur seamless, jeśli wystarczająco oddalimy kamerę, będzie widać powtarzające się wzory. Na szczęście, kiedy mieszamy ze sobą więcej tekstur, to “szachownica” staje się o mniej widoczna. Zazwyczaj tekstury, które pobierzesz z internetu są już “seamless”, jeśli jednak żadna z nich nie spełni twoich wymagań, możesz stworzyć sobie taką samodzielnie!
Pomoże Ci przy tym ta strona:
🔗 https://www.imgonline.com.ua/eng/make-seamless-texture.php
Jeśli chcesz wykonać to ręcznie w Photoshopie, skorzystaj z tutoriala poniżej:
🔗 https://www.youtube.com/watch?v=c9iIdxPHQVs
Przykład (po lewej tekstura z widocznymi połączeniami, z prawej „seamless”)
Format pliku przy zapisie tekstury
Prosta zależność – jeśli coś zmieniałeś w kanale alfa, zapisz w TGA, jeśli nie – zapisz w JPG lub PNG.
⬛ Rozdział 6. Podsumowanie
Twoje dzieło jest prawie gotowe. Pamiętaj, aby zbudować swój patch w zakładce “Package Build”. Warto jeszcze dać go przetestować zaufanym osobom, aby upewnić się, że nie popełniłeś żadnej gafy. Jak już wszystko będzie okej, zostaje tylko publikacja i fejm przed Tobą.
Publikacja patcha
Jest wiele miejsc gdzie możesz podzielić się swoim dziełem, szczególnie popularne są serwery discord skupiające się na DSJ-ocie. Tam masz możliwość udostępnienia swojej pracy. Kolejną drogą jest YouTube. Prezentując swój patch na filmie możesz dotrzeć do dużej liczby odbiorców. Patch możesz też udostępnić na forum Mediamondu, z którego korzysta część graczy produkcji Jussiego Koskeli.
Poradnik opracował: Arthyen
Korekta: Jonek2208
