/* Version 1.1 * Disclaimer: * L'auteur de cet article ne saurait être tenu pour responsable * de ce qui pourrait arriver avec l'utilisation de ce document * et de son contenu. * Si toutes fois il vous arrivait quelque chose de bien, * l'auteur pourrait être joyeux d'être responsable de * cet évènement. * Gambatte! */ Salut à tous. A l heure où je tape ces lignes, ma première demo n'a toujours pas vu le jour, mais je ne me suis pas privé pour réaliser tous les effets qui en feront partie. Ce sont ces effets, oldschools au demeurant, que je vais vous expliquer, afin que vous aussi puissiez vous lancer dans les méandres de la vie de demomaker. Les effets qui seront décrits dans cet article seront: le scrolling, le rotozoom,le starfield 3D, le tunnel, le feu et le plasma. De quoi réaliser une petite demo bien sympa pour débuter. Evidemment, nombre de ceux qui vont lire ce tutorial vont se dire "Mais on s'en fout, y'a déjà plein de docs la dessus!". Et c'est après avoir moi même lu ces docs que j'ai compris que j'allais avoir besoin d'aide; et vu comme j'en ai fait chier avec de l'aide, je me suis décidé à faire ma propre doc, où j'essayerai d'être le plus clair possible. En cas de probleme, n'hésitez pas à me mailer, hein! I Petits rappels...(ou pas) pixel: point à l'écran. texel: point dans la texture, avec une couleur. buffer: tableau vecteur: plusieurs coordonnées (pas vraiment une flèche, pour ceux qui n'ont pas plus de notions que les cours de troisième). On supposera dans tout l'article que la demo sera en 320 pixels de longueur pour 200 pixels de hauteur, ou en 320*200. Pour mettre un pixel blanc aux coordonnées (A,B), on fait: écran[A+320*B]=couleur couleur est un l'indice de la couleur dans la palette que vous utilisez (c'est du 320x200 en mode palette). On se souvient tous que le point (0,0) est en haut gauche de l'écran. Le point (0,1) juste en dessous donc premier pixel de la deuxieme ligne. Comme la mémoire video (le buffer de l'écran) est un tableau à une dimension, le premier pixel de la deuxième ligne est donc le 320me de la mémoire. donc bien 0+320*1. Je vous ai convaincu? Nan? bon... regardez ca alors: mémoire vidéo: 012345678 écran : 012 345 678 en mode 3*3 Le point (0,1) c'est le 3. et c'est bien 0+1*3. Et bien c'est tout :) II Scrolling. Le plus simple de tous à n'en pas douter. On prend un point P(X,Y) de l'écran. Ca sera notre étoile pour notre premier scrolling ou starfield 2D. Si on veut la déplacer horizontalement: on a juste à augmenter (ou diminuer) X. écran[320*Y+X]=blanc // position initiale. afficher_écran() // on affiche l'étoile . X=X+1. // on décale l'étoile d'un pixel à droite. vider_écran() // on efface la position précédente de l'étoile =E9cran. [320*Y+X]=blanc // nouvelle position. afficher_écran() // on affiche l'étoile à sa nouvelle position. C est tout :) Si vous voulez déplacer l'étoile verticalement, incrémentez ou décrémentez Y. Et si on veut aller en diagonale? On utilise alors un vecteur déplacement. On veut qu'elle se déplace selon une direction Nord Nord Est, c'est =E0 dire deux fois plus vers le haut que vers la droite. On prend le vecteur (1,-2) (oui, -2, car l'origine est en haut, hein..) et on l'ajoute aux coordonnées de l'étoile. écran[320*Y+X]=blanc // position initiale. afficher_écran() // on affiche l'étoile. X=X+1 // on décale l'étoile d un pixel à droite. Y=Y-2 // et de deux en haut. vider_écran() // on efface la position précédente de l'étoile. écran[320*Y+X]=blanc // nouvelle position. afficher_écran() // on affiche l'étoile à sa nouvelle position. Hop! Vous n'oublierez pas de faire attention à ce que votre étoile ne dépasse pas de l'écran, car si elle dépasse, elle va se retouver de l'autre côté de l'écran, à un pixel près, car le buffer de l'écran "boucle". Mais si vous allez avant (0,0) ou après (319,199) (car on commence à (0,0) encore une fois), alors votre programme va très certainement planter... Trucs à faire: faire des étoiles blanches qui avancent vite, des grises claires qui avancent moins vite, des grises fonces qui avancent lentement. On met les grises fonces dans le buffer, puis les claires, puis les blanches, et on affiche. Comme ca, on a l'impression de distance des étoiles (l'ordre c'est pour éviter qu'une étoile lointaine se mette devant une proche) III Starfield 3D. Imaginez que vous etes dans la tourelle de tire du Faucon Millenium Condor du pote de Ian Solo, dans StarWars, et que vous regardez tranquillement par le hublot les étoiles qu'un programmeur fait défiler latéralement devant vous, comme il vient de l'apprendre ^^. Soudain, Ian veut aller vers ces étoiles, retrouver Leia. Il tourne de 90 degrés pour se mettre dans l'axe de la tourelle, votre axe. Et il appuie sur le champignon. Ca c'est un starfield 3D!! (en plus, je vous offre la transition). Bon, pour ce genre d'effets, on quitte les coordonnées cartésiennes, pour passer en polaires. On n'a plus (X,Y), mais (R,A) o R est le rayon, la distance du point au centre, et A l'angle par rapport a l'horizontale. Pour calculer ces valeurs, un peu de maths de collège: R c'est donc l'hypothénuse du triangle XOY où O est le centre du repère. Donc R=X+Y. Donc R=sqrt(X+Y). A c'est l'angle, donc cos(A)=X/R (coté adjacent sur hypothénuse). On n'oublie pas qu'on veut A en radians, hein... On a tout ce qu'on veut là. Donc pour chaque étoile, on calcule R et A. On a donc X=cos(A)*R Y=sin(A)*R Pour que l'étoile s'éloigne du centre, on incrémente juste R. On vérifie bien chaque fois que 0<=X<320 et 0<=Y<200, sinon, on réinitialise l'étoile avec un angle aléatoire et une distance nulle. Comme ca notre espace ne manque jamais d'étoiles. Trucs à faire: Plus l'étoile est proche du centre, plus elle est fonce, et plus elle est loin, plus elle est claire. Comme ca, on a vraiment l impression que les étoiles viennent vers nous. III Rotozoom. Maintenant qu'on a vu les coordonnées polaires et qu'on sait comment ca marche, on peut faire des effets encore plus cools!.Le rotozoom, ça affiche un image, ça la fait tourner dans un plan perpendiculaire à l'oeil, et ca se rapproche ou ca s'éloigne. En plus, quand ca s'éloigne, l'image se répète a côté!Le rotozoom permet donc d'afficher une image en la faisant tourner dans le plan de l'écran et de la faire se rapprocher ou éloigner. Pour se faire, on a besoin de deux buffers. Un pour l'écran et un pour la texture. On se met en polaire. Pour chaque point (X,Y)de l'écran,on affiche le point (R,A) correspondant dans la texture. Jusque là tout va bien. C'est comme si on était resté en cartésien. Cependant, vous l'avez sans doute imaginé (compris) avant, que se passe-t-il si on augmente l'angle? et bien on tourne dans la texture! je note U et V les coordonnées cartésiennes dans la texture en 256*256 (c est plus simple et plus joli qu'une texture en 320*200). Pour chaque point (X,Y) de l'écran on prend le point (R,(A+dA)) dans la texture. C'est à dire on prend le point à la même distance, mais à un angle un tout petit peu a côté (d'où le dA qui est un petit déplacement).Maintenant, si on prend le point (R+dR,A), on revient au starfield 3D, ce qui veut dire qu'on zoom sur le centre de la texture. Réciproquement, si on fait R-dR, alors on s'éloigne de la texture! C'etait pas si dur!(à programmer, ca le sera un peu, parce que ma méthode ici explique les choses, mais n'est pas super adaptée et il faut faire pas mal de calculs pour passer de cartésien à polaire.) Bon, je viens de me souvenir :) F c'est le facteur de zoom, et W le facteur vitesse de rotation (en gros): U=(F*X)%256 //oui, modulo 256 pasque ca fait 256 valeurs V=(W*Y)%256 //(le zero est compris) écran[320*Y+X]=texture[256*V+U] Hop! ca devrait etre mieux :) Trucs faire: Faire osciller le facteur de zoom (le dR ou le F) pour vous rapprocher/éloigner alternativement. Faire aussi osciller l'angle, pour que ca tourne dans un sens, puis dans l'autre. Choisir une belle texture qui ne montre pas de bords quand elle pave l'écran :) IV Tunnel. Ca tombe bien c'est le dernier que j'ai réalisé :) Toujours sur deux buffers, l'écran 320*200 et la texture 256*256. Bon, la partie maths est très ennuyeuse, et se retrouve encore avec les fonctions trigo habituelles.Je vous le parachute donc un peu :) Le but est ici de mapper la texture (la coller) sur des cercles concentriques (un cylindre). On a toujours des angles et des distances donc. A ceci près qu'on a un rayon du tunnel r, une distance d de l'observateur dans le tunnel, un rayon du cercle et une profondeur dans le tunnel. Veillez bien a ne pas confondre avec la distance des exos d'avant... de -160