Programmer sur Script (partie 4)

Voir le sujet précédent Voir le sujet suivant Aller en bas

Tutoriel Programmer sur Script (partie 4)

Message par Morgan9195 le Jeu 14 Fév - 2:56

Programmer sur Script (partie 4)
Les bases de la 2D sur Script



On se retrouve dans cette nouvelle partie du tutoriel, vous allez enfin entrer dans la programmation en 2D sur Script.
Ouvrez donc un nouveau Projet Script Vierge avec les fichiers "start.script" et "script0.script" sur Notepad++.

Je vais vous présenter deux fonctions que j'ai créé dans Script pour vous faciliter la vie. Et croyez moi c'est vraiment avantageux de les utiliser.
Je parle bien sûr des fonctions draw_2D(); et draw_3D(); , deux fonctions vraiment incontournables dans Script.

Lorsque vous écrivez: draw_2D(); vous activez le mode "dessin 2D", toutes les lignes de codes qui suivront cette ligne seront donc affichés en 2D sur l'écran. (exemples: barre de vie, pseudo, inventaire, menu, pause, messages, etc...)

Lorsque vous écrivez: draw_3D();
Vous activez le mode "dessin 3D", tous les codes qui suivront cette ligne seront donc affichés en 3D sur l'écran. (exemples: camera 3D, bâtiment 3D, forme 2D tracé sur le sol, lumières, etc...)

Vous serez donc ravis de pouvoir passer de l'un à l'autre à tout moment, cela vous permettra donc de combiner la 2D et la 3D avec une facilité hors du commun.

Vous allez pas utiliser la fonction draw_3D(); pour le moment car je vais d'abord vous enseigner la 2D puis aborder la 3D, plutôt que d'aborder la 3D rapidement et que le manque de connaissances en 2D vous pénalise.

Petit exemple d'utilisation de cette fonction:
Code:

draw_2D();
// copie ici tout ce que tu veux dessiner en 2D
draw_3D();
// et ici tout ce qui concerne la 3D
draw_2D();
// et là encore de la 2D
draw_3D();
// et pourquoi pas à nouveau de la 3D
show_message("Bon, j'en ai ras le bol de changer entre 2D et 3D sans arret, c'est quand qu'on affiche quelque chose de concret sur l'ecran?");
game_end();

Remarque: Les lignes précédés de "//" ne sont pas lus par Script, elles servent de légendes.

Pour mettre en pratique cette fonction, je vais vous donner un code qui dessine un texte en 2D sur l'écran.
Lorsqu'on veut dessiner quelque chose à l'écran, on doit le redessiner constamment pour qu'il s'actualise et qu'il reste affiché. Les fonctions de dessin ne doivent donc pas se trouver dans le fichier start.script ni dans le fichier end.script.
Voici le code à placer dans le fichier script0.script:
Code:

draw_2D();
draw_set_color(c_blue);
draw_text(300,100,"Salut! C'est moi votre texte! =P");
Dans ce petit exemple nous n'avons pas besoin de remplir le fichier start.script , nous n'avons rien à initialiser au début du jeu.

La première ligne passe Script en mode dessin 2D comme vu précédemment.
Ensuite, draw_set_color(c_blue); sélectionne une couleur, ici c_blue, mais vous pouvez mettre c_purple, c_white, c_red, c_black et pleins d'autres... (couleur par défaut: c_black)
La ligne draw_text(300,100,"Salut! C'est moi votre p'tit texte! =P"); fonctionne un peu comme la fonction show_message("Texte"); , vous vous souvenez? Sauf que la fonction draw_text(x,y,"Texte"); contient d'autres valeurs, des coordonnées x et y en pixels de l'endroit où vous voulez afficher le texte sur l'écran. (x=abscisse et y=ordonnée, le point [0,0] se situe dans le coin supérieur gauche de la fenêtre Script)
Vous pouvez tester ce code en exécutant Script
Vous verrez que ce code écrit le texte en 2D et en bleu aux coordonnées x=300, y=100 de l'écran.

Bon, je suppose que certains d'entre vous ne vont pas tester ce code par flemmardise, alors je vous l'ai fais à votre place, sachez juste le refaire de façon autonome:
Spoiler:

Cliquez sur l'image pour la voir entièrement



