Konwertuj gry flash do HTML5

Flash powoli porzucony przez Adobe na korzyść HTML5 i JavaScript; Jego oficjalny koniec życia jest ustalany na rok 2020. I tam właśnie w tym artykuł pojawi się przydatny.

• Odbuduj stronę Flash 2004 na 2018 roku

Wskazówki opisane poniżej mają na celu pomóc html5 twórcom gier uniknąć wspólnych błędów podczas konwersji gier flash do JavaScript, a także sprawiając, że cały proces rozwoju jest jak najbardziej sprawny. Wszystko, czego potrzebujesz, jest podstawową znajomość JavaScript, Webgl i Faser Framework.

Zmiana projektu gry z SWF do JavaScript może dać lepiej doświadczenie użytkownika , co z kolei daje mu nowoczesny wygląd. Ale jak to zrobić? Czy potrzebujesz dedykowanej konwertera gry JavaScript, aby pozbyć się tej przestarzałej technologii? Cóż, flash do konwersji HTML5 może być kawałkiem ciasta - Oto, co ma doświadczony deweloper Gra JavaScript ma do powiedzenia o materii.

Lubię zachować prosty proces projektowania? ZA Kreator strony internetowej i prawo hosting Dostawca może trzymać ten sposób.

01. Popraw doświadczenie gry HTML5

Konwersja gry na inną platformę jest doskonałą okazją do ich poprawy, naprawienia i zwiększenia publiczności. Poniżej znajduje się kilka rzeczy, które można łatwo zrobić i warto rozważyć:

• Wspieranie urządzeń mobilnych
  Konwersja z Flash do JavaScript umożliwia osiągnięcie szerszej publiczności - użytkownicy urządzeń mobilnych obsługuje elementy sterujące ekranem dotykowym zwykle muszą być wdrażane do gry. Na szczęście, zarówno urządzenia na Androida, jak i IOS teraz również obsługują Webgl, dzięki czemu można łatwo osiągnąć 30 lub 60 fps renderowania. W wielu przypadkach 60 FPS nie spowoduje żadnych problemów, co będzie poprawić tylko z czasem, ponieważ urządzenia mobilne stają się coraz bardziej występujące.
• Poprawa wydajności
  Jeśli chodzi o porównywanie ActionScript i JavaScript, ten ostatni jest szybszy. Poza tym, konwertowanie gry jest dobrą okazją do ponownego odwiedzenia algorytmów używanych w kodzie gry. Dzięki rozwojowi gry JavaScript możesz zoptymalizować je lub całkowicie rozpraszać nieużywany kod, który pozostawiony przez oryginalnych programistów.
• Naprawianie błędów i ulepszenia do rozgrywki
  Posiadanie nowych programistów, którzy szukają kodu źródłowego gry, może pomóc naprawić znane błędy lub odkryć nowe i bardzo rzadkie. Uczyniłoby to grę mniej irytujące dla graczy, co sprawi, że spędzili więcej czasu na swojej stronie i zachęciły ich do wypróbowania innych gier.
• Dodawanie analityki internetowej.
  Oprócz śledzenia ruchu, analityka internetowa może być również używana do zbierania wiedzy na temat tego, jak gracze zachowują się w grze i gdzie utknęli podczas rozgrywki.
• Dodawanie lokalizacji
  Zwiększyłoby to publiczność i jest ważne dla dzieci z innych krajów grających w twoją grę. A może twoja gra nie jest w języku angielskim i chcesz wspierać ten język?

02. Osiągnij 60 fps

Jeśli chodzi o rozwój gry JavaScript, może być kuszenie, aby wykorzystać HTML i CSS do przycisków w grze, widżety i innych elementów GUI. Nasza rada ma być tutaj ostrożna. Jest sprzeczne, ale faktycznie wykorzystuje elementy DOM jest mniej występujące na kompleksowych grach, a to zyskuje więcej znaczenia na telefonie komórkowym. Jeśli chcesz osiągnąć stałe 60 FPS na wszystkich platformach, może być wymagane rezygnację z HTML i CSS.

Nieinteraktywne elementy GUI, takie jak pręty zdrowia, bary amunicyjne lub liczniki wynikowe można łatwo zaimplementować w Phaser, używając zwykłych zdjęć (klasa "Phaser.image"), wykorzystując właściwość ".Crop" do przycinania i "Phaser. Tekst "Klasa dla prostych etykiet tekstowych.

Elementy interaktywne, takie jak przyciski i pola wyboru, można zaimplementować za pomocą wbudowanej klasy "Phaser.button". Inne, bardziej złożone elementy mogą składać się z różnych prostych typów, takich jak grupy, obrazy, przyciski i etykiety tekstowe.

03. Ładowanie niestandardowych czcionek

