Jak programiści dostosowują automaty do urządzeń mobilnych

Gniazdo mobilne nie jest mniejszą kopią pulpitu. Powinien być czytelny na ekranach 5-6 ″, reagujący po dotknięciu, stabilnie pracować na urządzeniach budżetowych, przestrzegać ograniczeń przeglądarki/systemu operacyjnego i nie „jeść” baterii. Poniżej znajduje się plan systemu: od UX i grafiki do sieci, audio i QA.

1) UX pod palcami i małym ekranem

Wymiary i strefy dotykowe: interaktywne ≥ 44-48 px; przyciski krytyczne - w obszarze kciuków (dolna połowa, prawa/lewa krawędź w zależności od dłoni).

Bezpieczne obszary: rozliczanie "bangs', dynamiczna wyspa, zaokrąglanie; rama wewnętrzna (bezpieczna wkładka) dla górnych elementów.

Orientacje: portret - scenariusz podstawowy; krajobraz - oddzielne układy/ponowne rozmieszczenie HUD. Blok „nadgotowanie” w momencie liczenia wygranej.

Hierarchia wizualna: symbole i wygrane> tło i efekty. Kontrast tekstu, czcionki MSDF, zarys dla numerów.

Operacja jednoręczna: główne WWiI z dołu; panel zakładów i „Spin” w odległości kciuka.

Pomiń i turbo: obowiązkowe; Nie ukrywaj się. Dodaj „mniej ruchu” dla wrażliwych.

Puste stany i wskazówki: krótko, w miejscu działania, bez przeciążania modami.

2) Responsywne układy i siatka adaptacyjna

Siatka: 4-6 kolumn + stałe „kotwice” dla Spin/Stakes.

Aspekty: 16:9, 19. 5:9, 20:9 - oddzielne ustawienia pozycji; skalowanie po stronie „krótkiej”.

Kamera i maski: okno bębna jest niezmienne w konstrukcji pikseli; tło - rozciągnięcia/ramki bez ważnej zawartości.

Tekst: automatyczne dopasowanie w zakresie (min/max), łamanie słów, formaty ICU liczb/walut.

3) Wydajność: Docelowy 60 FPS bez przegrzania

Budżet ramowy: 16. 7 ms. Animacje - czas jazdy, nie „przez ramki”.

Butching: atlasy, grupowanie według materiałów/blanding; zredukowane połączenia losowania.

Surowe: Wyciąć przezroczyste „arkusze”, użyć masek/szablonów.

Pamięć: pula obiektów, ponowne wykorzystanie cząstek; tekstury z ASTC/ETC2/BCn + fallback.

LOD: wyłączanie ciężkich zacieniaczy/efekty pokonkursowe dla budżetu-GPU; uproszczone tła.

Przyczepności GC: unikać przydziałów w cyklach animacji; wstępnego załadunku/wstępnego utworzenia emiterów.

Wkładki wideo: krótkie cykle, niski poziom bitrate, stop podczas minimalizacji/pracy w tle.

Ciepło i akumulator: skrócić czas trwania ciężkich scen, ograniczyć częstotliwość timerów tła.

4) Grafika i aktywa

Atlasy: 2048-4096 px, według nazw skrótów (cache-busting), grupa UI/FX oddzielnie.

Tekstury: kompresowane formaty (ASTC dla iOS/nowego Androida; ETC2 dla Androida; BCn - pulpit/WebGL2); WebP/PNG jako rezerwa.

Czcionki: MSDF/SDF + style przez shaders (blask/obrys), zamiast wielu zestawów PNG.

Cząstki: mieszanie addytywne, krótkie życie, ciągnięcie.

Po efektach: połowa/ćwierć res kwitnie, miękka winieta; odłączenie słabych urządzeń.

Listy sprite bębnów: wstępnie upieczone i „cienkie”, bez zbędnych pustek; Przystawka pikseli do przewijania.

5) Ograniczenia audio, wibracji i systemu

Zasady autoplay: dźwięk zaczyna się tylko gestem; wyświetla zrozumiały przełącznik „sound/silence”.

Mikser: kacząc do głosu/nośnika użytkownika; równoczesny limit SFX.

Haptics: krótkie wzory wibracji na stopach bębna/duża wygrana; opcja „off”.

Tryb tła: zatrzymać animacje/audio przy wyjściu w tle/blokada ekranu.

6) Zrównoważony rozwój sieci i offline

Ścieżka krytyczna: 'spin '/' bonus' - krótkie RPC bez zewnętrznych zależności; wykładniczy retrai z jitter.

Idempotence: key on write operations (bet/pay) - repeat → ten sam wynik.

Serwis Worker (w sieci): pamięć podręczna aktywów, manifest z krótkim TTL, ocieplenie przed wydarzeniami.

Placeholders: ekrany szkieletowe, lokalna kolejka zdarzeń interfejsu użytkownika, wyczyścić statusy niedostępne dla sieci.

7) Różnice platformy i kontenerów

iOS Safari: ścisły autoplay, pamięć WebGL, limity czasu tła.

Android Chrome/WebView: więcej wariantów GPU/sterowników - test Mali/Adreno.

