Version en ligne

Tutoriel : Créez vos jeux avec Game Maker

Table des matières

Créez vos jeux avec Game Maker
La petite histoire de Game Maker
Introduction
Ce dont Game Maker est capable
Ce que nous allons faire
Acquérir Game Maker
Téléchargement et Installation
L'Interface de Game Maker 8
Votre premier projet
Premiers pas
Ajouter un objet
Ajouter une pièce
Et avec un fond ?
Les évènements 1/2
Les événements en théorie
Notre premier événement
Les événements 2/2
Le clavier
Système de score et de vies
Et avec du son ?
Une animation avec les sprites
Les animations
La transparence
Gauche/droite
Ce que nous pouvons améliorer
Votre premier TP : Casse-brique
Cahier des charges
C'est parti !
Améliorations
Les variables
Créer sa variable
Test de variable
Mode avancé et positionnement de texte
Les actions "Draw" en revue
Afficher des sprites et des fonds
Afficher des formes
Afficher des lignes
Petite promenade avec les Paths
Création d'un path
Peaufinage du path
Les actions qui vont avec
Mini-TP
Les timelines
Introduction
Créer une timeline
Les tuiles
Introduction
Charger un tileset
Introduction au GML
Comment fonctionne un programme
Comment se présente le GML
Dis bonjour !
Création d'un code
Remplissage du code
Afficher un message

Créez vos jeux avec Game Maker

Salut les zéros !

Alors, vous voulez créer vos propres jeux vidéos tout en suivant un tutoriel qui vous permet d'avancer à votre rythme, et qui explique tout en partant de zéro, sans aucune base nécessaire ? Vous êtes tombé sur le bon tutoriel ! :p

Peut-être avez-vous essayé la programmation pour créer vos jeux, mais vous trouviez cela trop difficile ? Peut-être ne savez-vous tout simplement pas par où commencer, et dans ce cas vous vous êtes tourné vers un logiciel qui-fait-tout (enfin, pas tout quand même :D ) ?

Et bien mesdames et messieurs, je vous présente le fabuleux, l'unique Game Maker. C'est un logiciel très performant qui possède une interface très simple, et qui vous permettra, en quelques clics de souris, de créer vos jeux vidéos de la façon la plus facile du monde.

Vous pouvez créer tout ce qui est imaginable : au début, vous n'oserez pas aller trop loin et ferez des petits jeux, tels que des Pacmans, puis progresserez et vous attaquerez à des projets bien plus ambitieux, tels que de longs MMORPG en 3D ! (Bon il y aura du boulot quand même avant d'en arriver là :p ).

Game Maker est donc un logiciel très performant qui permet de créer des jeux très simples comme très élaborés. La toute première version est sortie en 1999, et la version la plus récente est Game Maker 8.0. Il a donc bien évolué ! ^^

Game Maker est un logiciel payant, qui coute 25 euros, mais une version gratuite existe. Elle comporte en contrepartie moins d'options, mais reste tout de même très complète. Il n'y a pas de limite de 15 ou 30 jours comme sur la plupart des logiciels.

Image utilisateurCliquez sur l'image pour l'agrandir

C'est bon, je vous ai bien mis ça dans la tête ? Vous êtes fin prêt ? :pirate:
On y va quand vous voulez !

La petite histoire de Game Maker

Introduction

Nous allons commencer ce tutoriel par un chapitre sur l'histoire de Game Maker. En effet, autant connaitre sur quoi on va travailler que de se lancer corps et âme dans quelque chose qui nous est inconnu.

Game Maker est un logiciel qui sert à développer des jeux vidéos, ça veut dire qu'il sert à les créer. Pour votre culture générale, sachez qu'il a été créé par un néerlandais, Mark Overmars. Il a sorti la toute première version de ce logiciel en 1999.

A ce jour, la version actuelle est la version 8.0. Le logiciel a donc bien évolué depuis sa première version. C'est cependant depuis la version 6.0 que Game Maker a commencé à devenir très intéressant, notamment avec la possibilité d'ajouter de la 3D dans ses jeux.

Introduction

La petite histoire de Game Maker Ce dont Game Maker est capable

Introduction

Game Maker a subi de nombreux changements au fil de ses versions. Voici un récapitulatif des changements principaux de chaque version (sources : wikipedia et gamemaker.fr).

Histoire de Game Maker

L'ancêtre de Game Maker est sorti en novembre 1999. Il s'appelait à l'époque Animo. Il n'y a jamais eu de version 1.0, la première étant la 1.1. Dans cette version, les jeux créés devaient alors être lancés depuis Animo car il n'y avait alors pas d'exécutables.

L'apparition des exécutables fut dans la version 1.4, qui proposait également de travailler avec du texte (on ne pouvait utiliser auparavant que des images).

La version 2.0 est sortie en 2000. Cette version utilise alors DirectX au niveau sonore et le moteur graphique est deux fois plus rapide. Il est également possible de tester son jeu dans une fenêtre à part.

En 2001 sort la version 3.0. Toutes les opérations graphiques utilisent désormais DirectX et il est possible d'utiliser le plein-écran, des écrans de chargement, des collisions aux pixel près, et les musiques peuvent désormais être au format mp3.

La version 4.0 devient une véritable barrière avec les version précédentes car les fichiers de cette version sont alors incompatibles avec les version antérieures. L'ensemble du code-source a été complétement réécrit.

En 2003 sort la version 5.0. Game Maker n'est alors plus compatible avec Windows 95. Plus rapide, cette version propose une foule d'améliorations.

Véritable nouveauté, la version 6.0 sortie en 2004 apporte ce que bon nombre de personnes attendaient : un moteur 3D. Le moteur sonore a également été revu et il y a une plus grande finesse graphique. Des fonctionnalités multijoueurs apparaissent aussi dans cette version.

La version 7.0 a été grandement améliorée, notamment au niveau de la 3D. Cependant, la 3D utilisée par Game Maker reste sommaire ; des moteurs 3D plus performants peuvent cependant être utilisés par Game Maker. Je cite par exemple Ultimate 3D. Le moteur 2D est devenu, quant à lui, beaucoup plus rapide qu'avec les versions antécédentes.

La version 8.0, qui est la version actuelle, gère mieux la transparence des sprites (les images utilisées) et gère désormais les .png. Le modèle des collisions a aussi grandement été amélioré. Par ailleurs, le lancement des jeux est plus rapide et Game Maker 8.0 est fourni avec un pack de ressources de haute qualité (images, sons...).


La petite histoire de Game Maker Ce dont Game Maker est capable

Ce dont Game Maker est capable

Introduction Ce que nous allons faire

Ce dont Game Maker est capable

L'interface de Game Maker est très simple d'utilisation, même si elle est en Anglais. Il existe deux modes d'interface dans Game Maker : un mode avancé et un mode simple. Ainsi, il est conseillé aux débutants d'utiliser le mode simple, pendant que les personnes qui ont de l'expérience peuvent régler plus de paramètres dans le mode avancé.

Il est possible, dans la version 8.0, de faire toutes sortes de jeux. Que les graphismes soient en 2D ou en 3D, il est ainsi possible de créer des jeux d'aventure, d'action, de course, ou encore des jeux de plate-forme (avec un petit plombier qui porte une salopette rouge, par exemple :p ).

Il est également possible de programmer dans Game Maker, si les fonctionnalités que vous cherchez ne s'y trouvent pas. Le langage utilisé est le GML, Game Maker Language en abrégé (si vous ne savez pas ce qu'est un langage, je vous invite à rendre une petite visite au cours de M@teo : ici). Il vous permet d'ajouter des scripts dans vos jeux.

Voici des captures d'écrans de jeux qui ont étés créés avec Game Maker :

Image utilisateur

Super Tank 2, créé par Wargamer

Image utilisateur

Mario Reloaded, par edi9999

Image utilisateur

Et puis un jeu en 3D : The Worm Game, créé par Waspwort

Je vous propose aussi cette vidéo, qui est une compilation de plusieurs jeux créés avec Game Maker.

Image utilisateur


Introduction Ce que nous allons faire

Ce que nous allons faire

Ce dont Game Maker est capable Acquérir Game Maker

Ce que nous allons faire

Nous allons durant ce tutoriel dompter Game Maker. Nous allons tout d'abord apprendre à utiliser les fonctions de base : ajouter des objets, des sons, des musiques...

Dans un second temps, nous ferons aussi beaucoup de TP (Travaux Pratiques). Ce sont des exercices que vous ferez seuls, mais que vous serez tout à fait capables d'accomplir. C'est en quelque sorte des exercices pour pratiquer ! :)

Les TP seront bien sûr de difficulté progressive mais tous les éléments vus dans le cours permettront de les accomplir. Nous ferons au début des jeux que vous trouverez totalement nuls basiques, puis nous augmenterons les capacités de vos créations.

Les fonctions 3D et multijoueurs seront élaborées, mais dans une partie réservée à ceux possédant la version complète (payante), vers la fin du tutoriel. Nous verrons par ailleurs un peu de GML (Game Maker Language).
Rappelez-vous, c'est le langage de programmation de Game Maker. Nous verrons ainsi comment faire des choses encore plus intéressantes ;) .

Ne vous inquiétez cependant pas, nous le verrons vraiment du tout début-début. Le cours sur cette partie-là sera donc adapté ; nous verrons tout comme si vous n'aviez jamais fait de programmation.


Ce dont Game Maker est capable Acquérir Game Maker

Acquérir Game Maker

Ce que nous allons faire Téléchargement et Installation

Après une petite séance de papotage, nous allons passer au concret. Nous allons nous acquérir Game Maker, puis nous allons voir à quoi ressemble son interface. Rien de bien méchant. ^^

Et bien allons-y ! ;)

Téléchargement et Installation

Acquérir Game Maker L'Interface de Game Maker 8

Téléchargement et Installation

Je vous ai dit que Game Maker est à la base payant, mais qu'il existait une version gratuite et illimitée, qui possède en contrepartie moins d'options.
Comme je ne suis pas là pour vider les portes-monnaie, je vais donc faire ce tutoriel sur la version gratuite.

Commençons donc par télécharger Game Maker 8.0. Rendez-vous pour cela sur le site suivant :

http://www.clubic.com/telecharger-fich [...] me-maker.html

Une fois téléchargé, lancez l'installeur.

L'installation est toute bête : appuyez bêtement sur Suivant > Suivant > Suivant > Terminer. L'emplacement par défaut est le suivant :
C:\Program Files\Game_Maker8

Image utilisateur

Si vous avez coché la case correspondante durant l'installation, Game Maker 8 devrait se lancer automatiquement une fois l'installation terminée. Si ce n'est pas le cas, rendez-vous dans le dossier mentionné et double-cliquez sur l'icône Game_Maker.exe.

La première fois que vous lancez le logiciel, on devrait vous demander si vous voulez mettre l'interface en mode avancé. Nous avons parlé de cela dans le chapitre d'introduction : le mode simple est plus simple ( :lol: ) tandis que le mode avancé a plus de paramètres, plus de boutons... répondez pour le moment non.

Notez que vous pourrez changer de mode plus tard.


Acquérir Game Maker L'Interface de Game Maker 8

L'Interface de Game Maker 8

Téléchargement et Installation Votre premier projet

L'Interface de Game Maker 8

Voila donc ce que vous devriez avoir sous vos yeux ébahis.

Image utilisateur

Vu que vous ne connaissez pas son interface, nous allons tout voir en détail et tout expliquer. Tout d'abord, il y a la barre des menus tout en haut.

Image utilisateur

Bon, c'est la même que dans beaucoup d'autres programmes.

Le menu File vous permet créer un nouveau projet (New), d'en ouvrir un (Open), d'en enregistrer un (Save ou Save as) ou encore de quitter Game Maker (Non pas maintenant! ^^ )
Vous pouvez aussi switcher entre le mode simple et le mode avancé.

Image utilisateur

Le menu Edit sert à créer de nouveaux sprites (images utilisées dans le jeu : fonds, personnages, objets, murs...), à les supprimer, etc.
Le menu Resources sert à ajouter de nouveaux sons, de nouvelles pièces, de nouveaux sprites, de nouveaux objets...
Le menu Run pour tester votre projet.
Le menu Windows sert pour les fenêtres ouvertes, et enfin le menu Help sert pour l'aide, la documentation, des tutoriels en ligne, pour acheter la version complète... :-°

Ensuite, nous avons la barre d'outils, juste en dessous de la barre des menus. Ce sont les fonctions que l'on trouve dans les menus qui sont mises ici avec des icônes pour aller plus vite.

Image utilisateur

Le premier bouton sert à faire un nouveau projet, le deuxième à ouvrir et le troisième à enregistrer. Le bouton suivant sert à créer un exécutable de votre projet, les deux suivants à tester votre projet (on utilisera la flèche de gauche).
Les cinq suivants pour ajouter des ressources à votre projet (sons, images, fonds...), les deux d'après servent à régler les propriétés du projet.
Les deux derniers servent à acheter la version complète et à avoir une aide.

Nous avons ensuite la liste des objets qui composent votre projet :

Image utilisateur

Bon. Comme vous pouvez le voir, il n'y a pour l'instant aucun objet dans notre projet.

Lorsque vous ajouterez des objets, ils se placeront dans les catégories correspondantes.
Les sprites, ce ne sont pas des boissons. Ce sont des images quelconques (tout confondu : objets, personnages...) qui composent votre jeu.
Les sounds, bah comment dire, c'est, heu... ben des sons :D . Ça peut aussi être les musiques qui seront jouées durant la partie.
Les background, ce sont les fonds. Par exemple, ce pourrait être un joli ciel si vous faites un jeu vu de coté (comme Mario) ou encore un sol si vous faites un jeu vu de dessus.
Les objects, ce sont tous les objets de votre projet : les pièces à ramasser, votre personnage, les méchants, les murs, les avions...
Les rooms, ce sont les pièces. Et oui, les jeux sont faits en pièces. Pour la plupart, il n'y aura qu'une seule pièce, mais vous pouvez en empiler plusieurs pour créer des niveaux successifs.
Game information regroupe les informations sur votre jeu. A vous de tout écrire :D .
Et enfin, global game settings gère l'ensemble des paramètres de votre jeu.

Et enfin, nous avons le graaaaand carré gris qui est au centre : ben c'est là que nous créerons nos jeux !

Drag and Drop

Je voudrais aussi vous parler de quelque chose de spécial avec Game Maker.

