Ah ! the quad of sprite... La propriété the quad
of sprite fut tout de suite repérée par les aficionados
comme LA grande nouveauté de D7. j'en connais qui lui font
faire de la 3D ! Quad c'est une liste de quatre
points, coordonnées horizontale et verticale des coins d'un
bitmap. Ces coins peuvent désormais être déplacés
indépendamment l'un de l'autre. Regardons ça...
Pour réaliser d'abord cette mini animation aux curseurs
déformants on a commencé par placer sur la scène
notre logo (piste 1), sous lui un acteur forme QuickDraw étiré
horizontalement sur 100x1 pixels (la glissière), enfin un
bitmap curseur. on a attaché à ce dernier le comportement
suivant afin de le transformer en curseur (un classique)
property pDecalageH, pN, pDebutH
on beginSprite
me
pN = the currentSpriteNum
pDebutH = sprite(pN - 1).locH
+ 50
-- 50 c'est la largeur de la glissière
divisée par deux,
-- c'est le milieu, la position initiale du curseur
sprite(pN).constraint
= pN -1
-- Rappel : la glissière est au dessous
donc piste pN - 1
end
Le gestionnaire beginSprite on le voit, initialise seulement les
valeurs des propriétés.
on mouseDown
pDecalageH = the mouseH - sprite(pN).locH
-- classique : on mesure d'abord
l'écart du bitmap à la souris
-- pour éviter un saut lorsqu'il la suit (2 lignes en dessous)
repeat while the stilldown
sprite(pN).locH
= the mouseH
- pDecalageH
updateStage
-- dans une boucle, on
doit forcer Director à rafraîchir l'écran
x = (sprite(pN).locH
- pDebutH)/2.5
-- tout est là
: la position du curseur (relativement à sa position initiale
pDebutH)
-- est divisée par 2,5 parce que
-- avec 100 px de jeu, on obtient
40 étapes
-- de -20 a + 20
sendSprite(1,
#transformationDe, x)
-- on envoie enfin l'info
au logo piste 1
end repeat
end
Chaque déplacement de notre curseur envoie donc le message
"transformationDe" au logo piste 1. Afin que ce bitmap sache quoi
faire d'une telle instruction, nous lui associons le comportement
suivant :
on beginSprite
me
pNum = the spriteNum
of me
pCoinHautGauche = sprite(pNum).quad[1]
pCoinHautDroite = sprite(pNum).quad[2]
pCoinBasDroite = sprite(pNum).quad[3]
pCoinBasGauche = sprite(pNum).quad[4]
end
Les quatre propriétés pCoinHautGauche , Droit, etc.
n'ont d'autre fonction que de nous faciliter la tâche. Elles
ne servent à rien d'autre qu'à décomposer la
liste quad en unités plus manipulables. On notera au passage
l'ordonnancement inhabituel des points dans la liste quad. Ainsi
l'expression "getAt(the quad of sprite n, 3) - en nouvelle notation
"sprite().quad[3]" - retourne les coordonnées du
point inférieur droit.
Il faut finalement ajouter au comportement le gestionnaire qui
permettra à notre bitmap de se transformer en fonction de
la valeur transmise par le curseur horizontal.
on transformationDe me,
valeur
a = point ( getAt(pCoinHautGauche,
1), (getAt(pCoinHautGauche, 2) -
valeur) )
d = point (getAt(pCoinBasGauche
, 1), (getAt(pCoinBasGauche, 2) +
valeur))
b = point ( getAt(pCoinHautDroite,
1), (getAt(pCoinHautDroite, 2) + valeur) )
c = point ( getAt(pCoinBasDroite,
1), (getAt(pCoinBasDroite, 2) - valeur)
)
sprite(pNum).quad
= [a, b, c, d]
end
Évidemment ça donne envie de faire de la 3D mais
là, il faudra peut-être étudier les équations
de la VRML ... En attendant voilà comment réaliser
l'animation plus haut qui a du épuiser les ressources mémoire
de votre navigateur.
Ici, on a simplement placé le logo de qui vous savez plusieurs
fois sur la scène et on lui a chaque fois attaché
un comportement analogue au suivant (ici pour un mouvement vers
la gauche).
property pA, pB, pC , pD,
pN
on beginSprite
me
pN = the spriteNum
of me
leCentre = sprite(pN).loc
sprite(pN).quad
= [leCentre, leCentre, leCentre, leCentre]
--- le logo commence sa carrière
minuscule au centre
pA = sprite(pN).quad[1]
pB = sprite(pN).quad[2]
pC = sprite(pN).quad[3]
pD = sprite(pN).quad[4]
-- les propriétés A, B, C..
ne sont que
-- des moyens commodes de nommer chaque coin
end
on prepareFrame
me
if getAt(pB, 1) < 0 then
-- si le
logo est sorti de la zone visible,
-- c'est à dire si la coordonnée
horizontale
-- de son coin supérieur gauche
est > 0 alors
-- on le ramène tout entier au
centre de la scène
leCentre = point(160,
120)
sprite(pN).quad
= [leCentre, leCentre, leCentre, leCentre]
-- on met à
jour les propriétés pA, pB, ... c'est-à-dire
chaque coin
pA = sprite(pN).quad[1]
pB = sprite(pN).quad[2]
pC = sprite(pN).quad[3]
pD = sprite(pN).quad[4]
else
pA = pA - point(4,4)
pB = pB - point(2,2)
pC = pC - point(2,-2)
pD = pD - point(4,-4)
-- c'est ici que l'on
donne le mouvement
-- les valeurs sont un peu plus importantes
pour
-- les coins extérieurs (gauches ici)
afin de créer
-- l'effet de perspective
sprite(pN).quad
= [pA, pB, pC, pD]
end if
end
