Chaos Cookie

Ekran ustawień, który ożywił studio

Od tygodni przerabiam ekran ustawień w Squarelets i na jakimś poziomie mnie to irytuje, bo to przecież tylko ustawienia, nie ma wielkiego wpływu na samą grę. Jednocześnie doprowadzenie go do porządku daje reszcie studia tyle stabilności i tempa, że naprawdę mnie to cieszy.

Ekran ustawień Squarelets przed przebudową: koralowy baner „Buy us a coffee” z dwiema postaciami wychylającymi się nad nim, nagłówki sekcji wersalikami i duże fioletowe przełączniki
Ekran taki, jaki był, zanim cokolwiek się zaczęło

Był zbudowany tak, żeby przypominać domyślny wygląd sprzed iOS 26, ale od czasu przeniesienia gry na Unity nigdy nie wyglądał do końca dobrze. Kole w oczy: ma za mocny kontrast, ikony za duże w stosunku do tekstu, w dodatku wszystkie w jednym kolorze, całość jest niedopracowana.

Pierwsze podejście sterowane kodem: podpisy nachodzą na swoje wiersze, przełączniki uciekają z osi, za tekstem widać przypadkowe białe prostokąty
Pierwsze podejście było lekcją pokory
Działający ekran: pogrupowane karty Theme, Sound i Haptics, w każdym wierszu zaokrąglona kafelkowa ikona i przełącznik
Wszystko na swoim miejscu, nic jeszcze w odpowiednich proporcjach

Ekran jest teraz w całości sterowany z kodu, co samo w sobie eliminuje mnóstwo podstępnych błędów i oszczędza mi bólu głowy. Do tej pory moim największym wąskim gardłem było ręczne podpinanie prefabów: żmudne, męczące i jakimś cudem zawsze robiłam to źle. Edytor Unity zupełnie mi w tym nie pomagał. Przełomem było uświadomienie sobie, że wcale nie muszę tego robić. Zbudowałam sobie małe narzędzie do edycji prefabów, które przeciąganie referencji robi za mnie, dzięki czemu mogę już zostać po kreatywnej stronie ekranu. Czy samo to narzędzie zajęło kolejne kilka tygodni? Tak. Czy było zniechęcające, kiedy robiłam narzędzia zamiast gry? Absolutnie. Ale teraz, kiedy jest gotowe, już zaczęło się zwracać i oszczędza mi godziny przy innych rzeczach, nad którymi pracuję. Jest też dużo stabilniej. Wcześniej niektóre połączenia potrafiły się rozpiąć, a zauważenie tego i naprawienie często zajmowało dużo czasu. To już nie będzie problemem i bardzo się z tego cieszę!

Zrzuty ekranu nie pokazują większości pracy. Pod nową powierzchnią zmieniłam prawie wszystko w tym, jak obsługiwany jest cały interfejs w grze, i nauczyłam się sporo dość niskopoziomowych rzeczy. Przerobiłam:

  • jak renderuje się tekst, w różnych rozmiarach, językach i zestawieniach kolorystycznych
  • jak zarządzane są kolory (powrót do zasad Google Material Design, z którymi pracowałam kiedyś na co dzień i od których zdążyłam odpłynąć)
  • jak działają rozmiary i zaokrąglenia, z celowo ograniczoną liczbą opcji, żeby wszystko wychodziło spójne i dopracowane bez zastanawiania się nad tym

Każda z tych rzeczy dostanie swój osobny wpis, bo przy każdej było się nad czym ponerdować i chętnie opowiem o tym więcej. Lubię tę nową strukturę jednocześnie za prostotę i za ograniczenia. Kreatywność działa najlepiej przy takich właśnie ograniczeniach, bo oszczędzają mi wymyślania koła na nowo za każdym razem. To powrót do zasad, które już znałam i lubiłam, ale trochę mi się po drodze pogubiły.

A ponieważ wszystko jest sterowane z kodu, jest odporne na rozjeżdżające się referencje prefabów (walka, którą toczę od zawsze i wszędzie), dużo łatwiejsze do testowania i dostosowuje się do różnych rozmiarów ekranu: tabletów, komputerów, telewizorów. To znaczy, że wszystkie moje przyszłe gry dostają te klocki za darmo, a ja mogę poświęcić czas na to, co jest specyficzne dla danej gry.

Obecny ekran: łagodniejszy kontrast, pastelowe kafelki ikon, spójne zaokrąglenia i nowa sekcja Accessibility z opcjami Reduce motion i Show touch location
Stan na dziś

Kiedy dwa lata temu zaczynałam z Unity, to była ściana, o którą ciągle się obijałam. W natywnym programowaniu mobilnym nawigacja i komponenty interfejsu są praktycznie za darmo. W Unity zaczęłam od pustego płótna i musiałam sama zdefiniować każdy podstawowy element: jak renderują się czcionki, jak od środka działa przełącznik, jak sprawić, żeby był przyjemny w ruchu. Było to wolne i szczerze mówiąc dość irytujące. Ale te podstawy są teraz po prostu tutaj, w moim własnym frameworku, a sam proces zrobił ze mnie lepszą inżynierkę: wiem, jak powstają cegły, a to dzięki temu można budować mury.

Napisz do mnie, jeśli chcesz zobaczyć więcej kulis tego, jak to wszystko powstaje. Będzie tego więcej!