Nous utiliserons beaucoup le drag and drop, ce qui signifie "glisser-déposer". En effet, l'interface de Game Maker est simplifié à ce point : vous prenez certains éléments et les glissez sur l'écran.
C'est comme ça que nous ferons la majorité de nos actions, par ailleurs lors des événements.

C'est peut-être un peu tôt pour vous en parler, mais sachez en gros que les événements, c'est tout ce qui se passe durant notre jeu. Que se passe-t-il si on appuie sur la flèche de droite ? Eh bien notre personnage ira vers la droite. Et si on touche une bombe ? Eh bien on perd une vie. C'est ça les événements ^^ .

Et voilà, nous avons tout vu. Comme on le dit toujours, après la théorie la pratique. Nous allons donc apprendre à créer et ouvrir un projet, puis à y ajouter des objets et enfin à le tester.

C'est quand vous voulez ^^ .


Téléchargement et Installation Votre premier projet

Votre premier projet

L'Interface de Game Maker 8 Premiers pas

Nous allons enfin pouvoir passer à la pratique. Nous allons voir comment créer et ouvrir un projet, puis a y ajouter des objets, du son, des décors... Encore une fois, ce n'est pas un chapitre difficile. Il suffit de bien suivre et tout sera bon.

On y va ?

Premiers pas

Votre premier projet Ajouter un objet

Premiers pas

Les jeux que vous créez sont répartis en ce que l'on appelle les projets. Un projet, c'est le regroupement de toutes vos images, de tous vos sons, de toutes vos informations propres à votre jeu. Ainsi, si vous avez fait deux jeux : un Pacman et un Tetris, vous aurez deux projets, un pour chaque jeu.

Les projets, ce sont comme des fichiers. Ils portent une extension. Par exemple, un document de texte porte l'extension .txt. Une image peut porter l'extension .gif, mais encore .jpeg, .tiff, .png selon la qualité de l'image. Les projets Game Maker portent eux aussi des extensions propres à eux : ils portent l'extension .gmk.

Je vous conseille de vous créer un dossier "Projets" dans le dossier de Game Maker. Vous pourrez ainsi y mettre tous vos projets en cours et terminés. Vous saurez ainsi où sont vos projets. Ce que je vous conseille aussi de faire, c'est de créer un nouveau dossier pour chaque projet et de créer de nouveaux dossier distincts pour les images, les sons, les fonds, ...

Par exemple, j'aurai :

Image utilisateur

Bien sur, ce n'est pas obligatoire de suivre cette technique, mais c'est en tout cas fortement conseillé. Vous ne perdrez ainsi pas vos fichiers et les retrouverez au même endroit. L'organisation est super importante ! ;)

Créer un nouveau projet .gmk

Le titre dit tout, nous allons apprendre à créer un nouveau projet Game Maker.
Commencez par ouvrir Game Maker. Jetez alors un œil dans la barre d'outils. Le premier bouton, une feuille blanche, permet de créer un nouveau projet rapidement.
Sinon, vous pouvez aller dans le menu File puis cliquer sur New.
Encore plus radical, utilisez la combinaison de touches Control + N.

Si vous avez modifié un projet et que vous voulez en créer un nouveau, on vous demandera si vous voulez sauvegarder le projet actuel avant de continuer.

Sauvegarder un projet

Votre premier projet Ajouter un objet

Ajouter un objet

Premiers pas Ajouter une pièce

Ajouter un objet

Maintenant que nous avons ajouté un sprite, il faudrait l'utiliser. Pourquoi ne pas utiliser notre tête de mort pour créer un ennemi ? Ce serait alors une sorte de Pacman.

Dans Game Maker, on distingue deux sortes d'images :

Ajouter un objet à notre jeu

Pour ajouter un objet dans notre jeu, cliquez sur le bouton Create an object de la barre d'outils (boule bleue).

Une nouvelle fenêtre, un peu similaire à celle des sprites, devrait s'ouvrir.

Image utilisateur

Ne vous occupez que du coté gauche. Les parties events et actions seront vues plus tard.
Dans la ligne name, indiquez le nom de l'objet. Mettons par exemple ennemi.
En dessous, cliquez sur la petite icone à coté de <no sprite> et choisissez la tête de mort (sprite que nous avons ajouté).

Image utilisateur

Notre objet a donc comme apparence le sprite que nous avons ajouté auparavant.
Cochez alors l'option Solid pour que notre objet soit solide, qu'il soit dur.

Vous pouvez appuyer sur OK.

Nous avons maintenant deux choses dans notre projet : un sprite et un objet. Je suppose que vous commencez à comprendre la différence entre sprite et objet.

Petit exercice pratique :
Essayez de créer un sprite "Mur" et de lui donner l'image wall.png contenu dans le dossier tutorial1. Faites alors un objet lui aussi appelé mur qui comportera le sprite correspondant.
Cochez cette fois l'option Solid.

Voilà ce que vous devriez avoir dans votre projet :

Image utilisateur

Revoyez le cours si vous avez du mal, mais cet exercice est tout de même simple.


Premiers pas Ajouter une pièce

Ajouter une pièce

Ajouter un objet Et avec un fond ?

Ajouter une pièce

Les pièces, ce sont les endroits dans lesquels évoluent vos objets. Votre jeu peut en comporter qu'une seule (comme un pacman, où il n'y a qu'une seule pièce avec des murs...) ou plusieurs (une pièce par niveau dans un Mario, par exemple.)

Les pièces peuvent contenir des objets et un fond. Les objets qui se trouvent dans la pièce évoluent d'une manière précise, qui leur est attribuée grâce aux événements. Par exemple, on peut dire à nos murs de ne pas bouger (ce qui semble logique) et à nos personnages de bouger (ce qui semble logique aussi).

Pour créer une pièce, cliquez sur le bouton Create a room de la barre d'outils (le dernier de la série Add a machin). Et voilà la fenêtre qui s'ouvre :

Image utilisateur

Les pièces sont elles-mêmes divisées en cases qui servent à placer nos objets. Les cases sont toutes de la même taille. Dans la fenêtre qui vient de s'ouvrir, notre pièce est représentée sur la droite : c'est le grand carré gris avec le quadrillage. Le quadrillage représente les case de notre pièce.

Les objets que nous avons ajouté (Mur et Ennemi) ont la même taille : 32x32 pixels. Notre pièce a des cases qui font 16x16 pixels.

Image utilisateur

Nos objets sont donc deux fois plus grands que les cases de notre pièce. L'idéal serait d'avoir des cases de la même taille que nos objets.
Modifiez donc les valeurs X et Y des cases : remplacez 16 par 32.

Image utilisateur

Vous remarquez que les cases de notre pièce se sont agrandies. Notre quadrillage est désormais de la même taille que nos objets.
Nous allons maintenant ajouter nos objets à notre pièce.

Ajout d'objets dans la pièce

Notre objet mur est déjà sélectionné, comme on le voit sur la gauche.

Image utilisateur

Il vous suffit de cliquer sur votre pièce pour y déposer votre objet.

Faites donc un mur tout autour de notre pièce :

Image utilisateur

Maintenant, plaçons quelques ennemis sur notre carte. Appuyez pour cela sur le bouton suivant :

Image utilisateur

Sélectionnez alors l'objet ennemi.
Placez-en quelques uns sur votre pièce.

Image utilisateur

Et voilà, vous avez ajouté des objets à votre pièce !


Ajouter un objet Et avec un fond ?

Et avec un fond ?

Ajouter une pièce Les évènements 1/2

Et avec un fond ?

Allez, je vous avoue que moi aussi je trouve le fond gris super-moche. Pourquoi ne pas en mettre un plus beau (pourquoi s'en priver surtout :p ) ?
Pour cela, nous allons tout d'abord devoir l'ajouter à notre projet, de la même manière qu'avec les sprites et les objets.

Fermez la pièce que nous avons créé et cliquez sur le bouton Add a background de la barre d'outils.
Mettez comme nom "Fond" par exemple puis cliquez sur Load background. Prenez par exemple Sand.

Image utilisateur

Maintenant, réouvrez votre pièce. Cliquez sur l'onglet Background.

Cliquez alors sur le bouton suivant :

Image utilisateur

Choisissez alors votre fond. Et là, votre pièce se colorie avec votre image de fond !
(Ah ça soulage les yeux :D )

Et si nous testions notre projet ?

Allez, pour finir en beauté, testons ce que nous faisons depuis le début (pour que vous soyez sur que je ne vous mène pas en bateau depuis le début :p ). Appuyez pour cela sur Run the Game de la barre d'outils. (Le premier bouton ! Le deuxième sert à autre chose).

Et après un petit chargement...

Image utilisateur

Quoi, on a fait tout cela pour... ça !? Les crânes ne bougent même pas ! C'est nul !

Hola, avant que vous ne m'étripiez, je voudrais vous dire que vous avez fait le plus gros. C'est en effet déjà pas mal, ce que vous avez fait ! (Surtout que si vous l'aviez programmé, vous y auriez mis plusieurs heures !)
Vous avez donc fait en quelques minutes ce qu'en faisant de A à Z vous auriez fait en bien plus de temps. Conclusion, merci qui ? :p

Par ailleurs, le chapitre suivant portera sur les événements (depuis le temps que je vous en parle !). Nous allons enfin pouvoir faire bouger nos objets, et donner à nos jeux l'apparence de jeux.

Pfffiou ! Ce long chapitre est enfin fini. Vous connaissez la base de Game Maker, c'est déjà ça. Nous allons voir dans le chapitre suivant les événements, qui servent à faire bouger nos objets, à faire certaines choses si des conditions sont réunies, etc.


Ajouter une pièce Les évènements 1/2

Les évènements 1/2

Et avec un fond ? Les événements en théorie

Ah, les évènements, on y est ! Depuis le temps que je vous en parle, vous avez bien fini par vous les mettre dans la tête.
Parlons donc concret : les évènements, c'est tout ce qui se passe durant notre jeu. Ce sont toutes les actions. :)

Nous allons donc rendre plus vivants nos programmes : que se passe-t-il lorsque mon objet touche l'autre objet ? Et si le nombre de vies atteint 0 ? C'est à vous de décider de tout cela dans le chapitre suivant ;)

Les événements en théorie

Les évènements 1/2 Notre premier événement

Les événements en théorie

Alors tout d'abord, j'aimerais que l'on soit clair sur ce qu'est un évènement.
Un évènement, c'est une action qui est faite lors du déroulement du jeu. Voici des exemples d'évènements :

Bien sur, dans un vrai jeu, il y a beaucoup plus d'évènements ! Il y en a pour tout : les collisions (quand deux objets se rencontrent), quand une variable atteint une certaine valeur, si jamais telle condition est accomplie, si jamais machin, etc.

Hep hep hep, c'est quoi une variable ?

Une variable, c'est une donnée qui est stockée dans la RAM, la mémoire vive si vous préférez. Cette mémoire est très rapide et sert à faire des actions très rapidement. Elle se vide intégralement quand l'ordinateur s'éteint, à l'inverse du disque dur. Cette donnée, qui est donc stockée dans la RAM, prend une certaine valeur (par exemple 5). On pourra par la suite modifier cette valeur. Nous aurons par exemple une variable argent qui aura comme valeur 150000 :D .
Mais ne nous attardons pas trop là-dessus, nous aurons l'occasion d'y revenir plus tard.

Nous pouvons donc nous occuper de faire avec les événements tout ce qui fera bouger notre jeu. Sans eux, il n'y a rien. Si vous ne mettez pas d'événements dans votre jeu, rien ne se passera et vos objets ne bougeront pas, vu qu'ils n'ont rien à faire (comme nous l'avons si bien vu en testant notre jeu).

Créer des évènements

Il y a vraiment beaucoup d'événements différents dans Game Maker, et je n'aurais pas le temps de toutes les élaborer. Nous verrons que les principaux, mais vous pourrez voir les autres par vous même.

Ouvrez donc le projet que nous avons créé précédemment. Nous avions cela :

Image utilisateur

Nous allons commencer par créer un événement à nos ennemis.

Sélectionnez donc l'objet Ennemi. Vous remarquez que la même fenêtre qu'auparavant s'ouvre. Nous nous étions jusque là occupé de la partie gauche, mais nous allons désormais utiliser la partie droite (Events et Actions).

Image utilisateur

Vous remarquez qu'il y a deux colonnes dans cette partie de la fenêtre :

Nous aurions par exemple (Le texte bleu est la partie Event et le texte rouge la partie Action) :
Si l'objet personnage touche l'objet ennemi, alors le nombre de vies doit baisser de 1.

Pour être sur que vous compreniez tout de suite, nous allons voir cela plus concrètement.

Cliquez donc sur le bouton Add Event en bas. Une petite fenêtre s'ouvre alors, vous demandant quel type d'événement vous voulez créer. Il y en a en effet 11 différents :

Voici donc les différents types de conditions possibles.


Les évènements 1/2 Notre premier événement

Notre premier événement

Les événements en théorie Les événements 2/2

Notre premier événement

Nous pourrions faire un événement qui fait que nos ennemis se mettent à bouger au début de la partie.

Pour cela, nous allons choisir un événement de type Create. Ainsi, il sera exécute dès le début de la partie. Vous devriez avoir donc cela dans votre colonne Events :

Image utilisateur

Rendez vous maintenant dans la colonne Actions. Elle est pour le moment vide, car nous n'avons rien mis.
Vous remarquerez sur le coté droit des petites images. Ce sont les différentes actions possibles. Et ce n'est pas tout : vous avez le choix entre 6 onglets différents !

L'action qui fait bouger l'objet se trouve dans l'onglet Move (le premier). Il s'agit du tout premier bouton :

Image utilisateur

. Vous allez alors prendre l'image, la glisser vers la colonne Actions puis y la déposer.

Viennent alors les réglages de l'action dans la fenêtre suivante. Sélectionnez toutes les flèches de directions, sauf celle du centre. Dans la colonne Speed, entrez la valeur 3. Appuyez ensuite sur OK.

Image utilisateur

Nous devrions donc avoir cela :

Image utilisateur

Ce qui pourrait se traduire comme : "Si l'objet est créé, alors aller dans une direction au hasard à une vitesse de 3." Vous comprenez ? ^^ Et c'est là toute la magie de Game Maker : vous pouvez mélanger des tonnes de conditions et actions différentes, pour faire des combinaisons totalement folles ! Libre alors à vous de déchainer votre imagination ! ;)

Et si nous testions notre projet ? J'ai hâte de voir ce qu'on a fait ! :D

Bonne idée, testons notre projet. Faites comme nous l'avons fait auparavant. Et vous vous apercevrez avec stupeur que ça marche ! Les ennemis se mettent à bouger dès le début de la partie dans une direction aléatoire !

Mais c'est nul ! Ils passent à travers les murs et partent !

Oui, car nous n'avons pas encore mis de collisions ;) .

Les collisions

Alors tout d'abord, c'est quoi une collision ? Dans la vie de tous les jours, c'est quand deux choses se rentrent dedans. Ici, c'est pareil : c'est quand un objet en touche un autre.
Ici, l'idéal, ça serait que lorsque nos ennemis touchent un mur, ils rebondissent dessus.

Alors c'est parti, créons cet événement :D .
Commencez par re-sélectionner notre objet Ennemi. Nous allons alors rajouter un second événement au premier. Créez un événement de type Collision. Un petit menu déroulant s'affiche avec les objets existants.

Nos ennemis doivent rebondir sur les murs, donc choisissez l'objet mur.

Image utilisateur

Notre événement est donc créé. Il s'ajoute dans la liste Events. Vous pouvez passer d'un événement à l'autre en cliquant dessus.

Image utilisateur

Dans les différentes actions disponibles, vous allez choisir l'action Bounce (la toute dernière) :

Image utilisateur

. Glissez-la dans la colonne Actions.
Ne vous préoccupez pas des options et appuyez sur OK. Vous pouvez alors re-tester votre projet.

Et là, miracle, ils rebondissent ! :D

Un petit exercice

Maintenant que vous savez comment gérer les collisions, il va falloir vous entrainer un peu.
Je vous propose l'exercice suivant :

Citation : Correction

Image utilisateurImage utilisateur

Il suffisait en effet de créer un événement Collision, cette fois avec l'objet Ennemi, et d'y mettre l'action Bounce. Rien de très compliqué ^^


Les événements en théorie Les événements 2/2

Les événements 2/2

Notre premier événement Le clavier

Après avoir eu une brève conversation sur les événements (oh oui, croyez-moi vu n'avez encore rien vu !), nous allons voir des choses plus compliquées que l'on peut faire avec les événements : l'utilisation du clavier, du score, de la vie...

On y go ? :)

Le clavier

Les événements 2/2 Système de score et de vies

Le clavier

Préparons le terrain

Bon, heu, avant qu'on commence, vous savez c'est quoi un clavier ? :euh:
Je suppose que oui. Au pire, allez voir ici.

Ce chapitre sera un chapitre-TP. Ce sera en fait un chapitre comme les autres, mais nous faisons un projet en même temps. C'est une sorte de TP avec des aides.

Nous allons commencer par parler du projet que nous voulons obtenir. Il est en effet important de bien réfléchir à ce que nous voulons faire, pour respecter certaines contraintes que l'on s'est fixées.

Le projet que j'aimerais que l'on établisse tout au long de ce chapitre sera un jeu où Bob, un smiley, doit attraper des pièces. Il gagne un point par pièce récupérée. Dès qu'il en attrape une, une autre apparait quelque part d'autre sur la carte. Pendant ce temps, des crânes se baladent sur la carte. Si Bob touche un crâne, il perd une vie. Si il n'a plus de vies, il perd.

Nous avons vu comment faire des événements de base dans le chapitre précédent, je considère donc que vous savez en créer (tout du moins ceux que nous avons vu ;) ). Commençons par créer un nouveau projet.

Nous allons charger les sprites suivants:

Créez maintenant les objets suivants. N'oubliez pas de charger les sprites correspondants :

Voilà donc ce que vous devriez avoir :

Image utilisateur

Chargez aussi un fond, celui que vous voulez :) . Pour ma part, je prends wood.

