13 04 2017

Czas na kolejny DevLog. Moim ostatnim celem była praca nad lepszym rozwiązaniem dla urządzeń mobilnych, ale okazało się, że pojawił się ciekawy pull request – w projekcie zaimplementowano…

…edytor poziomów!

Kolega Tomasz po raz kolejny okazał się bardzo pomocny. Zaimplementował w projekcie edytor poziomów! Zainteresowanych zapraszam do związanych z tym pull requestów: klik i klik.

Założyłem znowu TAG dla wersji kodu z tego DevLogu. Możecie sobie pobrać kod i się pobawić edytorem. Wystarczy, że podczas grania włączycie konsolę przeglądarki i wpiszecie enterEditMode(). Będziecie mogli przesuwać elementy, dodawać nowe… miłej zabawy. 🙂

Aktualnie nie miałem jeszcze czasu, by szczegółowo się mu przyjrzeć – parę rzeczy nie działa idealnie, ale jest to na pewno już funkcjonalne narzędzie, które bardzo pomaga przy tworzeniu nowych poziomów.

Testowanie różnych rozwiązań dla urządzeń mobilnych

W ostatnim DevLogu zaimplementowałem pierwszą wersję dla urządzeń mobilnych.

Takie prymitywne rozwiązanie, które nie do końca się sprawdza, bo zasłaniamy sobie palcami ekran.

Testowałem też trochę inny układ.

Inne rozwiązanie: prawy dalej dla skoku, a dla ruchu lewo w prawo istnieją dwa obszary jeden nad drugim. Wydawało mi się o trochę lepsze (nie zasłaniamy tak bardzo palcami), ale nadal nie było to fajne.

Odstawiłem na trochę ten problem (i po powrocie do problemu zrobiłem coś w miarę sensownego – o tym w dalszej części wpisu) i zabrałem się za skalowanie ekranu dla mobilek (ostatnio tego jeszcze nie było). Okazuje się, że jest to bardzo proste:

 if (!game.device.desktop){
     game.scale.scaleMode = Phaser.ScaleManager.USER_SCALE;
     game.scale.pageAlignHorizontally = true;
     game.scale.pageAlignVertically = true;
 }

Pozostał jedynie wybór jak to skalować. Pełny fullscreen, czy może zostawić na widoku elementy przeglądarki w smartfonie? Poniżej dwie opcje.

Fullscreen – ScaleManager.SHOW_ALL

Fullscreen z elementami przeglądarki – ScaleManager.USER_SCALE

Sprawdzałem parę przykładów gier webowych i jednak większość korzysta z opcji USER_SCALE i nie zakrywa elementów przeglądarki. Aktualnie zostawiłem domyślnie opcję USER_SCALE (czyli z elementami okna przeglądarki), ale chyba wbuduję niedługo opcję opcjonalnego włączenia sobie pełnego fullscrenu (ScaleManager.SHOW_ALL).

Akcelerometr z gyro.js

Opcje z klikalnymi obszarami na ekranie bardzo mnie odrzucały. Postanowiłem wypróbować akcelerometr. 😀

Wybór padł na gyro.js – dowiedziałem się o nim z tego wpisu.

Dużo się z gyro.js jeszcze nie bawiłem, ale bardzo fajny efekt uzyskałem w taki sposób:

 // setting gyroscope update frequency
 gyro.frequency = 10;
 gyro.startTracking(function(o) {
 // updating player velocity
   if(o.y < -0.4){
     gState.player.body.velocity.x = 150;
   } else if(o.y > 0.4){
     gState.player.body.velocity.x = -150;
   } else {
     gState.player.body.velocity.x = 0;
 }
 });

Chcecie wypróbować jak się gra przez przechylanie telefonu? Może tutaj spróbować. Gdy macie odwrócone kierunki, bo spróbuje obrócić telefon o 180 stopni – jeszcze nie zaimplementowałem wyłapywania w jaki sposób użytkownik obrócił urządzenie. 😉

Co za tydzień?

Postaram się zabrać w końcu za nowe poziomy – do DevLogu dorzucę coś nawet temat gamedesignu – znam parę fajnych materiałów na temat projektowania poziomów: podzielę się za tydzień tymi informacjami.

To tyle na ten tydzień w DevLogu. Do następnego!

Programowanie, a zmiana branży – doświadczenia 25 osób Szkoły programowania – moje zdanie