Les formes simples

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

Tutoriel Les formes simples

Message par Morgan9195 le Jeu 29 Aoû - 2:57



Programmer sur Script
Les bases de la 2D



Pour commencer, voyons 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é. Le fichier program.script étant exécuté constamment par Script, il dessinera correctement ce que nous souhaitons afficher.
Voici le code à placer dans le fichier program.script:
Code:

draw_set_color(c_blue);
draw_text(300,100,"Salut! C'est moi votre texte! =P");

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 texte! =P"); contient 3 arguments séparés par des virgules.
Le premier est la coordonnée x (abscisse) du texte (en pixels);
Le second est la coordonnée y (ordonnée) du texte (en pixels)
Le point de coordonnées [0,0] se situe dans le coin supérieur gauche de la fenêtre Script
Le troisième argument est le texte à afficher. Si le texte contient le symbole #, la fonction le transformera en retour à la ligne.
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 nous allons voir comment importer et dessiner une image 2D dans Script.

Pour dessiner une image 2D à l'écran, il faut d'abord l'avoir importé.
Pour importer une image, il suffit de stocker l'image dans une variable. Cette variable pourra ensuite être utilisée pour dessiner l'image 2D.
Voici la fonction permettant d'importer un sprite (une image) dans une variable:
Code:

variable=import_sprite(fichier);
variable: variable qui stocke l'image
fichier: nom du fichier de l'image (devant se situer dans l'emplacement res/spr/ de votre projet Script)

Ce qui donne ceci:
Code:

image_bois=import_sprite("wood.png");
image_bois : On va appeler cette variable "image_bois", mais vous pouvez la nommer comme vous le souhaitez
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.

L'importation d'un sprite se fait une seule fois, au démarrage du programme, c'est à dire dans la condition event_start

Maintenant que l'image est importée, nous allons la dessiner à l'écran.
Rappelez vous de la façon dont on affiche un texte:
Code:

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

draw_sprite(sprite,-1,x,y);
sprite est la variable qui contient l'image précédemment importé.
-1 définit l'animation de l'image. Je vous conseille de toujours mettre la valeur -1, cela permettra aux fichiers gif et autres images animés de fonctionner.
Le x et le y fonctionnent comme pour dessiner un texte.
exemple:
Code:

draw_sprite(image_bois,-1,300,100);
L'affichage du sprite se fait constamment, contrairement à son importation.

Passons maintenant aux formes 2D.
Lorsqu'on dessine en 2D, c'est exactement comme si on dessinait sur une feuille de papier:
D'abord on choisi une couleur, puis on l'utilise pour dessiner quelque chose.
Voici la fonction pour choisir une couleur:
draw_set_color(couleur);
L'argument "couleur" est a remplacer par le nom d'une couleur. Voici quelques exemples:
c_aqua
c_black
c_blue
c_dkgray
c_fuchsia
c_gray
c_green
c_lime
c_ltgray
c_maroon
c_navy
c_olive
c_purple
c_red
c_silver
c_teal
c_white
c_yellow

Exemple:
Code:

draw_set_color(c_blue);
Pour une dessiner une ligne, on définit deux points par leurs coordonnées, 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.

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);
x1 et y1 sont les coordonnées du premier point.
x2 et y2 sont les coordonnées du deuxième point.
Attention, le second point doit être le sommet opposé au premier point.
outline est une valeur booléenne (true(=1) ou false(=0)).
true ne dessinera que les contours du rectangle et false dessinera un rectangle plein.

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

Exemple:
Code:

draw_rectangle(20,50,60,100,true);
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 du cercle 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);
cette fonction a besoin des coordonnées de trois points.

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);

Une autre fonction qui dessine un rectangle aux bords arrondis;
draw_rectangle_round(x1,y1,x2,y2,r);
"r" est le rayon des coins circulaires du rectangle.

Prenez le temps de bien vous entrainer avec ces quelques fonctions avant de passer à la suite, car elles vous seront très utiles pour tout le reste du tutoriel.




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