Roll It to eksperyment w Chrome, który pozwala na nowo odkryć klasyczną grę planszową na desce przy użyciu tylko przeglądarki na telefonie i komputerze. Przeglądarka na telefonie umożliwia celowanie i toczenie piłki ruchem nadgarstka, a przeglądarka na komputerze renderuje w czasie rzeczywistym grafikę torów Roll It za pomocą WebGL i Canvas. Oba urządzenia komunikują się przez Websockets. Brak aplikacji Bez pobierania. Brak tokenów. Potrzebujesz tylko nowoczesnej przeglądarki.
Pod kierunkiem Google Creative Lab firma Legwork opracowała interfejsy i środowisko gry, a potem we współpracy z partnerem ds. rozwoju, firmą Mode Set, stworzyła grę Roll It. W trakcie trwania projektu pojawiło się kilka wyjątkowych wyzwań. W tym artykule omawiamy niektóre techniki, które wykorzystaliśmy, triki, które odkryliśmy, oraz wnioski, które wyciągnęliśmy podczas tworzenia gry Roll It.
Przepływ pracy w 3D
Na początku jedną z trudniejszych kwestii było znalezienie najlepszego sposobu na przekształcenie modeli 3D z naszego oprogramowania w format pliku gotowego do użycia w internecie. Po utworzeniu zasobów w Cinema 4D modele zostały uproszczone i przekonwertowane na siatki z małą liczbą wielokątów. Każda siatka została oznaczona odpowiednimi tagami wyboru wielokątów, aby odróżnić części obiektu na potrzeby kolorowania i teksturowania. Następnie udało nam się wyeksportować plik w formacie Collada 1.5 (.dae) i zaimportować go do Blendera, programu 3D typu open source, aby utworzyć pliki zgodne z three.js. Po upewnieniu się, że modele zostały zaimportowane prawidłowo, wyeksportowaliśmy siatkę jako plik JSON, a oświetlenie zostało zastosowane za pomocą kodu. Oto szczegółowy opis podjętych przez nas działań:
Tworzenie kodu
Roll It został opracowany z użyciem bibliotek open source i działa natywnie w nowoczesnych przeglądarkach. Dzięki takim technologiom jak WebGL i WebSockets internet dorównuje już jakością konsolom w zakresie gier i multimediów. Wraz z uzyskiwaniem dostępu do coraz nowocześniejszych narzędzi do tworzenia stron HTML deweloperzy mogą tworzyć te treści w sposób coraz łatwiejszy i wygodniejszy.
Środowisko programistyczne
Większość pierwotnego kodu Roll It została napisana w CoffeeScript – czystym i zwięzłym języku, który po transkompilowaniu tworzy poprawny i sprawdzony kod JavaScript. CoffeeScript świetnie sprawdza się w przypadku programowania obiektowego dzięki świetnemu modelowi dziedziczenia i czystszemu zarządzaniu zakresem. Kod CSS został napisany za pomocą frameworka SASS, który udostępnia deweloperowi wiele przydatnych narzędzi do ulepszania arkuszy stylów projektu i zarządzania nimi. Dodanie tych systemów do procesu kompilacji wymaga trochę czasu na konfigurację, ale zdecydowanie warto, zwłaszcza w przypadku większych projektów, takich jak Roll It. Skonfigurowaliśmy serwer Ruby on Rails, aby automatycznie kompilować nasze zasoby podczas tworzenia, dzięki czemu wszystkie te kroki stały się przejrzyste.
Oprócz stworzenia przyjaznego i wygodnego środowiska kodowania ręcznie zoptymalizowaliśmy zasoby, aby zminimalizować liczbę żądań i przyspieszyć wczytywanie witryny. Każdy obraz przepuściliśmy przez kilka programów do kompresji: ImageOptim i ImageAlpha. Każdy program optymalizuje obrazy na swój sposób – bezstratnie lub ze stratą. Dzięki odpowiedniej kombinacji ustawień można znacznie zmniejszyć rozmiar pliku obrazu. Pozwala to nie tylko zaoszczędzić przepustowość podczas wczytywania obrazów zewnętrznych, ale także, po optymalizacji, przekształcić obrazy w znacznie mniejsze ciągi znaków zakodowane w formacie base64, aby można je było wstawiać w HTML, CSS i JavaScript. Ponieważ mowa o kodowaniu base64, za pomocą tej techniki umieściliśmy też pliki czcionek WOFF i SVG czcionki Open Sans bezpośrednio w pliku CSS, co spowodowało jeszcze mniejszą liczbę żądań.
Scena 3D z włączoną fizyką
THREE.js to wszechobecna biblioteka JavaScript do tworzenia grafiki 3D na potrzeby internetu. Zawiera ona zaawansowane obliczenia 3D i optymalizacje WebGL na poziomie sprzętu, które umożliwiają zwykłym śmiertelnikom łatwe tworzenie dobrze oświetlonych i pięknych interaktywnych scen 3D bez konieczności pisania niestandardowych shaderów czy wykonywania ręcznych przekształceń macierzy. Physijs to owijarka dla popularnej biblioteki fizyki w C++, która została przetłumaczona na JavaScript. Korzystając z tej biblioteki, symulowaliśmy to, jak piłka toczy się, skacze i odbija się w kierunku celu w 3D.
Od samego początku naszym celem było nie tylko realistyczne odwzorowanie toczenia piłki, ale też sprawienie, aby obiekty w grze wyglądały realistycznie. Wymagało to wielu iteracji dostosowywania ogólnego przyciągania w scenie Physijs, prędkości piłki podczas toczenia się po rzucie przez gracza, nachylenia rampy oraz właściwości tarcia i zwrotności (odbojności) piłki i materiałów rampy. Połączenie większej grawitacji i szybkości zaowocowało bardziej realistycznymi wrażeniami z gry.
Wygładzanie
Większość współczesnych przeglądarek i kart graficznych powinna korzystać z natywnego wygładzania krawędzi na poziomie sprzętu w środowisku WebGL, ale niektóre z nich mogą nie działać prawidłowo. Jeśli wygładzanie krawędzi nie działa natywnie, ostre i kontrastowe krawędzie w scenie THREE.js będą postrzępowane i brzydkie (przynajmniej w naszych wymagających oczach).
Na szczęście jest rozwiązanie: za pomocą fragmentu kodu możemy wykryć, czy platforma obsługuje wygładzanie krawędzi. Jeśli tak, to wszystko w porządku. Jeśli nie, możesz skorzystać z szeregu shaderów do postprodukcji dostępnych w bibliotece THREE.js. Chodzi o filtr antyaliasingowy FXAA. Dzięki temu, że renderowana scena jest ponownie rysowana za pomocą tego shadera w każdej klatce, linie i krawędzie są znacznie gładsze. Zobacz demonstrację poniżej:
// Check for native platform antialias support via the THREE renderer
// from: http://codeflow.org/entries/2013/feb/22/how-to-write-portable-webgl/#antialiasing
var nativeAntialiasSupport = (renderer.context.getParameter(renderer.context.SAMPLES) == 0) ? false : true;
Sterowanie grą za pomocą akcelerometru
Większość magii w Roll It pochodzi z gestu toczenia piłki, który gracz wykonuje za pomocą telefonu. Urządzenia mobilne mają od jakiegoś czasu dostęp do akcelerometru w przeglądarce, ale jako branża dopiero zaczynamy badać rozpoznawanie gestów na podstawie ruchu w internecie. Dane dostarczane przez akcelerometr telefonu nieco nas ograniczają, ale dzięki kreatywności możemy tworzyć nowe, wspaniałe funkcje.
Wykrywanie głównego gestu „przekręcenia” aplikacji Roll It rozpoczyna się od śledzenia 10 najnowszych aktualizacji akcelerometru pochodzących z okna zdarzenia deviceorientation. Odejmując od bieżącej wartości pochylenia poprzednią wartość pochylenia, przechowujemy różnicę kąta między zdarzeniami. Następnie, poprzez ciągłe sumowanie ostatnich 10 wartości delta kąta, możemy wykrywać ciągłe obracanie się telefonu w przestrzeni. Gdy telefon przekroczy próg zmiany kąta skanowania, uruchamiamy przewijanie. Następnie, znajdując największe pojedyncze nachylenie w ramach tego przeszukiwania, możemy oszacować prędkość piłki. W grze Roll It! prędkość jest normowana za pomocą sygnatur czasowych, które są dołączane do każdej aktualizacji akcelerometru. Dzięki temu można wygładzić zmienną prędkość, z jaką akcelerometr przesyła dane do przeglądarki na różnych urządzeniach.
Komunikacja WebSockets
Gdy gracz toczy kulę za pomocą telefonu, telefon wysyła do laptopa wiadomość z prośbą o wystrzelenie piłki. To „przeniesienie” jest wysyłane w postaci obiektu danych JSON przez połączenie WebSocket między dwoma maszynami. Dane JSON są niewielkie i składają się głównie z typu wiadomości, szybkości rzutu i kierunku celowania.
{
"type": "device:ball-thrown",
"speed": 0.5,
"aim": 0.1
}
Cała komunikacja między laptopem a telefonem odbywa się za pomocą małych komunikatów JSON, takich jak ten. Za każdym razem, gdy stan gry na komputerze zostanie zaktualizowany lub użytkownik przechyli telefon lub kliknie przycisk, między urządzeniami jest przesyłana wiadomość WebSocket. Aby komunikacja była prosta i łatwo zarządzalna, wiadomości WebSocket są przesyłane za pomocą jednego punktu wyjścia z dowolnej przeglądarki. W odwrotnej sytuacji w przeglądarce odbierającej jest jeden punkt wejścia, a jeden obiekt WebSocket obsługuje wszystkie wiadomości przychodzące i wychodzące po obu stronach. Po otrzymaniu wiadomości WebSocket dane JSON są ponownie rozgłaszane w aplikacji JavaScript za pomocą metody jQuery trigger(). W tym momencie dane wejściowe zachowują się tak samo jak inne niestandardowe zdarzenia DOM i mogą być pobierane i przetwarzane przez dowolny obiekt w aplikacji.
var websocket = new WebSocket(serverIPAddress);
// rebroadcast incoming WebSocket messages with a global event via jQuery
websocket.onmessage = function(e) {
if (e.data) {
var obj = JSON.parse(e.data);
$(document).trigger(data.type, obj);
}
};
// broadcast outgoing WebSocket messages by passing in a native .js object
var broadcast = function(obj) {
websocket.send(JSON.stringify(obj));
};
Serwery WebSocket w grze Roll It są tworzone na bieżąco, gdy 2 urządzenia są synchronizowane z kodem gry. Backend aplikacji Roll It został stworzony na platformach Google Compute Engine i App Engine przy użyciu języka Go.
Ekrany menu z użyciem funkcji nachylenia
Oprócz wiadomości WebSocket używanych podczas gry w reakcji na zdarzenia, w grze Roll It! menu są obsługiwane przez przechylanie telefonu i klikanie przycisku, aby potwierdzić wybór. Wymaga to bardziej spójnego przesyłania danych pochylenia z telefonu na laptopa. Aby zmniejszyć wykorzystanie przepustowości i uniknąć wysyłania niepotrzebnych aktualizacji, te wiadomości są wysyłane tylko wtedy, gdy kąt nachylenia urządzenia zmieni się o więcej niż kilka stopni. Nie ma sensu wysyłanie strumienia danych o pochyleniu, jeśli telefon leży na stole. Szybkość transmisji jest również ograniczona – w Roll It wysyłane jest nie więcej niż 15 wiadomości WebSocket na sekundę, nawet jeśli urządzenie jest aktywnie przechylane.
Gdy wartości pochylenia zostaną wykryte na komputerze, są one interpolowane w czasie za pomocą funkcji requestAnimationFrame, aby zapewnić płynność. W efekcie otrzymujemy obracające się menu i kulkę, która się toczy, aby wskazać wybór użytkownika. Gdy telefon wysyła dane pochylenia, te elementy DOM są aktualizowane w czasie rzeczywistym przez ponowne obliczanie przekształcenia CSS w pętli requestAnimationFrame. Pojemnik menu po prostu się obraca, ale piłka wydaje się toczyć się po podłodze. Aby to osiągnąć, stosujemy podstawową trygonometrię, aby powiązać współrzędną x kul z jej obrotem. Proste równanie to: obroty = x / (średnica * π)
Podsumowanie
Roll It to znak czasów. Dzięki projektom open source, które umożliwiły jego rozwój, mocy obliczeniowej urządzeń na naszych biurkach i w kieszeniach oraz rozwojowi internetu jako platformy, obecnie jesteśmy w fascynującym i przełomowym momencie, jeśli chodzi o korzystanie z otwartej sieci. Jeszcze kilka lat temu większość tej technologii była dostępna tylko w systemach zastrzeżonych, które nie mogły być swobodnie używane ani rozpowszechniane. Obecnie dzięki codziennemu tworzeniu i udostępnianiu nowych elementów układanki możemy tworzyć bardziej złożone treści przy mniejszym nakładzie pracy i z większym wykorzystaniem wyobraźni. Na co czekasz? Utwórz coś wspaniałego i udostępnij to światu.
