Vorbereiten auf Firefox OS

Firefox OS ist ein mobiles Betriebssystem, das auf offenen Web-Technologien basiert. Das Betriebssystem wurde von Grund auf so aufgebaut, dass HTML5 und Javascript das volle Potenzial der Gerätehardware entfalten können. Lesen Sie weiter, um mehr über Firefox OS zu erfahren und wie Sie Ihre bestehenden Web-Apps heute auf die Plattform portieren können!

Firefox OS

Firefox OS ist ein von Mozilla völlig neu erstelltes mobiles Betriebssystem. Aus einem leeren GitHub-Repository wurde in mehr als einem Jahr ein ausgereiftes Open-Source-System, das allein schon beeindruckend ist. Von der bloßen Idee bis zum Endprodukt gebaut und von den Unternehmen weltweit ausgeliefert. Mal sehen, warum das so besonders ist und warum es dich überhaupt interessieren sollte.

Das wichtigste an Firefox OS ist die verwendete Technologie - es ist gerade das Netz! Alle Front-End-Entwickler und JavaScript-Programmierer können jetzt problemlos HTML5-Anwendungen direkt für die Plattform erstellen. Das mobile Web verfügt jetzt über die Technologien und den Hardware-Zugriff, die es verdient. Mithilfe von Web-APIs können Sie mithilfe von JavaScript direkt mit der Gerätehardware "sprechen", sodass Sie Fotos aufnehmen, Nachrichten senden oder Anrufe einleiten können.

Machen wir uns klar über die Zielgruppe - es ist nicht so, dass Firefox OS High-End-Geräte mit iOS und Android an Bord in hoch entwickelten Ländern direkt bekämpfen wird. Das Hauptziel ist es, denjenigen, die normalerweise keine Möglichkeit hätten, ein solches Gerät zu kaufen, Smartphone-Erfahrung zu bieten. Telefone mit Firefox-Betriebssystem sind eine kostengünstige Alternative zu denjenigen, die von Feature-Handys wechseln und mit modernen Browsern ins Web eintauchen möchten. Dafür gibt es eine große Nachfrage, und Mozilla möchte die Lücke füllen!

Es ist das "alte" Ökosystem, da die Web-Technologien bereits für Tausende von JavaScript-Programmierern und Front-End-Entwicklern bekannt sind. Sie müssen keine neue Sprache oder Entwicklungsumgebung lernen. Alles, was Sie über das Internet wissen, kann verwendet werden, um atemberaubende Firefox OS-Anwendungen zu erstellen. Das Portieren Ihres Spiels ist sehr einfach und erfordert nur minimale Anstrengungen.

In diesem Artikel werde ich Sie durch den gesamten Prozess führen, indem Sie nur ein normales mobiles HTML5-Spiel haben, es für das Firefox-OS-Gerät optimieren und das Ergebnis im Firefox Marketplace veröffentlichen. Ich verwende hier als Beispiel Captain Rogers.

Firefox-Betriebssystem testen

Es gibt zwei Möglichkeiten, Ihr Spiel für Firefox OS zu testen - mithilfe eines Softwaresimulators oder durch Anschließen des jeweiligen Geräts. Beide sind nützlich und Sie sollten mit dem Simulator beginnen, um zu sehen, ob das Spiel funktioniert. Wenn Sie das Spiel dann auf das Gerät schieben, testen Sie es letztendlich und helfen Ihnen, alle Fehler zu beseitigen. Dann können Sie sich auf den Veröffentlichungsprozess konzentrieren.

Simulator

Es gibt eine Möglichkeit, Ihr Spiel oder Ihre Anwendung zu testen, ohne ein aktuelles Gerät in der Hand zu haben. Es ist der Firefox OS Simulator. Sie können ihn einfach als Plugin in Ihrem Firefox-Browser installieren. Sie können zwar die Touch-Steuerung nicht testen, aber zumindest können Sie sehen, ob das Spiel funktioniert und wie es sich verhält. Mit dem Simulator können Sie Ihre Anwendung auch direkt auf das Gerät übertragen.

