Mon premier jeu Android : du prototype HTML à l’appli

3

telephones

Je suis fan de puzzle games depuis toujours : Tetris, Dr Mario, Puyo Puyo, Super Puzzle Fighter…

J’ai donc voulu essayer de coder un jeu de ce genre avec les langages du web (HTML / CSS / JavaScript) et de manière responsive afin d’y jouer aussi bien sur téléphone que sur PC.

J’ai pris pour modèle le jeu Bejeweled qui se prête bien au tactile puisqu’il s’agit de faire glisser des pièces pour les aligner et les faire disparaître.

Voilà le rendu final : Fruit Salad !

Quelques infos techniques :

Les premiers prototypes

N’étant pas graphiste, j’ai codé mon premier prototype avec ce que j’avais sous la main : des icônes de navigateur, puis je me suis tourné vers des sets d’icônes gratuites

Simuler le rendu mobile sur votre navigateur

Débugguer une page web directement sur mobile, c’est plutôt fastidieux…

Heureusement, Chrome et Firefox disposent d’outils par défaut bien pratiques pour avoir un aperçu mobile sans avoir à recharger la page sur votre téléphone toutes les 2 minutes.

Dans Firefox : Tapez Ctrl+Maj+M pour lancer le mode Responsive Design.

Dans Chrome : tapez F12 puis cliquez sur la roue crantée (en bas à droite) pour simuler le rendu smartphone et activer certaines options comme les touch events.

Bien entendu, des tests sur appareils sont indispensables pour identifier certains bugs.

Quelques optimisations de poids

Pour que le jeu se charge vite sur mobile, il faut limiter le nombre de requêtes HTTP.

J’ai donc regroupé les images dans des sprites comme celui-ci :

Puis je suis passé par tinypng.org, un service bien pratique pour réduire le poids des images PNG d’environ 70% !

Tests et retours d’utilisateurs

Pendant le développement, j’ai fait tester les prototypes à mes amis et collègues pour voir le rendu sur leurs téléphones, identifier les bugs et recueillir leurs remarques : « Les textes sont trop petits », « Je ne sais pas combien de coups sont possibles », etc…

C’est plutôt intéressant d’observer le comportement des utilisateurs face à une interface inconnue sans rien expliquer : certaines personnes vont immédiatement comprendre la mécanique de jeu, d’autres vont cliquer partout au hasard pour voir ce qui se passe, ou bien attendre que quelque chose bouge à l’écran pour agir.

J’ai donc rajouté quelques aides visuelles (indice clignotant) pour aider les débutants.

Les tests permettent également d’ajuster le niveau de difficulté. Il faut que le jeu soit suffisamment facile d’accès à des débutants tout en offrant du challenge aux hardcore gamers (combos, hi-score…)

PhoneGap Build

Le problème avec un jeu sur une page web, c’est qu’on ne peut pas le lancer sur son mobile si on n’a pas de connexion internet. Il doit bien y avoir des solutions avec Application Cache mais je n’arrive pas vraiment à le maîtriser.

De plus, trop peu de personnes savent créer une icône de raccourci vers une appli web.

Je me suis donc tourné vers PhoneGap Build pour encapsuler le jeu HTML dans une appli native et le soumettre à l’Android Market.

Le gros avantage de PhoneGap Build, c’est qu’on a pas besoin de savoir écrire de code natif ni d’installer Eclipse, Android SDK, etc…

En effet, PhoneGap Build est une solution « dans le cloud » qui permet de générer les applis (fichier .apk) à partir d’un ZIP de votre application HTML (ou d’un repo GitHub).

Création de certificats

Pour soumettre une application aux markets (Google Play, App Store…) il faut la signer avec un certificat.

C’est la partie qui m’a fait le plus galérer.

Si vous êtes sur Windows, je vous donne la solution : il faut utiliser keytool.exe en ligne de commande (en mode admin sinon ça marche pas)

Le programme keytool.exe se trouve ici :
C:\Program Files (x86)\Java\jre7\bin\keytool.exe

Et la doc Android sur les certificats se trouve là :
http://developer.android.com/tools/publishing/app-signing.html

Soumission à Google Play (Android Market)

La soumission de l’appli sur le market n’a rien de difficile.

Rendez-vous sur developer.android.com pour obtenir une licence de développeur (25$)

Puis envoyez vos applications (fichiers .apk) via l’interface d’admin en replissant un formulaire (descriptions, illustrations…)

La validation est quasi immédiate : l’appli est disponible sur le market au bout de quelques minutes seulement.

Télécharger l’appli Android

Enjoy !

Charger les commentaires

3

Commentaires

  1. angejudicael Répondre

    Coucou !!

    2 ans après que je découvre ton exploit et je parie que depuis lors, tu as gravi des échélons.
    J’ai vraiment besoin d’aide d’une personne éclairé comme toi pour trouver la solution à mon problème. Je m’ suis mis récemment à HTML5, CSS3, phonegap. A la compilation de mon application en APK, je constate une lenteur qui ferait abandonner plus d’un. Tel que présenté, ton appli doit fonctionner plus rapidement et j’aimerais donc avoir ton secret.

    Pitié pour un gar qui glande depuis plusieurs mois maintenant.

Laissez un commentaire :

  • (will not be published)