Le jeu de pousse-pousse

Le jeu de taquin. Nous y avons joué étant enfants et plus tard aussi avec sa version 3D, le rubik's cube. Pas très neuf donc ! et pourtant ce type de puzzle fera, de par sa legereté une animation idéale pour faire patienter durant le téléchargement d'un shockwave plus lourd. Voyons comment nous réalisons...

La tâche la plus longue est sans doute la découpe préalable des morceaux. Un outil comme Fireworks et un peu de minutie suffiront à la plupart d'entre nous. Ceux qui ne connaissent que lingo importerons l'acteur logo dans une distribution et procèderons à sa découpe depuis la fenêtre message à l'aide des deux fonctions duplicate et crop() (cf. l'article nouveautés de D702).

Nous vous laissons choisir la méthode de découpe qui vous convient et nous nous concentrons sur l'astuce qui va nous permettre d'obtenir notre animation en trois lignes de lingo.

On utilise d'abord la fonction de calque de Director pour dessiner une croix légerement plus grosse que nos carrés : Dans la fenêtre dessin on crée un nouvel acteur puis l'on appelle *View/onion skin. La petite palette des calques apparue, on demande alors à visualiser en transparence au moins un acteur carré et à l'aide d'un outil de dessin (ici l'outil rectangle plein), on dessine notre croix en la faisant déborder légerement.

On dispose ensuite l'ensemble des pièces sur la scène... de façon à reconstituer le puzzle en totalité. Important : La pièce qui sera manquante dans la version finale est placée comme les autres et avec autant d'exactitude puis, tout de suite après, remplacée par l'acteur croix (Séléction du sprite dans le scénario, de la croix dans la distribution, Menu Édition/Échanger acteur). L'image suivante nous montre le résultat que l'on doit obtenir :

Cette croix jaune servira à marquer l'emplacement (mouvant) de la cas vide... bien sûr à la fin de notre travail nous la rendrons invisible... Conservons là ainsi pour l'instant et contentons nous de la doter de l'encre dessin seul afin de mieux comprendre ce que nous allons demander à lingo.

Lors du clic sur un carré nous souhaitons que celui ci prenne la place de la croix si et seulement si, il lui est adjacent par le haut, le bas ou par le coté latéral. Le débord de la croix va nous permettre de savoir très facilement si cette condition est remplie : ce sera le cas si le sprite carré touche la croix !

Nous associons donc à tous les carrés du puzzle le script suivant. (Dans notre exemple la croix occupe la piste 30. Elle est au dessus des carrés).

on mouseUp me

   if sprite the currentSpriteNum intersects sprite 30 then

      -- puisque l'on veut intervertir les positions
      -- et qu'il nous faut procéder séquentiellement
      -- on doit noter la position initiale d'un des deux sprites avant de le déplacer
      -- on stocke sa propriété loc dans une variable "placevide"

      placeVide = the loc of sprite 30

     -- on déplace la croix à la position du carré cliqué
      set the loc of sprite 30 to the loc of sprite the currentSpriteNum

    -- on déplace le carré à l'emplacement (ancien) de la croix
      set the loc of sprite the currentSpriteNum to placeVide

   end if

end

Associé à chaque carré du jeu, c'est quelques lignes suffisent à créer notre animation... C'est tout.

Attention : C'est illogique sans doute mais l'opérateur "intersects" fonctionne de tel sorte que l'on n'obtient pas le resultat escompté si l'on écrit :

   if sprite 30 intersects sprite (the currentSpriteNum) then

au lieu de

   if sprite (the currentSpriteNum) intersects sprite 30 then

Avec la première formule, Director détecte l'intersection des deux sprites même dans les zones non opaques de la croix.

< Sommaire