Des calques

BOÎTE 11

Boîtes à surprises ludiques et affectives - Bleu de Toi

Une image à l’écran se compose de plusieurs calques. L’image de la souris dans son carton peut ainsi se décomposer en 4 éléments distincts (et plus si on y ajoute des confettis par exemple) :

  • l’arrière-plan : ici, le papier peint + le dos du carton ;
  • calque #1 : la queue de la souris si on veut qu’elle bouge ;
  • calque #2 : la souris (sans sa queue) si on veut la faire sauter hors du carton ;
  • calque #3 : au premier plan, le rabat de devant du carton qui permet de cacher le corps de la souris.

On aurait alors 4 calques, soit 4 PNGs différents.

Si on souhaite ajouter des confettis, il suffit d’avoir 1 calque pour chaque confetti de couleur et de forme différentes. La taille importe peu parce qu’on peut définir cela dans le code.

Coque en carton - boîte souris calquesOn parle de « calque » (layer en anglais) parce que c’est la terminologie utilisée par les logiciels de retouche graphique comme Photoshop ou Gimp (gratuit). Cela permet également de bien comprendre qu’il faut que le contour de l’image soit transparent pour que les autres éléments puissent apparaître à l’écran.

Ici, on peut voir une vue 3D depuis le logiciel de programmation (xCode – iOS) de la page de l’espace :

Bleu de Toi - vue 3D depuis le logiciel de code

Cette coupe nous permet de voir l’arrière-plan opaque et puis tous les calques (PNGs) des planètes et objets non-identifiés positionnés sur l’ensemble de la carte spatiale.

Le format de fichier PNG permet de garder cette transparence. Ce qui n’est pas le cas d’autres formats de type JPG ou GIF (fichiers animés).

Dans le cas de Bleu de Toi, il y a eu un travail assez considérable de retouche graphique. Tous les dessins ayant été fait à la main, il a fallu les scanner et puis « gommer » tout ce qui ne devait pas paraître à l’écran.

© CotCotCot-apps.com Éditions – Des Carabistouilles Sprl

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s