Image utilisateur

Désormais, créez une nouvelle pièce, et mettez le quadrillage à 32x32 pixels. Mettez-y le fond, et placez des murs tout autour de la pièce comme nous l'avons fait dans notre projet précédent. Placez ensuite quelques ennemis et le personnage au milieu de la carte, ainsi qu'une pièce quelque part.

Image utilisateur
Ajout des événements

Maintenant que nous avons préparé le terrain, nous allons pouvoir y mettre nos événements.

Nous allons commencer par créer les événements des crânes. Tout d'abord, créez-leur une collision sur les murs, sur les autres crânes, et sur le joueur : ils doivent rebondir dessus. N'oubliez pas de les faire bouger dès le début de la partie. Mettez-leur la vitesse que vous voulez (1 est lent, 5 est rapide).

Bon, avant d'aller plus loin, j'aimerais vous parler de quelque chose de spécial avec les fonctions de rebonds. L'action Bounce sert principalement pour rebondir contre des objets qui ne bougent pas. Par contre, les choses risques de se gâter lorsque deux objets en mouvement se rencontreront : ils se colleront entre eux !

Le meilleur remède contre cela, c'est de remplacer notre éternelle action Bounce par une action Reverse Horizontal et Reverse Vertical. Vous devriez donc avoir cela :

Image utilisateur

Faisons désormais les événements de Bob, le smiley.
Bob peut aller à gauche, à droite, en haut, et en bas. On le dirige avec les flèches du clavier.

Mais je sais pas faire, moi, avec le clavier :o

Nous allons justement voir comment on l'utilise.
Le clavier est traité comme un événement : si la flèche de gauche est appuyée, alors le personnage va à gauche. Si la flèche du haut est appuyée, alors le personnage va vers le haut. C'est comme ça que ça marche.

Ouvrons donc la fenêtre des événements de Bob.
Nous voulons qu'au début de la partie Bob reste où il est ; il ne bouge pas. Il ne bougera que si on appuie sur une touche. Nous allons donc créer un événement de type Create. Mettez dans cet événement l'action Mode Fixed

Image utilisateur

et sélectionnez que le bouton central.

Image utilisateur

Ainsi, Bob ira "au centre", ou plutôt il restera où il est ^^ .

Mettons désormais les événements du clavier :) . Vous allez créer un événement de type Keyboard. Vous avez alors dans un menu déroulant toutes les touches du clavier standard, classées en catégories. Remarquez les quatre du haut : left, right, up, down qui signifient gauche, droite, haut, et bas.
Nous allons devoir créer un événement par direction.

Créons donc un premier événement "Keyboard left". Comme action, mettez un Move Fixed (toujours le même, oui) avec la direction gauche. Mettez comme vitesse 3 par exemple.
Créez ensuite un deuxième événement "Keyboard right". Mettez comme action un Move Fixed avec la direction droite. Mettez la même vitesse.
Créez deux autres événements tels : un autre pour le haut et un dernier pour le bas.

Expliquons ce que l'on a fait :

Nous avons créé un évènement pour chaque touche du clavier. Comme il y a quatre directions (gauche, droite, haut, bas), nous avons utilisé quatre touches, donc quatre événements.
Si on appuie sur la touche gauche, Bob ira vers la gauche à la vitesse 3. Si on appuie sur la touche droite, il ira vers la droite à la vitesse 3. Etc.

Nous avons terminé de nous occuper du clavier. Rajoutez également à Bob une collision pour :

C'est bon nous pouvons tester notre projet :) .

Vous contrôlez Bob grâce au clavier !


Les événements 2/2 Système de score et de vies

Système de score et de vies

Le clavier Et avec du son ?

Système de score et de vies

Nous avons terminé de faire cette partie sur le contrôle global du joueur et des ennemis. Nous allons maintenant pouvoir nous occuper du système de points et de vies.

Nous avons dit que lorsque le joueur attrape une pièce, il gagne un point. Alors, une nouvelle pièce apparait quelque part d'autre sur la carte. Il doit aller la récupérer. Si jamais il touche un des crânes qui se baladent sur la carte, il perd une vie. Et si il n'a plus de vies, il a perdu.

Et on peut dire que vous avez de la chance, car il existe des fonctions toutes prêtes qui servent justement au score et aux vies. :p

Allons donc sur notre objet Personnage et allez dans votre événement de type Create (On en a déjà fait un). Allez alors dans l'onglet Score. Prenez l'action Set score et mettez-le dans les actions. Laissez 0 dans la barre de saisie (on commence avec 0 points).
Prenez maintenant l'action Set lives et mettez-le aussi dans les actions. Mettez alors 3 pour que le joueur commence avec 3 vies.

Ces deux fonctions ont pour but de directement modifier la valeur des vies et du score : on met le score à 0 et les vies à 3 quand la partie commence. :)

Voilà ce que nous devrions donc avoir :

Image utilisateur

Allez maintenant dans l'événement Collision avec les Ennemis.. Ajoutez-y un Set lives. Ecrivez -1 comme valeur et cochez la case Relative.

Explications : Si vous entrez une valeur sans cocher Relative, cette valeur remplacera la valeur existante. Si par contre la case Relative est cochée, la valeur entrée sera ajoutée, ou soustraie à la valeur actuelle.
Ainsi, le nombre de vies baissera de 1 à chaque fois (d'où le signe "-" devant le 1)

Maintenant, rajoutez un événement de type Collision avec Pièce. Mettez-y comme actions :

Il faudrait aussi que la pièce disparaisse et réapparaisse autre part. Pour cela, utilisez l'action Jump to random de l'onglet Move. Laissez 0 dans chaque barre de saisie. Par contre, tout en haut de la fenêtre, cochez "Other" et non "Self" sinon c'est le personnage qui va partir :p . En faisant ainsi, la pièce sera "téléportée" dans un endroit au hasard de la carte.

Testez votre carte et tentez de ramasser des pièces : ça marche ! :soleil:

Cependant, il manque quelque chose :

Et bien mesdames et messieurs, si on ne meurt jamais, c'est bien parce que l'on ne l'a pas précisé ! On n'a pas encore dit au jeu : "Si le nombre de vies atteint 0, alors perdre !"
Alors allons-y, faisons-le.
Créez un événement de type Other et sélectionnez dans le menu déroulant No more lives. Allez dans l'onglet Main2 et mettez l'action End game (pour arrêter le jeu). Et pour faire encore plus classe, rajoutez une action Show highscore de l'onglet Score, ce qui a pour but de mettre une table avec les records de scores :soleil: .

Allez, encore un petit truc et c'est fini : on ne voit toujours pas le nombre de vies que l'on a ! Pour ce faire, c'est très simple. Retournez dans l'événement Create et ajoutez-y une action Score caption de l'onglet Score. Vous remarquez que la ligne show score est activée (on voit donc le score) mais pas la ligne show lives. Cliquez sur le petit bouton à coté et choisissez show.

Image utilisateur

Maintenant, relancez votre projet et regardez tout en haut, sur la barre de titre du jeu :

Image utilisateur

En plein jeu


Le clavier Et avec du son ?

Et avec du son ?

Système de score et de vies Une animation avec les sprites

Et avec du son ?

Bravo, vous avez créé voter premier vrai jeu ! :p
Cependant, il y ressemblera encore plus quand nous aurons rajouté une bande sonore ! Qu'en pensez-vous ? Allez, ajoutons du son !

Voici les différents sons que l'on pourrait apporter au jeu :

Il va falloir évidemment tout d'abord les ajouter à notre projet. Voilà ceux que je vous propose, mais vous êtes libre de choisir les vôtres. Pour ajouter des sons, utiliser le bouton Create a sound de la barre d'outils.

Image utilisateur

Retournez donc sur votre objet Personnage, dans l'événement Create. Ajoutez-y une action Play sound de l'onglet main1. Choisissez votre fond musical parmi les sons de votre projet. Mettez alors true à loop (Pour que le son recommence une fois fini).
Allez ensuite dans votre événement Collision avec Ennemi, et mettez le son correspondant avec loop false (Pour que le son ne joue qu'une fois).
Rendez-vous ensuite dans votre événement Collision avec Pièce et mettez le son de la pièce. Pas de loop non plus.
Faites comme cela dans les événements Collision avec Mur pour le rebond et No more lives pour le son "perdu".

Testez votre projet, et là, tadaaah, y'a du son ! :D

Ca y est, votre premier vrai jeu ! ;)
Vous pouvez être fier, même si ce n'est pas encore digne de GTA.

Image utilisateur

Nous avons vu comment faire des événements plus complexes, comment ajouter un score, des vies, et mettre du son. Que pensez-vous de voir autre chose, maintenant ?

Mais avant tout, pratiquez ! On ne le dit jamais assez : c'est en forgeant que l'on devient forgeron et c'est en... heu... Game Makant qu'on devient un véritable Game Maker ;) :D .


Système de score et de vies Une animation avec les sprites

Une animation avec les sprites

Et avec du son ? Les animations

Tout d'abord, bienvenue dans la Partie II :D .

Ce chapitre-là traitera plus en détail les sprites. Vous ne vous y attendiez pas, et pourtant, c'est là un chapitre entier que je leur dédie ! Vous qui pensiez tout savoir dessus, détrompez-vous ;) ... Saviez-vous par exemple que l'on peut créer des animations grâce à plusieurs sprites ? Non ?

Pas grave, puisque de toute façons ce n'est que maintenant que nous voyons tout cela. Allez, courage, et bientôt vous serez un vrai incollable sur le sujet ;) .

Les animations

Une animation avec les sprites La transparence

Les animations

Après avoir longuement conversé au sujet des événements, nous allons reparler un petit peu des sprites. Savez-vous tout d'abord ce qu'est une animation ?
Une animation, c'est une série d'images, qui lorsqu'on les fait défiler très vite, forment un petit film animé.

Dans Game Maker, et dans beaucoup d'autres logiciels et concepts d'ailleurs, on utilise plusieurs images que l'on fait défiler très vite. Bien sur, dans les courtes animations rudimentaires, peu d'images sont requises. Par contre, dans les longues animations, il faudra beaucoup plus d'images.

Prenons un exemple concret : le vol de la mouche :D . La mouche, quand elle vole, bat les ailes de haut en bas. Voici les images que nous pouvons utiliser pour cela :

Image utilisateur

|

Image utilisateur

|

Image utilisateur

Dans la première image, la mouche a les ailes vers le haut, dans la deuxième elle les a un peu baissées et dans la dernière, elle a les ailes vers le bas. Ainsi, en mettant plusieurs fois ces images à la suite, on obtient une réelle animation :

