Un bouton qui ne perçait pas
Sur l’écran, le manche de la poêle de Gaston avait un rond brun au centre. Un rond, pas un trou. Quand on appuyait dessus, on voyait bien le mur de la cuisine derrière, mais quelque chose clochait : ce rond ne donnait pas l’impression de traverser la planche. Il ressemblait à un autocollant posé là, comme si le bois était percé à l’emporte-pièce et qu’on avait collé un morceau de brique au dos.
Le problème sautait aux yeux dès qu’on comparait avec une vraie planche percée. Dans un vrai trou, on voit deux choses : le décor au travers, bien sûr, mais aussi la paroi intérieure du perçage. Une bande sombre en haut, là où la lumière n’entre pas, et une lèvre éclairée en bas, là où elle frappe. Sans ça, l’œil ne croit pas à la profondeur. Le rond brun de Gaston, lui, était parfaitement plat. Pire : il était légèrement translucide, comme voilé par un film marron. Au lieu de donner l’impression d’un trou, ça donnait l’impression d’un bouton sale.
Pourtant, j’étais convaincu que le décor passait bien au travers. Trois fois de suite, j’ai relevé la couleur au centre du trou et je l’ai comparée à celle du mur voisin. Trois fois, les chiffres étaient identiques. Trois fois, j’ai conclu que la transparence fonctionnait. Sauf que je me trompais de preuve : la couleur que je relevais n’était pas celle du décor, mais celle de l’anneau de bois sombre autour du trou. La brique derrière était presque de la même teinte. Pour le prouver, il a fallu poser un rectangle magenta derrière le bouton – une couleur qui n’existe nulle part ailleurs dans le jeu. Là, le trou est devenu rose fluo. La transparence existait bel et bien, mais elle ne se voyait pas.
Le masque qui ne suivait pas
Le vrai coupable était ailleurs : le masque qui devait découper le trou dans la planche ne suivait pas le bouton. Dans Phaser, un masque de géométrie est dessiné hors de la liste d’affichage, sans tenir compte des transformations du parent. J’avais posé le masque dans le conteneur du bouton, en supposant qu’il suivrait ses déplacements. Résultat : il restait coincé à deux cents pixels de là, hors de l’écran. Le trou n’était qu’un leurre.
La solution a été de sortir le masque du conteneur et de le placer directement dans la scène, en recopiant à chaque image la position mondiale du bouton. Mais attention : si on recopiait la position trop tôt, avant que les animations ne soient appliquées, le trou se décollait pendant l’enfoncement. Il a fallu l’accrocher au début de chaque image, après les mises à jour, pour qu’il reste collé au manche comme une seconde peau.
Une fois le masque en place, le trou est devenu un vrai perçage. Mais il restait un détail qui trahissait l’artifice : le manche n’était pas une capsule. Ses coins étaient arrondis, mais pas assez pour former un demi-cercle parfait. Du coup, la distance entre le centre du trou et le bord du bois variait selon la direction. En diagonale, le liseré du trou dépassait de quatre pixels. Il a fallu redessiner le manche en capsule – un rectangle avec des demi-cercles aux extrémités – pour que le bois enveloppe parfaitement le perçage.
La paroi qui donne la profondeur
Un trou rond, même bien découpé, ne suffit pas. Une planche se regarde toujours de trois quarts, jamais de face. Son perçage est donc une ellipse, pas un cercle. Et surtout, on doit voir la paroi intérieure : un croissant sombre en haut, là où la lumière n’entre pas, et une lèvre éclairée en bas, là où elle frappe. Sans ça, l’œil ne croit pas à l’épaisseur du bois.
J’ai donc dessiné deux disques légèrement décalés : l’un pour la lèvre éclairée, l’autre pour la paroi sombre. Le masque ne garde que la couronne entre les deux, laissant le centre entièrement ouvert. Le résultat ? Un trou qui traverse vraiment la planche, avec une paroi visible et un décor qui passe au travers. Mesuré au pixel près : l’ouverture fait 1 055 pixels de diamètre, et le mur intact représente 46 % de cette surface. Le relief intérieur va de 25 à 186 en luminosité, une amplitude qui donne l’impression d’une vraie épaisseur.
Le voile marron qui recouvrait tout a disparu. Il ne reste que l’ombre que la planche projette dans son propre perçage : un croissant sous le bord haut, et rien ailleurs. Le bouton ne ressemble plus à un autocollant, mais à une vraie pièce de bois percée, avec un manche qui s’enfonce et un trou qui laisse voir la cuisine derrière.
Ce qui reste à peaufiner
Deux défauts persistent, assumés pour l’instant. D’abord, le manche n’est pas encore une capsule parfaite : le liseré du trou déborde de quatre pixels en diagonale. Ensuite, un voile brun très léger couvre encore l’ouverture, comme un résidu de la première tentative. Ces deux points seront repris un à un, sans toucher à ce qui plaît déjà.
Le plus important, c’est que le bouton ne trompe plus l’œil. Quand Gaston appuie sur sa poêle, on croit vraiment à un perçage dans le bois. Et c’est ça, au fond, qui fait la différence entre un dessin et un objet qui vit à l’écran.
