Un mini-jeu à glisser-déposer

Ce guide construit un puzzle simple : trois carrés à glisser dans leurs cases. La pièce suit le pointeur, puis s’aimante lorsqu’on la relâche près de sa cible. La démonstration ci-dessous est jouable directement.

Les événements de saisie

FlatInk distingue quatre moments lors de la manipulation d’un objet au pointeur :

• when pressed : l’objet vient d’être enfoncé.
• when dragged : l’objet est déplacé, tant qu’il reste tenu. Il continue de recevoir l’événement même si le pointeur sort de sa surface.
• when released : l’objet est relâché.
• when held : l’objet est maintenu sans bouger (appui long).

Aucun comportement n’est automatique : un objet ne se déplace que si on lui indique où aller. Ce choix garantit que la logique reste lisible.

Faire suivre une pièce

La position d’une pièce est conservée dans deux variables, par exemple ax et ay. La pièce est affichée à cette position au moyen de deux liaisons, x et y. Pour éviter qu’elle ne se recale brutalement sous le pointeur au moment de la saisie, on mémorise l’écart entre le pointeur et la pièce, puis on le soustrait pendant le déplacement.

object "PieceA" {
  when pressed {
    ox = mouse.x - ax
    oy = mouse.y - ay
  }
  when dragged {
    ax = mouse.x - ox
    ay = mouse.y - oy
  }
  x = ax
  y = ay
}

Aimanter dans une case

Au relâchement, on vérifie si la pièce se trouve assez près de sa cible. La fonction near du paquet collision répond à cette question. Le cas échéant, la pièce est posée exactement sur la case.

use "collision"

object "PieceA" {
  when released {
    if near(ax, ay, 200, 420, 55) {
      ax = 200
      ay = 420
    }
  }
}

near(ax, ay, 200, 420, 55) est vrai lorsque le point (ax, ay) se situe à moins de 55 pixels de la case placée en (200, 420).

Aller plus loin

Le paquet gesture fournit des fonctions prêtes à l’emploi pour ce type de manipulation :

• snap(valeur, pas) aimante sur une grille.
• railX et railY contraignent un déplacement le long d’un segment.
• angle(cx, cy, px, py) donne l’angle vers le pointeur, utile pour un bouton rotatif.
• inZone(px, py, x, y, w, h) teste une zone de dépôt rectangulaire.

Pour limiter un glissement à un seul axe, il suffit de ne lier qu’un canal : conservez x = ax et n’écrivez pas de liaison y. La pièce ne se déplacera qu’horizontalement.