Share
Firefox OS est un système d'exploitation mobile complet construit autour de technologies Web ouvertes! Le système d'exploitation a été entièrement conçu pour permettre à HTML5 et à Javascript d'exploiter tout le potentiel du matériel de l'appareil. Poursuivez votre lecture pour en savoir plus sur Firefox OS et sur la manière de commencer dès aujourd'hui à porter vos applications Web existantes sur la plate-forme.!
Firefox OS est un système d'exploitation mobile créé à partir de zéro par Mozilla. D'un référentiel GitHub vide, il a évolué en un système entièrement ouvert et à source ouverte en plus d'un an, ce qui est déjà impressionnant. Construit de la simple idée au produit final, livré par les entreprises du monde entier. Voyons pourquoi c'est si spécial et pourquoi devriez-vous vous en soucier.
La chose la plus importante à propos de Firefox OS est la technologie utilisée - c'est juste la toile! Tous les développeurs front-end et les programmeurs JavaScript peuvent désormais créer facilement des applications HTML5 directement pour la plate-forme. Le Web mobile dispose maintenant des technologies et de l’accès matériel qu’il mérite. Les API Web vous permettent de "parler" directement au matériel du périphérique à l'aide de JavaScript, ce qui permet de prendre des photos, d'envoyer des messages ou d'initier des appels..
Soyons clairs sur le public cible - ce n’est pas que Firefox OS combatte directement les appareils haut de gamme avec iOS et Android dans les pays les plus développés. L'objectif principal est de fournir une expérience smartphone à ceux qui normalement n'auraient pas la chance d'acheter un tel appareil. Les téléphones dotés de Firefox OS constitueront une alternative peu coûteuse pour ceux qui souhaitent passer des téléphones polyvalents et naviguer sur le Web à l'aide de navigateurs modernes. Il y a une demande énorme pour cela et Mozilla veut combler le vide!
C'est le "nouvel ancien" écosystème, car les technologies Web sont déjà bien connues des milliers de programmeurs JavaScript et de développeurs front-end. Vous n'êtes pas obligé d'apprendre une nouvelle langue ou un environnement de développement. Tout ce que vous savez sur le Web peut être utilisé pour créer de superbes applications Firefox OS. Porter votre jeu est très simple et nécessite un minimum d’efforts.
Dans cet article, je vais vous guider tout au long du processus, depuis le simple fait de jouer à un jeu HTML5 mobile, de l'optimiser pour le périphérique Firefox OS et de la publication du résultat dans Firefox Marketplace. Je vais utiliser Captain Rogers comme exemple..
Il existe deux manières de tester votre jeu pour Firefox OS - en utilisant un simulateur logiciel ou en branchant l'appareil réel. Les deux sont utiles et vous devriez commencer par le simulateur pour voir si le jeu fonctionne. Après cela, pousser le jeu sur l'appareil finira par le tester et vous aider à vous débarrasser de tous les bugs. Ensuite, vous pouvez vous concentrer sur le processus de publication.
Il existe un moyen de tester votre jeu ou votre application sans avoir à disposer d'un appareil réel dans votre main. C'est le simulateur de Firefox OS et vous pouvez simplement l'installer en tant que plugin dans votre navigateur Firefox. Vous ne pourrez pas tester les commandes tactiles, mais au moins vous pourrez voir si le jeu fonctionne et se comporte comme il se doit. À l'aide du simulateur, vous pouvez également envoyer votre application directement sur l'appareil..
Si vous avez vraiment besoin de votre propre appareil, vous pouvez l’obtenir auprès de Geeksphone. Ils fournissent deux téléphones de prévisualisation pour les développeurs - Keon et Peak. Ces deux appareils sont très similaires aux produits finaux qui seront vendus dans le monde entier. Les premiers appareils commerciaux sont d'ores et déjà annoncés: ZTE Open et Alcatel OneTouch Fire sont proposés par Movistar en Espagne au prix bas de 69 € (sans contrat, avec une carte microSD de 4 Go et 30 euros pour les appels). La Pologne, la Colombie et le Venezuela sont les prochains pays à venir..
Lorsque vous avez déjà un système d'exploitation sur votre appareil, il serait bien d’y installer quelques applications. C'est ici qu'intervient Firefox Marketplace - la boutique de Mozilla fournit tout ce dont vous avez besoin. La différence entre les magasins iOS ou Android et le marché Firefox est que le dernier est ouvert et gratuit. Tout le monde peut gérer son propre marché, vous n'êtes pas limité au seul et unique site de distribution d'applications et de jeux. Vous n'avez même pas besoin d'orienter les utilisateurs vers le marché lui-même si vous souhaitez qu'ils installent votre jeu sur leur appareil. Il existe une API pour cela! En utilisant l'API Open Web App, vous pouvez créer un simple bouton "installer cette application" à l'aide d'un bouton HTML appelant quelques lignes de JavaScript. Les utilisateurs finaux pourront alors installer le jeu directement sur leur appareil..
Les opérateurs mobiles fourniront à leurs propres clients des places de marché avec les applications spécialement conçues pour eux. Cela leur donnera également l'occasion de recommencer à gagner de l'argent et de ne plus être que des fournisseurs de données. Il est important de comprendre que tous les acteurs de l’espace Firefox OS peuvent tirer parti de la prise en charge du système..
La manière dont les applications Web sont construites recèle un énorme potentiel - vous pouvez rechercher du contenu à l'intérieur d'eux sans avoir besoin de les télécharger. Comme il ne s'agit que de HTML, CSS et JavaScript, vous pouvez rechercher tout ce qui vous intéresse et vous ne serez pas limité au titre ou à la description - il est indexable et consultable comme n'importe quel site Web..
La meilleure chose à faire, c'est que vous pouvez déjà ajouter vos applications et vos jeux: le Marketplace sort de la phase bêta et s'ouvre pour les clients, mais il était disponible depuis un certain temps déjà pour les développeurs. Les deux parties ont eu le temps de s'adapter à l'environnement et de se préparer à la plate-forme. Il n'y a presque pas de concurrence - j'ai trouvé environ 500 jeux sur le Marketplace. Il est difficile même d'essayer de le comparer à l'App Store d'Apple, où vous pouvez trouver des centaines de milliers d'applications. C’est le meilleur moment pour saisir cette opportunité, le Firefox Marketplace attend votre contenu.!
Comme je l'ai mentionné plus tôt, je vais vous montrer tout le processus de conversion de votre jeu HTML5 standard en un jeu pleinement opérationnel, optimisé pour le périphérique Firefox OS et disponible gratuitement sur le Firefox Marketplace. Le jeu Captain Rogers a été conçu avec ImpactJS et est très simple: vous êtes le brave Captain Rogers et devez voler à travers un champ d'astéroïdes pour échapper à la flotte maléfique de Kershan. Il a été créé en collaboration avec Enclave Games (Andrzej Mazur - codage) et Blackmoon Design (Robert Podgórski - graphique). L’objectif principal était de le rendre petit et simple tout en étant parfaitement fonctionnel et poli.
Il existe de nombreuses façons d’optimiser votre jeu pour la plate-forme Firefox OS et la plupart d’entre elles peuvent également être appliquées aux jeux HTML5 normaux - c’est la technologie Web après tout, non? Ci-dessous, quelques techniques de base pour accélérer les performances, rendre le jeu plus flexible ou simplement lui donner un aspect plus esthétique..
Le moyen le plus simple d’accélérer le rendu du canevas du jeu sous Firefox OS est d’ajouter le moz-opaque lui attribuer:
Si votre toile n'est pas transparente ou que vous n'avez rien à afficher derrière elle, définissez cet attribut pour améliorer automatiquement les temps de rendu..
La mise à l'échelle du canevas est importante lorsque vous ne connaissez pas la résolution du périphérique cible. Cela aurait l'air bizarre si le jeu ne prenait qu'un tiers de l'écran, ou pire si vous n'en voyiez que la moitié. Cette méthode ne convient pas à tous les types de jeu. Si vous souhaitez conserver un pixel art, vous devez gérer l’échelle différemment, mais cela devrait fonctionner pour la plupart des jeux. Voici le code responsable de la mise à l'échelle:
Accentsconagua
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 + ")"; Cela garantira que votre jeu remplit tout l’espace disponible, mais préservera l’échelle afin que le jeu ne soit pas déformé. Sur les gros appareils, le jeu sera un peu flou, alors n'oubliez pas de faire attention à cela..
Si vous travaillez sur un jeu de pixel art, il est très important d'avoir des pixels nets au lieu de pixels flous. Désactivez le lissage à l'aide de JavaScript et vous êtes prêt à commencer.!
var context = canvas.getContext ('2d'); context.webkitImageSmoothingEnabled = false; context.mozImageSmoothingEnabled = false; context.imageSmoothingEnabled = false; Grâce à cela, vos pixels seront aussi nets que possible, afin que les joueurs puissent pleinement profiter du pixel art de votre jeu..
Il existe de nombreuses autres techniques à explorer, telles que l’utilisation de la toile hors écran, du rendu en pixels entiers, de plusieurs toiles pour les calques et d’autres astuces géniales. Découvrez cet article incroyablement utile sur Mozilla Hacks écrit par Louis Stowasser et Harald Kirschner. Certaines des techniques décrites dans cet article sont utilisées dans le moteur de jeu ImpactJS. Vous n'avez donc même pas à le mettre en œuvre vous-même..
Il existe deux types d'applications dans la place de marché: les applications packagées et les applications auto-hébergées. Le premier type est juste un .Zip *: français paquet contenant tous les actifs qui seront téléchargés sur la place de marché. Le second type, auto-hébergé, est un lien direct vers le jeu que vous hébergez sur votre propre serveur. Les applications empaquetées sont autorisées à obtenir un meilleur accès au matériel, car elles sont fournies à partir d'un serveur sécurisé connu de Mozilla, alors que les applications auto-hébergées sont plus faciles à déployer et à modifier..
Pour les deux types d'applications, le fichier le plus important est le
manifest.webapp contenant toutes les informations nécessaires. Un fichier manifeste est simplement un simple objet JSON à partir duquel toutes les données seront fournies pour les paramètres initiaux de Firefox Marketplace:
"name": "My App", "description": "Ma description est ici", "launch_path": "/", "icons": "128": "/img/icon-128.png", "developer": "name": "Votre nom ou votre organisation", "url": "http://votre-homepage-here.org", "default_locale": "en"
Il vous suffit de fournir des informations très basiques telles que le nom de l’application, sa description, des icônes à afficher dans le Marketplace, des informations de base vous concernant, telles que le nom du développeur et son URL, ainsi que les paramètres régionaux par défaut version linguistique par défaut). Vous pouvez valider le fichier manifeste pour vous assurer qu'il est exempt de bogues..
La principale différence entre les applications packagées et les applications auto-hébergées réside dans les autorisations - les applications packagées peuvent être privilégiées ou certifiées. Lorsque vous avez besoin d'accéder au matériel de l'appareil, comme l'appareil photo ou la liste de contacts, vous devez répertorier tout ce qui se trouve dans la section des autorisations..
"autorisations": "contacts": "description": "Obligatoire pour l'auto-complétion", "accès": "readcreate", "alarmes": "description": "Obligatoire pour planifier les notifications"
Les applications privilégiées ont accès aux API Web qui disposent de plus d'autorisations pour accéder au matériel et aux données utilisateur sur le périphérique et qui sont plus hiérarchisées que les applications Web habituelles. Il existe également le plus haut rang, appelé applications certifiées, qui contrôle des fonctions système critiques, comme par exemple le numéroteur par défaut - seuls Mozilla et ses partenaires fournissent ce type d'applications..
Lorsque vous n'avez pas besoin d'accéder aux WebAPI de l'appareil et que vous souhaitez des mises à jour faciles et instantanées, vous pouvez décider d'héberger le jeu vous-même. Il y a certaines choses que vous devez garder à l'esprit pour livrer votre jeu sans aucun problème.
Cachez tous vos fichiers pour permettre aux utilisateurs de jouer au jeu hors ligne et pour économiser sur le trafic sur votre serveur. Ne pas mettre en cache le fichier manifeste bien que cela puisse entraîner des problèmes lorsque vous souhaitez mettre à jour le jeu. Le fichier manifeste doit avoir une extension .Webapp et doivent être servis de la même origine. le Type de contenu doivent être mis à application / x-web-app-manifest + json, Le codage UTF-8 est recommandé.
Lorsque vous utilisez Apache, déposez cette ligne dans votre .htaccess fichier:
Application AddType / manifeste x-web-app + json .webapp
Sur Nginix, vous devez éditer le mime.types déposer et ajouter une ligne similaire:
types //… application / x-web-app-manifest + json webapp;
Pour tester votre application, vous pouvez également utiliser GitHub Pages pour l'hébergement. Mozilla a travaillé avec GitHub pour que tous les paramètres soient en place. Rappelez-vous simplement que le nom de fichier de votre fichier manifeste se termine par .Webapp.
Il est temps d'ajouter notre jeu sur le marché pour que les gens puissent le trouver facilement sur Firefox OS. Notre jeu est prêt à être soumis à Firefox Marketplace - dirigez-vous vers la plateforme de développement et connectez-vous (ou enregistrez-vous) pour obtenir un accès. Recherchez le bouton "Soumettre une nouvelle application" - cela vous mènera au formulaire de soumission..
Vous aurez le choix entre différentes options: que votre application soit gratuite ou payante, que le jeu soit hébergé ou packagé, vous aurez également une liste des plates-formes prises en charge. En bas, un validateur de manifeste garantit que le fichier de manifeste est correct à 100%. Une autre étape consiste simplement à renseigner les détails tels que les captures d'écran, les autres médias, les informations d'assistance et les détails des applications. Après que vous avez terminé - le jeu a été soumis.!
Il ne vous reste plus qu'à attendre que votre jeu soit accepté - cela ne devrait pas prendre plus de quelques jours. Après cela, votre jeu est publié et disponible pour tout le monde.!
En parcourant le panneau d'administration, vous remarquerez la page de statistiques où vous trouverez toutes les informations sur les installations. D'autres options incluent l'édition d'un jeu déjà soumis, la gestion des membres de l'équipe, la compatibilité, les paiements, le statut et les versions. Gardez un œil sur les avis des utilisateurs car ils sont une excellente source de commentaires.!
Comme vous pouvez le constater, il est très facile d'adapter votre jeu à Firefox OS et de le publier sur la place de marché. La documentation est prête, toutes les informations nécessaires sont là pour vous attendre. Il était très amusant de travailler sur Captain Rogers avec Firefox OS en tête. Je suis très curieux de voir comment Enclave Games sera perçu sur le marché par rapport aux autres développeurs. Si vous avez des opinions sur le jeu lui-même (ou si vous souhaitez le tester sur votre appareil et lui faire part de ses commentaires), Firefox OS ou le Marketplace n’hésitez pas à en discuter dans les commentaires.!
Vous êtes à la pointe du marché en croissance rapide du mobile, avec un potentiel énorme, où les éditeurs apprennent vite que HTML5 est la technologie du futur. Il y a une infinité de possibilités, il vous suffit de saisir votre chance, de saisir cette opportunité et de distancer la concurrence!
On ne sait pas comment cela fonctionnera - je crois vraiment en l'idée d'un système d'exploitation mobile HTML5, mais l'avenir dépend de la réaction du marché et des clients. D'une manière ou d'une autre, nous aurons une période passionnante pour le développement mobile HTML5. Ici, rien n’est gaspillé, car les jeux fonctionnent sur toutes les plateformes et ont un accès privilégié sur Firefox OS. Même si Firefox OS échoue, votre travail est toujours compatible avec le Web plutôt qu'avec une seule plate-forme..
