Voorbereiding op Firefox OS

Firefox OS is een volledig mobiel besturingssysteem dat is opgebouwd rond open webtechnologieën! Het besturingssysteem is vanaf het begin opgebouwd, zodat HTML5 en Javascript het volledige potentieel van de hardware van het apparaat kunnen ontketenen. Lees verder voor meer informatie over Firefox OS en hoe u vandaag uw bestaande webapps naar het platform kunt porten!

Firefox OS

Firefox OS is een mobiel besturingssysteem dat door Mozilla helemaal opnieuw is gemaakt. Het evolueerde in meer dan een jaar van een lege GitHub-repository naar een volledig open source systeem, wat alleen al behoorlijk indrukwekkend is. Gebouwd van het kale idee tot het uiteindelijke product, verzonden door de bedrijven wereldwijd. Laten we eens kijken waarom dit zo speciaal is en waarom zou je het je kunnen schelen.

Het belangrijkste van Firefox OS is de gebruikte technologie - dat is het net het web! Alle front-end ontwikkelaars en JavaScript-programmeurs kunnen nu eenvoudig HTML5-applicaties rechtstreeks voor het platform maken. Het mobiele web heeft nu de technologieën en hardwaretoegang die het verdient. Met web-API's kunt u rechtstreeks met de apparaat-hardware "praten" met behulp van JavaScript, waardoor u foto's kunt maken, berichten kunt verzenden of oproepen kunt initiëren.

Laten we duidelijk zijn over de doelgroep - het is niet dat Firefox OS direct high-end apparaten zal bestrijden met iOS en Android aan boord in hoogontwikkelde landen. Het belangrijkste doel is om mensen die normaliter niet de kans zouden hebben om zo'n apparaat te kopen, een smartphone-ervaring te bieden. Telefoons met Firefox OS zullen een goedkoop alternatief zijn voor diegenen die willen overstappen van functietelefoons en op het web willen duiken met behulp van moderne browsers. Er is een enorme vraag naar en Mozilla wil het gat opvullen!

Het is het "nieuwe oude" ecosysteem omdat de webtechnologieën al bekend zijn voor duizenden JavaScript-programmeurs en front-end ontwikkelaars. U hoeft geen nieuwe taal of ontwikkelomgeving te leren. Alles wat u weet over internet kan worden gebruikt om verbluffende Firefox OS-applicaties te maken. Het porteren van je spel is heel eenvoudig en vereist minimale inspanningen om te bereiken.

In dit artikel zal ik je door het hele proces laten lopen van het hebben van een gewone mobiele HTML5-game, het optimaliseren voor het Firefox OS-apparaat en het publiceren van de resultaten in de Firefox Marketplace - ik zal Captain Rogers als een voorbeeld gebruiken.

Het testen van Firefox OS

Er zijn twee manieren om je spel te testen voor Firefox OS - met behulp van een softwaresimulator of door het daadwerkelijke apparaat aan te sluiten. Beide zijn handig en je zou moeten beginnen met de Simulator om te zien of het spel werkt. Daarna zal de game uiteindelijk naar het apparaat worden geduwd om het te testen en je helpen om alle bugs kwijt te raken. Dan kunt u zich concentreren op het publicatieproces.

Simulator

Er is een manier om je game of applicatie te testen zonder dat je een echt apparaat in de hand hebt. Het is de Firefox OS-simulator en je kunt het eenvoudig installeren als een plug-in in je Firefox-browser. U kunt de aanraakbedieningen niet testen, maar u kunt tenminste zien of het spel werkt en zich gedraagt ​​zoals het hoort. Met behulp van de simulator kunt u uw toepassing ook rechtstreeks naar het apparaat duwen.

Beschikbare apparaten

Als je echt je eigen apparaat nodig hebt, kun je het krijgen van Geeksphone. Ze bieden twee telefoons met ontwikkelaar preview - Keon en Peak. Die twee apparaten lijken erg op de eindproducten die wereldwijd worden verkocht. De eerste commerciële apparaten zijn al aangekondigd: ZTE Open en Alcatel OneTouch Fire worden aangeboden door Movistar in Spanje voor een lage prijs van 69 Euro (geen contract, met microSD-kaart van 4 GB en 30 Euro voor oproepen). Volgende op de lijst zijn Polen, Colombia en Venezuela met meer landen binnenkort beschikbaar.