Jeśli chcesz renderować tekst z niestandardową czcionką wektorową (np. TTF lub OTF), musisz upewnić się, że czcionka została już załadowana przez przeglądarkę przed wykonaniem dowolnego tekstu. Phaser V2.6 nie zapewnia rozwiązania tego celu, ale może być używana inna biblioteka - Web Font Loader. .

Zakładając, że masz plik czcionki i zawiera ładowarkę Web Font na swojej stronie, a następnie poniżej jest prostym przykładem, jak załadować czcionkę. Wykonaj prosty plik CSS, który zostanie załadowany przez Web Font Loader (nie musisz zawierać go w HTML):

 @ font-face {
  // Ta nazwa będziesz używać w JS
  Czcionka: "GunPlay";
  // URL do pliku czcionki, może być względny lub absolutny
  SRC: format URL ("./ Fonts / GunPlay.ttf ') Format ("TrueType");
  Czcionka: 400;
} 

Teraz zdefiniuj zmienną globalną nazwaną WebFontConfig. Coś tak prostego, jak zwykle wystarczy:

 var WebFontconfig = {
  "Klasy": Fałsz,
  "limit czasu": 0,
  "Aktywny": Funkcja () {
  // czcionka została pomyślnie załadowana ...
  },
  'zwyczaj': {
  "Rodziny": ["GunPlay"],
  // URL do wcześniej wymienionych CSS
  "URLS": ['Style / Fonts.css']
  }
}; 

Pamiętaj, aby umieścić swój kod w "Aktywne" wywołanie zwrotne pokazane powyżej. I to wszystko!

04. Zapisz grę

Teraz jesteśmy w środku naszej lampy błyskowej do konwersji JavaScript - nadszedł czas, aby dbać o shaders. Aby uporać przechowywać lokalne dane w ActionScript, którego używasz klasy "SharidObject". W JavaScript prosta wymiana jest Lokalystorage API. , co pozwala na przechowywanie ciągów do późniejszych pobierania, przeładowywania przeładowania strony.

Zapisywanie danych jest bardzo proste:

 Var Progress = 15;
localstorage.SetiTem ("mygame.progress", postęp); 

Zauważ, że w powyższym przykładzie zmienna "Progress", która jest liczbą, zostanie przekonwertowany na ciąg.

Ładowanie jest proste, ale pamiętaj, że pobrane wartości będą ciąże lub null, jeśli nie istnieją.

 Var Progress = Parseint (LocalStorage.getitem ("Mygame.progress")) || 0; 

Tutaj zapewniamy, że wartość powrotowa jest liczbą. Jeśli nie istniało, 0 zostanie przypisany do zmiennej "postępu".

Możesz także przechowywać i odzyskać więcej złożonych struktur, na przykład JSON:

 Var Stats = {'Cale': 13, "WINS": 7, "straty": 3, "Dysponaty": 1
};
localstorage.setitem ("mygame.stats", JSON.Stringify (statystyki));
...
var stats = json.parse (localstorage.getitem ("mygame.stats")) || {}; 

Są przypadki, gdy obiekt "Localstorage" nie będzie dostępny. Na przykład podczas korzystania z pliku: // protokołu lub gdy strona jest ładowana w prywatnym oknie. Możesz użyć oświadczenia "Spróbuj", aby zapewnić, że kod będzie kontynuować pracę i używać domyślnych wartości, które są wyświetlane w poniższym przykładzie:

 Spróbuj {
    var Progress = Localstorage.getitem ("Mygame.progress");
} Catch (wyjątek) {
  // LocalStorage niedostępny, użyj wartości domyślnych
} 

Inną rzeczą do zapamiętania jest to, że zapisane dane są zapisywane na domenę, a nie na URL. Jeśli więc istnieje ryzyko, że wiele gier jest hostowanych w jednej domenie, lepiej jest użyć prefiksu (przestrzeni nazw) podczas zapisywania. W powyższym przykładzie "Mygame". jest prefiksem i zazwyczaj chcesz go zastąpić nazwą gry.

Jeśli twoja gra jest osadzona w iframe, a następnie Localstorage nie będzie się utrzymywać na iOS. W takim przypadku musisz przechowywać dane w rodzica iframe.

05. Domyślny Shader Fragment

Gdy Phaser i Pixijs renderują sprite, używają prostego wewnętrznego fragmentu Shader. Nie ma wielu funkcji, ponieważ jest dostosowany do prędkości. Jednak możesz zastąpić ten shader do celów. Na przykład możesz wykorzystać go do inspekcji przedstawienia lub wspierać więcej funkcji do renderowania. Poniżej znajduje się przykład sposobu dostarczania własnego domyślnego cieniowania fragmentu do Phaser V2.

 Funkcja Preload () {
  this.load.shader ("filename.frag", "Shaders / FileName.Frag");
}
Funkcja Utwórz () {
  var render = this.Renderer;
  var batch = renderer.spritebatch;
  Batch.defaultShader =.
  Nowy Pixi.abstractfilter (to.Cache.getshader ("nazwa_plika.frag"));
  Batch.SetContext (Render.gl);
} 

06. Zmień metodę barwienia

Niestandardowy domyślny shader może być użyty do zastąpienia domyślnych metod barwiących w Phaser i Pixijs. Tinting w Phaser i Pixijs działa poprzez pomnożenie tekstur pikseli przez dany kolor. Mnożenie zawsze ciemnieje kolorów, co oczywiście nie stanowi problemu; Po prostu różni się od zabrzmienia flash. Dla jednej z naszych gier potrzebowaliśmy, aby wdrożyć barwienie podobne do błysku i postanowionego, że można użyć niestandardowego domyślnego shadera. Poniżej znajduje się przykład takiego fragmentu Shader:

// konkretny wariant odcienia, podobny do zabrzmienia lampy błyskowej, która dodaje
// do koloru i nie pomnoży. Negatywny kolor
// musi być dostarczany dla tego cieniowania, aby poprawnie pracować, tj. Ustaw
// Sprite.tint do 0, aby zamienić całe sprite na białe.
Precyzyjny pływak LOWP;
Varying Vec2 Vtexturecoord;
Vary w Vec4 Vec4;
jednolity Sampler2D Usampler;
void main (void) {
  VEC4 F = tekstura2d (UBPLER, VTEXTURECORORD);
  Float A = Clamp (VCALOR.A, 0,00001, 1.0);
  GL_FRAGCOLOR.RGB = F.RGB * VCALOR.A + Zacisk (1,0 - VCALOR.RGB / A, 0,0, 1.0) * VCALOR.A * F.A;
  gl_fragcolor.a = f.a * vcalor.a;
} 

Ten shader rozjaśnia piksele, dodając kolor podstawy do tint. Aby to pracować, musisz dostarczyć negatywy koloru, który chcesz. Dlatego, aby uzyskać białe, musisz ustawić:

 Sprite.tint = 0x000000; // to kolory sprite na biały
Sprite.tint = 0x00ffff; // to daje czerwony 

07. Kontroluj przesłanie

Wymiana domyślnego shadera może być również wykorzystywana, aby pomóc w debugowaniu. Poniżej wyjaśniliśmy, w jaki sposób można wykryć overdraw z takim shaderem.

Nagrowienie zdarza się, gdy wiele lub wszystkie piksele na ekranie są wielokrotnie renderowane. Na przykład wiele obiektów przyjmujących to samo miejsce i renderowanie na drugim. Ile pikseli można renderować GPU na sekundę, jest opisany jako szybkość napełniania. Nowoczesne GPU Desktop mają nadmierną szybkość wypełnienia do zwykłych celów 2D, ale te mobilne są dużo wolniej.

Istnieje prosta metoda ustalenia, ile razy każdy piksel na ekranie jest napisany przez zastąpienie domyślnego globalnego fragmentu Shader w Pixijs i Faser z tym jednym:

 Void Main (Void) {
  gl_fragcolor.rgb + = 1,0 / 7.0;
} 

Ten cieniownik rozjaśnia piksele, które są przetwarzane. Numer 7.0 wskazuje, ile pisze potrzebnych do obrócenia pixels biały; Możesz dostroić ten numer do swoich upodobań. Innymi słowy, lżejsze piksele na ekranie zostały napisane kilka razy, a białe piksele napisano co najmniej siedem razy.

Ten cieniownik pomaga również znaleźć zarówno "niewidzialne" obiekty, które z jakiegoś powodu są nadal renderowane, a sprites, które mają nadmierne przezroczyste obszary wokół, które muszą zostać pozbawione (GPU nadal musi przetwarzać przezroczyste piksele w teksturach).

08. Dlaczego silniki fizyki są twoimi przyjaciółmi

Silnik fizyki to oprogramowanie pośrednie, które jest odpowiedzialne za symulowanie organów fizyki (zwykle sztywnej dynamiki ciała) i ich kolizji. Silniki fizyki symulują powierzchnie 2D lub 3D, ale nie oba. Typowy silnik fizyki zapewni:

• Ruch obiektu poprzez ustawienie prędkości, przyspieszenia, stawów i silników;
• Wykrywanie kolizji między różnymi typami kształtów;
• Obliczanie odpowiedzi kolizji, tj. Jak dwa obiekty powinny reagować, gdy zderzeli.

W tym celu działa wtyczka do fazera. Box2D jest również używany w silniku gry Jedności i Studio GameMaker 2.

Podczas gdy silnik fizyki przyspieszy twój rozwój, istnieje cena, którą będziesz musiał zapłacić: zmniejszona wydajność wykonawcza. Wykrywanie kolizji i obliczania odpowiedzi jest zadaniem intensywnego procesora. Możesz być ograniczony do kilku tuzinów dynamicznych obiektów w scenie na telefonach komórkowych lub wydajności zdegradowanej twarzy, a także zmniejszoną szybkość klatek głęboko poniżej 60 fps.

09. Wyeksportuj dźwięki

Jeśli masz efekty dźwiękowe gry flash wewnątrz pliku .fla, a następnie eksportowanie ich z GUI nie jest możliwe (przynajmniej nie w Adobe Animate CC 2017) Ze względu na brak opcji menu obsługujących ten cel. Ale istnieje inne rozwiązanie - dedykowany skrypt, który właśnie to:

 Funkcja NormalizeFilame nazwa (nazwa) {
  // Konwertuje nazwę Camelcase na nazwę Snake_case
  Name.replace (/ ([A-Z]) / g, "_ 1"). Wymień (/ ^ _ /, '') .tolowercase ();
}
Funkcja DisplayPath (ścieżka) {
  // sprawia, że ​​ścieżka pliku jest bardziej czytelna
  Zwróć UNESCEPE (ścieżka) .replace ("Plik: /// ',' ') .replace (' | ',': ');
}
fl.Outputanel.Clear ();
Jeśli (fl.ggetdocumentdom (). biblioteka.getseletyces (). Długość & GT; 0)
  // Uzyskaj tylko wybrane elementy
  var biblioteka = fl.ggetdocumentdom (). Library.GetSeleptedy ();
jeszcze
  // zdobądź wszystkie przedmioty
  var biblioteka = fl.ggetdocumentdom (). biblioteka.
// Poproś użytkownika o katalog docelowy Export
var root = fl.browseforfolderurl ("Wybierz folder");
Var Brors = 0;
dla (var i = 0; i biblioteki) długość; i ++) {
  var element = biblioteka [i];
  Jeśli (Item.itemtype! == "Dźwięk")
  kontyntynuj;
  var path = root + '/';
  if (Item.originalComprespressionpe === "RAW")
  ścieżka + = normalizefileName (Item.name.split ('.') 
) + '.wav';
  jeszcze
  ścieżka + = NormalizeFileName (Item.name);
  var sukces = element.exporttofile (ścieżka);
  Jeśli (! sukces)
  błędy + = 1;
  fl.trace (DisplayPath (ścieżka) + ':' + (sukces? "OK": "Błąd"));
}
Fl.Trace (błędy + "błąd (S)"); 

Jak korzystać ze skryptu do eksportowania plików dźwiękowych:

1. Zapisz kod powyżej jako plik .jsfl na komputerze.
2. Otwórz plik .fla z Adobe Animate.
3. Wybierz polecenia i GT; Uruchom polecenie z górnego menu i wybierz skrypt w dialogu, który otwiera się.
4. Teraz pojawi się inny plik dialogowy do wyboru katalogu docelowego Export.

Zrobione! Teraz powinieneś mieć pliki WAV w określonym katalogu. To, co zostało, to przekonwertować je na przykład, na przykład MP3, OGG lub AAC. (Jeśli masz pliki do gry, aby zachować bezpieczeństwo, uaktualnić do przyzwoicie magazyn w chmurze .)

10. Jak używać MP3S

Dobry stary format MP3 powraca, ponieważ niektóre patenty wygasły, a teraz każda przeglądarka może dekodować i odtwarzać mp3. To sprawia, że ​​rozwój jest trochę łatwiejszy, ponieważ w końcu nie ma potrzeby przygotowywania dwóch oddzielnych formatów audio. Wcześniej potrzebne, na przykład, OGG i AAC pliki, podczas gdy mp3 wystarczy.

Niemniej jednak istnieją dwie ważne rzeczy, które musisz pamiętać o MP3:

• MP3 muszą dekodować po załadowaniu, które mogą być czasochłonne, zwłaszcza na urządzeniach mobilnych. Jeśli zobaczysz pauzę po załadowaniu wszystkich aktywów, to prawdopodobnie oznacza, że ​​mp3 są dekodowane
• Niezwykle gra zapętlona mp3 jest trochę problematyczna. Rozwiązaniem jest użycie MP3Loop, Przeczytaj więcej w tym artykule Wysłany przez fazę COMPU.

Niniejszy artykuł został pierwotnie opublikowany w wydaniu 277 kreatywnego projektanta Web Magazine Web Magazine. Kup problem 277 tutaj lub Subskrybuj tutaj projektant stron internetowych .

Powiązane artykuły:

• 5 Gry Casual dla projektantów
• Zbuduj swoją własną grę fizyki webgl
• Zrozumieć rurociąg importu aktywów Unity