Aller au contenu

2) Créons notre premier projet !

Salut ! Ici nous allons créer notre premier projet ensemble. :)

Les sprites

Avant de se lancer sur Construct, je vais vous parler des sprites. Tout d’abord qu’est-ce qu’un sprite ?

Wikipédia a écrit:Un sprite désigne une image qui peut être déplacée par rapport au fond de l’écran.

Je vais essayer d’être plus clair : ce sont les images qui constituent votre jeu. Un personnage est un sprite. Une balle est un sprite. Toutes les images de votre jeu sont des sprites.
Vous devez surement savoir qu’il existe plusieurs formats d’image. Voici un tableau pour les différencier (et vous les faire connaitre si vous ne les connaissez pas) :

Avantages/Inconvénients :

  • BMP (BitMap) : Pas de perte de qualité. Image de grosse taille.
  • JPG (Joint Photographic Expert Group) : Image de petite taille. Qualité de l’image moins bonne.
    Pas de transparence.
  • PNG (Portable Network Graphics) : Gère la transparence. Aucune perte de qualité Pas d’animation
  • GIF (Graphical Interchange Format) : Animation possible. Transparence Moins bonne qualité que le PNG

Celui que nous allons utiliser est le PNG. Comme vous le voyez il gère la transparence, et la qualité reste impécable. On pourra donc faire avec des jeux avec de bons graphismes ! :)

Ouvrez maintenant Construct, vous avez devant vous le menu vu dans le chapitre précédent. Créez un nouveau projet, à l’aide du menu Fichier > New, New Direct-X game.

Vous pouvez utiliser le raccourcis clavier Ctrl + N.

Voila, vous avez devant vous votre projet. Évidemment il est vide pour l’instant. Vous voyez devant vous un grand rectangle blanc. C’est votre zone de travail. C’est ici que vous allez mettre en scène votre jeu, placer des images, du texte, etc… Cette zone s’appelle le layout (nous y reviendrons très bientôt).

Et si on créait un sprite, ça vous dit ? :D
Double cliquez sur votre zone de travail et vous verrez un menu s’ouvrir devant vous.

Image
Le menu objet

C’est le menu objet. À l’intérieur vous avez donc… des objets. :D Ces objets permettrons plusieurs choses dans votre jeu, comme par exemple mettre une lumière, jouer du son, ou même tout simplement afficher une image ! Sélectionnez l’objet Sprite (celui avec une image en forme de rouage). Et oui, un sprite c’est un objet ! :) Un fois sélectionné, cliquez sur Insert pour l’insérer dans votre projet.
Votre curseur à changé, il a pris la forme d’un croix. C’est normal, vous avez crée un Sprite, mais maintenant il faut aussi dire où vous voulez le placer ! Cliquez où vous voulez sur votre zone de travail. Ce n’est pas fini, une autre fenêtre s’ouvre encore. :lol:

Le Picture Editor, ou l’éditeur d’image de Construct

Cette fenêtre qui vient de s’ouvrir s’appelle le picture editor. C’est un éditeur d’image, comme notre bon vieux programme Paint. :P Vous pouvez dessiner dessus, faire des carrés, des ronds, des traits… C’est cet éditeur d’image qui va faire le lien entre le jeu et votre image, c’est lui qui va permettre de mettre l’image dans le jeu. Il y a une différence cependant avec Paint, mais nous y reviendrons. ;)

Image
L’éditeur d’image de Construct

Décrivons la brièvement:

  • 1) C’est un menu horizontal, avec la possibilité de charger/sauvegarder une image, d’inverser l’image, de changer sa taille, etc…
  • 2) Dans ce même menu, deux boutons sont importants : le premier permet de gérer la transparence, et le deuxième le masque de collision. Nous aborderons ces notions bientôt.
  • 3) Ici se trouve toutes les options d’un outil: sa taille, sa dureté, son opacité, etc… Il est aussi possible d’adoucir vos tracé avec l’option Smooth.
  • 4) C’est un menu vertical, comprenant tous les outils nécessaires à la création de l’image.
  • 5) Dans ce même menu, deux outils sont importants : le premier permet de placer un hotspot, le second gère les image points (points d’images).

Vous pouvez alors dessiner dans le carré blanc devant vous, grâce aux outils qui vous sont proposés. Ou bien vous pouvez charger une image à l’aide du menu du haut (en cliquant sur le dossier). Quoiqu’il arrive, au final, ça sera l’image qu’aura votre objet.
Une fois votre image chargée ou crée (c’est la même chose), il y a un dernier paramètre à régler. Oui, si il y a un éditeur d’image intégré à Construct, ce n’est pas pour rien. ^^ Dans la barre d’outil de gauche, il y en a deux qui sont intéessants : le <gras>hotspot</gras> et les <gras>points d’image</gras> (c’est le <couleur nom= »bleu »>5</couleur> de la liste). Nous verrons les points d’image dans le prochain chapitre.
Mais intéressons nous au <gras>hotspot</gras>. C’est un point qui va définir la position de votre sprite. C’est en quelque sorte son centre de gravité.

Prenez l’habitude de le mettre au centre de votre sprite, ce sera plus facile par la suite.
Lorsque l’on parlera de la position du sprite, ce sera en réalité la position de son hotspot

Donc, dès que vous avez votre image prête, mettez immédiatement le hotspot au centre.
Une fois votre image prête, fermez la fenêtre de l’éditeur d’image. Une petite fenêtre s’ouvrira pour vous demandez si oui ou non vous voulez sauvegarder l’image. Mettez oui pour la garder. Votre sprite apparait sur la zone de travail (le layout ). Vous avez donc votre sprite (votre objet plutôt) devant vous, vous voulez qu’on teste le programme ?
Pour le tester, c’est le bouton du petit écran en haut. Ça marche !