Image utilisateur
Image utilisateur
Image utilisateur
Image utilisateur
Image utilisateur
Image utilisateur
Image utilisateur
Image utilisateur
Image utilisateur
Image utilisateur
Image utilisateur

etc.
C'est exactement la même chose lors du mouvement d'un personnage, par exemple. Sauf que le personnage, lui, a des jambes et pas des ailes :lol: . Voici une animation d'un personnage marchant vers la droite (Le premier qui se moque de mes dessins, il sort ! :-° ).

Image utilisateur
Image utilisateur
Image utilisateur
Image utilisateur
Image utilisateur
Image utilisateur
Image utilisateur
Image utilisateur
Image utilisateur
Image utilisateur
Image utilisateur

etc.

Chaque image qui compose l'animation est un sprite différent dans Game Maker.

Mais ça veut dire qu'avec une animation de 10 images, j'aurais 10 sprites dans mon projet ! Ça va tout encombrer !

Non car Game Maker permet de charger plusieurs images dans un seul sprite : ainsi, l'image du sprite lui-même sera constitué de plusieurs images animées. On essaie ? (Pour le besoin de ce chapitre vous pouvez créer un personnage sur Paint comme je l'ai fait. Ça m'a pris 5 minutes pour tout vous dire. Attention, faites des images de 32*32 pixels pour que nous travaillions sur le même format. Au pire, copiez-collez mes images, ça sera plus simple :D ).

Ajouter notre animation à notre projet

Ouvrez un nouveau projet et ajoutez un sprite que vous nommerez Personnage_test par exemple. Appuyez ensuite sur "Load Sprite" et sélectionnez toutes les images de votre animation.

Image utilisateur

Regardez alors sous le bouton "Edit Sprite". Il y a écrit :

Image utilisateur

La ligne "number of subimages" correspond aux nombres d'images qui composent votre sprite. Il y a écrit 3, donc les trois images ont étés chargées !
Pour vérifier, appuyez sur "Edit Sprite". Vous voyez ainsi les "subimages" de votre sprite. Voilà pour moi :

Image utilisateur

Vous pouvez appuyer sur OK et fermer la fenêtre du sprite.
Créez ensuite un objet Personnage donc le sprite est l'animation chargée. Cochez l'option Solid.

Ajoutez maintenant un sprite de mur (je vous propose wall.png du fichier tutorial1.) Créez l'objet correspondant et cochez l'option Solid.

Image utilisateur

Créez désormais une pièce avec un quadrillage de 32*32 pixels. Arrangez-la de la sorte :

Image utilisateur

Testez ensuite votre projet. Votre animation marche, le personnage gigote !

Ouais c'est cool ! Mais par contre, le personnage bouge trop vite ! Il ne se déplace pas pas non plus et y'a un carré blanc tout autour et c'est horrible !

Nous allons régler ces problèmes-là. Nous allons commencer par régler le problème du carré blanc.


Une animation avec les sprites La transparence

La transparence

Les animations Gauche/droite

La transparence

Si vous voyez un carré blanc, c'est tout simplement parce qu'il y a du blanc tout autour ! Dans votre image, le contour du personnage est constitué de couleur blanche, qui apparaitra forcément par-dessus un fond gris. Pour régler ce problème, il suffit d'"effacer" ce blanc tout autour. Nous allons donc utiliser un logiciel inclus dans Game Maker : l'éditeur de sprites !

Double-cliquez sur votre sprite Personnage pour ouvrir la fameuse fenêtre. Cliquez alors sur le bouton "Edit sprite". Vous voyez alors l'aperçu de vos images. Nous avons vu cela tout à l'heure. Double-cliquez maintenant sur la première image. Un logiciel un peut comme Paint s'ouvre alors.

Image utilisateur

Maintenant, allez dans le menu "Image". Descendez jusqu'à "Erase a color" ou appuyez sur Shift + Control + E. Sélectionnez la couleur blanche (par défaut) ou prenez votre couleur de fond si elle n'est pas blanche (certaines personnes colorient le fond de leurs sprites en violet par exemple). Laissez la barre "tolerance" à 0. Appuyez alors sur OK. Votre couleur blanche devient transparente. En gros, tout ce qui est blanc sur le dessin sera "découpé", sera rendu invisible.

Image utilisateur

->

Image utilisateur

Répétez alors l'opération pour chaque image que constituent votre animation.

Image utilisateur

Vos images sont désormais transparentes ! Pour être sur que la modification soit prise en compte, rechargez vos sprites dans vos objets. Une fois fait, relancez le projet. Résultat, plus d'immonde carré blanc :

Image utilisateur

Les animations Gauche/droite

Gauche/droite

La transparence Ce que nous pouvons améliorer

Gauche/droite

Maintenant que ce problème graphique est résolu, nous allons pouvoir nous occuper du gros : faire bouger le personnage ! Cependant, avant de faire cela, il faudra posséder deux animations et non une. Notre personnage bouge, certes, mais vers la droite ! Si nous voulons qu'il puisse se diriger vers la gauche, il faudra qu'il se tourne vers la gauche.

Quoi, il va falloir refaire toutes les images à l'envers !? :colere:

Mais non, puisque une fois de plus Game Maker est génial : il a tout prévu ;)
Renommez le sprite du personnage en Personnage Droite et créez-en un nouveau Personnage_gauche. Rechargez les mêmes images.

Image utilisateur

Notre personnage regarde toujours vers la droite me direz-vous, mais double-cliquez sur Personnage Gauche et réouvrez le logiciel de tout à l'heure.

Allez dans le menu "Transform" et cliquez sur l'option "Miror/Flip" (ou appuyez sur Control + Alt + M). Laissez les paramètres et appuyez sur OK. Votre image est inversées horizontalement.

Image utilisateur

->

Image utilisateur

Faites ainsi pour chaque image de Personnage Gauche.

Voilà donc ce que vous devriez avoir:

Image utilisateur

Nous allons désormais pouvoir placer les événements.

Les événements

L'idée générale est la suivante : lorsque l'on appuie sur la Flèche de gauche, le bonhomme marche vers la gauche, tandis que si l'on appuie sur la Flèche de droite, il se dirige vers la droite. Il va donc falloir créer un événement Keyboard pour la flèche gauche et un autre pour la flèche droite. On y va ?

Nous allons commencer par nous occuper de la direction vers la droite.
Ouvrez donc l'objet Personnage. Ajoutez un événement Keyboard Right. Mettez une action Move fixed qui va vers la droite avec une vitesse de 3. Ça, nous connaissons. Nous allons ajouter une seconde action que vous ne connaissez pas : Change sprite qui se trouve dans l'onglet main1. Choisissez dans le menu déroulant Personnage droite (puisque c'est vers la droite) et mettez -1 en subimage.

Ajoutez un second événement Keyboard Left et mettez les mêmes actions, mais réglées vers la gauche. Ainsi, dans Move fixed, vous sélectionnerez la flèche gauche et dans Change sprite, vous choisirez Personnage Gauche.

Évidemment, n'oubliez pas de mettre une collision avec le mur. Mettez-y comme action un Move fixed, direction centrale à la vitesse 0.

Récapitulation

Voici donc ce que vous devriez avoir dans chaque événement :

Événement "Keyboard Left"

Image utilisateur

Évènement "Keyboard Right"

Image utilisateur

Et bien sur l'événement "Collision mur"

Image utilisateur
Testons !

Ça y est, nous avons réussi à créer notre bonhomme qui se déplace ! Quand on appuie sur les flèches, il va vers la gauche ou la droite. C'est génial ! :D

Ne dirait-on pas un début de Mario ? Vous avez la base, rajoutez des pièces et un compteur de points qui incrémente à chaque pièce ramassée :) . Bref, améliorez et améliorez pour vous entrainer !

Bon allez, comme je suis de bonne humeur, je vous donne un screen de ce que j'ai chez moi :

Image utilisateur

Bob en balade.


La transparence Ce que nous pouvons améliorer

Ce que nous pouvons améliorer

Gauche/droite Votre premier TP : Casse-brique

Ce que nous pouvons améliorer

Voici une liste des choses que nous pouvons améliorer :

Changer de fond

Nous allons pour cela voir deux techniques :
Ajouter une couleur unie, et ajouter une image par-dessus, mais qui reste tout de même un fond.

Ajouter une couleur unie

C'est ce qu'il y a de plus simple : ouvrez votre pièce et allez dans l'onglet Backgrounds. Cliquez sur le carré gris de Color et mettez autre chose, comme une couleur bleu ciel.

Image utilisateur
Ajouter une image par-dessus

Ce que nous pourrions ajouter comme image, ce serait des montagnes. Cliquez sur Create a background de la barre d'outils et chargez l'image mountains.png. Dans la fenêtre de la pièce, allez voir l'option "Foreground image". Choisissez alors vos montagnes.

Heu... elles sont bizarres tes montagnes !

Si il y a deux rangées de montagnes, c'est parce que l'image se répète horizontalement ET verticalement. Décochez alors Tile Vert pour que l'image ne se répète que horizontalement. Ensuite, dans la même option, entrez une valeur telle que la montagne soit à la limite du sol, comme ceci ^^ :

Image utilisateur

C'est sur que ça pête, hein ? ;)

Ajouter plus de fluidité dans le mouvement

Pour rendre plus réaliste le mouvement de notre personnage, le mieux serait de mieux décomposer son mouvement, qu'on ait vraiment l'impression qu'il bouge les jambes. Nous allons pour cela ajouter une image à son animation.
Ouvrez la fenêtre du personnage (gauche ou droite, à vous de choisir, de toute façons vous aurez aussi l'autre à faire alors...) et réarangez les images dans cet ordre-là :

Image utilisateur
Image utilisateur
Image utilisateur
Image utilisateur

Explications : il faut qu'entre chaque "coup de jambe" il repose sa jambe au centre. Ça ferait en gros:

Jambe droite -> Les jambes au centre -> Jambe gauche -> Jambes au centre -> Jambe droite...
Testez, vous verrez : il y a plus de fluidité dans le mouvement.

Réduire la vitesse de mouvement

Les jambes de notre bonhomme semblent être alimentés en 1600Volts, et ça fait vraiment pas beau :o . Si nous réduisons la vitesse de ses jambes (parce qu'en plus il va pas très vite, et si on n'avance pas très rapidement alors que les jambes elles bougent très vite c'est qu'il y a un problème...), il semblera aller à la bonne vitesse et ce sera donc bien meilleur :) .

Ouvrez donc la fenêtre de notre personnage et allez voir dans les événements Keyboard que nous avons créé, plus précisément dans les action Change sprite. Dans la ligne Speed, entrez une valeur bien inférieur à 1. Je trouve que 0.25 est parfait. Cette valeur, vous l'avez compris, change la vitesse de transition entre les images de l'animation.

Testez, et magie notre personnage va à la bonne vitesse ! (Ou plutôt il s'est calmé niveau jambes... :-° )

Nouvelle orientation du personnage

C'est bien sur le plus long à faire, mais aussi et surtout le plus intéressant ! Répétons ce que nous voudrons avoir (très important, je vous rappelle, de fixer ce que nous voulons créer pour que ce soit le plus précis possible) :

Allez courage, c'est pas dur ! :p
Tout d'abord, ce qu'il faudra évidemment faire, c'est dessiner notre personnage de face. Voilà pour moi :

Image utilisateur

Nous allons donc ajouter notre sprite à notre projet.

Image utilisateur

Retournez alors dans votre objet Personnage et créez un événement de type Create. Mettez un Move fixed, direction centrale et vitesse 0, ainsi qu'un Change sprite et sélectionnez votre personnage vu de face (laissez subimage et speed à 0).

Image utilisateur

Allez maintenant voir votre événement Collision avec mur et mettez-y le même Change sprite (personnage vu de face, subimage et speed à 0).

Avec les touches bas et haut

Autre amélioration que j'avais proposé, ce que quand on appuie sur haut ou bas pendant le déplacement, le personnage s'arrête et nous regarde.

Cette fois, vous le faites tout seuls, c'est assez facile à faire !

...

Voilà la correction (pas tricher ! :diable: )

Image utilisateur
Image utilisateur
Un bug assez courant...

J'ai remarqué que la plupart du temps, lorsque l'on fonçait dans un mur, le personnage restait alors bloqué. Ajoutez donc à l'événement Collision avec mur l'action Move to contact (premier onglet, tout en bas). Mettez comme paramètres ceci :

Image utilisateur

Le bug est donc parti, et on peut repartir d'un mur tranquillement.

La version finale

Voilà, vous avez créé votre premier jeu qui comporte une animation ! Autant dire que nous sommes passés au stade supérieur... je vous dit tout d'abord bravo ! ;)
Voilà un screen final :

Image utilisateur

Votre première animation, vous pouvez être fier ! Nous avons commencé par une version où le bonhomme faisait du surplace avec un immonde carré blanc autour de lui, puis nous avons fait en sorte qu'il aille à gauche et à droite, puis avons rajouté un fond, modifié sa vitesse et enfin lui avons rajouté une dernière direction. Autant dire qu'on a fait du beau boulot ! :D


Gauche/droite Votre premier TP : Casse-brique

Votre premier TP : Casse-brique

Ce que nous pouvons améliorer Cahier des charges

Voilà, j'ai décidé d'enchainer avec votre premier vrai TP (Travaux Pratiques). Il s'agit d'un exercice à faire tout seul, avec juste quelques indications au début du chapitre. Le but des TP est bien sur de vous montrer que vous êtes capable d'utiliser ce dont vous avez appris (comme on le dit, après la théorie, la pratique).

Nous ferons par contre ce TP ensemble, car il y a plein de choses que nous avons pas vu et qui sont indispensables.
Il est bien évident que vous avez les capacités à la faire et que tout ce dont vous aurez besoin aura été vu dans le cours ;) . Libre choix par contre de l'accomplir seul si vous le désirez.

Ce jeu est, en plus, très facile à faire. Nous avons tout vu pour le faire. C'est pour cela que j'ai choisi d'en faire notre premier TP. Nous verrons bien évidemment les choses dont nous aurons besoin, tels que des Actions qui vous sont encore inconnues :)

Cahier des charges

Votre premier TP : Casse-brique C'est parti !

Cahier des charges

Ce qu'on va faire

Voici donc ce que je voudrais que vous fassiez tout au long de ce TP : un casse-brique. :)
C'est un jeu assez basique, mais qui a fait son apparition avec les premières machines, dans les temps de Pacman, Tetris...

