Tworzenie galaktyki
Moim planem było proceduralne wygenerowanie modelu galaktyki, który pozwoli umiejscowić dane dotyczące gwiazd w kontekście, a mimo to mieć nadzieję, że będzie wspaniałym widokiem na naszą Drogę Mleczną.
![Wczesny prototyp galaktyki.](https://web.dev/static/examples/images/image/T4FyVKpzu4WKF1kBNvXepbi08t52/S5ZbLFPB3RnfRTOT35mW.png?hl=pl)
Aby wygenerować Drogę Mleczną, wygenerowałam 100 000 cząstek i umieściłam je w spirale,naśladując sposób powstawania ramion galaktyki. Nie obawiałem się jednak specyfiki tworzenia spiralnych ramion, ponieważ będzie to model reprezentacyjny, a nie matematyczny. Udało mi się jednak dostrzec mniej lub bardziej poprawną liczbę spiralnych ramion i obrócić je we „właściwym kierunku”.
W późniejszych wersjach modelu Drogi Mlecznej zawęziłem znaczenie użycia cząstek na rzecz wyświetlania płaskiego obrazu galaktyki obok cząstek, nadając mu bardziej fotograficzny charakter. Faktyczne zdjęcie przedstawia galaktykę spiralną NGC 1232 oddaloną o około 70 milionów lat świetlnych od nas. Zmanipulowane obrazy przypominają Drogę Mleczną.
![Aby określić skalę galaktyki.](https://web.dev/static/examples/images/image/T4FyVKpzu4WKF1kBNvXepbi08t52/dQZVXko0eZdufru9zpqr.png?hl=pl)
![Odwróć](https://web.dev/static/examples/images/image/T4FyVKpzu4WKF1kBNvXepbi08t52/73JKSfkcxMnLw661RnKA.png?hl=pl)
Szukam Twojej ramki
Po znalezieniu odpowiedniego wiersza w narzędziu do śledzenia gry kolejnym krokiem jest znalezienie głównej pętli. Główna pętla wygląda jak powtarzający się wzorzec w danych śledzenia. Możesz poruszać się po danych śledzenia za pomocą klawiszy W, A, S i D: A i D służą do poruszania się w lewo i w prawo (do przodu i do tyłu w czasie) oraz W i S do powiększania i pomniejszania danych. Jeśli gra działa z częstotliwością 60 Hz, pętla główna powinna być wzorcem, który powtarza się co 16 milisekund.
![Wygląda jak 3 ramki wykonania](https://web.dev/static/examples/images/image/T4FyVKpzu4WKF1kBNvXepbi08t52/OaqgG1IveqQcmrvLbeHs.png?hl=pl)
Gdy orientujesz się w tematyce gry, możesz przeanalizować, co dokładnie robi Twój kod w każdej klatce. Używaj klawiszy W, A, S i D, aby powiększać obraz do momentu, aż tekst w polach funkcji będzie widoczny.
![Głęboko w ramach wykonywania kodu](https://web.dev/static/examples/images/image/T4FyVKpzu4WKF1kBNvXepbi08t52/LZZ7mv7XoGiC01rIOaWh.png?hl=pl)
Używanie tłumaczeń do poruszania się między widokami
![Przełączam 2 widoki.](https://web.dev/static/examples/images/image/T4FyVKpzu4WKF1kBNvXepbi08t52/ZbdixE36RlDboM08jwGH.gif?hl=pl)
Dla ułatwienia załóżmy, że są 2 widoki danych: lista i widok szczegółów. Gdy użytkownik kliknie element listy w widoku listy, widok szczegółów przesuwa się i wysuwa się widok listy.
Aby osiągnąć ten efekt, potrzebujesz kontenera dla obu widoków danych z ustawieniem overflow: hidden
. Dzięki temu oba widoki mogą znajdować się wewnątrz kontenera obok siebie bez wyświetlania poziomych pasków przewijania, a w razie potrzeby można przesuwać je z boku na boki kontenera.