TeleLineo 1.1

Il y a quelques mois de cela, je profitai d’un week-end pour créer une application complète. Pour rappel TeleLineo est la version numérique d’un célèbre jouet où on dessine en actionnant deux molettes qui déplacent une mine. J’avais relaté son développement éclair ici même. Depuis quelques jours, je me suis remis au travail afin de corriger plusieurs défauts de la première version.

Les graphismes avaient constitué l’essentiel du temps de développement. Pour autant, je les ai repris entièrement pour cette nouvelle version, parce qu’entre temps, l’écran Retina du Nouvel iPad est apparu. Il fallait donc tout redessiner au double de la résolution. Heureusement, j’ai récemment remplacé mon ancien logiciel de dessin vectoriel par Sketch, qui est bien mieux adapté et m’a fait gagner beaucoup de temps, tout en m’offrant un meilleur rendu.

Icône de l’application

L’icône de la première version avait été faite rapidement en bricolant l’image de l’écran principal puis en rajoutant les images des molettes par-dessus:

AppIcon1_0

L’icône de la version 1.1 a été dessinée à part, mais demeure très similaire:

AppIcon_1_1

Finalement, je considère que l’icône représente bien l’application, et j’ai conservé l’idée générale, en soignant les détails.

Écran principal

La couleur bleue, la taille de l’écran et l’emplacement des molettes étaient des choix de conception.

SnapshotTeleLineo

 

De fait, l’apparence est quasiment la même:

Bateau_v1_1

Quelques détails ont été changés, tels que l’ombre sur l’écran. J’ai remplacé le titre, qui était un simple texte, par du graphisme. Une icône, en haut à droite fait aussi son apparition. Elle permet d’enregistrer le dessin dans l’album photo. Vous pourrez ainsi conserver vos œuvres ! Voilà enfin un avantage à utiliser la version numérique.

Écran d’informations

J’avais réalisé un écran d’information en 30 mn chrono pour la version 1:

LineoInfo

Le nouvel écran m’a pris une demi-journée à réaliser:

EcranInfo_v1_1

Ce temps assez long s’explique par le dessin de l’illustration de secouement de l’iPad, et parce que l’écran n’est pas fixe. Je m’explique: il ne s’agit pas d’un simple graphisme que j’aurais collé. L’ombre du fond est une image étirable, de même pour l’image du bouton. C’est plus long à réaliser mais c’est plus flexible. J’admets que ce n’était pas forcément nécessaire, mais je voulais y travailler pour de prochains projets.

Pour télécharger

TeleLineo.com.

Bogue sur la rotation

En faisant une démonstration de TeleLineo, je me suis rendu compte d’un bogue:

BogueVertical

Eh oui, j’ai oublié de gérer la rotation, ou plutôt de refuser la position verticale. L’application démarre bien en orientation horizontale, et c’est pour cela que je ne me suis pas rendu compte du problème. De fait, je viens de rejeter l’executable pour qu’il ne soit pas contrôlé par Apple. Je vais corriger rapidement le problème et re-soumettre dans la foulée.

19h34

C’est bon pour l’analyse statique et pour Instruments. Ça ne m’étonne guère puisque j’ai activé ARC ! J’ai créé rapidement une image de lancement, en effaçant les titres et les molettes. Il me reste à signer l’application et écrire une présentation pour l’App Store.

19h15

Le dialogue qui affiche les infos sur l’appli est terminé:

LineoInfo

J’ai aussi fait une icône assez moche (oui, je sais, c’est le principal critère pour télécharger une appli, mais je n’ai juste pas le temps):

AppIcon320

Pour finir, je vais lancer un petit coup d’Instruments et d’analyse statique sous Xcode. Aurai-je le temps de proposer l’appli à Apple avant 20 h ?

Deuxième molette

J’ai remanié un peu le code et implémenté la molette verticale. Le rendu ne me plait pas trop; à vrai dire, c’est assez difficile graphiquement parce que la lumière est sensée venir du haut. J’ai tout de même un résultat qui indique clairement le rôle de la molette:

MoletteHorizontale

Bon, ce n’est clairement pas parfait, mais il ne reste plus que deux heures et j’ai encore une boite de dialogue et l’icône de l’application à faire.

Première molette

La molette verticale fonctionne. Voici ce que ça donne graphiquement:

MoletteVerticale

Pour simuler le mouvement de rotation, j’ai eu recours à une astuce. Comme il faut au moins trois étapes d’animation pour suggérer la direction d’un mouvement, j’ai tracé un segment horizontal (une rainure) tous les trois points. En fonction du mouvement imprimé, je change l’ordonnée du premier segment horizontal tracé. Ainsi dans le code, on a ça:

  • animationGrooveDelta est le décalage de l’ordonnée du premier segment
  • pointsDelta est la distance du glisser du doigt
  • kAnimationsSteps vaut 3

L’illusion de mouvement est parfaite, mais je ne suis très satisfait du rendu.

Point à 13 h

Comme prévu, ce matin, j’ai travaillé le graphisme. Voilà ce que ça donne:

Capture13h

J’ai essentiellement ajouté des ombres pour donner du volume et rendre l’objet plus réaliste. Evidemment, il reste un gros travail sur les molettes que je réserve à cet après-midi. J’ai commencé par ajouter une barre de navigation. Je n’étais pas très sûr de vouloir le faire pour des questions esthétiques. Finalement, je trouve que ça va. Pour fixer la couleur, j’ai utilisé les nouvelles API UIAppearance de iOS 5.

Pour ce qui est des outils de dessin, j’ai commencé avec Lineform. Ce logiciel était ce qui se faisait de mieux dans cette gamme de prix quand je l’ai acheté, il y a quelques années. Seulement, son auteur a été embauché par Apple, le logiciel a été racheté par son distributeur, et depuis, les bugs restent. Bref, j’aurais préféré qu’il soit racheté par une équipe compétente.

En l’occurence, j’ai fait tout le travail pour me rendre compte de gros problèmes de correspondance des couleurs. De fait, j’ai fait une copie d’écran et fini sous PixelMator. Au départ, je voulais découper l’écran en plusieurs parties pour réduire la taille de l’appli. Mais le .png ne pèse que 40 ko, ce qui est très acceptable; j’utilise donc une seule UIImageView en fond. J’ai superposé ma vue de dessin en la rendant non-opaque. Au bas, j’ai placé un petit bouton avec le logo de Céroce. L’appuyer affichera un écran modal pour présenter la société et renvoyer vers son offre de prestation.