Eh ! Mais pour l’instant ça ne fait rien, je croyais qu’on pouvait faire pleins de trucs simplement !

C’est normal, pour l’instant il n’y a qu’une image. :lol: Mais en effet, ça ne bouge pas trop pour l’instant, et comme par hasard, la prochaine partie change cela ! ^^

Les Behaviors

Prêt à continuer ? :)
Les behaviors ! Derrière ce mot anglais se cache d’immenses possibilités pour Construct. En francais, un « behavior » signifie « comportement ». Ca nous servira donc à dire quel comportement aura notre image. Et vous allez voir qu’en quelques clics à peine ! On va apprendre à s’en servir à l’aide d’exemples.
Sur le menu de gauche vous avez plusieurs listes :

Image
Les propriétés d’un objet

Comme le dit la légende de l’image, ce sont les propriétés d’un objet (son nom, sa taille, sa position, etc…).

Si vous ne voyez pas ce menu assurez-vous que votre sprite est bien sélectionné (en cliquant dessus). Un sprite qui n’est pas sélectionné n’a rien autour de lui. Un sprite sélectionné a un contour bleu avec des points sur les bords.

Image
Sprite qui n’est pas sélectionné
Image
Sprite sélectionné

La propriété qui nous intéresse est la propriété Behaviors, qui va nous permettre de donner un comportement à notre sprite. Appuyez sur le plus [+] pour dérouler la liste, puis une nouvelle option apparaît.

Image
Le menu <gras>Behaviors</gras> déplié

Cliquer sur Add ajoutera un comportement à notre sprite. Ajoutons-en un ! :) Cliquez et une fenêtre s’ouvre.

Image
Le menu Comportement

C’est le menu comportement. Vous pourrez à travers lui choisir le comportement qu’aura votre sprite. Il y a pleins de comportements différents dans Construct, on peut faire plein de choses. Celui que nous allons choisir est le premier : les 8 Direction. Ce comportement permettra à notre sprite d’être déplacé avec les touches du clavier, sur 8 directions possibles (haut, bas, gauche, droite, et les diagonales). Une fois sélectionné, cliquez sur Insert pour l’insérer, ce qui nous donne ceci dans le menu Behaviors :

Image
Les paramètres du comportement 8 direction

Vous voyez que le menu s’est agrandi. Grâce à lui nous allons pouvoir paramétrer le comportement de notre sprite. Et c’est ça qui fait que Construct est puissant. Certains programmes de ce genre ne permettent pas de régler les comportements, Construct le permet ! Voici un tableau expliquant les différents paramètres de ce comportement :

This behavior Remove : Permet de supprimer le comportement sur l’objet.
Name : Nom du comportement, qui permettra de le reconnaître plus tard. Nous n’avons pas besoin de changer ce paramètre.
Control : Indique quel joueur contrôle l’objet (joueur 1 (vous), joueur2, joueur 3).
Max Speed : Vitesse maximum que l’objet peut faire (en pixel par seconde).
Acceleration : L’accélération de votre sprite. Plus elle est élevée, plus votre sprite atteindra vite la vitesse maximum.
Deceleration : La décélération de votre sprite (la vitesse à laquelle elle ralentit lorsque vous arrêtez d’avancer). Plus elle est élevée, plus votre sprite s’arrêtera vite.
Rotation : Indique différents types de rotation de l’objet. Si vous mettez 360° votre sprite tournera petit à petit vers la où vous vous déplacez. 8 Direction pour qu’il ne tourne que sur 4 axes possibles, c’est à dire qu’il tournera d’un coup sur la gauche, ou la droite (par exemple). None pour que le sprite ne tourne pas lorsqu’il bouge.
Direction : Permet de choisir si votre sprite se déplacera sur les 8 directions, les 4 directions (haut, bas, gauche, droite), ou bien 2 directions (haut/bas ou gauche/droite).

Les autres comportements ont certains de ces paramètres, mais aussi d’autres qui leurs sont spécifiques. Nous les aborderons ensemble. ;) Testons l’application pour voir ce que ça donne (avec l’écran bleu en haut).
C’est pas beau ? :D

Ne nous arrêtons pas en si bon chemin et découvrons un nouveau comportement : bullet. En français c’est une balle de pistolet. Un objet avec ce comportement ira tout droit comme une balle.
Avant de poursuivre nous allons ajouter un autre sprite à notre zone de travail (double clic, relisez plus au dessus si vous avez oublié comment faire). Cette image aura la forme d’une balle, un carré ou un rond fait l’affaire. Quittez l’éditeur d’image puis ajoutez-lui un comportement (c’est toujours le même menu qu’avant).

Image
Le menu Comportement, encore une fois

Cette fois-ci nous allons choisir Bullet puis l’insérer à l’aide du bouton Insert. Pas besoin de toucher aux paramètres cette fois-ci, nous pouvons tester l’application.

La balle avance tout droit ! :o

C’est normal, elle se comporte comme une balle : elle va tout droit. Pour l’instant, cette balle ne sert pas à grand chose. Mais dans le prochain chapitre vous verrez qu’elle va changer beaucoup !

À coté de l’écran pour tester l’application, il y a une disquette pour sauvegarder votre projet. Sauvegardez-le, nous continuerons à travailler dessus le prochain chapitre. Les projets Construct sont au format .cap

 

Pour continuer, c’est par ici !