Verfügbare Geräte

Wenn Sie wirklich ein eigenes Gerät benötigen, können Sie es von Geeksphone erhalten. Sie bieten zwei Entwicklertelefone für Entwickler an - Keon und Peak. Diese beiden Geräte sind den Endprodukten, die weltweit verkauft werden, sehr ähnlich. Erste kommerzielle Geräte sind bereits angekündigt: ZTE Open und Alcatel OneTouch Fire werden von Movistar in Spanien zu einem günstigen Preis von 69 Euro angeboten (kein Vertrag, mit 4 GB microSD-Karte und 30 Euro für Anrufe). Als nächstes stehen Polen, Kolumbien und Venezuela auf der Liste. Weitere Länder folgen in Kürze.

Firefox Marketplace

Wenn Sie bereits ein Betriebssystem auf Ihrem Gerät haben, wäre es schön, einige Apps darauf zu installieren. Hier kommt der Firefox Marketplace ins Spiel - Mozilla Store bietet alles, was Sie brauchen. Der Unterschied zwischen iOS- und Android-Stores und dem Firefox Marketplace besteht darin, dass der letzte geöffnet und kostenlos ist. Jeder kann seinen eigenen Marktplatz betreiben, Sie sind nicht nur auf den einzigen Ort für das Verteilen von Apps und Spielen beschränkt. Sie müssen die Leute nicht einmal auf den Marktplatz leiten, wenn sie Ihr Spiel auf ihrem Gerät installieren möchten - dafür gibt es eine API! Mit der Open Web App API können Sie eine einfache Schaltfläche "Diese App installieren" erstellen, indem Sie eine HTML-Schaltfläche verwenden, die einige JavaScript-Zeilen aufruft. Endbenutzer können dann das Spiel direkt auf ihrem Gerät installieren.

Marktplätze für alle

Mobilfunkbetreiber werden ihren eigenen Kunden Marktplätze mit speziell auf sie ausgerichteten Apps zur Verfügung stellen. Dies gibt ihnen auch die Möglichkeit, wieder Geld zu verdienen und nicht mehr nur die Datenanbieter zu sein. Es ist wichtig zu verstehen, dass alle Spieler im Firefox-Betriebssystem von der Unterstützung des Systems profitieren können.

Auffindbarkeit

Die Erstellung von Webanwendungen birgt ein enormes Potenzial - Sie können nach Inhalten suchen in ihnen ohne sie herunterladen zu müssen. Da es sich nur um HTML, CSS und JavaScript handelt, können Sie nach allem suchen, an dem Sie interessiert sind, und Sie sind nicht auf den Titel oder die Beschreibung beschränkt - es ist indizierbar und durchsuchbar wie jede andere Website.

Schon verfügbar

Das Beste ist, dass Sie Ihre Apps und Spiele bereits hinzufügen können - der Marketplace befindet sich aus der Betaphase und wird für Kunden geöffnet, war jedoch bereits seit einiger Zeit für Entwickler verfügbar. Beide Seiten hatten die Zeit, sich an die Umgebung anzupassen und sich auf die Plattform vorzubereiten. Es gibt fast keine Konkurrenz - ich habe rund 500 Spiele auf dem Marktplatz gefunden. Es ist sogar schwierig, es mit dem App Store von Apple zu vergleichen, in dem Sie Hunderttausende von Apps finden können. Jetzt ist der beste Zeitpunkt, um die Gelegenheit zu ergreifen, denn der Firefox Marketplace wartet auf Ihre Inhalte!

Fallbeispiel - Kapitän Rogers