Et voici une petite explication de la ligne de code qui écrit le texte à l'écran, il s'agit de l'explication de cette ligne:
draw_text(300,100,"Salut! C'est moi votre p'tit texte! =P");

Spoiler:



Maintenant je vais vous montrer comment importer et dessiner une image 2D dans Script.

Vous vous souvenez des variables qui peuvent contenir n'importe quoi?
Et bien nous allons nous en servir pour stocker des images.
Le code pour importer un sprite (une image) dans une variable est le suivant:
Code:

variable=import_sprite(emplacement);
variable: variable qui stocke l'image
emplacement: l'endroit où se trouve l'image sur l'ordinateur à partir de Script

Ce qui donne ceci:
Code:

image_bois=import_sprite("res\spr\wood.png");
image_bois : On va appeler cette variable "image_bois", mais vous pouvez la nommer comme vous voulez
res\spr\wood.png : L'image se trouve dans le dossier "res", puis dans le dossier "spr", et elle se nomme "wood.png". N'oubliez pas de mettre l'emplacement du fichier entre guillemets.

Voila. Nous avons notre importation de sprite, c'est aussi simple que ça.
Maintenant que l'image est importée dans le jeu, on aimerait bien l'afficher, sinon ça ne sert absolument à rien!  lol!
Et bien rappelez vous de la façon dont on se sert de la fonction pour afficher un texte:
Code:

draw_text(x,y,"texte");
Pour afficher une image en 2D, c'est un peu pareil:
Code:

draw_sprite(image,-1,300,100);
Ne faites pas attention au -1, apprendre son utilité vous compliquera les choses, laissez -1 puis ne le touchez plus. Il n'est utile que pour les images animés.
Le x et le y fonctionnent comme pour un texte, je vous laisse donc placer votre image où vous voulez.
ensuite, dans "image", mettez juste le nom de la variable qui contient l'image, comme ceci par exemple:
Code:

draw_sprite(image_bois,-1,300,100);

Attention, chose ultime à retenir:
L'importation d'une image se fait seulement une fois, et tout au début du jeu, donc elle doit être mise dans le fichier start.script
L'affichage du sprite se fait constamment, alors elle doit se faire dans un fichier script0.script

Voila. Maintenant que vous maitrisez les textes, les messages et les images 2D, je vais vous montrer comment faire des commentaires et des formes 2D. Allez, courage! On est presque à la fin de cette partie!

Les commentaires sont des textes que vous pouvez écrire dans votre code, mais ce texte n'est pas lu par Script. Ils vous servent juste de "post-it" mais l'ordinateur les ignore complètement lors de l'exécution du jeu.
C'est en partie pour les commentaires que je vous ai demandé d'utiliser Notepad++, voici quelques exemples de commentaires:
Spoiler:


Les commentaires court qui peuvent tenir sur une seule ligne commencent par "//"
Tout ce qui ce trouve après "//" mais qui est sur la même ligne est compté comme un commentaire par l'ordinateur.
Et les commentaires qui sont trop long pour tenir sur une seule ligne sont précédés de "/*" et sont suivis de "*/". Tout ce qui se trouve entre ces deux balises est un commentaire et n'est donc pas lu par l'ordinateur. Vous pouvez mettre tout ce que vous voulez à l'intérieur.

Remarque: Notepad++ a coloré les commentaires d'une façon différente. Si sur votre projet Script les codes ne sont pas colorés, reportez vous à quelques chapitres plus tôt de ce tutoriel pour voir la manipulation à faire.
Autre remarque: Le fond de mes codes est noir, alors que le votre est probablement blanc. C'est juste parce que j'ai changé le thème de couleurs dans les paramètres de Notepad++.

Un commentaire peut servir à:
- Noter le fonctionnement d'une fonction ou d'un ensemble de fonction
- Nommer des zones importantes du code pour la retrouver facilement
- Désactiver l'exécution d'une fonction sans l'effacer
- contenir un bouillon d'ensemble de fonctions à ne pas exécuter
etc...

Passons maintenant au dessin de formes 2D. Avant de dessiner en 2D, vous devez d'abord mettre
draw_2D(); et light(false); , vous vous souvenez pourquoi? Bien.
Mais ce n'est pas tout, il faut choisir une couleur avant de dessiner. Sinon, comment l'ordinateur saura de quelle couleur utiliser?
Nous allons donc nous resservir de la fonction draw_set_color(couleur);
Exemple:
Code:

