Voir une animation en 3D
Étude exploratoire, à verser au tableau Produit sous forme de fiche si l'idée est retenue. En mode Présenter, un bouton 3D couche le terrain et lève les joueurs : la même animation, sans rien ressaisir, vue de la tribune, derrière un joueur ou dans les yeux du gardien. L'éditeur, lui, reste en 2D : on dessine de dessus, on regarde en 3D.
Aujourd'hui

- Vu de dessus, le schéma parle à l'entraîneur. Le joueur, lui, doit traduire un rond qui glisse en « je cours entre le 2 et le 3 ».
- Personne ne voit ce que verra le joueur : l'intervalle qui s'ouvre, la ligne de passe, l'angle de tir.
- Une passe est un trait au sol. La passe en cloche par-dessus la défense et la passe à terre se dessinent pareil.
- Le gardien ne voit jamais le tir arriver. Les séances de gardiens, en attente au tableau, demanderont de montrer le jeu depuis le but.
Essayer
La maquette joue une vraie animation de six temps : une attaque placée contre une défense 0-6, posée par la mise en place, jusqu'au tir de l'ailier droit. Elle se touche, ou se clique, comme l'application, et passe d'un appareil à l'autre en gardant son état.
Situation 02
Décaler jusqu'à l'aile
Espacelire · ←→temps · 123point de vue · Fplein écran · molette : zoom · clic droit : décaler
À faire
Six contre six avec gardien, sur un demi-terrain. L'attaque part du demi-centre, toujours du même côté, puis on change de côté.
À vérifier / observer
L'arrière attaque l'intervalle dès la réception, sans dribble, et fixe son défenseur avant de donner.
À essayer
- La situation s'ouvre comme aujourd'hui, en vue schéma. Touche 3D : le terrain se couche, les joueurs se lèvent. C'est la même animation, rien n'a été ressaisi.
- Touche Lire. La passe vole en cloche, le ballon porté reste dans la main, l'ailier saute pour tirer.
- Glisse le doigt pour tourner autour du terrain, pince pour zoomer, glisse à deux doigts pour te décaler. Touche deux fois pour revenir à la tribune.
- Touche un segment de la piste, sous la scène : elle se fige à la fin de ce temps, ses tracés au sol. Tourne autour.
- Choisis Joueur : la caméra se place derrière l'arrière droit et le suit. Choisis un autre poste, ou touche un défenseur sur le terrain pour te mettre derrière lui.
- Choisis Gardien : la caméra se met dans ses yeux et suit le ballon jusqu'au tir.
- Touche plein écran, à côté de 3D : la scène prend tout l'écran, pour tendre le téléphone aux joueurs.
- Passe en Tablette ou en Ordinateur, au-dessus de l'appareil : la scène garde son état et s'agrandit, la situation se range à droite. À l'ordinateur, essaie le clavier : Espace, les flèches, 1, 2, 3 et F.
Ce qui change dans l'application
- Un bouton 2D · 3D sur la scène animée, en mode Présenter. L'éditeur reste en 2D : on y pose et on y anime de dessus, avec la précision du plan.
- La bascule est un mouvement, pas un changement d'écran. Le terrain se couche devant soi, les joueurs se lèvent à leur place : on reconnaît la scène qu'on regardait.
- Trois points de vue : Tribune, libre, par défaut ; Joueur, derrière le joueur choisi ; Gardien, dans ses yeux.
- Les commandes ne changent pas : Lire, Revenir au début, la piste d'un segment par temps, la note du temps posée sur la scène.
- La piste devient touchable : un segment fige la scène à la fin de son temps. En 3D, c'est ce qui permet de tourner autour d'un moment ; la 2D en profiterait aussi.
- Plein écran en 3D, pour montrer la scène aux joueurs, téléphone ou tablette tendu.
- Sur tablette et ordinateur, la scène prend la place et la situation passe dans une colonne à droite : titre, onglets des schémas, À faire, À vérifier. En 2D, la scène garde la forme du terrain ; en 3D, elle prend toute la hauteur.
- À l'ordinateur, Présenter reste une fenêtre au-dessus de l'éditeur, qui s'agrandit pour la 3D. La souris tourne, la molette zoome, le clic droit décale ; le clavier lit (Espace), passe d'un temps à l'autre (← →), choisit le point de vue (1, 2, 3) et met en plein écran (F, Échap pour en sortir).
- Rien de nouveau à saisir. La 3D lit le schéma tel qu'il est enregistré : les positions, les temps, les postes et le regard. Toutes les animations existantes se jouent en 3D.
Les points de vue
| Vue | Où est la caméra | Pour quoi faire |
|---|---|---|
| Schéma (2D) | Au-dessus, le terrain à plat | Le schéma de toujours, celui qu'on imprime et qu'on retouche. |
| Tribune | En hauteur, le long de la touche ; libre : on tourne, on zoome, on se décale | Voir le mouvement d'ensemble, les intervalles, les lignes de passe. |
| Joueur | Derrière le joueur choisi, au-dessus de son épaule ; elle le suit quand il court | Montrer à un joueur ce qu'il verra : où il court, d'où vient le ballon, qui sort sur lui. |
| Gardien | Dans les yeux du gardien ; elle suit le ballon | Lire le tir qui arrive, travailler le placement du gardien. |
Les moments clés
Images tirées de la maquette elle-même, au fil de l'animation.
Ce que la 3D lit dans le schéma
Chaque pièce de l'éditeur a son pendant en volume, posé au sol à sa taille réelle. La maquette ne montre que des joueurs et un ballon.
| Pièce | En 3D |
|---|---|
| Joueur | Une silhouette articulée, en tenue de son camp (le gardien en manches longues et pantalon), son poste au-dessus de la tête, sur la poitrine et dans le dos, le regard du schéma ou de l'orientation auto. Debout au repos, fléchi bras hauts en défense, bras levés et ouverts au but ; il court, tient le ballon, arme son bras et saute pour tirer. |
| Ballon | Dans la main du joueur le plus proche. En vol pendant une passe, en cloche d'autant plus haute que la passe est longue ; tendu vers le but pour un tir. |
| Tracés des temps | Au sol pour une course, en pointillé ; en l'air pour une passe, en trait plein ; numérotés comme en 2D, le temps en cours en orange. |
| Plot, coupelle, cerceau, latte, haie, échelle | Leur volume, posé au sol. |
| Tracé dessiné, carré, séparation | Peints au sol. |
| Texte | Une étiquette qui fait toujours face à la caméra. |
Déduit, faute d'être dans le schéma
- La hauteur du ballon. Le schéma ne connaît que le plan. La passe monte en cloche selon sa longueur, le tir arrive à 1,45 m.
- Le saut du tireur. Un ballon qui finit dans le but est un tir : son lanceur saute.
- La taille des joueurs : un adulte, quelle que soit la catégorie de la séance.
À trancher
- Régler la hauteur d'une passe ou d'un tir (à terre, en cloche, en lucarne) ? Ce serait un réglage de plus dans l'éditeur, que la 2D montrerait d'un signe sur le tracé.
- La vitesse : la 3D joue à la vitesse de la 2D, qui est à peu près celle du jeu, et l'action file en trois secondes. Faut-il un ralenti, pour la vue Joueur surtout ?
- La vue Joueur, à l'épaule ou dans les yeux ? L'épaule montre le joueur et ce qu'il voit ; les yeux sont plus parlants, mais on y perd ses repères.
- Des joueurs plus petits pour les jeunes catégories, d'après la catégorie de la séance ?
- La 3D seulement en Présenter, ou aussi en aperçu dans l'éditeur, pour vérifier une animation ?
- Le gardien : la vue Gardien suffit-elle à ses séances, ou faut-il aussi un terrain du gardien, le but vu de face, dans l'éditeur ?
Ce que ça coûte
- Une bibliothèque 3D, chargée seulement au premier toucher de 3D : three.js, la plus répandue, celle de cette maquette, avec son adaptation à React. Environ 250 Ko compressés à télécharger une fois, rien pour qui ne s'en sert pas.
- Le moteur de lecture des animations est repris tel quel. Il calcule déjà, à chaque instant, la place de chaque pièce ; la 3D la dessine autrement.
- Les téléphones modestes : des silhouettes simples, des ombres peintes et non calculées, une image redessinée seulement quand quelque chose bouge. Sans WebGL, le bouton 3D n'apparaît pas.
- Effort pressenti : L, en trois livraisons sous un feature flag.
- Les joueurs et le ballon en tribune. La bascule, la lecture, la piste touchable ; mesurée à l'ouverture de la 3D.
- Les points de vue Joueur et Gardien, et le plein écran ; mesurés par point de vue choisi.
- Les autres pièces : plots, coupelles, cerceaux, lattes, haies, échelles, tracés dessinés, textes.