Wie bereits erwähnt, zeige ich Ihnen den gesamten Prozess der Umwandlung Ihres regulären HTML5-Spiels in ein voll funktionsfähiges, für das Firefox OS-Gerät optimiertes und kostenlos im Firefox Marketplace verfügbares. Das Spiel Captain Rogers wurde mit ImpactJS erstellt und ist sehr einfach - Sie sind der tapfere Captain Rogers und müssen durch ein Asteroidenfeld fliegen, um der bösen Kershan-Flotte zu entkommen. Es wurde als Zusammenarbeit zwischen Enclave Games (Andrzej Mazur - Codierung) und Blackmoon Design (Robert Podgórski - Grafik). Das Hauptaugenmerk lag darauf, es klein und einfach zu machen, dabei aber voll funktionsfähig und poliert.

Optimieren Sie Ihr Spiel für Firefox OS

Es gibt viele Möglichkeiten, Ihr Spiel für die Firefox OS-Plattform zu optimieren, und die meisten von ihnen können auch auf reguläre HTML5-Spiele angewendet werden - es ist schließlich Web-Technologie, richtig? Nachfolgend sehen Sie einige grundlegende Techniken, die die Leistung schnell steigern, das Spiel flexibler machen oder einfach nur besser aussehen lassen.

Moz-undurchsichtig

Der einfachste Weg, das Canvas-Rendering des Spiels unter Firefox OS zu beschleunigen, ist das Hinzufügen von moz-undurchsichtig Attribut dazu:

 

Wenn Ihre Leinwand nicht transparent ist oder Sie nichts dahinter zeigen müssen, setzen Sie dieses Attribut, um die Renderzeiten zu verkürzen.

CSS-Transformationskalierung

Das Skalieren der Leinwand ist wichtig, wenn Sie die Auflösung des Zielgeräts nicht kennen. Es würde komisch aussehen, wenn das Spiel nur ein Drittel des Bildschirms in Anspruch nehmen würde, oder schlimmer, wenn Sie nur die Hälfte davon sehen. Diese Methode ist nicht für alle Spieltypen geeignet. Wenn Sie eine Pixelgrafik beibehalten möchten, müssen Sie die Skalierung anders verwalten. Für die meisten Spiele sollte dies jedoch funktionieren. Hier ist der Code, der für die Skalierung verantwortlich ist:

 var scaleX = canvas.width / window.innerWidth; var scaleY = canvas.height / window.innerHeight; var scaleToFit = Math.min (scaleX, scaleY); stage.style.transformOrigin = "0 0"; stage.style.transform = "scale (" + scaleToFit + ")";

Dadurch wird sichergestellt, dass Ihr Spiel den gesamten verfügbaren Platz ausfüllt, die Skalierung bleibt jedoch erhalten, und das Spiel wird nicht verzerrt. Bei großen Geräten wird das Spiel jedoch etwas verschwommen aussehen. Denken Sie also daran, dies zu beachten.

Nächster Nachbar Rendering

Wenn Sie an einem Pixel-Art-Spiel arbeiten, ist es sehr wichtig, scharfe Pixel anstelle von verschwommenen Pixeln zu verwenden. Deaktivieren Sie das Glätten mit JavaScript, und schon kann es losgehen!

 var context = canvas.getContext ('2d'); context.webkitImageSmoothingEnabled = false; context.mozImageSmoothingEnabled = false; context.imageSmoothingEnabled = false;

Dadurch haben Sie Ihre Pixel so scharf wie möglich, damit die Spieler die Pixelkunst in Ihrem Spiel voll genießen können.

Andere Techniken

Es gibt viele weitere Techniken, die Sie erkunden können, z. B. die Verwendung von Offscreen Canvas, das Rendern ganzer Pixel, mehrere Leinwände für Ebenen und andere coole Tricks. Lesen Sie diesen unglaublich nützlichen Artikel über Mozilla Hacks von Louis Stowasser und Harald Kirschner. Einige der in diesem Artikel behandelten Techniken werden in der ImpactJS-Spielengine verwendet, sodass Sie sie nicht selbst implementieren müssen.