Voilà ce que nous devons obtenir :

Il y a une salle avec des "briques" en-haut. En bas, il y a une barre que l'on peut déplacer de gauche à droite et une balle qui rebondit dans la salle. Le but est de faire rebondir la balle sur la barre pour la faire envoyer sur les briques en haut et les casser.
Quand toutes les briques ont étés cassées, on passe au niveau suivant où il y a plus de briques à casser.

Image utilisateur
Image utilisateur

Bien sur, plus on avance dans les niveaux, plus les briques sont nombreuses...

Les objets dont nous aurons besoin

Nos pièces seront découpées dans des carrés de 22*22 pixels. Faites de même, ainsi vous n'aurez qu'à copier-coller mes sprites et les coller dans des fichiers de même taille. Créez donc des fichiers de même taille que les sprites que j'utilise:

Vous remarquez que la taille des sprites est multiple de 22. Créez donc ensuite les sprites correspondant dans votre projet ainsi :

Image utilisateur
L'engrenage du jeu

Voici comment fonctionne une partie :

Les actions que vous ne connaissez pas

Bien sur, à partir de maintenant, vous pouvez vous lancer seul. Cependant, je vous conseille de lire cette partie pour ainsi connaitre les actions que vous ne connaissez pas. C'est bien sur très bien de chercher soi-même les actions à utiliser (même moi je le fais !), mais c'est toujours évidemment mieux de savoir où mettre ses pieds.

Ce qu'on ne sait pas faire :

Le hasard

Le hasard, c'est simple, ça marche comme un dé. Il s'agit de l'action Test chance de l'onglet Control. Vous mettez le nombre de faces du dé. Par exemple, si on met 5, il y aura une chance sur cinq que la suite se réalise. Facile. Notez que vous pouvez aussi cocher les deux directions d'un Move Fixed, mais je veux que vous vous entrainiez.

Faire disparaitre les objets

Quand notre balle touche une brique, il faut que la brique disparaisse. Utilisez pour cela l'action Destroy instance de l'onglet Main1. Attention, cochez l'option "other" sinon c'est la balle qui disparaitra ;) .

Si un objet est sorti de la pièce

Très facile, mettez un événement de type Other => Outside room.

Faire revenir un objet à son point de départ

Quand la balle tombe, la barre et la balle reviennent à leur point de départ (leur point de création). Utilisez pour cela l'action Jump to start de l'onglet Move. N'oubliez pas de cocher l'option "other" et de choisir les objets à faire revenir.

Afficher des messages

Afficher des messages, c'est facile, il faut juste utiliser l'action Display message de l'onglet Main2. Entrez alors votre message. Vous pouvez en mettre un au début qui explique les règles et les touches et un qui dit "Perdu" quand on n'a plus de vies.

Les blocs

Ça, vous ne connaissez pas. Si vous voulez exécuter plusieurs actions en même temps si une condition est remplie, il faut les regrouper dans ce qu'on appelle un "bloc". Utilisez pour cela les action Start block et End block de l'onglet Control.


Votre premier TP : Casse-brique C'est parti !

C'est parti !

Cahier des charges Améliorations

C'est parti !

Hop, feuille blanche, et c'est parti ! ^^
Bon alors là vous avez deux choix : soit vous vous lancez corps et âme, et c'est très bien, soit vous faites ce jeu en même temps que moi. C'est à vous de décider ce que vous voulez faire, et je ne vous en voudrais pas si vous choisissez de le faire avec la solution (et je vous comprends).

Mais essayez tout de même de le faire seul, au moins vous serez fier de vous :) . La suite est cachée pour ne pas gâcher le plaisir de ceux qui le font seul. Si vous ne voulez vraiment pas le faire seul, vous pouvez lire ^^ .

Nous allons tout d'abord créer tous les objets dont nous aurons besoin, à savoir 8 :

Image utilisateur

Tous les objets doivent êtres solides. N'oubliez pas évidemment la transparence pour la balle.

Les événements
La barre

Tout d'abord, occupons-nous de la barre. Quand on la crée, il faut s'assurer qu'elle reste où elle est (un Move fixed, direction centrale suffira).

Image utilisateur

Ensuite, il faudrait que quand on appuie sur gauche ou droite, elle aille dans la direction correspondante. C'est facile à faire (événement Keyboard right/left avec un Move fixed vers la gauche ou la droite.) Je trouve que la vitesse 6.7 est pas mal.
Et bien sur, une collision avec Mur vertical (il ne peut que rentrer dans un mur vertical). On a fait ça avec le bonhomme qui bouge, c'est facile.

Image utilisateur

Ce qui serait bien aussi, c'est que quand on appuie sur haut ou bas, la barre s'arrête. Je me suis en effet rendu compte que c'est très important.

La balle

Qu'on se le dise, 90% du jeu se passera dans l'objet Balle.

Déjà, créons un événement Create.
Il faut que lorsque l'on commence, la balle parte d'un coté ou de l'autre. Bien entendu on aurait pu tout simplement cocher deux directions d'un Move Fixed, mais je voulais vous faire bosser l'aléatoire ^^ . Utilisons donc l'action Test Chance. Mettez donc la direction haut gauche avec une vitesse de 8. Mettez ensuite l'action "else" qui se traduit par "sinon" et mettez la direction opposée à la même vitesse.

Image utilisateur

Mettons ensuite une collision avec la barre.
Mettez une simple action "Bounce" pour qu'elle rebondisse dessus.

Vient alors la collision avec les murs. Cette fois, il faudra mettre une collision pour tous les types de murs existants. Encore une fois, de simples "Bounce" suffisent.

La collision avec les briques est la collision la plus intéressante.
Commencez par mettre un "bounce" pour être sur que la balle rebondisse. Mettez alors une action "Destroy Instance" avec comme option "other" pour que ce soit bien la brique qui disparaisse. N'oubliez pas de mettre une action "Set score" avec "1" comme valeur (et relative coché pour ajouter au nombre actuel).

Image utilisateur

Faites de même avec la brique rouge, sauf que vous augmenterez de 10 points et non 1 et que l'on gagne une vie en même temps : c'est l'action Set lives qui doit être utilisée, avec la valeur 1 et l'option relative cochée.

Maintenant, mettez un événement "Outside room" (Other) et mettez-y comme action un Set Lives relative -1. Mettez-y aussi la fameuse action "Jump to start". Mettez-en deux exemplaires, un pour la barre et un pour la balle (n'oubliez pas de cocher "other" et de sélectionner la barre). Pas besoin de mettre "other" et "Balle" pour l'autre, vu que c'est déjà l'objet Balle. Il suffit de garder "self".

Image utilisateur

Et pour être sur que la barre ne bouge pas, ajoutez un Move fixed comme on les aime ^^ .

Image utilisateur

Créez enfin un événement Step : Il se ferra à chaque fois que la balle se déplacera (même d'un pixel !). Mettez-y comme action un "Test lives" et remplissez les options comme suit : égal à 0. Ensuite, très important, utilisez des actions "Start block" et "End block" de l'onglet Control. Ainsi, tout ce qui est dedans sera exécuté si l'action juste avant est valide (ici, si le nombre de vies est 0).

Mettez donc dans ce bloc un message qui dit "Perdu" grâce à l'action Display message, un Show the highscore table et un Restart the Game.

Image utilisateur
L'objet "A"

L'objet "A" ?? :o Mais qu'est-ce que c'est ?

Il s'agit d'un objet dit "fantôme". Il ne se voit pas dans le jeu, il est donc invisible, mais sert à faire des choses de précises, comme mettre le score à 0 au début de la partie, par exemple. Notez qu'un tel objet s'appelle un contrôleur.

Créez donc un objet sans sprite que vous appellerez comme vous voulez (j'ai choisi A car c'est facile à retenir). Lors de sa création, décochez l'option Visible pour être sur de ne pas le voir dans la partie.

Nous l'utiliserons pour mettre les vies à 3 au début, à mettre le score à 0 également, ainsi qu'à mettre l'action Score caption pour rendre visible ou non le score, les vies en haut.

Image utilisateur
La pièce

La pièce, ben ça sera notre niveau.
Rappelez-vous, notre projet est globalement multiple de 22, notre pièce doit donc l'être aussi. Pour savoir quelle taille doit faire la pièce en pixels, il y a juste un simple calcul à faire : nombre de cases en largeur * 22 et nombre de cases en hauteur * 22.
Ainsi, pour 29 cases de haut et 22 cases de large, on aura donc 638*484 pixels.

Pour changer la taille de la pièce, rendez-vous dans l'onglet Settings et changez les valeurs Width et Height. Tapissez alors la pièce comme vous le voulez, avec la disposition des briques de votre choix.

Image utilisateur
La touche finale

Allez, il ne reste plus qu'une chose : tester si il reste encore des briques sur le terrain ! En effet, tant qu'il reste des briques sur le terrain, on continue. Dès qu'il y en a plus, on arrête.
Pour cela, il faut utiliser l'action Test Instance count de l'onglet Control. Mettez cette action dans l'événement Step de la balle.

Mettez comme options : "si le nombre d'objets briques est égal à 0" suivi d'un bloc, comme nous l'avons vu. Mettez dedans un message comme "Bravo, vous avez terminé le Casse-Brique !", suivi d'une table des scores et d'un Restart Game.

Image utilisateur

Voici donc la solution telle que je la propose. Si vous avez décidé de vous lancer seul mais que vous n'avez pas fait la même chose que moi, c'est tout de même très bien : mon code n'est pas le code parfait ! :D


Cahier des charges Améliorations

Améliorations

C'est parti ! Les variables

Améliorations

Il y a bien sur des tonnes d'améliorations à faire.

Cette fois, c'est à vous de le faire tout seul, je ne vais pas non plus tout vous pondre tout fait ! :D
Je veux bien par contre vous montrer comment coller plusieurs pièces entre elles car on n'a pas vu comment le faire.

Coller des pièces entre elles

Commençons par créer deux pièces. Le but est de passer de la première à la deuxième, et il existe pour cela une action qui s'appelle Next room. Elle se trouve dans l'onglet Main1.

Ici, la condition pour passer dans la seconde pièce, c'est qu'il n'y ait plus de briques dans le niveau (on ne se contentera que de briques bleues, les autres étant des briques bonus si le joueur les rate c'est tant pis pour lui :diable: ). Le plus simple pour vérifier que toutes les briques aient étés détruites ou pas, c'est de le vérifier en permanence. Un événement Step fera l'affaire, car il sera vérifié à chaque déplacement de la balle.

Allez donc dans notre événement Step de la balle et enlevez ce qu'il y avait dans le bloc de "Test Instance count". C'est dans ce bloc que nous mettrons tout cela.
Il faut avant vérifier qu'il y ait une autre pièce après, car si il n'y en a plus, c'est qu'on était sur la dernière et on a donc gagné. Mettez donc l'action Check next pour vérifier cela, suivi d'un bloc.

Dans ce bloc, mettez la fameuse action Next room. Sortez du bloc et placez un Else (qui signifie SINON, je vous rappelle : SI il y a une pièce après, alors y aller. SINON...)

Après ce sinon, mettez dans un bloc tout ce donc nous aurons besoin : un message "Gagné !", une table des scores et un Restart Game.

Image utilisateur
Résumé

Voici donc ce que fait cette série d'actions:

Il ne vous reste plus qu'à créer ces niveaux, en mettant les briques spéciales plutôt vers la fin. Vous avez fait votre premier jeu qui comporte une véritable aventure !

Ce TP s'achève sur ces quelques mots. Si vous avez décidé de le faire seul, mais qu'en plus il marche, je vous dis chapeau bas ! :p
Si vous avez préféré suivre avec moi, c'est bien quand même, mais bon.

Le mieux, pour vous entrainer encore et encore, c'est d'améliorer ce projet : il y a une liste d'améliorations à la fin, essayez de les faire et d'en trouver d'autres ! Modifiez au début un petit peu, puis de plus en plus jusqu'à vraiment être à l'aise. :)


C'est parti ! Les variables

Les variables

Améliorations Créer sa variable

Les variables, quel monde fantastique ! Si Game Maker a bien un réel rapport avec la programmation, c'est grâce aux variables; on les retrouve de partout ! Mais qu'est-ce qu'une variable, au juste ?

Une variable, en informatique, c'est une donnée qui est stockée dans la mémoire vive de votre ordinateur. Une valeur est attribuée à cette variable, donc un nombre, une donnée. Cette donnée peut être par exemple 7, 5221, ou encore -15313. Quasiment tout dans un jeu passe par les variables, car c'est un des meilleurs moyens de stocker des informations rapidement.

Nous aurions par exemple une variable nombre de vies qui aura comme valeur 3. Dans la suite du jeu, il y a un risque que ce nombre diminue. Par exemple, si le joueur se prend un coup, la variable aura ensuite comme valeur 2, puis 1 si il s'en prend un autre...
Si la variable a comme valeur 0, alors le joueur a perdu.

Voici un autre exemple pour bien comprendre : on a par exemple une variable nombre de munitions. Disons qu'elle vaut au début 30. Si le joueur tire avec son arme, la valeur baisse (car on a utilisé une munition) et vaudra ensuite 29. Si il tire de nouveau, elle vaudra alors 28, etc. Quand la variable vaudra 0, c'est donc qu'il n'y a plus de balles, on ne peut plus tirer.

Créer sa variable

Les variables Test de variable

Créer sa variable

Vous commencez a avoir une idée plus ou moins concrète de ce qu'est une variable. Si vous n'avez pas compris ce que c'est, ce qui est normal, vous comprendrez tout du moins par la suite, lors des mises en pratiques qui suivront.

Une variable doit tout d'abord être créée pour être utilisée : l'ordinateur va aller chercher l'espace nécessaire dans la mémoire (ne vous inquiétez pas, il y en a beaucoup dans les ordinateurs ^^ ) et y mettre sa variable. On appelle cela la déclaration de la variable.

Généralement, on donne une valeur à notre variable dès sa déclaration, pour être sur qu'elle ait bien sa valeur à elle : on appelle cela l'initialisation (on donne une valeur initiale).

Plus tard, l'ordinateur pourra retourner voir sa variable dans la mémoire vive et la modifier, lui changer sa valeur.

Mais pour stocker des nombres dans la mémoire, ça doit être super dur !

Heureusement non :) ! Game Maker, en son ultime simplicité, a en effet une fois de plus tout prévu. Vous pouvez déclarer, modifier, tester la valeur de vos variables en quelques clics de souris !