draw_set_color(c_blue);

Je vais commencer par vous montrer comment dessiner une ligne à l'écran, puis on abordera les formes plus compliquées comme les rectangles et les cercles, qui restent très simples dans l'ensemble des fonctions de Script.
Souvenez-vous de la fonction qui écrit un texte. On définit un point (les coordonnées x et y de ce point) et le texte à écrire. Et bien pour une dessiner une ligne c'est un peu similaire, on définit deux points, et la fonction va les relier toute seule.
exemple:
Code:

draw_line(20,30,120,140);
Voici la syntaxe de la fonction:
draw_line(x1,y1,x2,y2);
x1 et y1 sont les coordonnées du premier point.
x2 et y2 sont les coordonnées du deuxième point.

Attention: N'oubliez pas qu'une ligne doit être dessinée en 2D, il faut donc avoir précédemment activé la 2D et désactivé les lumières 3D.

Remarque: Les coordonnées peuvent être contenu dans des variables, et ainsi être importés dans la fonction qui dessine la ligne, ça permet de faire des lignes qui se déplacent.
Exemple:

start.script
Code:

variable=0;

script0.script
Code:

variable+=1;
draw_line(100,variable,500,variable);

La variable va constamment augmenter et ainsi déplacer progressivement la ligne.
Je vais pas trop m'attarder sur cette fonction simple, si vous ne comprenez pas bien son fonctionnement entrainez-vous ou demandez de l'aide à d'autres personnes du forum.

Passons maintenant au dessin d'un rectangle.
La syntaxe de cette fonction ressemble beaucoup à la précédente fonction:
draw_rectangle(x1,y1,x2,y2,outline);

Exemple d'utilisation de cette fonction:
Code:

draw_rectangle(20,50,60,100,true);
Les nombres sont toujours des coordonnées de points, mais ces deux points sont obligatoirement deux sommets opposés du rectangle.
Le "true" que j'ai mis signifie que je dessine que les contours du rectangle, c'est à dire ses côtés. Si on met "false" à la place, la fonction dessinera une rectangle plein.

Information: true et false signifient vrai et faux en anglais, il veulent aussi dire 1 et 0 en programmation.

Faites quelques tests de ces fonctions afin de vous y habituer un peu, et n'oubliez pas de noter toutes ces choses importantes pour pas les oublier. Avec le temps vous n'aurez plus besoin de vos notes pour vous en souvenir.

Voici maintenant la fonction qui permet de dessiner un cercle. Je vous donne juste la syntaxe car on la comprend facilement, elle est assez similaire aux fonctions précédentes:
draw_circle(x,y,r,outline);

x et y sont les coordonnés du centre du cercle
r est le rayon en pixels
outline définit si la fonction doit dessiner juste le contour du cercle ou un cercle plein (true ou false, comme dessiner un rectangle).

On poursuit sur la fonction qui dessine un triangle:
draw_triangle(x1,y1,x2,y2,x3,y3,outline);

La fonction qui dessine une ellipse:
draw_ellipse(x1,y1,x2,y2,outline);

La fonction qui dessine une flèche:
draw_arrow(x1,y1,x2,y2,size);
size est la taille en pixels

La fonction qui dessine un rectangle avec des bords arrondis:
draw_roundrect(x1,y1,x2,y2,outline);

Vous avez tout noté? Très bien.
Je fais une pause pour vous laisser le temps de vous entrainer avec toutes ses fonctions, on se retrouve dans la prochaine partie dans laquelle nous allons interagir avec ces formes (détection de la souris, détection des clics, détection du clavier, modification du texte, des images et des couleurs). Cependant, prenez votre temps et testez déjà ces quelques fonctions que je vous ai passé.
A la prochaine!
avatar
Morgan9195
Fondateur
Fondateur

Messages : 168
Date d'inscription : 11/02/2013
Age : 22
Localisation : Entre le fauteuil et le clavier

Projet(s)
Niveau de connaissances dans Script: Professionnel
Spécialité: Programmeur

Voir le profil de l'utilisateur http://morgan9195.olympe.in/devblog/

Revenir en haut Aller en bas

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum