Obrazy

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 systemu cząstek Drogi Mlecznej.

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ą.

Każda jednostka GL jest rokiem świetlnym. W tym przypadku kula ma szerokość 110 tys. lat świetlnych i obejmuje układ cząstek.

Tak wygląda strona widoczna na ekranie podczas odwracania lub przeciągania.

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 na 3 ramki wykonywania

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.

Zagłęb się w ramkę wykonania

Sukces: spróbuj utrzymać 60 klatek na sekundę we wszystkich animacjach. Dzięki temu użytkownicy nie zobaczą zacinających się animacji, które zakłócałyby ich działanie. Upewnij się, że w przypadku każdego animowanego elementu ustawiono parametr will-change we wszystkich elementach, które chcesz zmienić, znacznie przed rozpoczęciem animacji. W przypadku przejść do oglądania prawdopodobnie lepiej będzie użyć narzędzia will-change: transform.

Używanie tłumaczeń do poruszania się między widokami

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.