Le long de ce chapitre, nous allons créer non pas un jeu, mais un petit programme. Il ne sera pas vraiment utile, mais ça sera votre premier vrai programme (et non un jeu). Le but est de vous faire comprendre l'utilité des variables, évidemment, mais aussi de vous montrer qu'il est possible de faire autre chose que des jeux avec Game Maker.

Le programme que nous allons faire est extrêmement simple : il y a une fenêtre et un compteur en haut, initialisé à 0. A chaque fois que l'utilisateur bouge la molette de la souris vers le haut, le compteur augmente de 1. S'il bouge la molette vers le bas, le compteur est réduit de 1. Attention, le compteur ne pourra pas descendre en dessous de 0 !

Les variables propres à Game Maker

Game Maker utilise en plus des variables qui sont propres à lui-même, pour justement nous faciliter la vie. Ce sont des variables qui sont remplacées par les paramètres propres au jeu. Ainsi, en tapant par exemple Hauteur de la fenêtre, cette variable sera remplacée par la hauteur de la fenêtre (640 par exemple). Ce sont donc des valeurs qui correspondent à des choses bien précises de notre projet.

Des variables comme ceci, il y en a énormément, et même dans ce cours nous ne les verrons pas toutes tellement il y en a. Nous les utiliserons aussi beaucoup quand nous ferons du GML, langage de programmation de Game Maker ;) .

Ces variables-là, elles sont pour la plupart propres aux objets auxquelles elles appartiennent : sa position, sa vitesse...

Il y a autre chose que vous devez connaitre : les booléens. Il s'agit d'une valeur qui dit si c'est vrai ou faux. Comme on ne peut que stocker des nombres, on dit que 1 représente vrai et 0 représente faux.
Exemple : "vivant = 1" => Vivant est vrai, donc le joueur est encore en vie.

Voici des exemples de valeurs propres à Game Maker qui vous seront utiles tôt ou tard :

L'intérêt d'avoir de telles valeurs est multiple : si par exemple vous avez besoin d'une variable qui stocke la hauteur de la fenêtre, pas besoin d'aller voir dans les paramètres et de taper manuellement ceci :
Hauteur de la fenêtre = 640

A la place, il vous suffira d'écrire cela :
Hauteur de la fenêtre = room_height

Vous pouvez même faire encore plus fort. Vous pouvez directement modifier une valeur, tel que le score par exemple :
score = score + 2 : on ajoute 2 au score
score = score * 2 : on double le score
score = score + (score/3) : on ajoute un tiers du score.

Sachez que vous pouvez utiliser ces raccourcis dans à peu près tout : dans une action qui change le score, par exemple, au lieu de mettre +1, vous pouvez mettre :

Image utilisateur
Pour résumer

Ça fait un gros morceau, je pense qu'il serait bon de resumer ce qu'on a vu avant de continuer.

Il y a donc des variables qui ont des valeurs. Ces valeurs peuvent ou être des chiffres, ou des valeurs spéciales pour aller plus vite (mais ça revient à stocker des chiffres ^^ ). Par exemple :

Créer ses propres variables

C'est, je crois, ce que vous attendez depuis le début : créer notre propre variable ! :D

Commençons par créer un nouveau projet. Créez alors un sprite invisible qui fait la même taille que la fenêtre (regardez en haut de la fenêtre "Edit sprite" pour créer une image. Agrandissez-la alors grâce à l'éditeur de sprite.). Créez ensuite un objet invisible qui aura comme sprite celui que vous avez créé (pour qu'il ait la taille de la fenêtre).

Maintenant, allez dans l'onglet Control. Il y a tout en bas les deux actions qui vont nous être importantes :

Image utilisateur

. Il s'agit de Set Variable et Test Variable.

Set variable sert à créer une variable ET à en modifier une. Mettez cette action pour voir.

Dans le champ Variable, vous mettrez le nom de votre variable. Mettez compteur.
Dans le champ Value, vous mettrez sa valeur. En principe, on met 0 quand on initialise une variable.

Image utilisateur
Voilà ce qu'il se passe

Lorsque l'ordinateur fera cette action, il vérifiera si cette variable n'existe pas déjà. Si elle existe, il va la modifier. Sinon, il va tout simplement la créer, comme ici. :)

Rappelez-vous, le but du programme est le suivant : si on bouge la molette vers le haut, on incrémente le compteur (incrémenter = augmenter de 1). Si on la tourne vers le bas, on le décrémente (décrémenter = retirer 1). Vous l'aurez compris, on va donc utiliser un événement Mouse Wheel.

Commençons par créer l'événement qui gère la molette vers le haut : Mouse Wheel Up

Mettez-y une action Set variable avec comme valeur 1. Cochez bien l'option "relative". Ainsi, on augmente la variable compteur en bougeant la molette.

Image utilisateur

Faites maintenant de même, mais avec un événement Mouse Wheel Down. On décrémentera le compteur, cette fois.

Mais tu as dis que l'on ne devais pas aller en dessous de 0 ! Si on ne fait que tourner la molette vers le bas, on finira pas avoir une valeur négative dans le compteur !

Nous allons pour cela voir cette action "Test variable" pour vérifier si notre variable n'est pas inférieur, supérieur ou égale à 0.


Les variables Test de variable

Test de variable

Créer sa variable Mode avancé et positionnement de texte

Test de variable

Nous allons pour cela utiliser notre action Test variable. Sa fonction est de tester si une variable a une valeur supérieure, inférieure ou égale à une autre. Et c'est un bon exemple pour utiliser nos valeurs spéciales :
Si on avait mit quelque chose comme ça, ça aurait parfaitement marché : room_widthest inférieur à room_height.

Mais ce n'est pas ce que nous allons faire, c'est juste pour vous montrer ;) .

Ce que nous allons faire, c'est voir si le compteur est égal à 0.

Mettez donc plusieurs actions Test variable, Set variables et blocks pour créer ce genre de test. C'est un bon exercice de logique.

Correction

Image utilisateur
Afficher le compteur

Pour l'instant, si vous testez votre projet, vous remarquez qu'il ne fait rien. En fait, il se passe quelque chose : quand vous tripotez votre molette, le compteur monte et descend, mais on ne le voit pas.

Et comment on fait, pour le voir ?

Il faut en fait faire appel à un événement Draw : celui-ci se répète à chaque step du jeu et permet d'afficher des choses à l'écran : du texte, des images, des sprites...

Créez donc ce fameux événement.

Image utilisateur

En action, mettez Draw a text qui se trouve dans l'onglet Draw. Les paramètres vont être un peu spéciaux :
Nous allons pour le moment nous contenter d'afficher le texte : "Compteur". Écrivez tout simplement compteur dans la première barre de saisie.
Dans les lignes X et Y, qui sont la position du texte, mettez 0 pour qu'il soit en haut à gauche.

Image utilisateur

Pour faire joli, mettez un fond coloré à votre pièce et lancez votre projet :

Image utilisateur

Et comment fait-on pour afficher la valeur de notre variable, donc le compteur ?

Il va falloir rajouter une expression dans notre texte. Retournez voir la fenêtre de l'action Draw a text.

Ici, quand l'ordinateur lit cette action, il ne voit que "compteur" en texte et l'affiche donc. Mais il peut aussi lire des informations, et ne pas les afficher. Dans ce cas, on met entre guillemets ['] le texte à afficher, et sans guillemets le texte qui doit seulement être lu par l'ordinateur.

Nous allons donc rajouter une fonction à la suite du texte à afficher qui va nous permettre de mettre la valeur d'une variable. Cette fonction, elle s'appelle String, comme chaine en anglais (chaine de caractères, ou suite de lettres ou chiffres, si vous préférez). On indique ensuite entre parenthèses la variable à afficher. Exemple :

string(maVariable)

Cependant, si on a déjà un texte à afficher avant notre fonction, il faut mettre le signe "+" devant. Ainsi, le texte entier à écrit serait :

'Compteur : ' +string(maVariable)

Image utilisateur
Image utilisateur
Image utilisateur

Créer sa variable Mode avancé et positionnement de texte

Mode avancé et positionnement de texte

Test de variable Les actions "Draw" en revue

Mode avancé et positionnement de texte

Le texte à gauche, ça fait plutôt bof, non ? :(
Et si on le mettait plutôt en haut au centre, ça ferait plus joli, vous pensez ? :)

Il nous suffit juste pour cela de modifier les valeurs X et Y de l'action Draw a text. Nous allons bien entendu utiliser les valeurs spéciales pour aller plus vite.

Mais il n'y a pas de valeurs spéciales qui centrent un texte !

Non, mais nous pouvons les utiliser pour centrer notre texte. Grace à une formule très simple, on peut directement le centrer.
Si un objet est au milieu d'une droite, c'est qu'il est à mi-chemin entre les deux extrémités, donc qu'il en est équidistant : il y a la même longueur entre.

Image utilisateur

Si d'après le schéma AC correspond à la largeur de mon écran, B (le milieu) est donc à 1 demi AC.
AC peut être remplacé par room_width (largeur de la pièce). En le divisant par deux, on a donc logiquement le centre de la fenêtre, quelle que soit sa taille.

Mettez donc dans la ligne X :

Image utilisateur
Le mode avancé

Enfin nous y sommes, le mode avancé :) .
Maintenant que vous avez un peu plus d'expérience, nous pouvons nous y mettre.

Quels sont les avantages à passer en mode avancé ?

Nous avez de nombreuses options supplémentaires qui sont apportées dans ce mode : plus d'événements, d'actions, de fonctions, comme les Timelines (temps d'une manière avancée), les Paths (chemins qui les objets peuvent suivre), les Fonts (nouvelles polices d'écriture), mais aussi le GML... :-°

Pour passer au mode avancé, allez dans le menu File et cochez Advanced Mode. On vous demandera de sauvegarder et de fermer votre projet avant de passer au mode avancé. Réouvrez-le ensuite. Vous remarquez alors tout de suite que des tonnes de choses se sont ajoutées. Nous les détaillerons au fut et à mesure.

Les Fonts

Les fonts, ce sont les polices d'écriture différentes que vous pouvez appliquer à vos textes : modifier la taille, la police, mettre ou non du gras, de l'italique...
Pour créer une nouvelle Font, cliquez sur Create a font du menu.

Changez alors les options que vous voulez de manière à avoir la Font que vous voulez. :)

Image utilisateur

Rendez-vous maintenant dans l'événement Draw de notre objet et ajoutez l'action Set Font de l'onglet Draw. Choisissez votre police et choisissez "Center" du menu déroulant (pour bien centrer le texte).

Image utilisateur

Vous pouvez tester votre projet :

Image utilisateur

Test de variable Les actions "Draw" en revue

Les actions "Draw" en revue

Mode avancé et positionnement de texte Afficher des sprites et des fonds

Nous allons un peu revoir ces fameuses actions qui se trouvent dans l'onglet Draw.
Il y en a pas mal, et il serait bien de voir à quoi elles servent toutes.

Elles servent à afficher des choses à l'écran, me direz-vous, mais quoi au juste ? :p
Parmis les nombreuses actions de cet onglet Draw, nous allons voir les principales, à savoir :

Allez, au boulot !

Afficher des sprites et des fonds

Les actions "Draw" en revue Afficher des formes

Afficher des sprites et des fonds

Il est possible que durant votre jeu/programme, vous vouliez afficher non pas un objet mais un sprite. C'est à dire que vous ne voulez que l'image, et non un objet. Vous ne ferez donc qu'afficher une image à l'état brut sur votre fenêtre.

Il est aussi possible que vous vouliez momentanément changer de fond. Vous pouvez aussi faire cela.

Sprites

Commençons par créer un projet vierge et d'y mettre un objet quelconque. Dans un événement Draw, placez l'action Draw Sprite.

Image utilisateur

Dans la première barre de saisie, choisissez quel sprite doit être affiché.
Dans la deuxième et la troisième, c'est la position du sprite à afficher : vous devez l'indiquer en pixels. X correspond à sa position horizontale et Y à sa position verticale. Rappelez-vous que les coordonnées 0,0 correspondent au coin supérieur gauche de l'écran.

La dernière barre de saisie devrait vous rappeler les animations : mettez -1 si vous voulez que le sprite s'anime (seulement si il est composé de plusieurs images) ou 0 si vous ne voulez pas l'animer.

Mais à quoi peut servir cette action ?

Si par exemple lors de votre jeu, il y avait une explosion, et bien vous y placerez cette action avec comme sprite l'explosion (et pour animer l'explosion, il faut qu'il y ait plusieurs images dans le sprite). Cela vous évite par exemple d'avoir à créer un objet "explosion" juste pour cela.

Exemple

Par exemple, j'ai placé cette action avec comme coordonnées (x : 250, y : 100). Voilà le résultat :

Image utilisateur

Notez bien que la pomme n'est pas un objet mais bien une image toute bête.

Le fond

Si vous voulez changer de fond, il faut cette fois utiliser l'action Draw background. Vous y indiquez quel fond mettre (il faut l'ajouter avant !) et bien entendu sa position. La dernière option, tiled, permet ou non de remplir la fenêtre. Exemple :

Image utilisateur
Image utilisateur

A gauche, le fond sans l'option activée. A droite, l'option activée.


Les actions "Draw" en revue Afficher des formes

Afficher des formes

Afficher des sprites et des fonds Afficher des lignes

Afficher des formes

Nous pouvons aussi afficher des formes basiques, sans sprite : nous utiliserons pour cela les actions Draw Rectangle et Draw Ellipse de l'onglet Draw. Le premier sert à faire des quadrilatères (carrés ou rectangles) et le deuxième des ellipses (cercles).

Les carrés et les rectangles

Commençons par les rectangles. Mettez donc cette fameuse action Draw Rectangle. Les options sont là plus compliquées.

X1 et Y1 correspondent aux coordonnées du coin supérieur gauche du rectangle.
X2 et Y2 correspondent par contre aux coordonnées du coin inférieur droit du rectangle.

Image utilisateur

Le mieux est bien sur de tester par soi-même.

Et l'option "filled", à quoi correspond-elle ?

Elle permet de choisir entre afficher seulement les bords ou bien remplir le rectangle. L'exemple du haut est un rectangle rempli, celui du bas un rectangle où l'on voir seulement les bords :