Firefox Marketplace

Als je al een besturingssysteem op je apparaat hebt, zou het leuk zijn om er enkele apps op te installeren. Hier komt de Firefox Marketplace om de hoek kijken - Mozilla's winkel biedt alles wat je nodig hebt. Het verschil tussen iOS- of Android-winkels en de Firefox Marketplace is dat de laatste open en gratis is. Iedereen kan zijn eigen marktplaats runnen, je bent niet beperkt tot de enige plaats voor het verspreiden van apps en games. Je hoeft mensen niet eens zelf naar de marktplaats te leiden als je wilt dat ze je game op hun apparaat installeren - daar is een API voor! Met behulp van de Open Web App API kun je een eenvoudige "install this app" knop maken met een HTML-knop die een paar regels JavaScript aanroept. Eindgebruikers kunnen de game vervolgens rechtstreeks op hun apparaat installeren.

Marktplaatsen voor iedereen

Mobiele operators bieden marktplaatsen voor hun eigen klanten de apps die speciaal voor hen zijn bedoeld. Dit geeft hen ook de mogelijkheid om weer geld te verdienen en niet langer alleen de gegevensproviders te zijn. Het is belangrijk om te begrijpen dat alle spelers in de Firefox OS-ruimte kunnen profiteren van de ondersteuning van het systeem.

vindbaarheid

Er zit een enorm potentieel in de manier waarop webapplicaties worden gebouwd - u kunt zoeken naar inhoud binnenkant van hen zonder de noodzaak om ze te downloaden. Omdat het alleen maar HTML, CSS en JavaScript is, kunt u naar alles zoeken waarin u bent geïnteresseerd en bent u niet beperkt tot de titel of beschrijving - het is indexeerbaar en doorzoekbaar, net zoals elke website nu is.

Al verkrijgbaar

Het beste is dat u uw apps en games al kunt toevoegen - de Marketplace komt uit de bèta-fase en wordt geopend voor klanten, maar was al enige tijd beschikbaar voor ontwikkelaars. Beide partijen hadden de tijd om zich aan te passen aan de omgeving en zich voor te bereiden op het platform. Er is bijna geen concurrentie - ik heb ongeveer 500 games in de Marketplace gevonden. Het is moeilijk om het zelfs te vergelijken met de App Store van Apple, waar je honderdduizenden apps kunt vinden. Dit is de beste tijd om de kans te grijpen, de Firefox Marketplace wacht op uw inhoud!

Casestudy - Captain Rogers

Zoals ik eerder al zei, zal ik je het hele proces laten zien van het converteren van je normale HTML5-spel naar de volledig werkende versie die is geoptimaliseerd voor het Firefox OS-apparaat en gratis beschikbaar is in de Firefox Marketplace. De game Captain Rogers is gebouwd met behulp van ImpactJS en is heel eenvoudig: jij bent de dappere Captain Rogers en moet door een asteroïde veld vliegen om te ontsnappen aan de kwaadaardige Kershan-vloot. Het is gemaakt als een samenwerking tussen Enclave Games (Andrzej Mazur - codering) en Blackmoon Design (Robert Podgórski - graphics). De focus lag vooral op het klein en eenvoudig, maar volledig functioneel en gepolijst maken.

Optimaliseer uw spel voor Firefox OS

Er zijn tal van manieren om je game te optimaliseren voor het Firefox OS-platform en de meeste ervan kunnen ook worden toegepast op normale HTML5-games - het is tenslotte webtechnologie, toch? Hieronder ziet u een aantal basistechnieken die de prestaties snel zullen versnellen, het spel flexibeler maken of het er alleen maar beter zullen doen uitzien.

Moz-opake

De eenvoudigste manier om het renderen van de game in Firefox OS te versnellen, is door de moz-opake toeschrijven aan het:

 

Als uw canvas niet transparant is of als u er niets achter hoeft te plaatsen, hoeft u alleen dit kenmerk in te stellen en worden de renderingstijden automatisch verbeterd.

CSS Transform Scaling