Bereiten Sie es für den Firefox Marketplace vor

Auf dem Marketplace gibt es zwei Arten von Anwendungen - gepackt und selbst gehostet. Der erste Typ ist nur ein .Postleitzahl Paket mit allen Assets, die auf den Marketplace hochgeladen werden. Der zweite, selbst gehostete Typ ist eine direkte Verbindung zu dem Spiel, das Sie auf Ihrem eigenen Server hosten. Paketierte Apps erhalten mehr Zugriff auf die Hardware, da sie von einem sicheren, von Mozilla bekannten Server bereitgestellt werden, wohingegen selbst gehostete Apps einfacher bereitzustellen und zu ändern sind.

Manifestdatei

Für beide Arten von Apps ist die wichtigste Datei die
manifest.webapp mit allen erforderlichen Informationen. Eine Manifestdatei ist nur ein einfaches JSON-Objekt, von dem aus alle Daten für die ursprünglichen Firefox Marketplace-Einstellungen bereitgestellt werden:

 "name": "My App", "description": "Meine Beschreibung lautet hier", "launch_path": "/", "icons": "128": "/img/icon-128.png", "developer": "name": "Ihr Name oder Organisation", "url": "http://your-homepage-here.org", "default_locale": "de"

Sie müssen lediglich grundlegende Informationen wie den Namen der Anwendung, deren Beschreibung, Symbole, die auf dem Marketplace angezeigt werden sollen, grundlegende Informationen wie Entwickler-Name und Entwickler-URL und am Ende das Standardgebietsschema (dh die Anwendung) angeben Standardsprachversion). Sie können die Manifestdatei überprüfen, um sicherzustellen, dass sie fehlerfrei ist.

Berechtigungen

Der Hauptunterschied zwischen gepackten und selbst gehosteten Apps besteht in den Berechtigungen - gepackte Apps können privilegiert oder zertifiziert sein. Wenn Sie Zugriff auf die Gerätehardware wie die Kamera oder die Kontaktliste benötigen, müssen Sie alles im Bereich Berechtigungen auflisten.

 "Berechtigungen": "Kontakte": "Beschreibung": "Für die automatische Vervollständigung erforderlich", "Zugriff": "readcreate", "Alarme": "Beschreibung": "Zum Planen von Benachrichtigungen erforderlich"

Privilegierte Apps haben Zugriff auf Web-APIs, die über mehr Berechtigungen für den Zugriff auf die Hardware- und Benutzerdaten auf dem Gerät verfügen und in der Hierarchie höher sind als die üblichen Web-Apps. Es gibt auch den höchsten Rang, sogenannte zertifizierte Apps, die die Kontrolle über kritische Systemfunktionen haben, wie z. B. den Standard-Dialer. Nur Mozilla und Partner stellen diese Art von Apps bereit.

Selbst gehostete Manifeste

Wenn Sie keinen Zugriff auf die WebAPIs auf dem Gerät benötigen und einfache und sofortige Updates wünschen, können Sie das Spiel selbst hosten. Es gibt einige Dinge, die Sie beachten müssen, um Ihr Spiel ohne Probleme auszuführen.

Zwischenspeichern Sie alle Ihre Dateien, damit Benutzer das Spiel offline spielen und Datenverkehr auf Ihrem Server sparen können. Zwischenspeichern Sie die Manifestdatei nicht Dies kann jedoch zu Problemen führen, wenn Sie das Spiel aktualisieren möchten. Die Manifestdatei muss eine Erweiterung haben .Web-App und müssen aus derselben Herkunft serviert werden. Das Inhaltstyp muss auf gesetzt sein Anwendung / X-Web-App-Manifest + Json, Die UTF-8-Kodierung wird empfohlen.

Wenn Sie Apache verwenden, lassen Sie diese Zeile einfach in Ihrem .htaccess Datei:

 AddType-Anwendung / x-web-app-manifest + json .webapp