Image utilisateur
Et avec de la couleur

Il est bien entendu possible de mettre autre chose que du noir :D . Il faut pour cela mettre une action Set Color juste avant et d'y choisir sa couleur.

Image utilisateur

Résultat :

Image utilisateur
Avec des cercles

Les cercles et les rectangles se créent quasiment de la même manière.
En fait, un cercle tient dans un "carré" : j'ai ici créé un cercle et un carré aux même coordonnées.

Image utilisateur

On remarque donc que les coordonnées X1 et Y1 du cercle sont en fait les points de concours de ses tangentes.

Voilà un exemple de cercles (c'était pas facile !) :

Image utilisateur

Afficher des sprites et des fonds Afficher des lignes

Afficher des lignes

Afficher des formes Petite promenade avec les Paths

Afficher des lignes

Nous pouvons également afficher des traits, des lignes.
L'action est cette fois Draw line. Vous indiquez avec X1 et Y1 le début de la ligne et avec X2 et Y2 l'autre extrémité :

Image utilisateur

Y a-t-il d'autres motifs que des lignes ?

Oui, vous pouvez aussi utiliser des flèches, grâce à l'action Draw Arrow.
Les options à régler sont les mêmes, il y a juste une barre de plus : Tip size. Vous y indiquez en fait la taille de la poite, le "triangle" de la flèche, en pixels.

Image utilisateur

Maintenant, vous êtes un expert de l'onglet Draw :lol: .


Afficher des formes Petite promenade avec les Paths

Petite promenade avec les Paths

Afficher des lignes Création d'un path

La traduction directe de Path serait Chemin.
Ce sont des chemins que vous créerez que vos objets suivront, et c'est donc bien pratique quand on crée un mouvement !

Ils sont peut-être un peu durs à comprendre au début, mais deviennent très simple à utiliser par la suite et sont surtout très utiles, par exemple quand vous voulez que tel ou tel objet ait un déplacement spécial.

C'est parti :D .

Création d'un path

Petite promenade avec les Paths Peaufinage du path

Création d'un path

Tout d'abord, parlons théorie.

Les paths sont en quelque sorte des "modes d'emploi pour le déplacement" ; le chemin consiste par exemple en cela :

Une fois votre path configuré, vous n'avez plus qu'à dire à un objet, par le biais d'une action, à suivre ce path, et sans broncher, il va se déplacer comme le path le lui indique ! Et vous pouvez refaire ça avec n'importe quel autre objet.

Nous allons par exemple faire en sorte qu'un smiley tourne en rond dans notre fenêtre. Notez qu'en temps normal, nous aurions mis bien plus longtemps (avec des timers pour changer de direction toutes les x millisecondes, etc. :-° ).

Commencez donc par créer un objet avec le sprite suivant (oui on l'a déjà utilisé) :

Image utilisateur

Il s'agit de smile.ico, du dossier Icons. Créez par la même occasion une pièce avec un fond quelconque, et placez-y votre objet.
Maintenant, cliquez sur Create a Path de la barre d'outils. Une nouvelle fenêtre s'ouvre alors. N'hésitez pas à l'agrandir pour être à l'aise.

Image utilisateur
Notre premier path

Cliquez tout simplement quelque part sur la grande surface quadrillée. Cliquez plusieurs fois, pour obtenir quelque chose comme cela :

Image utilisateur

Bravo, vous avez créé un path ^^ . En gros, l'objet qui le suivra passera par chaque point en suivant les lignes.
Vous pouvez bien sur le modifier, l'améliorer. Par exemple :

Vous pouvez l'inverser horizontalement ou verticalement avec les touches Mirror the path vertically/horizontally

Image utilisateur

.
Vous pouvez supprimer le dernier point créé avec le bouton Delete sur la gauche. Vous pouvez aussi les déplacer en cliquant dessus et en les bougeant.
Pour faire faire à notre path une rotation, cliquez sur le bouton Rotate the path dans les outils et indiquez de combien de degrés la rotation doit être faite.

Les événements

Maintenant, il faut dire à notre objet de suivre le path. Ouvrez donc la fenêtre du Smiley et placez-y un événement Create (ainsi ça se passera au début). Comme action, mettez un Set Path de l'onglet Move.

Dans les options, vous indiquez quel path suivre (vous n'en avez créé qu'un seul), puis la vitesse à laquelle l'objet le suivra, ensuite que doit faire l'objet une fois arrivé (recommencer, s'arrêter...). Mettez "Continue from start" pour qu'il recommence le parcours et qu'on soit sur qu'il recommence depuis le point de départ. Ne touchez pas à la dernière option.

Image utilisateur

Lancez votre projet... ça marche !
Le smiley se déplace bel et bien en boucle.

Image utilisateur

Oui mais, son mouvement à l'air un peu saccadé, il semble changer brusquement de direction.

Nous pouvons pour cela peaufiner son mouvement : en le rendant lisse.


Petite promenade avec les Paths Peaufinage du path

Peaufinage du path

Création d'un path Les actions qui vont avec

Peaufinage du path

Retournez dans la fenêtre de votre path et enlevez tous les points existants.
Sur la gauche de la fenêtre, il y a plusieurs options dont Straight lines ou Smooth curve. Cochez donc Smooth curves pour faire des beaux arrondis.

Image utilisateur

Maintenant, placez plusieurs points et admirez :lol: .

Image utilisateur
La précision

Vous pouvez rendre votre tracé plus ou moins précis grâce à la barre Precision du bas :

Image utilisateur
Image utilisateur
Image utilisateur

A gauche, un path avec une précision de 2. A droite, le même path avec une précision de 7.

Fermer ou non le path

Vous pouvez aussi choisir de construire un path fermé ou non :

Image utilisateur
Image utilisateur

A gauche, un path fermé. A droite, un path ouvert.
Vous pouvez régler cela avec l'option Closed sur la gauche.

Mais quelle est l'utilité de faire cela ?

Voici un exemple concret : le déplacement. Si on crée un path qui va du haut vers le bas, notre objet ira vers le bas. Au lieu de mettre un Move Fixed vers le bas, il nous suffit de créer un path, ce qui est plus flexible, car l'objet recommencera la boucle depuis où il est, donc continuera d'aller vers le bas.

S'aider de sa pièce pour créer son path

Il vous arrivera des fois de devoir créer un path compliqué pour certains de vos objets. Au lieu d'apprendre par cœur chaque coordonnée et tout le tralala, vous pouvez tout simplement décalcer sur votre pièce, en cliquant sur le bouton suivant.

Image utilisateur

Résultat :

Image utilisateur

Au fait, je préfère vous informer, la pièce ne donne qu'un guide. Le chemin sera interprété depuis la position de l'objet lui-même, et non à la position de la pièce.


Création d'un path Les actions qui vont avec

Les actions qui vont avec

Peaufinage du path Mini-TP

Les actions qui vont avec

Voici les quelques actions qui vous serviront lors de l'utilisation de Paths :

Set path

On l'a vu, il sert à faire suivre un path. Nous avons décrit ses options auparavant.

End path

Si vous voulez que l'objet arrête de suivre le path. Il n'y a aucune option à régler, par contre vous pouvez choisir quel objet doit arrêter (via le haut).

Path position

Il sert à placer l'objet dans le path à une position précise. Attention, le nombre doit être compris entre 0 et 1. Par exemple, 0.5 serait le milieu du path.

Path speed

Si vous voulez changer la vitesse à laquelle votre objet suit le path.

Variables spéciales

Tenez, je vais en profiter pour vous donner quelques variables propres à Game Maker qui ont un rapport avec les paths :


Peaufinage du path Mini-TP

Mini-TP

Les actions qui vont avec Les timelines

Mini-TP

Allez, il est temps de vous faire bosser :diable: .

Ce Mini-TP sera relativement court, c'est juste pour vous faire pratiquer les paths.
Le principe est le suivant :

Vous avez un bonhomme que vous déplacez avec les flèches (gauche, droite, haut, bas). Attention, au lieu d'utiliser des Move fixed, vous allez utiliser des paths :diable: . C'est tout ^^ .

Les sprites à utiliser sont les suivants :
explorer_down_strip8, explorer_left_strip8, explorer_right_strip8 et explorer_up_strip8, tous contenus dans les dossier Maze-Platform.

Bien entendu, le mouvement sera animé. Ah oui, dernière chose, lorsque le personnage ne bouge plus, il doit regarder vers nous.

C'est parti !

...
...

Stop ! C'est fini !

Correction :

Ce Mini-TP n'était pas très dur. Tout d'abord, il fallait importer chaque sprite pour chaque mouvement. Ensuite, créer un objet Personnage, ou Joueur.

J'ai ensuite créé 5 paths : un qui va vers la gauche, un qui va vers le haut, un qui va vers la droite, un qui va vers le bas, et un qui ne va nulle part. Ce dernier est en fait constitué d'un seul point.

Voilà par exemple mon path gauche :

Image utilisateur

Il est tout petit :) .
Il fallait bien entendu créer une pièce, puis ajouter les événements de l'objet Personnage :

Voilà un lien vers une vidéo de ce que j'obtiens : ici.


Les actions qui vont avec Les timelines

Les timelines

Mini-TP Introduction

Les timelines, c'est une autre façon de compter le temps qui passe. Nous avons vu les alarmes, et nous allons désormais voir que l'utilisation des timelines est à peu près aussi utile : il s'agit d'événements chronologiques !

Savez-vous ce que c'est qu'une frise chronologique ? C'est une ligne représentant le temps, sur laquelle on place divers événements à des moments précis. Exemple :

Image utilisateur

Des choses se passent à différents moments. Nous pouvons faire pareil dans Game Maker.

Introduction

Les timelines Créer une timeline

Introduction

Les frises chronologiques, elle peuvent se compter différentes unités de mesure : en années, en jours, en secondes ?
Dans Game Maker, nous les compterons en steps (eh oui encore !). De toutes façons, on a pas le choix vu que Game Maker ne connait que les steps.

Une frise chronologique, en principe ça commence depuis un moment précis, en l'occurrence, dans Game Maker, ça commence dès le début du jeu. Mais ça peut aussi commencer plus tard, quand on "appellera" la frise grâce à une action.

Donc, quand le jeu commence, notre timeline va compter les steps qui passent. Puis, à certains moments, vous aurez mis des actions à faire. Quand la timeline va arriver à ce moment-là, elle va les faire.

Exemple

Par exemple, disons que dans ma timeline, j'ai une action à 50 steps et une autre à 350 steps.

Je lance donc le jeu, et par la même occasion, la timeline. Elle compte donc les steps qui passent pendant le jeu. 50 steps après le début de la timeline, il se passe l'action qui était au 50ème step. On continue... et quand la timeline arrivera à 350, donc 350 steps après le début, on fait l'action qui va avec ! Comprenez ? :)


Les timelines Créer une timeline

Créer une timeline

Introduction Les tuiles

Créer une timeline

Ouvrez tout d'abord un projet vierge et cliquez sur le bouton Create a Timeline de la barre d'outils. Une fenêtre qui ressemble beaucoup à celle des objets apparait alors.

Il faut différencier deux colonnes dans cette fenêtre : Moments et Actions.
Dans la colonne Moments, on met le "moment", le step si vous préférez, où doivent se dérouler les actions.
Dans la colonne Actions, et bien vous mettez ce qu'il doit se passer au moment dit.

Ça ressemble beaucoup aux événements, non ? ;)

Mettons par exemple une action au step 50. Cliquez donc sur Add, sur la gauche.

Image utilisateur

Entrez ensuite "50" dans la fenêtre qui s'ouvre. Notre moment a été créé.

Image utilisateur

Dans la colonne Action, on fait comme avec les événements. Tenez, on a qu'à afficher un message qui dit "bravo, vous avez atteint les 50 steps !" ^^ .

Mettez donc cette action au step 50.

Créez maintenant un objet sans sprite, dans lequel vous placerez un événement Create. Placez-y l'action Set Timeline de l'onglet Main2. Cette action a pour but de commencer une timeline.

Dans les options, choisissez votre timeline. Laissez 0 dans la barre "position", pour commencer de 0. Ne touchez pas au reste et placez votre objet dans une pièce quelconque. Testez votre projet.

Résultat, 50 steps après le commencement :

Image utilisateur
Exercice

Allez, on s'exerce !
Maintenant, vous allez créer d'autres événements à d'autres endroits.
Un message identique, exemple :

Bravo, vous avez atteint 150 steps...
Bravo, vous avez atteint 430 steps...
Bravo, vous avez atteint 54654 steps... :D

Ce chapitre n'a pas été bien long, et pour cause, il n'y a pas grand chose à dire sur les timelines. :p
Je vous le dis et le répète, exercez-vous.

Dans le prochain chapitre, nous verrons les tuiles, un moyen de texturage particulier.


Introduction Les tuiles

Les tuiles

Créer une timeline Introduction

Les tuiles sont une autre façon de créer des arrières-plans pour vos jeux. Au lieu d'utiliser des objets, vous utiliserez des "morceaux" de décors, que vous pourrez entreposer comme une sorte de mosaïque.

L'avantage est certain : plus besoin de devoir utiliser plusieurs fichiers pour chaque objet différent ; ils sous tous regroupés dans le même fichier.
Aussi, un décor "tuilé" consomme nettement moins de mémoire qu'un décor fait à partir d'objets divers.

Voilà donc pour les avantages.
Notez bien que cette technique est énormément préférée à ce que nous avions l'habitude de faire avant ; de nombreuses personnes l'utilisent, c'est tellement plus pratique ! :D

A table :pirate: !

Introduction

Les tuiles Charger un tileset

Introduction

Voilà en gros comment se présente un pack de tuiles :

Image utilisateur

Cela ressemble drôlement à une mosaïque, me direz-vous. ^^

En fait, il s'agit du même principe. Plusieurs images sont regroupées dans le même fichier, et il n'y a plus qu'à en sélectionner des bouts pour créer un arrière-plan.
Par exemple, dans le pack ci-dessus, vous voyez plusieurs parties de murs : horizontaux, verticaux, des coins... Si vous lui indiquez qu'il s'agit d'un pack de tuiles, Game Maker interprètera chaque dessins différents comme étant seuls.

Bien entendu, cela ne s'applique que pour les arrières-plans.

A quoi cela sert ?

