Jak właściwie brzmi typografia?

Interaktywny ekran startowy HALMA możesz przetestować bezpośrednio tutaj, na obrazku!

Scenografia: rozrywka na dużym ekranie

Ekran startowy HALMA oparty jest na HTML canvas Element, na który rzutowana jest animacja. Aby uzyskać pożądany efekt, zdecydowaliśmy się na użycie silnika fizycznego. Materia.js.

Przykład silnika fizycznego

Pierwszym krokiem jest animacja podkreślenia tekstu. W tym celu stworzono pojedyncze kule za pomocą Matter.js, które są utrzymywane na miejscu przez kilka „sprężynek”. Funkcja zapewnia prawidłowe pozycjonowanie wzdłuż wydłużeń tekstu – tam, gdzie później pojawi się podkreślenie – poprzez automatyczne umieszczanie tych kul w regularnych odstępach między dwoma współrzędnymi.

Niech Moc będzie z Tobą – i Twoim kursorem myszy.

Za pomocą swoistego „pola siłowego” otaczającego wskaźnik myszy, obiekty można teraz wprawić w drgania. Ponieważ są połączone, zaczynają oscylować, tworząc pożądany efekt „drgania”. Aby zapobiec chaotycznemu zachowaniu, ograniczamy maksymalną odległość od punktu początkowego za pomocą prostego obliczenia wektorowego.

Strojenie, czyli także: „majsterkowanie”

Poprzez wzajemne oddziaływanie różnych parametrów, takich jak masa, grawitacja, siła rozciągająca i tłumienie, możemy szczegółowo wpływać na symulację i ją dostrajać.

Tutaj możesz zobaczyć początkowe rozmieszczenie poszczególnych punktów wektora.

Na ekranie: Trwa renderowanie.

Obliczone animacje nie są jeszcze widoczne; obecnie istnieją jedynie wirtualnie w postaci współrzędnych i wektorów. Aby zamanifestować je jako atrakcyjną wizualnie animację na ekranie, kolejnym krokiem jest renderowanie rzeczywistych pikseli. W tym celu nie użyjemy renderera zintegrowanego z Matter.js, lecz biblioteki P5.js , ponieważ umożliwia ona rysowanie krzywych.

Wykorzystując współrzędne poszczególnych brył, można wyświetlić linię na elemencie canvas, ale bez dalszych obliczeń linia ta początkowo byłaby bardzo postrzępiona. Wstępne próby wygładzenia krawędzi za pomocą krzywych Béziera wykazały, że krzywe Béziera lepiej sprawdzają się w przypadku niewielkiej liczby punktów kontrolnych. Wymagają one jednak podania położenia trzech kolejnych współrzędnych, co sprawia, że ​​obliczenia są bardzo skomplikowane i czasochłonne.

Aby wygenerować linię krzywą, użyliśmy wzoru na sześcienną funkcję sklejaną hermitowską, którą łatwiej zastosować do poszczególnych punktów wektorowych linii. Ponieważ wymaga ona przeliczania dla każdej klatki i powinna działać na każdym urządzeniu z liczbą klatek na sekundę co najmniej 30, kluczowe jest, aby ta funkcja działała jak najwydajniej. Silnik fizyczny uruchamiamy w jego własnej pętli animacji, co czyni go niezależnym od liczby klatek na sekundę i zapobiega wszelkim nietypowym zachowaniom symulacji.

Zawartość dynamicznie generowana przez JavaScript musi teraz być skalowana zgodnie z rozmiarem i rozdzielczością ekranu, prawidłowo umieszczana na płótnie i przeliczana za każdym razem, gdy zmieniany jest rozmiar okna przeglądarki.

Ukończona aplikacja w front-endzie

Brak dźwięku jest uważany za przejaw dobrych manier.

Wreszcie, gdy pole siłowe myszy zderzy się z jednym z obiektów, wystarczy odtworzyć dźwięk . Ponieważ konwencjonalne elementy audio wymagają buforowania przed odtworzeniem dźwięku, konieczne było zastosowanie innego rozwiązania. Aby zapewnić kompatybilność między przeglądarkami, wszystkie dźwięki są odtwarzane jednokrotnie w trybie cichym po załadowaniu strony, tworząc w ten sposób preload. To powoduje wstępne załadowanie i buforowanie plików dźwiękowych.

Dobrą praktyką jest nieodtwarzanie dźwięku bez wyraźnej zgody użytkownika. W niektórych przeglądarkach i na niemal wszystkich urządzeniach mobilnych jest to egzekwowane, a dźwięk może być odtwarzany dopiero po interakcji użytkownika. Dlatego dodajemy przycisk umożliwiający włączanie i wyłączanie dźwięku.

Niepokojący błąd: Ci, którzy chcą „nie przeszkadzać”, muszą czuć się

Ekran startowy został w końcu ukończony i rozpoczęliśmy fazę testów. Szybko stało się jasne, że wizualna implementacja działała zgodnie z oczekiwaniami na niemal wszystkich urządzeniach. Jednak zaczęły napływać zgłoszenia od testerów, którzy nie słyszeli dźwięku na swoich urządzeniach z systemem iOS. Co za porażka, skoro dźwięk był fundamentalnym elementem całej koncepcji! Nastąpiły tygodnie łamigłówek i debugowania: problemu nie dało się odtworzyć ani wyizolować; zdawał się występować całkowicie losowo. Jedynym wspólnym czynnikiem było występowanie problemu na urządzeniach z systemem iOS, ale ani iOS, ani wersja Safari, ani samo urządzenie nie wydawały się mieć na to żadnego wpływu.

Napisano niezliczone, frustrujące linijki kodu. Szukając odpowiedzi lub przynajmniej wskazówek, jak odtworzyć błąd, wertowano dokumentację i przeszukiwano fora internetowe. Wszyscy członkowie HALMA, a ostatecznie nawet ich rodziny i przyjaciele, zostali zrekrutowani jako osoby testowe i przeprowadzono szeroko zakrojone testy. Wszystko na próżno. Prawie porzuciliśmy cały pomysł. Ale potem, niemal przypadkiem, znaleźliśmy błąd: Zgodnie z mottem „To nie błąd, to funkcja ”, odtwarzanie dynamicznych dźwięków w systemie iOS nie odbywa się przez kanał multimedialny, jak na innych urządzeniach, ale przez kanał dzwonka! Oznacza to, że żaden dźwięk nie może być odtwarzany, gdy telefon jest wyciszony lub włączony jest tryb „Nie przeszkadzać”. Dlatego rada dla wszystkich użytkowników iPhone'a i iPada brzmi: wyłącz tryb „Nie przeszkadzać” i włącz dźwięk!

Gotowy ekran startowy na iPadzie z komunikatem informującym o konieczności wyciszenia dźwięku w ustawieniach urządzenia.