Clavier, accessibilité et tactile

Lance toutes les commandes au clavier, dessine sans souris, utilise un lecteur d'écran et travaille sur un écran tactile.

Tout ce que fait pxstud.io peut se faire au clavier : chaque commande est dans la palette de commandes, chaque raccourci peut être modifié, et on peut dessiner sur le canevas avec les touches fléchées. Sur un écran tactile, un doigt dessine, deux doigts zooment et déplacent la vue, et un tapotement à deux doigts annule.

Trouver et lancer n'importe quelle commande

Appuie sur Ctrl+K (ou choisis Édition > Palette de commandes...) et tape une partie du nom d'une commande. La liste montre le chemin de menu et le raccourci de chaque commande, et grise celles qui ne peuvent pas s'exécuter pour l'instant. Utilise les touches fléchées pour en choisir une et Enter pour la lancer. Tant que tu n'as rien tapé, les commandes que tu as lancées le plus récemment passent en premier.

Modifier les raccourcis

Réglages > Raccourcis clavier... liste chaque commande avec ses raccourcis. Cherche par commande, menu ou touche, puis :

  • clique sur Ajouter (ou sur un raccourci existant) et appuie sur la nouvelle combinaison de touches ; Esc annule ;
  • si la combinaison appartient déjà à une autre commande, choisis Réassigner pour la déplacer, ou Annuler ;
  • Réinitialiser remet une commande à sa valeur par défaut, et Tout réinitialiser les remet toutes ;
  • Exporter... enregistre ton jeu de raccourcis dans un fichier JSON, et Importer... en charge un, par exemple dans un autre navigateur.

Coche Désactiver les raccourcis à une seule touche pour désactiver tous les raccourcis composés d'une seule lettre, d'un chiffre ou d'un signe de ponctuation (avec ou sans Shift), afin qu'une touche pressée par erreur ne change jamais d'outil. La liste complète des valeurs par défaut est dans Raccourcis clavier.

Tab n'est jamais un raccourci et ne peut pas en devenir un : elle passe toujours à la commande suivante, si bien que tu ne peux jamais rester coincé dans un panneau ou sur le canevas. (C'est pourquoi basculer un calque de tilemap entre Tuiles et Pixels se fait avec Alt+T plutôt qu'avec Tab, comme dans Aseprite ; voir Tilemaps.)