Cette technique vous permet d'avoir tous vos éléments de décors dans une seule palette. Vous pourrez alors en sélectionner des morceaux et les réarranger comme vous le souhaitez. Voilà ce qu'on peut faire avec le pack ci-dessus :

Image utilisateur

Le but est, vous l'avez compris, de transporter le moins d'images possible pour que le décor soit moins lourd à charger. On n'utilise ainsi qu'un seul sprite au lieu de plusieurs différents.


Les tuiles Charger un tileset

Charger un tileset

Introduction Introduction au GML

Charger un tileset

Nous allons maintenant nous occuper de charger notre pack de tuiles dans notre projet.

Un pack de tuiles se conduit comme un background. En fait, c'en est un. Cliquez donc sur Create a Background. Chargez comme image wall.png, du dossier Tilesets, lui-même dans le dossier Backgrounds.

Vous remarquez par ailleurs que vous avez un bon choix de tilesets. ^^

Maintenant qu'il est chargé, cochez l'option Use as tile set. Si vous ne l'avez pas, c'est que vous n'êtes pas en mode avancé.

Image utilisateur

Vous remarquez alors cette nouvelle partie qui est apparue :

Image utilisateur

Les sprites composants ce tilesets faisant 32*32 pixels individuellement, il faut modifier la valeur actuelle de 16*16 pixels. Modifiez les valeurs Tile width et Tile height. Les images sont alors correctement découpées.

Image utilisateur

Notez que les options Horizontal Offset et Vertical offset permettent de décaler l'ensemble des lignes.

Insérer notre pack de tuiles dans une pièce

Créez une pièce et réglez-y le quadrillage à la bonne taille, ici 32*32 pixels.
Rendez-vous désormais dans l'onglet Tiles, dans le menu de gauche. Cet onglet permet de gérer les tilesets dans votre pièce.

La pose d'éléments du tileset est alors la même qu'avec les objets : vous sélectionnez la partie du tileset qui vous plait et vous la déposez sur votre pièce. Notez que vous pouvez utiliser plusieurs couches, en chargeant plusieurs tilesets différents, par exemple.

Pour ajouter une nouvelle couche, il vous suffit de cliquer sur le bouton Add en bas et d'indiquer la profondeur de ladite couche.

Image utilisateur

Vous pouvez aussi utiliser plusieurs tilesets à la fois. Il vous suffit d'en charger plusieurs, et vous pourrez alors switcher entre grâce au bouton suivant :

Image utilisateur
Testons ce que l'on a fait

Il est temps de tester pour voir ce que ça donne.
Personnellement, je vais rapidement faire un personnage basique que l'on contrôle avec les touches fléchées.

Résultat :

Mais, on passe au travers des murs !

Voilà le problème auquel nous allons être confrontés : les décors ne sont que des décors. Ils ne sont donc pas considérés comme des murs, ni rien.

La parade est cependant simple : il suffit d'ajouter de faux murs par-dessus les endroits que l'on veut inaccessibles. Des objets invisibles, mais solides, seront parfaits : on ne les voit pas et on ne peut les traverser. On aurait donc l'impression de se cogner contre un vrai mur alors que c'est en vérité le bloc invisible qui nous bloque.

La marche à suivre

Créez un nouveau sprite tout noir, ou de la couleur que vous voulez, du moment que vous le reconnaissiez, grâce au logiciel que nous avons vu. Créez ensuite un objet ayant ce sprite. Cochez Solid (car il doit arrêter le personnage) et décochez Visible pour qu'on ne le voit pas.

Image utilisateur

Placez ensuite ce sprite par-dessus les cases du décor qui doivent être arrêtées. De cette manière, vous voyez bien où vous les avez placés.

N'oubliez pas d'inclure une collision avec ce sprite invisible à votre personnage, puis testez le projet. Vos murs sont terminés ! :D

Voilà, ce chapitre sur les tuiles s'arrête ici.
Vous remarquez que l'utilité de tuiles est grande, notamment lorsque vous ferez des jeux plus compliqués, où il y aura beaucoup de sprites à utiliser.

Vous n'êtes pas obligés d'utiliser les tilesets fournis avec GM8, il y a de nombreux sites sur Internet qui en proposent de bonne qualité. Cependant, c'est toujours mieux d'avoir ses propres tilesets ;) .


Introduction Introduction au GML

Introduction au GML

Charger un tileset Comment fonctionne un programme

Game Maker possède lui aussi son propre langage de programmation. C'est à dire que l'on peut, en plus d'utiliser le traditionnel Drag and Drop, créer des petits bouts de codes. Mais qu'est-ce au juste qu'un "code" ? Le GML est-il plus compliqué que d'autres langages de programmations ?

Ne vous inquiétez pas, la programmation n'est pas dure et est à portée de main de tout le monde. De plus, vous n'aurez pas besoin de connaitre un autre langage au préalable pour suivre cette partie.

Comment fonctionne un programme

Introduction au GML Comment se présente le GML

Comment fonctionne un programme

Voilà une question qui doit vous titiller depuis un petit moment :

Mais comment fonctionne donc un programme ? Qu'est-ce que c'est au juste ?

Un programme, c'est en quelques sortes une série d'actions qui sont effectuées sur votre ordinateur. Bien entendu, c'est généralement l'utilisateur qui choisit ce que l'ordinateur doit faire : c'est lui qui lui donne des ordres, des instructions.

Il pourra par exemple lui donner l'ordre suivant :

Calcule 4 + 3 !

L'ordinateur va donc, sans broncher, faire son petit calcul, par le biais de chiffres.

Vous vous en doutez bien, qui dit calcul dit aussi variable. On pourra ainsi effectuer des calculs entre variables par le biais du GML, sans utiliser d'événements. L'utilisation du GML ne se limite cependant pas à ça puisque toutes les actions disponibles en Drag and Drop ont leur équivalent en GML. Sauf que chaque actions possède plusieurs déclinaisons en GML, ce qui au final donne beaucoup d'actions GML ! :p

Le GML permet en fait d'utiliser les actions plus rapidement, sans avoir à les chercher dans les différents onglets.
Vous voulez utiliser une action dans votre code ? Vous apprenez son nom et comment elle fonctionne, puis vous n'avez plus qu'à l'écrire. Par exemple, on pourrait écrire un petit code qui demande à afficher un message (GML simplifié) :

Afficher message

Le GML permet d'effectuer plusieurs choses à la suite, que se soit des actions ou des calculs. Il vous suffit d'écrire de petits morceaux de codes à la suite :

Commencer le jeu

Afficher un message

Calculer 2 + 1

Pause pipi

Fin du jeu
Résumons

Nous avons vu que le GML était une alternative au Drag and Drop, qui permet de créer son jeu/programme simplement en tapant du texte, du code si on préfère. On peut utiliser les actions que l'on connait et faire faire des calculs grâce aux variables.


Introduction au GML Comment se présente le GML

Comment se présente le GML

Comment fonctionne un programme Dis bonjour !

Comment se présente le GML

Le GML possède une syntaxe particulière. En effet, votre ordinateur ne peut reconnaitre en un claquement de doigts ce qui est dit dans votre code. Vous devez lui indiquer que ceci est une variable, cela est une action, que là on fait ça, on fait ci... On doit glisser des "repères" dans notre code pour que votre ordinateur puisse s'y retrouver dans tout ce joyeux bazar. ^^

Certains d'entre vous seront peut-être habitués à sa syntaxe si vous programmez dans des langages ressemblants. Comme dans beaucoup de langages de programmation, le GML se décompose ainsi :

Un code GML, pour faire simple, débute par une accolade ouvrante "{" et termine par une accolade fermante "}". Tout le contenu de votre code devra être entre ces deux accolades. Cela représente en gros le début du code et sa fin, c'est pour l'indiquer à l'ordinateur.

Exemple :

{


  ...
  ...


}
Et les actions dans tout ça ?

Ah, j'allais les oublier celles-là. ^^

Les actions, comme je vous l'ait dit, sont les mêmes dans le GML comme dans le D&D. On retrouve les mêmes, sauf qu'elles sont bien plus nombreuses dans le GML : chaque action a plusieurs variantes selon ce que vous voulez faire...

Nous allons donc en venir aux instructions.

Qu'est-ce qu'une instruction ? C'est tout simplement un "ordre" qui est donné au programme. Un ordre, ça peut être un calcul, une utilisation d'action, de variable. Bref, tout ce que l'ordinateur peut faire. :)

{


    Faire aller le personnage vers la gauche    <-- Une instruction
    Le faire ramasser une pièce                 <-- Une autre instruction
    ...

}
A retenir en bref...

Je ne veux pas vous forcer à tout apprendre du premier coup, car cela viendra avec le temps. Sa syntaxe est particulière, mais cela rentrera un jour ^^ . Retenez en gros ces grandes lignes, qui résument ce que l'on a dit ici :

Un code, c'est une série d'ordres

Un code peut se résumer à une série d'ordres à la suite, qui forment un ensemble cohérent. L'ordinateur effectue vos calculs et vos actions à la suite, et vous devez lui indiquer quoi faire.

La syntaxe du GML

On place une accolade ouvrante au début et une accolade fermante à la fin. Tout notre code se situe entre. Nous verrons d'autres particularités de sa syntaxe, et nous ferons la différence entre un code GML et un simple fichier texte.

Un code GML est composé d'instructions

Ces instructions sont les ordres à donner à votre ordinateur. Ils rassemblent les actions à effectuer par l'ordinateur.

Vous êtes fin prêt pour le grand pas ? Dans le prochain chapitre, on attaque pour de bon ! :pirate:

Nous verrons d'une manière plus élaborée à quoi ressemble le GML, comment on ajoute du code à notre projet, et si vous êtes sage, on écrira notre premier code ! ;)


Comment fonctionne un programme Dis bonjour !

Dis bonjour !

Comment se présente le GML Création d'un code

Allez, on attaque pour de bon !

On va voir comment se construit un code GML, comment on l'écrit, et comment on l'introduit dans notre projet. Une base fondamentale pour la suite ! ;)

Création d'un code

Dis bonjour ! Remplissage du code

Création d'un code

Tout d'abord, ouvrez un nouveau projet si ce n'est pas déjà fait. Créez une pièce quelconque puis un objet. Je suppose que vous savez déjà faire tout ça ! :)

Un code doit être introduit dans notre projet au moyen d'une action. Cette action-là peut être jouée à n'importe quel moment et permet tout simplement d'effectuer plusieurs choses en GML. Ainsi, vous pouvez "glisser" des portions de GML un peu partout dans votre projet.

Créez un événement Create et ajoutez une action Execute Code. Vous trouverez cette action dans l'onglet "Control". L'éditeur de GML s'ouvre alors !

Image utilisateur

Bienvenue dans l'éditeur de code. C'est ici que vous écrirez vos codes GML. Autant se familiariser maintenant avec l'interface (assez simple, me direz vous).

Familiarisation avec l'éditeur de code

Pour écrire du texte, utilisez tout simplement votre clavier, comme dans un vulgaire éditeur de texte.

Image utilisateur

Le premier bouton (le "tick" vert), vous le connaissez surement, vu que c'est le même partout. C'est pour sauvegarder votre boulot et fermer la fenêtre. Les deux suivants servent pour sauvegarder ou charger un code sous un fichier texte (.txt). Le suivant sert à imprimer.

Ce sont les grandes lignes à savoir.


Dis bonjour ! Remplissage du code

Remplissage du code

Création d'un code Afficher un message

Remplissage du code

Maintenant que vous savez comment fonctionne ce fameux éditeur de code, il va falloir un peu le remplir. ^^

Nous avons vu que l'on devait commencer notre code GML et le terminer avec des accolades (voir chapitre précédent). C'est la base à savoir. Commencez donc par en mettre :

Image utilisateur

Le contenu de notre code sera donc entre ces deux accolades.

Un commentaire ?

Un commentaire est une partie du code GML qui ne sera pas lue par votre ordinateur. Seul vous pouvez la lire. Le commentaire sert à vous repérer dans votre code. Il ne sera pas interprété comme une action et sera complétement ignoré quand l'ordinateur lira votre code GML.

Pour écrire un commentaire dans votre code, il suffit de précéder votre texte par deux "slash" : //.

Voilà un exemple :

Image utilisateur

Vous remarquez que le commentaire se colorie en vert pour que vous puissiez le reconnaitre parmi du texte normal.

Mais si on veut écrire plusieurs commentaires à la suite, on doit faire un nouveau "//" sur chaque ligne ?

Non, car il existe un commentaire qui permet d'écrire sur plusieurs lignes. Ce commentaire commence avec un "/*" et termine avec "*/".

Image utilisateur

Création d'un code Afficher un message

Afficher un message

Remplissage du code

Afficher un message

Maintenant que vous vous êtes familiarisé avec l'éditeur de code, nous allons voir notre instruction. Rappelez-vous, une instruction est un ordre qui est donné à l'ordinateur. Nous allons donc lui demander de faire quelque chose. :)

Une instruction termine toujours par un point-virgule. Une instruction se reconnait par ça. Ainsi, chaque ligne finissant par un point-virgule est une instruction.

Exemple :

Une instruction;
Une autre;

Nous distinguons donc pour le moment deux types d'expressions différentes :

Voilà ce que ça donne dans l'éditeur :

Image utilisateur

La première instruction que nous allons voir sert à afficher un message à l'écran. L'équivalent en D&D sera l'action Display Message (Main 2).

L'instruction en question s'écrit ainsi : show_message
Cependant cela ne suffira pas, il faut indiquer quoi afficher. Vous devez alors mettre une paire de parenthèses, puis écrire votre texte entre guillemets :

Image utilisateur

N'oubliez évidemment pas de mettre un point-virgule à la fin de l'instruction. Vous devriez donc avoir dans votre éditeur :

Image utilisateur
Et si nous testions ?

Cliquez sur le "tick" vert en haut à gauche pour sauvegarder votre code puis lancez le projet (N'oubliez pas de placer votre objet dans votre pièce). Vous devriez donc aboutir à ce résultat à l'écran :

Image utilisateur
Détaillons ce qu'il s'est passé

Voilà comment se sont déroulées les opérations :

Quelques exercices pour s'entrainer

Pour vous entrainer, je vous propose de reprendre un ancien projet, comme le casse-brique, et de remplacer vos actions Show Message par un bout de code GML qui affichera la même chose. Habituez-vous à manipuler le GML.


Remplissage du code