Auf Nginix müssen Sie das bearbeiten mime.types Datei und ähnliche Zeile hinzufügen:

 types //… application / x-web-app-manifest + json webapp; 

Zum Testen Ihrer App können Sie auch GitHub Pages für das Hosting verwenden. Mozilla arbeitete mit GitHub zusammen, um alle Einstellungen zu übernehmen. Denken Sie daran, dass der Dateiname der Manifestdatei auf endet .Web-App.

Laden Sie Ihr Spiel auf den Marktplatz

Es ist an der Zeit, unser Spiel auf den Markt zu bringen, damit die Leute es unter Firefox OS leicht finden können. Wir haben unser Spiel für die Übermittlung an den Firefox Marketplace vorbereitet - gehen Sie zum Developer Hub und melden Sie sich an (oder registrieren Sie sich), um Zugriff zu erhalten. Suchen Sie nach der Schaltfläche "Neue App einreichen" - Sie werden dann zum Absendeformular weitergeleitet.

Sie haben verschiedene Optionen zur Auswahl - ob Ihre App kostenlos oder kostenpflichtig ist, das Spiel gehostet oder gepackt wird, Sie haben auch eine Liste der unterstützten Plattformen. Am unteren Rand befindet sich ein Manifestprüfer, der sicherstellt, dass die Manifestdatei 100% korrekt ist. Ein weiterer Schritt ist das Füllen der Details wie Screenshots, andere Medien, Supportinformationen und App-Details. Danach sind Sie fertig - das Spiel wurde eingereicht!

Jetzt musst du nur noch warten, bis dein Spiel akzeptiert wird - es sollte nicht länger als ein paar Tage dauern. Danach ist dein Spiel veröffentlicht und für alle sichtbar und spielbar!

Wenn Sie durch das Admin-Panel blicken, werden Sie die Statistikseite sehen, auf der Sie alle Informationen zu Installationen finden. Andere Optionen umfassen das Bearbeiten eines bereits eingereichten Spiels, das Verwalten von Teammitgliedern, Kompatibilität, Zahlungen, Status und Versionen. Behalten Sie die Bewertungen der Benutzer im Auge, denn sie sind eine großartige Feedbackquelle!

gewonnene Erkenntnisse

Wie Sie sehen, ist es sehr einfach, Ihr Spiel an Firefox OS anzupassen und im Marketplace zu veröffentlichen. Die Dokumentation ist fertig, alle benötigten Informationen warten auf Sie. Es hat viel Spaß gemacht, an Captain Rogers mit Firefox OS zu arbeiten. Ich bin sehr gespannt, wie Enclave Games im Marketplace im Vergleich zu anderen Entwicklern wahrgenommen werden. Wenn Sie Meinungen zum Spiel selbst haben (oder es auf Ihrem Gerät testen und Feedback geben möchten), können Sie Firefox OS oder den Marketplace in den Kommentaren diskutieren!

Fazit

Sie befinden sich am Rand des schnell wachsenden mobilen Marktes mit enormem Potenzial, bei dem Publisher schnell lernen, dass HTML5 die Technologie der Zukunft ist. Es gibt unendlich viele Möglichkeiten, man muss nur die Chance ergreifen, die Gelegenheit nutzen und die Konkurrenz hinter sich lassen!

Es ist nicht bekannt, wie es funktionieren wird - ich glaube wirklich an die Idee eines mobilen HTML5-Betriebssystems, aber die Zukunft hängt von der Reaktion des Marktes zusammen mit den Kunden ab. Auf die eine oder andere Weise werden wir spannende Zeiten für die Entwicklung von HTML5-Mobilgeräten haben. Nichts ist hier unnötiger Aufwand, da die Spiele auf allen Plattformen laufen und besonderen Zugriff auf Firefox OS erhalten. Selbst wenn Firefox OS ausfällt, ist Ihre Arbeit immer noch mit dem Web und nicht nur mit einer Plattform kompatibel.