Jak właściwie brzmi typografia?

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

Kurtyna w górę: Wielkie kino na ekranie

Podstawą ekranu startowego HALMA jest element HTML canvas, na którym wyświetlana jest animacja. Aby osiągnąć pożądany efekt, zdecydowaliśmy się na użycie silnika fizycznego Matter.js.

Przykład silnika fizyki

W pierwszym kroku animujemy podkreślenie tekstu. W tym celu za pomocą Matter.js utworzono pojedyncze kulki, które są utrzymywane w miejscu przez kilka „sprężyn”. Funkcja, która automatycznie umieszcza te ciała w równych odstępach między dwoma współrzędnymi, zapewnia prawidłowe pozycjonowanie wzdłuż dolnych linii tekstu – tam później znajdzie się podkreślenie.

Niech moc będzie z tobą – i twoim kursorem myszy

Za pomocą swego rodzaju „pola siłowego”, które otacza pozycję kursora myszy, ciała mogą być teraz wprawiane w drgania. Ponieważ są one ze sobą połączone, zaczynają oscylować. W ten sposób powstaje pożądany efekt „chwiania”. Aby nie doprowadzić do chaotycznego zachowania, ograniczamy maksymalną odległość od punktu początkowego za pomocą prostej rachunku wektorowego.

Tuning, czyli: „majsterkowanie”

Dzięki współdziałaniu różnych parametrów, takich jak masa, grawitacja, siła ciągu i tłumienie, możemy celowo wpływać na symulację i ją precyzyjnie dostrajać.

Tutaj widzisz pierwszy układ poszczególnych punktów wektorowych.

Na ekran: Czas na renderowanie

Tak obliczone animacje nie są jeszcze widoczne, istnieją do tej pory tylko wirtualnie w postaci współrzędnych i wektorów. Aby całość faktycznie zamanifestowała się na ekranie w ładnej animacji, w następnym kroku trzeba z nich wyrenderować konkretne piksele. Do tego celu nie używamy wbudowanego renderera Matter.js, lecz bibliotekę P5.js, ponieważ umożliwia ona rysowanie splajnów.

Za pomocą współrzędnych poszczególnych ciał można wyświetlić linię na elemencie Canvas, która bez dalszych obliczeń byłaby jednak bardzo kanciasta. Pierwsze próby wygładzenia krawędzi za pomocą krzywych Béziera pokazały, że krzywe Béziera lepiej sprawdzają się przy niewielkiej liczbie punktów kotwiczących. Wymagają one pozycji trzech kolejnych współrzędnych, co sprawia, że obliczenia są bardzo skomplikowane i czasochłonne.

Aby wygenerować zakrzywioną krzywą, użyliśmy zamiast tego wzoru na kubiczny splajn Hermite’a, który łatwiej zastosować do poszczególnych punktów wektorowych linii. Ponieważ musi być on ponownie obliczany w każdej klatce i powinien działać na każdym urządzeniu z szybkością co najmniej 30 FPS, bardzo ważne jest, aby ta funkcja pozostała jak najbardziej wydajna. Silnik fizyki uruchamiamy w osobnej pętli animacji, dzięki czemu jesteśmy niezależni od szybkości klatek i możemy uniknąć dziwnego zachowania symulacji.

Treści generowane dynamicznie przez JavaScript muszą być teraz skalowane w zależności od rozmiaru ekranu i rozdzielczości, prawidłowo umieszczone na Canvasie i ponownie obliczane przy każdej zmianie rozmiaru okna przeglądarki.

Gotowa aplikacja we frontendzie

Żaden dźwięk nie jest dobrym dźwiękiem

Na koniec, gdy tylko pole siłowe myszy zderzy się z jednym z ciał, „wystarczy” odtworzyć dźwięk. Ponieważ tradycyjne elementy <audio> najpierw buforują, zanim dźwięk zostanie odtworzony, potrzebne było inne rozwiązanie. Aby to wszystko działało w różnych przeglądarkach, wszystkie dźwięki są odtwarzane bezgłośnie raz podczas ładowania strony, co skutecznie osiąga wstępne ładowanie. W ten sposób ładowanie i buforowanie plików dźwiękowych jest niejako przyspieszone.

Wiadomo, że dobrą praktyką jest nie odtwarzanie dźwięku bez wyraźnej zgody użytkownika. W niektórych przeglądarkach i na prawie wszystkich urządzeniach mobilnych jest to również wymuszane i dźwięk może być odtwarzany dopiero po interakcji użytkownika. Dodajemy więc przycisk, za pomocą którego można włączać i wyłączać wyjście dźwięku.

Uciążliwy błąd: Kto chce „nie przeszkadzać”, musi czuć

Ekran startowy był wreszcie gotowy, rozpoczęliśmy fazę testów. Szybko okazało się, że wizualne wykonanie działało zgodnie z oczekiwaniami na prawie wszystkich urządzeniach. Jednakże, zbierały się wskazówki od pojedynczych testerów, którzy nie słyszeli dźwięku na swoich urządzeniach z iOS. Co za porażka, przecież dźwięk był podstawową częścią całej idei! Nastąpiły tygodnie zagadek i debugowania: problemu nie dało się odtworzyć ani zawęzić, wydawał się występować całkowicie losowo. Jedyną wspólną cechą było występowanie na urządzeniach z iOS, ale ani wersja iOS, ani Safari, ani samo urządzenie nie wydawały się mieć na to wpływu.

Napisano liczne, frustrujące linie kodu. W poszukiwaniu odpowiedzi lub przynajmniej małych wskazówek, jak można by odtworzyć błąd, przeglądano dokumentacje i przeszukiwano fora internetowe. Wszyscy HALMA-owcy, a w końcu nawet ich rodziny i znajomi, zostali zrekrutowani jako testerzy, przeprowadzono obszerne serie testów. Wszystko bez sukcesu. Prawie porzuciliśmy cały pomysł. Ale potem, raczej przez przypadek, udało nam się namierzyć błąd: Zgodnie z mottem „To nie błąd, to funkcja”, odtwarzanie dynamicznych dźwięków na iOS nie odbywa się, jak w przypadku innych urządzeń, przez kanał mediów, ale przez kanał dzwonków! Oznacza to, że dźwięk nie może być odtwarzany, dopóki telefon jest wyciszony lub aktywna jest funkcja „nie przeszkadzać”. Dlatego teraz dla wszystkich użytkowników iPhone’ów i iPadów obowiązuje zasada: Wyłącz „nie przeszkadzać” i włącz dźwięk!

Gotowy ekran startowy na iPadzie z odpowiednią wskazówką, aby wyłączyć wyciszenie w ustawieniach urządzenia