PWA: Ekran główny, pamięć podręczna offline, ale push/pay ograniczona zasadami.

Native/Unity: pakiety WebGL są cięższe, ale pojedynczy kod dla iOS/Androida; Adresy, kompresja tekstury na platformę.

WebView w aplikacjach: uwzględniać politykę stora, prywatność i wymagania RG.

8) Lokalizacja i dostępność

Języki: długość łańcucha, prawostronne skrypty, formaty daty/waluty; Wiadomości OIOM.

Kontrast i rozmiar: tryb wysokiego kontrastu, skalowalne czcionki, tekst krytyczny - bez różnic nasycenia.

Mniejszy ruch: paralaksa/szyje wyłączone; alternatywne skutki.

9) Odpowiedzialna gra i uczciwość

Narzędzia WG: szybki dostęp do limitów/timeout/self-exclusion; „cichy tryb” w nocy.

Uczciwość wyniku: obliczanie wyniku na serwerze przed animacją; UX nie wpływa na szansę wypadnięcia.

Jurysdykcja: auto-spin/buy-feature/speed - przez phicheflags według regionu.

10) matryca QA i obserwowalność

Matryca urządzenia: 8-12 referencji (iPhone base/Pro, budget/mid Android z Mali/Adreno, tabletki).

Profilowanie: FPS, wywołania losowania, czas GPU/CPU, pamięć/VRAM, jąkania/GC.

Crash/ANR: monitorowanie, powtarzanie rund problemowych przez materiał siewny/etap.

Deski rozdzielcze: First Playable, sieci p95, błąd spinu, temperatura (jeśli dostępna), retencja D1/D7, dźwięk na konwersji, pomiń ułamek.

11) Eksperymenty mobilne A/B

Hipotezy: Pozycja spinu, rozmiar CTA, długość zatrzymania bębna, zamówienie samouczka, miękki vs twardy bonus intro.

Poręcze: katastrofa/ANR, sieci p95, reklamacje; podczas degradacji - auto-rollback ficheflag.

Segmentacja: według urządzenia/GPU/kanał ruchu - efekty mogą się różnić.

12) Anty-wzory (czego nie robić)

Skopiuj pulpit 1:1: mały tekst, przyciski niedostępne.

Ogromne efekty wideo/tła na wszystkich urządzeniach → przegrzanie i krople FPS.

Losowy GC przy obliczaniu wygranych: przydziały w kleszczach animacji.

Twardy enum w kliencie: spada z nową wartością z serwera.

Prawdopodobieństwo demo → cios do zaufania i zgodności.

Czekanie na sieć bez sprzężenia zwrotnego: „martwe” przyciski, brak statusów.

13) Mini przepisy kulinarne

Szybki portret leyout

Dolny panel: Spin (w prawo) + Bet (w lewo), w środku - liczniki.

Bęben okno fix, tło - parallax o 5-10%.

Duża wygrana: cyfry MSDF + blask, pomiń przycisk.

Opłacalny efekt wygranej

Tytuł „scale-bounce”, dodatek-confetti ≤ 1 c, half-res bloom.

Wibracja jest krótka (10-20 ms), dźwięk to jedna mieszanka z markerami.

Stabilny WebGL na urządzeniach budżetowych

Jeden atlas interfejsu użytkownika + jeden atlas postaci; po skutkach są wyłączone; 30 FPS „oszczędza energię” podczas bezczynności.

14) Duża mobilna lista kontrolna adaptacji

UX/Leyout

Strefy dotykowe ≥ 44-48 px, główne MIK w strefie kciuka
Bierze się pod uwagę bezpieczne obszary/grzywki; portret/krajobraz wypracowany
Skip/turbo/mniej ruchu dostępne

Grafika/Perf

60 FPS (referencje), zaproszenie do składania wniosków/nadmierne wydatki w budżetach
Kompresje teksturowe (ASTC/ETC2/BCn) + awaryjne
LOD/wyłączanie ciężkich efektów, ciągnięcie cząstek
Pakiet i pierwsza gra do celów

Sieć/niezawodność

Idempotentne operacje pisania, przekład z jitter
Serwis Worker/Cache Strategy (Web)
Clear offline/error statuses

Audio/Vibro

Autoplay tylko po gestze, mikser i limit SFX
Haptics z opcją off, pauza w tle

Zgodność/RG

Bandery jurysdykcyjne, uczciwy wynik na serwerze
Szybki dostęp do limitów/przerw/samodzielnego wykluczenia

QA/monitorowanie

Matryca urządzenia przeszła; Profile GPU/CPU/pamięci
Deski rozdzielcze sieci p95/FPS/błędy/awarie
Powtórki nasion/etapów dla biletów

Dostosowanie gniazda do urządzeń mobilnych to równowaga czytelnego UX, starannej grafiki, stabilnej sieci i etyki. Drużyny wygrywają, gdy projektują ekran dla palców i bezpiecznych obszarów, posiadają 60 FPS i lekki pakiet, uwzględniają zasady iOS/Android, testują prawdziwe urządzenia i włączają funkcje flagami z kanarkami. Więc automaty pozostają piękne, szybkie i uczciwe na każdym smartfonie.