Se déplacer dans l'éditeur

  • Aller au canevas. La première chose que Tab atteint sur la page est un lien Aller au canevas. Appuie sur Enter dessus pour placer le focus clavier directement sur le canevas.
  • Repères de navigation. La barre des menus est l'en-tête de la page, et chaque panneau est une région nommée (Outils, Options de l'outil, Chronologie, Palette, Sélecteur de couleur, etc.), donc la liste des repères d'un lecteur d'écran y mène directement.
  • La barre des menus est un seul arrêt pour Tab. Left et Right (ou Home et End) passent d'un menu à l'autre, et Down, Enter ou Space en ouvre un. Dans un menu, Up et Down se déplacent, taper une lettre saute à l'élément suivant qui commence par elle, Right ouvre un sous-menu et Left le ferme, et Esc ferme le menu. Quand un menu est ouvert, Left et Right passent aux menus voisins. Quand la barre des menus est ancrée sur un côté, ce sont Up et Down qui passent d'un menu à l'autre.
  • Menus des panneaux. Dans n'importe quel panneau, Shift+F10 ou la touche Menu ouvre le menu du panneau, le même que celui d'un clic droit (L'espace de travail).
  • Redimensionner les panneaux. Va avec Tab sur la ligne entre deux panneaux et utilise les touches fléchées (L'espace de travail).

Dessiner au clavier

Mets le focus sur le canevas (avec Tab ou le lien Aller au canevas) : un curseur de pixel apparaît là où se trouvait le pointeur en dernier, ou au milieu du sprite. Ensuite :

ToucheCe qu'elle fait
Touches fléchéesDéplacent le curseur d'un pixel.
Shift avec une flècheDéplace le curseur d'une cellule de grille.
Maintenir SpaceAppuie avec l'outil actif sur le curseur ; déplace-toi avec les flèches pour dessiner, et relâche Space pour terminer.
EnterPose le stylet ; déplace-toi avec les flèches, puis appuie de nouveau sur Enter (ou Space) pour le lever. Utilise cette méthode s'il est difficile de maintenir deux touches à la fois.
Shift ou Alt avec Space ou EnterAgit comme Shift ou Alt avec un clic, par exemple pour ajouter à une sélection.
EscAnnule le trait en cours.
TabQuitte le canevas.

Tous les outils fonctionnent ainsi, sauf la Main : les pinceaux peignent, les formes s'étirent de l'endroit où le stylet a été posé jusqu'à l'endroit où il est levé, les outils de sélection sélectionnent, et le Déplacer déplace. Le canevas défile pour garder le curseur visible, et en mode mosaïque le curseur boucle sur les bords.

Quand un déplacement ou une transformation attend d'être appliqué, ou qu'un outil en plusieurs étapes comme le Polygone attend son dernier point, Enter termine cette opération au lieu de poser le stylet.

Le dessin au clavier démarre quand le canevas reçoit le focus depuis le clavier : va dessus avec Tab, ou utilise le lien d'évitement. Cliquer sur le canevas avec la souris le désactive, si bien que les utilisateurs de la souris gardent les touches fléchées, Space et Enter pour leurs usages habituels, comme dans Aseprite : les flèches déplacent les pixels sélectionnés, ou parcourent les images et les calques ; maintenir Space déplace la vue ; et Enter lance et met en pause l'animation. Après un clic, quitte le canevas avec Tab puis reviens-y pour dessiner de nouveau au clavier.

Avec un lecteur d'écran, le canevas est annoncé avec le nom et la taille du sprite, l'outil actif et le zoom. La position du curseur (« x 12, y 7 ») est lue une fois qu'il s'arrête, puis « Stylet posé », « Stylet levé » ou « Appliqué à... » pour un appui simple, et « bord » quand le curseur ne peut pas aller plus loin.

Le clavier dans les panneaux

Onglets de sprites. Les onglets au-dessus du canevas sont un seul arrêt pour Tab :

  • Left, Right, Home et End changent de sprite ;
  • Alt+Left et Alt+Right déplacent l'onglet le long de la rangée (et annoncent où il est allé) ;
  • F2 renomme le sprite, et Del le ferme ;
  • Enter sur un sprite dont la copie dans le cloud a changé te permet de choisir quelle copie garder.

La palette est aussi un seul arrêt pour Tab, sur la pastille sélectionnée :

  • les touches fléchées, Home et End passent d'une pastille à l'autre, et Shift avec une flèche sélectionne une plage (pour trier, par exemple) ;
  • Enter ou Space fait de la pastille la couleur de premier plan, et Shift+Enter la couleur d'arrière-plan ;
  • Alt avec une flèche déplace la pastille dans la palette ;
  • F2 modifie la couleur de la pastille, et Del la retire.

La nouvelle couleur de premier plan ou d'arrière-plan, et la nouvelle place d'une pastille, sont annoncées aux lecteurs d'écran. Voir Couleur et palettes.

La chronologie. Les cels forment une grille avec un seul arrêt pour Tab, le cel actif :

  • les touches fléchées passent au cel suivant (et rendent actifs son calque et son image) ;
  • Shift avec une flèche étend la sélection de cels, et Esc l'efface ;
  • Alt+Left et Alt+Right déplacent l'image du cel (ou les images sélectionnées) d'une place, et annoncent où elles sont allées ;
  • Alt+Shift avec une flèche pousse les cels sélectionnés ;
  • la touche Menu ouvre le menu du clic droit du cel.

Sur un numéro d'image, Alt+Left et Alt+Right déplacent aussi cette image. Sur le nom d'un calque, F2 le renomme. Sur une étiquette, Enter ou Space en fait l'étiquette qui est lue, et Alt+Left et Alt+Right la déplacent d'une image (ses extrémités acceptent Left et Right pour la redimensionner). Voir Animation et chronologie.

Notifications

Les messages apparaissent dans le coin inférieur gauche et sont lus par les lecteurs d'écran. Les erreurs, et les messages avec un bouton, restent jusqu'à ce que tu les fermes. Les autres messages restent au moins 8 secondes, plus longtemps s'il y a plus à lire (jusqu'à 20 secondes), et ils attendent tant que ton pointeur ou le focus est dessus, ou tant que l'onglet du navigateur est en arrière-plan. Cinq au maximum s'affichent en même temps.

Écrans tactiles

  • Dessiner : un doigt (ou un stylet) dessine avec l'outil actif. La pression d'un stylet règle la taille du pinceau dès le départ (celle d'un stylet seulement : un doigt dessine à pleine taille). Elle peut aussi piloter la taille du pinceau, son angle et un dégradé de couleur (Dynamique dans les options de l'outil ; voir Outils). Le côté gomme d'un stylet efface : l'éditeur passe à la Gomme pendant que tu l'utilises, puis revient à l'outil précédent.
  • Dessiner uniquement avec le stylet : la première fois que tu dessines avec un stylet sur un écran tactile, l'éditeur te demande si tu veux dessiner uniquement avec le stylet. Choisis Stylet seul (ou désactive plus tard Réglages > Dessiner au doigt) et un doigt fait défiler le canevas au lieu de dessiner, si bien qu'une main posée sur l'écran ne laisse aucune marque. Le pincement et les tapotements à deux et trois doigts fonctionnent de la même façon dans les deux cas.
  • Zoomer et déplacer la vue : pose deux doigts sur le canevas et pince pour zoomer, ou déplace-les ensemble pour te déplacer. Un seul doigt attend un instant avant de dessiner, donc commencer un pincement ne laisse jamais de marque. Avec la Main, un deuxième doigt transforme le déplacement en pincement. Les autres doigts et ta paume sont ignorés pendant un trait.
  • Annuler et rétablir : tapote le canevas avec deux doigts pour annuler, ou avec trois doigts pour rétablir. Tapote vite et garde les doigts immobiles ; un tapotement qui déplace légèrement la vue la remet en place.
  • Couleurs : tapote une pastille de la palette pour la couleur de premier plan. Pour l'arrière-plan, tapote-la puis le bouton d'arrière-plan de la palette (il n'y a pas de clic droit sur un écran tactile).
  • La chronologie défile avec ton doigt. Un tapotement sélectionne un cel ou une image. Appuie et maintiens une demi-seconde, puis fais glisser, pour sélectionner une plage ; appuie, maintiens et relâche sans bouger pour ouvrir le menu du clic droit.
  • Panneaux : appuie sur un panneau et maintiens un instant avant de le faire glisser. Sur un téléphone ou dans une petite fenêtre, l'éditeur passe à une disposition compacte, où les panneaux s'ouvrent comme des feuilles par-dessus le canevas ; voir Petits écrans et téléphones.

L'affichage des touches

Affichage > Afficher les frappes affiche à l'écran les touches que tu presses, ce qui aide quand tu enregistres un tutoriel ou que tu donnes un cours. Réglages > Frappes... choisit s'il s'affiche et dans quel coin de la fenêtre ou du canevas il se place.

Limites connues

  • Le canevas n'a pas d'équivalent clavier du clic droit, donc le dessin au clavier utilise toujours la couleur de premier plan.