Het schalen van canvas is belangrijk als u de resolutie van het doelapparaat niet kent. Het zou raar lijken als het spel maar een derde van het scherm zou innemen, of erger, als je er maar de helft van ziet. Deze methode is niet voor elk type game - als je een pixelart wilt behouden, moet je de schaal anders beheren, maar voor de meeste games zou het moeten werken. Hier is de code die verantwoordelijk is voor schalen:

 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 = "schaal (" + scaleToFit + ")";

Dit zorgt ervoor dat je game de hele beschikbare ruimte vult, maar zorgt voor behoud van schaal zodat het spel niet wordt vervormd. Op grote apparaten zal het spel er echter wat wazig uitzien, dus denk erom op te letten.

Dichtstbijzijnde buur Rendering

Als je aan een pixelkunstgame werkt, is het erg belangrijk om scherpe pixels te hebben in plaats van vage pixels - zet vloeiend maken uit met JavaScript en je bent klaar om te gaan!

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

Dankzij dit heb je je pixels zo scherp mogelijk, zodat de spelers volop kunnen genieten van de pixelkunst in je spel.

Andere technieken

Er zijn veel meer technieken om te verkennen, zoals het gebruik van canvas buiten het scherm, volledige pixelweergave, meerdere canvaslagen voor lagen en andere coole tricks - bekijk dit ongelooflijk nuttige artikel over Mozilla Hacks geschreven door Louis Stowasser en Harald Kirschner. Sommige van de technieken die in dat artikel worden behandeld, worden gebruikt in de ImpactJS-game-engine, dus je hoeft het zelf niet eens te implementeren.

Bereid het voor op de Firefox Marketplace

Er zijn twee soorten applicaties in de Marketplace - verpakt en zelf gehost. Het eerste type is slechts een .ritssluiting pakket met alle items die naar de Marketplace worden geüpload. Het tweede type, zelf gehost, is een directe link naar het spel dat je host op je eigen server. Verpakte apps krijgen meer toegang tot de hardware, omdat ze worden geleverd vanaf een veilige, door Mozilla bekende server, terwijl apps die door anderen worden gehost gemakkelijker kunnen worden geïmplementeerd en kunnen worden gewijzigd.

Manifest File

Voor beide typen apps is het belangrijkste bestand de
manifest.webapp met alle benodigde informatie. Een manifestbestand is slechts een eenvoudig JSON-object waaruit alle gegevens voor de oorspronkelijke instellingen van Firefox Marketplace worden weergegeven:

 "name": "My App", "description": "My description goes here", "launch_path": "/", "icons": "128": "/img/icon-128.png", "ontwikkelaar": "naam": "Uw naam of organisatie", "url": "http://your-homepage-here.org", "default_locale": "en"

U hoeft alleen maar basisinformatie te verstrekken, zoals de naam van de toepassing, de beschrijving, pictogrammen die in de Marketplace moeten worden getoond, basisinformatie over uzelf, zoals de naam van de ontwikkelaar en de URL van de ontwikkelaar, en aan het einde de standaard locale (dwz de toepassing). standaard taalversie). U kunt het manifestbestand valideren om er zeker van te zijn dat het geen fouten bevat.

machtigingen

Het grootste verschil tussen verpakte en zelf-gehoste apps zijn de toestemmingen - verpakte apps kunnen worden geprivilegieerd of gecertificeerd. Wanneer u toegang nodig hebt tot de hardware van het apparaat, zoals de camera of de lijst met contacten, moet u alles vermelden in het gedeelte over machtigingen.

 "permissies": "contacten": "description": "Vereist voor automatische aanvulling", "toegang": "readcreate", "alarmen": "description": "Vereist om meldingen in te plannen"

Priviledged apps hebben toegang tot web-API's die meer rechten hebben om toegang te krijgen tot de hardware en gebruikersgegevens op het apparaat en die hoger in de hiërarchie staan ​​dan de gebruikelijke web-apps. Er is ook de hoogste rang genaamd gecertificeerde apps die controle hebben over essentiële systeemfuncties zoals bijvoorbeeld de standaard dialer - alleen Mozilla en partners bieden dat soort apps.

Zelf gehoste manifestaties

