GameCorp - Index des forumsGame MakingProgrammationProgrammation[Tutorial Blitz3D] : Les Effets Sinisoïdales sous Blitz3D
[Tutorial Blitz3D] : Les Effets Sinisoïdales sous Blitz3D
| Crystal Noir |
Posté le 12 Fév 2008 à 22:53
|
|
 Messages : 46 GCPoints : 15655 |
Allo tout le monde :) Tutorial destiné à comprendre comment faire des effets sinusoïdales avec Blitz3D, ce tutorial comporte une petite partie théorique applicable sur n'importe quel langage :) Alors qu'est ce qu'on fait avec des Sin et Cos hein vous allez me dire. Et bien des cercles notamment...Ca y est j'en vois un la bas ! ouah l'autre hé, il veut nous faire dessiner des cercles sous blitz, quel taré ! Le truc qui sert à rien ! Et bien détrompez vous ! Certes notre première partie est consacrée à la conception d'un cercle sous blitz, mais vous allez voir plus ce tuto va avancer, plus vous allez le trouver intéressant. Bon et ensuite après un cercle ? Et bien par exemple, vous connaissez peut être les effets OldSchool que nous pouvions trouver à l'époque sur Amiga, Atari dans des démos ou encore avant de lancer des jeux : Cet effet sinusoïdale qui nous en mettait à l'époque pleins les yeux ! Et bien c'est ce que nous allons apprendre à faire. Ah oui hein là tout de suite "aaaaaaaah" héhé. Bon commençons par le début, lancez Blitz et demandez lui un fichier bb vierge. Avant de commencer un peu de théorie. Pour tracer un cercle avec la commande "plot", nous prenons 360 degrés, et pour chaque degré, on fait un point à une certaine distance du centre du cercle. En clair la droite qui part de notre point jusqu'au centre, et bien c'est le rayon :) Ce qui nous donne ceci : x = rayon * Sin(Angle) y = rayon * Cos(Angle) Passons à la pratique vous allez comprendre, ajoutez ces lignes de codes : Citation :
Regardez donc, on définit l'angle de 0 à 359. hein ??? Bah je croyais que c'était 360 degrés ? Tout juste, cependant nous commençons à 0 et non 1 c'est pour cela que nous utilisons 359. Pour chaque angle on calcule x et y suivant la méthode décrite plus haut. Et ensuite on fait un point avec Plot. Pour centrer le cercle sur l'écran, nous ajoutons 400 et 300 aux coordonnées (la résolution étant de 800 X 600, le centre de notre cercle sera au centre de l'écran). Pour bien comprendre le rayon dont je vous parlais tout à l'heure nous allons le tracer. Ajoutez avant la commande Waitkey() ceci : Citation :
Vous remarquerez que si vous prenez un point de notre cercle il est bien à 50 pixels du centre de celui-ci. Enlevez la ligne que nous venons d'ajouter, et essayez de remplacer le 50 en x par 20. Que voyez vous ? Vous voyez ce n'est pas dur de faire un cercle :p Bien, maintenant je vous vois venir, et comment on fait nos effets sinusoïdales alors ? Parfait, commencez un nouveau projet sous Blitz et mettez ce code : Citation :
Mouais bon, c'est pas vraiment une sinusoïde ca. Comment on fait alors ? Il s'agit en fait de calculer les coordonnées x et y pixel par pixel. Remplacez ce code par ceci : Citation :
Et maintenant ? Elle n'est pas belle notre sinusoïde ? En fait on applique ce que l'on a vu plus haut avec le cercle. La coordonnées y est calculée selon le même procédé, x quant à lui se contente de nous faire la sinusoide en "ligne". Lorsque Angle arrive à 360 alors on le réinitialise à 0 pour refaire une autre sinusoïde :) Bon optimisons un peu, effacez tout et mettez ceci à la place : Citation :
Ici nous avons créé un tableau. Un tableau qui peut stocker 360 valeurs (de 0 à 359), tiens ! 360 cela ne vous dit rien ? En fait l'effet est le même que tout à l'heure, la seule différence c'est que l'affichage est plus rapide, pourquoi ? parce que les coordonées sont calculées à l'avance grâce au tableau. Pour chaque case du tableau, sa valeur est une coordonnée y ! Bien maintenant nous allons faire un effet sinusoïdale façon oldschool comme expliqué au début. Nous verrons aussi certaines choses nouvelles, ce ne sera pas très dur mais suivez bien. Commencez par télécharger la source, car elle contient l'image dont on a besoin. Source à télécharger maintenant : http://crystalnoir.free.fr/Tutorials/Blitz3D/Sinus.rar Ensuite je vous explique le code, dans le fichier source vous avez ceci : Citation :
Je vous vois d'ici holalala j'y capte plus rien ! Pas de panique, je vous explique tout en fait ici nous appliquons ce que nous avons appris mais d'une manière un peu plus optimisée. Bon, l'initialisation graphique vous connaissez. Ensuite nous chargeons notre image. Cette fois le tableau a 256 cases ? hein ? comment ca se fait ? Dans l'autre partie, c'était bien 360 dont nous avions besoin ???? Exact cependant ici nous limitons le tableau à 256 cases et nous calculons le Sinus aproximativement à 1,406 pixel près. Si vous faites sur votre calculatrice 256 X 1.406 vous n'avez pas presque 360 ? Le tableau est donc déjà plus petit, et cela est donc plus optimisé. Passons au reste. Nous avons une variable StarAngle, et en fait c'est l'angle de départ sur lequel notre boucle For Next va travailler. Essayez de changer la valeur de starangle, vous verrais que vous pouvez faire différents effets... Avez vous remarqué que nous n'utilisons plus la condition IF Then Else pour tester si angle arrive à la valeur 360 ? Ceci grâce à "$ff". Alors c quoi ca encore lol. En fait $ff permet de dire à blitz que angle est codé sur 1 bit (soit de 0 à 255) quand il arrive à 255 et ben on repart à 0 tout simplement. Terminé la condition qui teste si angle arrive à 255 ou pas avec une Condition If. Enfin, on utilise la commande CopyRect pour copier pixel par pixel notre image avec notre sinusoïde. et le tour est joué ! Pour la variable starangle, comme je vous l'ai dit c'est l'angle de départ où on commence l'effet sinusoïde si vous changez la valeur vous aurez de beaux effets. J'en vois certains : je pige pas angle va jusqu'à 255 mais on a toujours besoin de 360 ! Oui ! mais souvenez vous au début du code, le tableau ne fait que va jusqu'à 255 et nous multiplions par 1.406. De ce fait Angle aura toujours une valeur max de 255 ce qui évitera de demander au programme de prendre une valeur du tableau en dehors des limites de sa dimension : TableSin(angle) il prend la valeur qui se trouve à la position angle du tableau. Pour finir, certains vont me dire aussi : 255 X 1.406 cela ne fait pas pile 360. C'est vrai, mais il faut savoir une chose c que Blitz lui s'en contre fout. En fait quand il arrive à 360, il fait 361 et 361 correspond en fait à l'angle 1° ! 362 à l'angle 2° etc... Pour lui il recommence un tour, pour nous c'est pas très logique n'est ce pas. C'est pour cela que dans les codes précédents, nous testions avec une condition si angle arrivait à 360. Ici vous pouvez remplacer 1.406 par 1.412, le resultat dépassera 360, mais n'influera pas pour autant sur le code. En fait ici on redessine tout l'écran (de 640 à 480) cependant vous pouvez bouger l'image au centre de l'écran si vous voulez, il suffit d'ajouter un nombre à TableSin(Angle) et à y pour déplacer notre image sur l'écran, essayez donc de centrer à l'écran notre effet sinusoïdale. Vous pouvez également demander à Blitz de redessiner uniquement la partie où se trouve l'image, pour cela il suffit d'avoir les dimensions exactes de l'image et hop le tour est joué. Je vous laisse modifier un peu le code tout seul pour que vous voyez les différentes possibilités :) Voilà j'espère que ce petit cours vous aura permis de comprendre un petit peu comment fonctionne ces effets là :) |
|
| Mod |
Posté le 29 Juin 2008 à 12:55
|
|
 Messages : 4954 GCPoints : 2100823 |
[Tutoriel ajouté au site] : Les effets sinusoïdaux | |
Voir le profil
Envoyer un message privé
GameCorp - Index des forumsGame MakingProgrammationProgrammation[Tutorial Blitz3D] : Les Effets Sinisoïdales sous Blitz3D
Répondre