Wanneer u geen toegang tot de WebAPI's op het apparaat nodig hebt en u wilt eenvoudige en directe updates, dan kunt u beslissen om het spel zelf te hosten. Er zijn een aantal dingen waar je rekening mee moet houden om je game probleemloos te leveren.

Cachegeheugen voor al uw bestanden zodat gebruikers het spel offline kunnen spelen en kunnen besparen op verkeer op uw server. Zet het manifestbestand niet in cache hoewel dit kan leiden tot problemen wanneer u de game wilt bijwerken. Het manifestbestand moet een extensie hebben .web applicatie en moet vanaf dezelfde oorsprong worden geserveerd. De Content-Type moet worden ingesteld op application / x-web-app-manifest + json, UTF-8-codering wordt aanbevolen.

Wanneer je Apache gebruikt, zet je die regel gewoon in je .htaccess het dossier:

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

Op Nginix moet je de mime.types bestand en voeg een soortgelijke regel toe:

 typen // ... application / x-web-app-manifest + json webapp; 

Voor het testen van uw app kunt u GitHub-pagina's ook gebruiken voor hosting. Mozilla werkte met GitHub om alle instellingen op zijn plaats te hebben, vergeet niet om de bestandsnaam van je manifestbestand te laten eindigen .web applicatie.

Je spel uploaden naar de marktplaats

Tijd om ons spel aan de marktplaats toe te voegen, zodat mensen het gemakkelijk kunnen vinden in Firefox OS. We hebben onze game klaar voor verzending naar de Firefox Marketplace - ga naar de Developer Hub en log in (of registreer) om toegang te krijgen. Zoek naar de knop "Een nieuwe app verzenden" - dit zal u naar het verzendformulier leiden.

Je hebt verschillende opties om uit te kiezen - of je app nu gratis of betaald is, de game wordt gehost of verpakt, je hebt ook een lijst met ondersteunde platforms. Onderaan bevindt zich een manifest-validator die ervoor zorgt dat het manifestbestand 100% correct is. Een andere stap is het invullen van de details, zoals schermafbeeldingen, andere media, ondersteuningsinformatie en app-details. Daarna ben je klaar - de game is ingediend!

Het enige wat je nu hoeft te doen is wachten tot je spel wordt geaccepteerd - het zou niet langer dan een paar dagen moeten duren. Daarna is je spel gepubliceerd en beschikbaar voor iedereen om te zien en te spelen!

Als u door het beheerdersvenster kijkt, ziet u de pagina met statistieken waarop u alle informatie over installaties kunt vinden. Andere opties zijn het bewerken van een reeds ingediend spel, het beheren van teamleden, compatibiliteit, betalingen, status en versies. Houd gebruikersrecensies in de gaten, omdat ze een goede bron van feedback zijn!

Les geleerd

Zoals je kunt zien, is het heel eenvoudig om je spel aan te passen aan Firefox OS en het in de Marketplace te publiceren. De documentatie is klaar, alle benodigde informatie wacht op je. Het was heel leuk werken aan Captain Rogers met Firefox OS in gedachten. Ik ben erg benieuwd hoe Enclave Games in de Marketplace wordt waargenomen in vergelijking met andere ontwikkelaars. Als u meningen over het spel zelf hebt (of wilt testen op uw apparaat en feedback wilt geven), Firefox OS of de Marketplace, kunt u dit bespreken in de opmerkingen.!

Conclusie

U bevindt zich aan de rand van de snelgroeiende mobiele markt met een enorm potentieel, waar uitgevers snel leren dat HTML5 de technologie van de toekomst is. Er zijn eindeloze mogelijkheden, je moet gewoon de kans grijpen, de kans benutten en de concurrentie ontlopen!

Het is onbekend hoe het zal werken - ik geloof echt in het idee om een ​​HTML5 mobiel besturingssysteem te hebben, maar de toekomst hangt af van de reactie van de markt samen met klanten. Op de een of andere manier hebben we spannende tijden voor de ontwikkeling van HTML5-mobiel. Niets hier is verspilde moeite, aangezien de spellen op alle platforms worden uitgevoerd en speciale toegang krijgen op Firefox OS. Zelfs als Firefox OS faalt, is je werk nog steeds compatibel met internet in plaats van slechts één platform.