[le game dev pour les n00b] Faites vos jeux!

Le radio crochet du 21 ème siècle

[le game dev pour les n00b] Faites vos jeux!

Messagepar Le Chevalier Masqué » 09 Juin 2014, 10:54

Certains ici le savent, mais depuis quelques mois, je tiens un Groblog consacré à la création de jeux vidéo à destination des grands débutants.
Hélas, le taux de retours est absolument ridicule comparé au temps que j'y consacre chaque dimanche (minimum 8h00, sans compter les multiples retouches au fil des semaines), et les problèmes techniques que rencontre le forum de Grospixels m'empêchent de pouvoir faire réellement ce que je voudrai. Du coup, je me dit que ça peut intéresser les poissons curieux, d'autant qu'il y a une section consacrée au sujet.

Au cas où, les tutos qui seront postés ici auront environ deux mois de décalage par rapport à la version Groblog (il y a actuellement 10 tutos sur Grospixels, à raison d'un par semaine, sauf exception). L'une des raisons est que je souhaite malgré tout conserver la primauté à à la communauté de Grospixels, même si elle ne le rend pas forcément. :cry:

---------------------

Gamins, nous avons tous rêvé de créer nos propres jeux vidéo. Et si, pour certains, la chose s'est concrétisée, pour d'autres, elle a été remisée dans un coin, aux côtés de la salle d'arcade privée, d'un coup à boire avec Yu Suzuki et de la collection complète des jeux GX-4000.

Longtemps, nous avons perçu la création de jeux vidéo comme strictement accessible à une caste de matheux ou d'artistes émérites, lesquels utiliseraient des outils extrêmement complexes loin, très loin d'être à la portée du tout venant. Mais ces dix dernières années, de nouveaux outils ont vu le jour.
De plus en plus nombreux, ces logiciels permettent à chacun de pouvoir créer ses propres jeux vidéo, généralement sans pré-requis mais nécessitant néanmoins une certaine dose d'investissement de temps et d'énergie.

Ce que je vous propose à travers ce Groblog, c'est de découvrir l'un d'eux : Scratch.

A l'aide de tutos les plus clairs et simples possibles, nous tenterons d'apprendre et de comprendre le fonctionnement de ce logiciel, tout en créant de petits jeux de différents genres. L'objectif est, à moyen terme, de comprendre le fonctionnement de jeux commerciaux pour mieux en saisir les rouages de création. A long terme, l'idée est que vous puissiez devenir totalement autonomes, créer et partager vos jeux, pour votre plaisir et celui de vos proches.

Pourquoi Scratch ?

Parce-que Scratch est multi-OS, gratuit, léger, fonctionnel, hyper accessible et que ses capacités offrent un large spectre de possibilités de création. Mais aussi parce-que son système ouvert et communautaire permet le partage libre de contenus, sans restrictions particulières.
Enfin parce-qu'il est possible d'exporter ses jeux très facilement, sur un site, un forum ou les exporter en tant que simples fichiers exécutables.

Scratch est une implémentation visuelle et dynamique du langage de programmation Smalltalk basé sur Squeak.

- Scratch est dynamique, il permet de modifier le code du programme en cours d'exécution. Orienté multimédia pour l'enseignement à l'univers informatique des enfants, il traite avec une grande facilité les concepts de base de la programmation comme les boucles, les tests, les affectations de variables, et surtout de la manipulation des objets dans la pure tradition des E-Toys connus sous Squeak, tout comme les sons et les vidéos.

- Scratch est visuel, tout le code est directement inscrit dans la langue maternelle de l'enfant (une vingtaine de langues européennes sont disponibles) sous forme de briques en couleurs (par exemple les contrôles en orange, les variables en rouge, les mouvements en bleu).

- Scratch permet ainsi à l'enseignant de diffuser sa pédagogie par une interactivité quasi-ludique des objets manipulés par ces briques logicielles. Le nom de Scratch provient du Turntablism, cet art de mélanger des sons grâce aux tables de mixage, comme cette vision de réutiliser des objets.

- Scratch permet de diffuser ses projet en ligne

L'utilisation de Scratch dépasse l'univers scolaire, mais une forte communauté d'enseignants, d'étudiants, de passionnés, exposent et partagent sur le site de Scratch leurs créations, leur créativité et leurs développements.

Le slogan de Scratch est "Imagine·Programme·Partage !". Le partage est en effet un fondamental de la pédagogie de Scratch. Recycler des projets existants pour en inventer de nouveaux, telle est la conception de ce micromonde.

Scratch est un environnement de développement, de site web, et un lecteur de scripts Scratch.

Le code source de Scratch est encore en développement. Il est distribué sous 2 licences dont la licence GPL. Toutefois, scratch et d'autres éléments sont des marques déposées (trademarks), dont la re-distribution est soumises à contraintes 1. Une version ne contenant pas les marques déposées est mise à disposition et permet de distribuer des modifications éventuelles avec une licence GPL.


Source: Wikipedia

Fonctionnement :

Ce Groblog sera mis à jour tous les dimanche, en fin de journée.
Chaque nouvelle note comportera une introduction aux outils qui seront utilisés dans « La leçon du jour », ainsi qu'un tuto permettant la création d'un nouveau jeu ou la mise à jour d'un jeu précédemment créé, avec de nouvelles fonctions et éléments de gameplay.

Partant sur la base que vous ne savez pas coder, que vous n'êtes pas dessineux ni musicien, je mettrai à disposition la totalité des éléments contenus dans chaque nouveaux jeu proposé à la création afin que vous puissiez vous consacrer à l'essentiel sans être rebuté par le reste.
Il s'agira toujours de tutos pas-à-pas, auxquels j'ajouterai au fil du temps quelques exercices pratiques pour ceux qui souhaitent approfondir certaines notions, ou tout simplement relever de petits challenges créatifs.

Pré-requis :

Comme dit précédemment, le suivit de ce Groblog ne nécessitera pas de connaissances particulières, y compris en mathématiques, ce alors que nous allons pourtant créer du code.
Simplement, il vous faudra consacrer une petite heure par semaine à la création des jeux proposés à chaque tuto. Ce peut-être aussi bien bien une heure d'un bloc, ou cinq minutes par ci, dix minutes par là. Allez-y à votre rythme, sans vous mettre la pression, vous avez tout le temps de travailler dessus.
Notez que tous les tutos seront proposés sur la base de Scratch 2.

Logiciels complémentaires :

Vous le constaterez au fil des semaines, ces tutos nécessiteront parfois l'utilisation de logiciels annexes. Ce ne sont en rien des obligations, mais des recommandations qui pourront vous êtes utiles, selon que vous soyez plus ou moins à l'aise avec le dessin ou le son.
Dans tous les cas de figure, j'exposerai également un mini-tuto dans chaque leçon pour expliquer l'utilisation de telle ou telle fonction pour un logiciel annexe.
En attendant, et à moins que vous ne les ayez déjà installé sur votre ordinateur, en voici une première liste :

- Gimp (travail sur l'image en général)
- Inkscape (travail sur l'image en vectoriel)
- Pixel Edit (travail approfondi sur le pixel art)
- Audacity (travail sur le son)

Tous sont gratuits et, hormis Pixel Edit, tous sont libres.

Enfin, si vous avez des questions sur les tutos proposés, n'hésitez pas à les poser publiquement.
En revanche, si elles touchent à des points qui n'ont pas encore été abordés, merci de m'envoyer un MP afin de ne pas parasiter la discussion.

Vous êtes prêts? C'est parti!
Z
Avatar de l’utilisateur
Le Chevalier Masqué
 
Messages: 73
Inscrit le: 27 Nov 2010, 17:23
Localisation: Paris

Re: [le game dev pour les n00b] Faites vos jeux!

Messagepar Le Chevalier Masqué » 09 Juin 2014, 10:55

A la découverte de Scratch :

Tout d'abord, il va vous falloir télécharger et installer Scratch.
Pour ça, rien de plus simple. Rendez vous à cette adresse et téléchargez le logiciel.
Vous remarquerez qu'il nécessite un environnement Adobe Air. Celui-ci se téléchargera et s'installera dans la foulée, pas d'inquiétude ni de plug-in à aller farfouiller sur le net.

Notez qu'il existe une ancienne version, la 1.4, toujours activement utilisée. Vous pouvez la télécharger ici si vous le souhaitez. Néanmoins, les possibilités qu'elle propose sont, comparativement à la version 2, par trop restreintes, mais vous pouvez malgré tout tenter de l'utiliser si vous souhaitez suivre ces tutos sans avoir à installer l'environnement Adobe Air.
En revanche, il vous appartiendra d'adapter le contenu des tutos en fonction de ce choix.

Vous aurez remarqué qu'il existe un site communautaire très riche et particulièrement actif. Celui-ci permet d'y mettre ses jeux en ligne, d'accéder à ceux des autres et plus largement de partager toutes sortes de contenus et de conseils. C'est un point important de Scratch, mais nous y reviendrons ultérieurement, notre objectif premier étant de nous familiariser avec l'interface.

L'interface

La première fois que vous lancerez Scratch, voici la fenêtre qui s'ouvrira.

Image

Ne vous formalisez pas du petit chat à tête de psychopathe, ce n'est que le logo du logiciel.
La première chose que vous allez devoir faire est de changer la langue qui, par défaut, est en Anglais. Pour cela, cliquez sur la petite planète puis choisissez « Français » comme indiqué ci-dessous:

Image

Vous noterez au fil de l'utilisation que certains termes ne sont pas traduits, ou bizarrement. C'est tout à fait normal dans le sens où cette version est en beta et que les questions de traductions françaises ont fait état de débats particulièrement houleux entre l'ensemble des utilisateurs francophones et les Québécois. Bref, rien n'est tablé, mais si vous n'êtes pas familier avec l'anglais un tant soit peu technique, mieux vaut passer au français.

Maintenant, nous allons découvrir les fenêtres principales.

La fenêtre de jeu :

Image

C'est là que vous verrez le résultat concret de vos projets au fur et à mesure de leur développement. Autrement dit, ce que vous verrez dedans sera l'exact rendu de ce que verrons les joueurs.
C'est également ici que vous pourrez tester vos jeux simplement en cliquant sur le drapeau vert pour les démarrer et le panneau rouge pour les arrêter.
Notez que le petit carré bleu permet de passer en plein écran pour une meilleur lisibilité.

La fenêtre des contenus :

Image

Dans cette fenêtre, vous pourrez gérer ce que l'on appel les scènes et les lutins.
Les scènes sont les décors de vos jeux, tandis que les lutins sont tous les autres éléments graphiques. Il peut donc tout aussi bien s'agir du personnage que vous contrôlez que de ceux avec lesquels vous interagissez (ennemis, bonus, plates-formes, etc.).
Nous verrons plus loin le détail des options proposées dans cette fenêtre.

La colonne des fonctions :

Image

Comme vous pouvez le voir, cette colonne comporte trois onglets que nous allons découvrir tout de suite, à commencer par le premier qui s'affiche, à savoir l'onglet des scripts.
Pour faire court, les scripts sont des éléments de codes pré-programmés et classés par familles qui s'imbriquent, un peu comme des pièces de Lego. De cette façon, vous pourrez créer des scripts pour toutes sortes d'éléments (scènes ou lutins) de vos jeux sans difficulté particulière et avec une excellente visibilité sur votre projet. Nous reviendrons bien entendu sur cette composante centrale de Scratch.

L'onglet des scripts :

Image

Vous noterez que celui-ci est vide pour le moment. C'est normal, puisque nous n'avons encore rien ajouté dedans.

L'onglet des costumes :

Image

Les costumes sont les sprites de vos lutins et les décors de vos scènes, selon ce que vous avez préalablement sélectionné. Autrement dit, chaque lutin et chaque scène comporte sa propre fenêtre de costumes, de manière indépendante des autres.
Vous remarquerez à travers cette capture qu'un lutin peut comporter plusieurs costumes. Nous y reviendrons là aussi par la suite, mais à titre informatif, c'est ici que nous travaillerons pour proposer des animations de sprites.

L'onglet des sons :

Image

Comme son nom l'indique, c'est ici que vous pourrez ajouter ou modifier les sons de vos scènes ou de vos lutins. Il pourra tout aussi bien s'agir de musiques que de bruitages.

Ceci est un premier aperçu généraliste de l'interface. Mais comme cela a été évoqué, nous approfondirons certains points au fil des tutos dont l'objectif est aussi de vous apprendre à la domestiquer.
Z
Avatar de l’utilisateur
Le Chevalier Masqué
 
Messages: 73
Inscrit le: 27 Nov 2010, 17:23
Localisation: Paris

Re: [le game dev pour les n00b] Faites vos jeux!

Messagepar Le Chevalier Masqué » 09 Juin 2014, 10:55

Tuto n°1 : Le jeu du crabe

Première partie : les bases

Notions abordées :

- Ajouter un décor
- Ajouter un sprite
- Placer un sprite
- Le déplacer avec les flèches du clavier

Dans ce premier tuto, nous allons apprendre et comprendre comment créer un jeu à score.
Il s'agit bien entendu d'un petit jeu sans prétention, très basique. Cependant, il nous servira de base pour les trois tutos suivants, lesquels nous permettront d'ajouter divers éléments de gameplay comme un score, un timer, des ennemis et des niveaux supplémentaires.

Tout d'abord, il va vous falloir un décor. Car outre l'aspect purement esthétique (il est néanmoins tout à fait possible de créer un jeu sans décor), il va nous être nécessaire pour instiller une certaine logique dans l'univers que nous souhaitons développer.
Étant donné que, théoriquement, vous débutez avez Scratch, je vous recommande d'importer le décor ci-dessous, ce afin de gagner du temps et découvrir quelques nouvelles fonctions.

Image

Pour ce faire, et après avoir enregistré le décor, cliquez sur « Scène », en bas à gauche. Le bouton est encadré de bleu, ce qui signifie que les différentes actions que vous allez réaliser seront appliqués au(x) décor(s). Ensuite, sous « Scènes », cliquez sur le petit dossier avec une flèche Image afin d'importer l'image de votre décor, laquelle s'ajoute automatiquement à votre jeu.
Vous remarquerez que l'affichage de la fenêtre de droite à changé, ainsi que la sélection de l'onglet, qui est passée sur « Arrière-plan », ce qui est tout à fait normal.
Par défaut, Scratch vous propose de modifier l'aspect graphique de tout élément visuel nouvellement ajouté, qu'il s'agisse d'une scène ou d'un lutin. Si vous le souhaitez, vous pouvez utiliser dès maintenant ces outils pour changer le décor selon vos convenances (mais nous y reviendrons là aussi par la suite).

Toujours dans l'onglet « Arrière-plan », vous pouvez constater qu'en plus du décor que vous venez d'ajouter, il y a un autre élément nommé « backdrop1 ». Il s'agit tout simplement du décor par défaut, que vous pouvez désormais supprimer en le sélectionnant puis en cliquant sur la croix grise qui s'y affiche.

Afin de bien nous organiser pour la suite du tuto ainsi que ceux qui suivront, nous allons renommer notre décor.
Pour cela, cliquez sur ce champ Image puis appelez-le « decor1 ».
De manière générale, il est essentiel de correctement nommer ses différents éléments (scènes, lutins ou sons) car même sur un petit jeu, il est possible de se retrouver avec des dizaines de choses qui, si l'on n'y prend pas gare, peuvent poser un souci de logique dans la construction des scripts.

Maintenant,nous allons ajouter notre premier sprite, ou lutin.

Pour cela, cliquez sur l'ignoble chat tueur en série pour le sélectionner, lequel est entouré de bleu, comme pour lors de la sélection de la scène. Puis faites un clic droit et choisissez « Supprimer » pour virer cette horreur.

Comme lors de l'importation de la scène, nous allons maintenant cliquer sur le petit dossier de cette interface Image puis choisir le petit crabe proposé ci-dessous pour l'ajouter à notre projet.

Image

Note : il n'est pas impossible que vous rencontriez un bug qui ne fasse pas apparaître l'image du crabe alors que celui-ci est pourtant bien importé. Dans ce cas, dans l'onglet « Costume » de votre lutin, cliquez sur le dossier « Importer le costume », réimportez l'image et celle-ci doit désormais s'ajouter normalement. Il ne vous reste plus qu'à supprimer l'image vide juste au-dessus.

Maintenant que nous avons un décor et un personnage, nous allons pouvoir commencer à créer un peu de code, à commencer par les déplacements latéraux du crabe.
Le but est donc de le faire se déplacer de droite à gauche (et inversement) d'un bout à l'autre de l'écran. Cela signifie deux choses, à savoir :

- L'axe vertical de notre crabe est toujours le même puisqu'il reste toujours à la même hauteur.
- L'axe horizontal est variable puisqu'il se déplace d'un bout à l'autre de l'écran.

Là, on va s'intéresser à un élément fondamental de Scratch, et des maths en général, celui de la représentation dans l'espace.
En deux dimensions, on pense sur deux axes, à savoir l'abscisse et l'ordonnée.

Image

En bleu, nous avons l'abscisse, autrement dit l'axe horizontal, que l'on nomme plus communément X.
En rouge, l'ordonnée, soit l'axe vertical, que l'on nomme Y.
Le croisement de ces axes représente la valeur 0.
Tout ce qui est au-delà de ce croisement est une valeur positive (vers le haut pour Y, vers la droite pour X), et tout ce qui est avant est une valeur négative (vers le bas pour Y, vers la gauche pour X).
Il est important de souligner que Scratch gère le champ de valeur de la manière suivante pour chacune de ces données :

X : de -240 à 240
Y : de -180 à 180


Autrement dit, et même si nous verrons plus tard qu'il est possible de tricher avec le logiciel, aucun élément ne peut s'afficher en-dehors de ce champ de valeur qui représente tout simplement l'écran de jeu.
Ceci étant dit, revenons à notre crabe.

Première chose, il va falloir indiquer dans notre script ce qu'il advient du crabe lorsque l'on démarre le jeu. Pour cela, et tout en gardant notre lutin sélectionné, nous allons cliqué sur l'onglet « Scripts » vu précédemment.
Ces scripts sont classés par familles et fonctionnalités. Par exemples, la famille des scripts « Mouvement » permet de gérer les déplacements des lutins, celle intitulée « Apparence » gère les variations et les animations des sprites, « Sons » gère les sons (bruitages et musiques), etc.

Cliquons tout d'abord sur « Evènements » et intéressons nous au premier bloc, celui qui se nomme « Quand drapeau vert pressé ».
Vous remarquerez qu'il possède une sorte de bosse sur le dessus et un picot vers le bas. Cela signifie que l'on ne peut rien imbriquer avant, mais que l'on peut ce que l'on souhaite juste après. Vous allez comprendre.

Faites un glisser-déposer de ce bloc dans la fenêtre adjacente, sur la droite. Cette action permet de copier la brique et active automatiquement l'idée que quand quelqu'un va démarrer le jeu, il va se passer quelque-chose au niveau de ce lutin. En l’occurrence, nous allons lui donner un point de départ qu'il retrouvera systématiquement à chaque début de partie. Notez que dans la fenêtre où se placent les blocs de scripts, vous pouvez placer votre première brique n'importe où. Je vous suggère néanmoins de la placer en haut, à gauche, pour une meilleur lisibilité pour la suite des événements.

Maintenant, retournons dans l'onglet des scripts et cliquons sur la famille « Mouvement ».
Dans la liste des blocs, glissez-déposez celui qui se nomme « Aller à X=(valeur de l'emplacement de votre lutin) Y= (valeur de l'emplacement de votre lutin) », soit celui qui ressemble à ça :

Image

Note : ne vous formalisez pas des valeurs indiquées dans ma capture d'écran, elles ne correspondent qu'au placement de mon lutin au moment où j'ai fait la capture. Il est donc très probable que les coordonnées que vous ayez fait lors du choix de ce bloc ne soient pas les mêmes que moi, c'est tout à fait normal.

Prenez ce nouveau bloc et insérez-le juste en dessous du premier, de manière à obtenir une ligne de commande telle que ceci :

Image

Vous avez dû le remarquer, les blocs sont magnétisés, ce qui sera très utile lorsqu'il s'agira d'imbriquer des dizaines de blocs sur de plus gros projets.

Une fois fait, dans votre montage de blocs, cliquez dans le champ X du bloc « Aller à » puis entrez 0. Cliquez ensuite dans le champ correspondant à Y et entrez -53. De cette manière, vous signifiez à Scratch l'endroit exact où vous souhaitez que votre crabe apparaisse au démarrage du jeu.
Faites le test en cliquant sur le drapeau vert de la fenêtre de jeu et vous verrez le crabe se positionner à cet emplacement. Si ce n'est pas le cas, vérifiez vos valeurs.
Normalement, votre crabe est donc positionné sur l'herbe, au centre de l'écran.

Et toutes mes félicitations, vous venez de créer votre premier code !
Si vous avez repris les mêmes coordonnées, le résultat obtenu doit ressembler à ça:

Image

Maintenant, vous allons voir comment faire pour que le crabe se déplacer selon les touches directionnelles que nous allons presser.

Allez dans la famille de scripts intitulée « Contrôles » puis glissez-déposez le bloc « Répéter indéfiniment » et placez de cette façon :

Image

Ce bloc va nous permettre de répéter continuellement toutes les actions qu'il contiendra jusqu'à ce que le jeu s'arrête. Dans le cas présent, cela nous sera très utile pour indiquer au crabe quels seront ses placements dans notre jeu.
Notez que l'on peut placer des blocs dans celui-ci mais que l'on ne peut plus rien ajouter par la suite. C'est tout à fait normal puisqu'il permet de créer une boucle dans laquelle tous les événements ajoutés se répéteront à l'infini, jusqu'à ce que le jeu s'arrête donc.
Pour information, il est tout à fait possible d'ajouter d'autres séries de blocs à notre lutin, mais nous verrons cela plus tard.

Ensuite, toujours en restant dans la famille de scripts « Contrôles », glissez-déposez deux fois le bloc « Si... alors » de cette manière :

Image

Ce bloc sert à créer une condition. Par exemple, si vous faites tel truc, voilà ce qui se passera, mais uniquement si cette condition est préalablement remplie. Par exemple, si Mario saute sur un ennemi, alors il gagne tant de points, et à cette condition seulement.
Dans notre cas, nous allons créer une condition toute simple pour les déplacements, mais la logique est strictement identique.

Maintenant que nous les avons ajouté tous deux, vous avez dû remarquer que ces blocs comportent des sortes de capsules en forme de losanges. Cela signifie que nous allons pouvoir y ajouter nos conditions, qui ici seront des capteurs.

Dans Scratch, les capteurs rassemblent les commandes (clavier, souris, manette) mais aussi les couleurs, les lutins, les sons et même les vidéos. Bref, ce sont les choses qui permettent au joueur d'interagir avec le jeu.
Cliquez sur la famille de scripts « Capteurs » puis glissez-déposez le bloc « Touche (…) pressée ? » de manière à le faire entrer dans le losange de votre premier bloc « Si […] alors ».
Enfin, cliquez sur la petite flèche noire de votre bloc capteur et sélectionnez « Flèche droite » comme indiqué sur cette capture :

Image

Faites-en de même pour l'autre bloc « Si (…) alors », mais en sélectionnant « Flèche gauche ».

Super ! Vous y êtes presque, plus qu'une dernière petite étape !

Retournez dans la famille de scripts « Mouvement » puis glissez-déposez deux fois le bloc « Ajouter à X (...) » de cette façon :

Image

Ces blocs vont nous permettre de modifier l'axe X de notre crabe à l'aide des flèches directionnelles.
Cependant, vous remarquerez que si le premier bloc « Ajouter 10 à X » correspond à la flèche droite, donc à la valeur positive de X, il va falloir changer celle du deuxième bloc en cliquant dans le champ correspondant puis en indiquant -10, soit la valeur négative de X qui correspond à la flèche gauche.

Si vous avez tout suivit correctement (et que j'ai été suffisamment clair ^^), vous pouvez désormais cliquer sur le drapeau vert de votre fenêtre de jeu puis déplacer votre crabe avec les flèches directionnelles de votre clavier ! La classe !

Comme vous vous en doutez, c'est à l'aide de ce type de codes tous simples que l'on peut déplacer n'importe quel sprite, le faire sauter, rouler et j'en passe. Mais nous verrons que plus les actions à réaliser sont complexes, plus les codes sont riches (ne vous inquiétez pas, d'ici là vous aurez acquis des automatismes qui compenserons largement la richesse de ces codes).

Il ne vous reste plus qu'à cliquer sur "Fichier" puis à sauvegarder votre début de jeu, sur lequel nous reviendrons dimanche prochain.

J'espère que ce petit tuto vous a plu et qu'il a été suffisamment clair et compréhensible pour tous. Si ce n'est pas le cas, n'hésitez pas à m'indiquer ce sur quoi vous avez butté ou ce qui n'est pas assez explicite afin que je puisse corriger tout ça par la suite.

La suite dimanche prochain, avec la deuxième partie où nous aborderons les notions suivantes :

- Ajouter une animation à notre crabe
- Ajouter un saut
- Ajouter des objets bonus à ramasser
- Ajouter des ennemis à esquiver

Merci à vous et bon jeu !
Z
Avatar de l’utilisateur
Le Chevalier Masqué
 
Messages: 73
Inscrit le: 27 Nov 2010, 17:23
Localisation: Paris

Re: [le game dev pour les n00b] Faites vos jeux!

Messagepar Martin » 09 Juin 2014, 15:39

Excellent :)
Avatar de l’utilisateur
Martin
 
Messages: 13234
Inscrit le: 19 Aoû 2010, 14:09
Localisation: 75018

Re: [le game dev pour les n00b] Faites vos jeux!

Messagepar Elincia » 09 Juin 2014, 15:53

C'est super intéressant comme démarche. Tu devrais carrément créer un site pour ça, dans le style du site du zéro.
Avatar de l’utilisateur
Elincia
 
Messages: 1909
Inscrit le: 20 Déc 2013, 22:14
Localisation: Bordeaux

Re: [le game dev pour les n00b] Faites vos jeux!

Messagepar Nano » 09 Juin 2014, 18:28

Enorme mais tout ce taff n'a clairement pas la visibilité qu'elle mérite. :o
Ca pourrait pas être en une de Merlan sous format épisodique ?
Avatar de l’utilisateur
Nano
 
Messages: 2999
Inscrit le: 27 Aoû 2010, 13:52
Localisation: Paris

Re: [le game dev pour les n00b] Faites vos jeux!

Messagepar Martin » 09 Juin 2014, 20:30

Nano a écrit:Enorme mais tout ce taff n'a clairement pas la visibilité qu'elle mérite. :o
Ca pourrait pas être en une de Merlan sous format épisodique ?


A priori c'est pas trop ce qu'on fait, mais je me disais que pour l'été ça pourrait le faire sous forme d'articles, en effet... Nordine ?
Avatar de l’utilisateur
Martin
 
Messages: 13234
Inscrit le: 19 Aoû 2010, 14:09
Localisation: 75018

Re: [le game dev pour les n00b] Faites vos jeux!

Messagepar Le Chevalier Masqué » 09 Juin 2014, 21:13

Ben si vous êtes chauds, moi aussi.
Après, il y a un petit boulot à faire en amont (korekssion dé fôte daurtografe, retaillage de certaines captures d'écran un peu maousses). Mais tout est déjà là, yapuka.
Si ça branche la rédac', n'hésitez pas à m'envoyer un petit MP pour les détails/éventuelles questions.
Z
Avatar de l’utilisateur
Le Chevalier Masqué
 
Messages: 73
Inscrit le: 27 Nov 2010, 17:23
Localisation: Paris

Re: [le game dev pour les n00b] Faites vos jeux!

Messagepar Nano » 09 Juin 2014, 21:15

Je trouve que ça tabasse sévère. Ca pourrait même faire l'objet d'une Merlan-JAM amicale pour les lecteurs. :idea:
Avatar de l’utilisateur
Nano
 
Messages: 2999
Inscrit le: 27 Aoû 2010, 13:52
Localisation: Paris

Re: [le game dev pour les n00b] Faites vos jeux!

Messagepar Laaris » 12 Juin 2014, 22:10

Dire que quand j'étais jeune et motivé il m'avait fallu deux mois de prises de tête à tripatouiller du C++ pour arriver à la même chose.

Vivement la suite.

(y'a moyen de voir le code généré?)
Avatar de l’utilisateur
Laaris
 
Messages: 74
Inscrit le: 26 Juin 2012, 18:03
Localisation: Nantes

Re: [le game dev pour les n00b] Faites vos jeux!

Messagepar Le Chevalier Masqué » 15 Juin 2014, 17:43

Tuto n°1 : Le jeu du crabe

Deuxième partie: premiers pas avec le script


Notions abordées:

- Ajouter un saut
- Ajouter une animation à notre crabe
- Ajouter des objets bonus à ramasser
- Ajouter des ennemis à esquiver

Note: ce tuto se base sur l'idée que vous avez respecté les données fournies dans la première partie.

Tout d'abord, chargez dans Scratch le jeu que vous avez commencé à réaliser dans la première partie de ce tuto.

Nous allons voir ensemble comment faire sauter notre crabe, lequel sera amené à éviter des ennemis.
Pour cela, cliquez sur votre crabe dans la fenêtre des lutins, sélectionnez l'onglet "Scripts" puis cliquez dans la famille "Contrôle", en jaune.
Maintenant, glissez-déposez un nouveau script de condition "Si (...) alors", comme suit:

Image

Tout comme nous avions ajouté deux conditions pour les déplacements latéraux, nous allons en créer une nouvelle pour les déplacements verticaux, autrement dit le saut.
Pour cela, cliquez sur la famille de scripts "Capteurs", qui permet d'ajouter des capteurs de touches à notre jeu, puis glissez-déposez "Touche (...) pressée?" comme abordé précédemment en choisissant cette fois "flèche haut" tel que ci-dessous:

Image

Allez dans la famille de scripts "Mouvement" puis glissez-déposez "Donne la valeur (...) à Y" comme sur la capture suivante, en attribuant la valeur "0" à Y:

Image

Cette brique permet donc de changer la valeur Y de votre sprite de crabe, soit sa position verticale. Celle-ci étant initialement à -53, nous faisons en sorte de la déplacer, mais cela sera temporaire. Vous allez comprendre.

Allez maintenant dans la famille de scripts "Contrôle" puis glissez-déposez le bloc "Attendre (...) secondes" comme indiqué:

Image

Je lui ai attribué la valeur "0.5", car je veux que mon crabe reste en saut durant une demi-seconde.
Vous pouvez attribuer la valeur de votre choix, par exemple 2 secondes, mais gardez à l'esprit qu'une part du challenge viendra de la gestion des sauts, et qu'un saut trop long n'est pas vraiment gage de difficulté.
Notez que Scratch ne gère pas les virgules dans l'attribution des valeurs, mais uniquement les points.

Enfin, retournez dans la famille de scripts "Mouvement" puis glissez-déposez à nouveau un bloc "Donner la valeur (...) à Y" de cette façon:

Image

Une fois fait, attribuez à ce bloc la valeur "-53", qui est celle de la position Y initiale du sprite du crabe.
Autrement dit, non simulons le saut en permettant au crabe de bouger de la manière suivante:

Image
Tant que je n'appuie pas sur "haut", mon crabe reste au sol

Image
Quand j'appuie sur "haut", le crabe va à Y=0 et y reste 0,5 secondes

Image
Une fois les 0,5 seconde passée, il redescend à sa position initiale, ce jusqu'à ce que j'appuie de nouveau sur "haut"

Il ne vous reste plus qu'à cliquer sur le drapeau vert et à tester votre nouveau script! Miracle, votre crabe saute, congratulations! :)

Nous allons maintenant animer notre crabe.
Il faut rappeler que plus une animation est détaillée, plus elle est complexe et donc plus elle réclame un temps de travail important. Or, nous allons faire simple en allant à l'essentiel, sachant que je vous proposerai par la suite un petit exercice bonus là-dessus pour ceux qui souhaitent approfondir le truc.

Tout d'abord, enregistrez sur votre ordinateur le sprite de crabe ci-dessous:

Image

Toujours depuis votre lutin de crabe, cliquez sur l'onglet "Costume" puis cliquez sur le petit dossier qui permet d'importer un nouveau costume comme indiqué sur cette capture:

Image

Dans votre colonne "Costume" de votre crabe, vous devez maintenant avoir deux sprites différents, tel que ceci:

Image

Note: Scratch 2 étant en beta, il existe un bug récurent qui fait parfois disparaître un costume que l'on vient d'ajouter. Si c'est le cas, chargez à nouveau le nouveau sprite puis supprimez l'ancien et tout devrait rentrer dans l'ordre.

Ce nouveau sprite sera l'animation de votre crabe lorsqu'il se déplacera sur la droite. Mais en attendant, faites un clic droit sur votre nouveau sprite et sélectionnez "Dupliquer" comme indiqué ici:

Image

Vous venez de créer une copie de ce sprite, que nous allons de suite modifier.
Pour cela, cliquez sur la troisième image (celle qui est la copie donc) et cliquez sur "Retournement horizontal" afin d'appliquer un effet de miroir à cette troisième image tel que ci-dessous:

Image

Nous avons donc un crabe stationnaire, un crabe qui se penche vers la droite et un troisième qui se penche vers la gauche.
Pour bien nous organiser pour la suite des évènements, nous allons renommer tous ces sprites.
Pour cela, cliquez dans le champ correspondant à chaque image comme indiqué sur la capture d'écran suivante et renommez-les selon les critères suivants:

- Première image: crabe neutre
- Deuxième image: crabe droite
- Troisième image: crabe gauche

Image

Un petit conseil: évitez de donner des noms trop fantaisistes et gardez toujours à l'esprit que l'on doit pouvoir comprendre immédiatement de quoi il est question simplement en lisant le nom de vos fichiers internes à votre projet. Car au fil du temps, nous allons avoir de plus en plus d'images différentes à utiliser, lesquelles doivent être facilement identifiables simplement en lisant le script de votre jeu, donc sans avoir à partir à la pêche aux infos dans votre bibliothèque de lutins.

Toujours dans votre crabe, cliquez sur l'onglet "Scripts" puis dans la famille "Apparence".
C'est ici que se gèrent les changements de sprites, les animations et les effets visuels divers.
Glissez-déposez le bloc "Basculer sur costume (...)" comme indiqué sur la capture ci-dessous puis, en cliquant sur la petite flèche noire, choisissez "Crabe neutre".

Image

De cette façon,nous indiquons à Scratch que lorsque nous démarrerons le jeu en cliquant sur le drapeau vert, le sprite de notre crabe passera automatiquement sur ce sprite. C'est très important, car si noue ne le faisons pas, le jeu gardera en mémoire le dernier sprite connu actif et risquerait de démarrer sur un sprite ne convenant pas à la position de départ du crabe. Un peu comme si, en démarrant Sonic, le sprite était celui de Sonic chutant dans le vide juste avant de mourir au lieu d'être impassible.

Maintenant, il ne vous reste plus qu'à appliquer les autres changements d'animation comme indiqués dans cette capture:

Image

Autrement dit:

- Quand flèche droite pressée > sprite crabe droite
- Quand flèche gauche pressée > sprite crabe gauche
- Quand lèche haut pressée > sprite neutre

Nous modifierons ultérieurement l'animation du sprite lors du saut afin d'obtenir un meilleur rendu, mais je ne souhaite pas vous gaver d'informations pour le moment.
Il ne vous reste plus qu'à cliquer sur le drapeau vert et à tester vos animations! :)

Au tour des objets bonus!

L'idée est de proposer des objets (des fruits en l’occurrence) qui tomberont du haut de l'écran et qui, si ils sont rattrapés à temps, permettront au joueur de gagner des points. Pour le moment, nous allons nous intéresser aux déplacements de ces fruits et nous aborderons la question de leurs interactions avec le crabe la semaine prochaine car nous avons déjà pas mal de choses à faire.

En premier lieu, téléchargez les sprites suivants dans un coin de votre ordinateur, en précisant que nous n'en utiliserons que deux (la fraise et la pomme) mais que les autres seront nécessaires à l'exercice de la semaine:

Image Image Image Image

Ensuite, nous allons créer un nouveau lutin, lequel comportera le sprite de la fraise.
Pour cela, dans la fenêtre des lutins, cliquez sur le dossier pour importer le fichier de la fraise comme indiqué:

Image

Votre lutin de fraise sélectionné, cliquez sur l'onglet "Scripts" puis sur la famille "Évènements" et enfin glissez-déposez "Quand drapeau vert pressé" comme suit:

Image

En effet, pour chaque nouveau lutin, il faut indiquer au jeu ce qui se passe au démarrage. Autrement dit, il y a un bloc de drapeau vert pour tout nouveau lutin, sans quoi le lutin en question ne peut réaliser aucune action.

Toujours dans la fraise, cliquez sur la famille "Apparence" puis glissez-déposez le bloc "cacher". celui-ci permet de dire au jeu de cacher le(s) sprite(s) d'un lutin pour, par exemple, retarder son apparition, ce que nous allons faire:

Image

Cliquez dans la famille "Contrôle" et glissez-déposez le bloc "Attendre (...) seconde"en mettant le champ à 3 secondes:

Image

Dans la famille de scripts "Mouvement", glissez-déposez "Aller à X (...) Y (...)" puis attribuez les valeurs suivantes:

X=-125
Y= 200


Image

Autrement dit, tout en étant cachée, notre fraise sera immédiatement positionnée en hauteur, légèrement en-dehors de l'écran, ce qui constituera son point de départ. Vous allez comprendre.

De nouveau dans la famille "Apparence", glissez-déposez le bloc "Montrer", qui permet de faire apparaître un lutin précédemment caché, comme ci-dessous:

Image

Enfin, retournez dans "Mouvement" puis glissez-déposez le bloc "Aller en (...) seconde à X (...) Y (...)".
Ce bloc est très utile pour déplacer un lutin d'un point à un autre en contrôlant son temps de déplacement. Dans le cas présent, et en partant du premier bloc de position de ce script, nous allons faire se déplacer automatiquement notre fraise du haut de l'écran vers le sol du décor en une seconde.
Notez que les valeurs à renseigner dans les champs sont les suivantes:

- X= - 125
- Y= -70


Autrement dit, la valeur X (axe horizontal) ne change pas par rapport au point de départ mais seule la valeur Y (axe vertical) change, ce qui est normal puisque nous simulons la chute d'un objet.

Voici le résultat que vous devez obtenir:

Image

Si vous cliquez sur la drapeau vert pour tester votre script, vous remarquerez donc que votre fraise tombe du haut de l'écran exactement trois secondes après avoir démarré votre jeu, mais que plus rien ne se passe ensuite. C'est normal, nous allons indiqué à la fraise ce qui doit se passer une fois qu'elle "touche" le sol du décor.

Dans le cas présent, nous allons créer un effet de clignotement, lequel indique au joueur qu'il doit se presser de récupérer la fraise avant qu'elle ne disparaisse.
Pour cela, toujours en ayant sélectionné la fraise dans votre fenêtre de lutin, allez dans la famille "Contrôle" puis ajoutez un bloc "Attendre (...) seconde", en attribuant 0.2 au champ.
Allez dans "Apparence" et ajoutez un bloc "Cacher".
De nouveau dans la famille "Contrôle", mettez un nouveau bloc "Attendre (...) seconde" puis mettez juste en-dessous un bloc "Montrer", qui se trouve dans la famille "Apparence" et répétez l'opération.

Ce n'est pas clair? Pas de souci, il vous suffit de reproduire le contenu de cette capture d'écran:

Image

De cette manière, nous indiquons au jeu qu'une fois que la fraise aura atteint sa position de fin, elle clignotera trois fois avant de disparaître. Seulement, maintenant, que va-t-il se passer pour la fraise?
L'idée est qu'elle puisse revenir de temps à autre sur ce chemin pour que le joueur essaie de l'attraper et ainsi gagner quelques points. Pour ça, rien de plus simple: nous allons créer une boucle qui permettra à la fraise de revenir occasionnellement parcourir le même chemin.

La première chose à faire consiste à se rendre dans la famille de scripts "Évènements" puis à glisser-déposer "Envoyer à tous (...)" à la fin de notre script.
Ce bloc offre de multiples possibilités, dont celle de créer des chaînes de scripts, que ce soit au sein d'un même lutin ou entre plusieurs lutins différents, voire même entre des scènes et des lutins. Pour vous situer le truc, c'est une sorte de lien que l'on peut créer entre scripts, un peu comme on crée des liens entre des pages de sites internet. Et il est possible d'en créer autant que l'on souhaite.

Une fois votre bloc "Envoyer à tous (...)" ajouté, cliquez sur la flèche noire puis sur "Nouveau message" comme indiqué:

Image

Dans la fenêtre qui vient de s'ouvrir, nommez le message "fraise reboot", comme sur cette capture:

Image

Maintenant, glissez-déposez le bloc "Quand je reçois (...)" de la façon indiquée sur cette capture, en faisant attention de bien sélectionner "fraise reboot" avec la petite flèche noire du bloc:

Image

L'idée est de créer un nouveau script dans le lutin fraise, lequel sera la suite du premier.
Autrement dit, une fois que le premier script se termine par "fraise reboot", il continuera sur le nouveau script que nous sommes en train de créer via le bloc "Quand je reçois (...)".
Et comme nous avons le sens pratique, nous n'allons pas nous embêter à réécrire un nouveau script mais simplement à copier-coller le précédent.

Pour ça, il vous suffit de cliquer sur le bloc "Attendre 3 secondes" puis de le glisser-déposer un peu en-dessous, de manière à le détacher des deux blocs précédents, comme illustré ici:

Image

Faites un petit coup de clic droit sur la portion que vous venez de détacher et choisissez "Dupliquer", comme ceci:

Image

Il ne vous reste plus qu'à placer le script que vous venez de copier juste sous le bloc "Quand je reçois "fraise reboot" puis à remettre l'autre script à sa place:

Image

Si vous avez cliqué sur le drapeau vert, vous avez dû remarquer que votre fraise revient maintenant à allure régulière, toutes les trois secondes. C'est cool, mais nous allons ajouter un peu d'aléatoire dans tout ça en faisant en sorte qu'une fois sa première apparition passée, la fraise revienne à intervalles plus ou moins irréguliers.

Tout d'abord, nous allons cliquer dans la famille "Opérateurs".
Ce sont des blocs qui permettent de créer diverses opérations, de trucs très simples à des choses plus complexes. Ils sont très utiles notamment dans la modification des données ou les calculs de relations entre objets.

Nous allons donc glisser-déposer le bloc "Nombre aléatoire entre (...) et (...)" de la façon suivante, en l'encapsulant dans le bloc "Attendre (...) seconde" du deuxième script de notre fraise, tel que ceci:

Image

J'ai renseigné les champs de telle sorte que toutes les réapparitions de la fraise se fassent dans un délai supérieur à 3 secondes et inférieur à 6 secondes. Elle peut donc aléatoirement réapparaître selon les temps suivants:

- 3 secondes
- 4 secondes
- 5 secondes
- 6 secondes

Notez que la notion d'aléatoire n'existe pas dans le sens où celle-ci est simulée et obéit en réalité à un certains nombre de règles ainsi que de conditions, ce qui va justement à l'encontre de la notion d'aléatoire, de hasard.

Cliquez sur le drapeau vert et admirez le résultat de vos efforts! :)
La fraise chute du ciel et réapparaît aléatoirement. Vous venez de créer votre premier bonus, félicitations!

Ceci dit, une fraise c'est bien, mais une pomme en plus, c'est encore mieux.
Nous allons donc créer un nouvel objet bonus, qui cette fois sera une pomme, laquelle a dû être préalablement téléchargée sur votre ordinateur si vous avez bien suivit ce tuto.

Comme nous avons déjà un bonus de terminé, celui de la fraise, nous allons tricher un peu en recopiant une partie de ce bonus pour l'appliquer à la pomme. Pour ça, dans la fenêtre des lutins, il vous suffit de cliquer droit sur la fraise puis de choisir "Dupliquer":

Image

Nous venons de créer une copie exacte de la fraise, mais nous allons changer quelques trucs, à commencer par le sprite.
Dans ce nouveau lutin, cliquez sur l'onglet "Costume" puis importez celui de la pomme. Enfin, supprimez le costume de la fraise dans ce même lutin et renommez-le en "pomme".

Dans la fenêtre de lutin, remarquez le petit "i" bleu de votre pomme et cliquez dessus:

Image

Renommez "fraise 2" en "pomme" puis cliquez sur la flèche de retour pour revenir au menu de base des lutins comme ceci:

Image

Toujours dans le lutin de la pomme, cliquez sur l'onglet "Scripts" puis modifiez les champs par les valeurs suivantes:

Image

Autrement dit, nous venons d'attribuer à la pomme de nouvelles coordonnées, différentes de celles de la fraise afin de les alterner et de donner au joueur un futur sentiment de challenge.

Il nous reste encore deux petites choses à faire pour que la pomme soit pleinement opérationnelle.
D'abord, créez un nouveau message comme suit que vous appellerez "pomme reboot":

Image

Enfin,appliquez "pomme reboot"à tous les champs correspondant dans les deux scripts de ce lutin, tel que ci-dessous:

Image

Cliquez sur votre drapeau vert et observez! Vous avez désormais deux bonus qui ont chacun leurs spécificités, bravo! :)

Enfin, nous allons terminer ce tuto par l'ajout d'un ennemi, dans le cas présent un oursin.

Grosso modo, cela fonctionne de la même manière qu'avec les fruits mais avec des coordonnées différentes.
En premier lieu, téléchargez le sprite de l'oursin:

Image

Cette fois, dans la fenêtre des lutins, nous allons copier celui de la pomme dont nous modifierons le contenu.
Dans un premier temps,prenez soin d'importer le sprite de l'oursin dans l'onglet costume de votre nouveau lutin et de le nommer correctement ("oursin" donc), tel que suit:

Image

Maintenant, dans l'onglet script de votre lutin "oursin", modifiez le champ des valeurs comme indiqué, en faisant attention de bien les reporter sur le script suivant:

Image

Une des différences fondamentales d'avec les fruits, c'est qu'outre le déplacement, l'oursin ne va pas clignoter. Il va donc falloir supprimer les blocs qui donnent cet effet en les décollant du premier et du second script de votre oursin de la façon suivante:

Image

Maintenant, faites un clic droit sur cet ensemble de blocs et sélectionnez "Supprimer":

Image

Vous devez maintenant recoller les blocs qui ont été détachés de manière à obtenir ce résultat:

Image

Un tout dernier truc à faire: modifier le message envoyé.
Pour cela, cliquez sur le bloc "Envoyer à tous (...)" et créez un nouveau message que vous appellez "oursin reboot", puis appliquez-le aux deux autres blocs qui y font appel.
Vous devez obtenir ce résultat:

Image
Oui, c'est le bordel sur cette capture, mais en fait pas tant que ça si vous respectez bien les codes couleurs et que vous avez tout bien suivit depuis le début. ^^

Voilà, c'est fait, vous avez votre premier ennemi! :)

Si j'ai été suffisamment clair et que vous avez bien tout pigé, le résultat obtenu doit maintenant ressembler à ça.


Bien sûr, il nous reste encore du chemin, mais si vous avez déjà terminé ça, c'est que vous êtes fin prêt pour la suite!

On se retrouve dimanche prochain, avec la suite du tuto où nous découvrirons les éléments suivants:

- Ajouter un compteur de score
- Ajouter un compteur de vie
- Faire interagir les bonus et le crabe
- Faire interagir l'ennemi et le crabe

------------------

Pour ceux qui le souhaitent, voici deux petits exercices en bonus, sous réserve que vous ayez terminé ce tuto:

- Ajouter les bonus de la banane et de la cerise
- Ajouter un autre oursin qui se déplace de gauche à droite

Et comme toujours, si vous avez des questions en rapport avec le tuto de la semaine ou si un truc n'est pas clair, n'hésitez pas!
Z
Avatar de l’utilisateur
Le Chevalier Masqué
 
Messages: 73
Inscrit le: 27 Nov 2010, 17:23
Localisation: Paris

Re: [le game dev pour les n00b] Faites vos jeux!

Messagepar Laaris » 19 Juin 2014, 00:01

Deuxième partie terminée sans trop de souci.

J'ai un genre de bug qui déplace les sprites tout seul dans la fenêtre des costumes, c'est un peu pénible.

Et je ne sais pas si c'est moi mais la durée indiquée pour le saut était un peu courte, je retombais à chaque fois sur l'oursin.


Sinon, désolé si je suis à côté de la plaque mais je cherche désespérément comment on fait pour lancer le jeu en dehors de la sandbox de dev. :/
Y'a moyen de générer un exécutable, ou de lancer le fichier sb2 en mode "play" ?

Et vivement dimanche du coup.
Avatar de l’utilisateur
Laaris
 
Messages: 74
Inscrit le: 26 Juin 2012, 18:03
Localisation: Nantes

Re: [le game dev pour les n00b] Faites vos jeux!

Messagepar Le Chevalier Masqué » 19 Juin 2014, 09:47

Il y a effectivement un bug qui se produit parfois quand on jongle entre l'onglet des scripts et celui des costumes dans un objet.
Pour rétablir le costume, il faut généralement recliquer sur l'onglet script de l'objet, attendre une ou deux secondes, puis recliquer sur l'onglet costume. Scratch 2 est encore en beta, ceci explique cela.

La durée du saut est effectivement un peu courte car l'idée était de faire un saut pile-poil pour donner un peu de challenge. Tu peux la rallonger de quelques dixièmes de secondes pour avoir un peu plus de marge de manœuvre.

Quant à un exécutable (pour Windows ou Mac OS), tu peux en créer un en suivant cette procédure.

PS: je posterai la suite du tuto ce soir car je ne serai pas dispo dimanche.
Z
Avatar de l’utilisateur
Le Chevalier Masqué
 
Messages: 73
Inscrit le: 27 Nov 2010, 17:23
Localisation: Paris

Re: [le game dev pour les n00b] Faites vos jeux!

Messagepar La Souche ! » 19 Juin 2014, 11:28

Un grand bravo pour ton boulot. Comme dit plus haut, ce genre de tutos mérite une meilleure visibilité, car c'est vraiment bien foutu. Bonne continuation.
Avatar de l’utilisateur
La Souche !
 
Messages: 376
Inscrit le: 21 Déc 2012, 11:01
Localisation: Toulouse

Re: [le game dev pour les n00b] Faites vos jeux!

Messagepar Le Chevalier Masqué » 19 Juin 2014, 23:30

Tuto n°1 : Le jeu du crabe

Troisième partie: interactions entre les objets


Notions abordées:

- Ajouter un compteur de score
- Ajouter un compteur de vie
- Faire interagir les bonus et le crabe
- Faire interagir l'ennemi et le crabe

Note: ce tuto se base sur l'idée que vous avez respecté les données fournies dans la première partie.

Avertissement:

Scratch 2 étant en beta ouverte, il existe différents bugs dont les deux suivants:

- Le sprite d'un lutin pourtant présent dans la galerie devient invisible
- Le sprite d'un lutin force son déplacement dans le coin supérieur gauche

Dans les deux cas de figure, pour résoudre ce problème, il faut supprimer le sprite en question puis réuploader l'image correspondante, en prenant soin de la renommer comme à l'origine.

Par ailleurs, j'ai essayé de faire au mieux en proposant un maximum de captures d'écrans pour vous faciliter la tâche. Néanmoins, certaines sont trop grandes pour être affichées de façon suffisamment lisible, en particulier au niveau des coordonnées. Dans ce cas, faites un clic droit sur l'image puis sélectionnez "Afficher l'image" pour la faire apparaître en grande taille.


Pour commencer, chargez dans Scratch le jeu sur lequel vous avez travaillé précédemment.

Ensuite, téléchargez les images suivantes qui seront utilisées dans ce tuto, en les renommant respectivement "cœur", "crabe touche 1" et "crabe touche 2". Veuillez à conserver l'extension en *.gif:

Image Image Image

Vous êtes prêts? C'est parti! :)

Tout d'abord, nous allons créer le score de notre jeu, et pour cela, il faut commencer par son affichage.
Nous allons donc créer ce que l'on appel une variable.
Pour faire simple, en langage informatique, une variable est un élément unique auquel on attribue un nom, une fonction et qui a la possibilité de changer de valeur au fil du temps et/ou des conditions. De fait, de Pong au dernier Mario Kart, tous les scores de jeux vidéo sont des variables. Il existe juste des méthodes et des utilisations différentes, et nous allons découvrir ensemble l'une d'elles.

Pour ce faire, nous allons cliquer sur n'importe quel lutin puis, dans l'onglet scripts, nous allons cliquer sur "Données" et enfin le bouton "Créer une variable" comme indiqué ci-dessous:

Image

Dans la petite fenêtre qui vient de s'ouvrir, nous allons inscrire "score" comme nom de variable, en faisant attention que la case "Pour tous les lutins" soit bien cochée et nous validons sur le bouton OK.
Vous devez maintenant avoir ces nouveaux éléments qui s'affichent dans la section "données" de l'onglet script:

Image

Et peut-être l'avez-vous déjà remarqué, mais vous venez également d'afficher votre premier élément de score, qui se place automatiquement dans le coin supérieur gauche de votre écran de jeu:

Image

C'est la classe, mais il nous encore plusieurs choses à faire, à commencer par régir les interactions qui vont conditionner les relations entre nos différents lutins, donc l'évolution du score.
On rappellera que l'idée de départ est que notre petit crabe gagne des points en ramassant les fruits avant qu'ils ne disparaissent. Pour ça, nous nous baserons sur l'idée qu'un fruit attrapé à temps= 1 point au compteur de score.

Maintenant, cliquons sur le lutin du crabe, allons dans l'onglet script puis dans la section "données".
Notez que comme nous avons coché la case "Pour tous les lutins", notre variable "score" sera disponible partout, c'est important pour la suite.
Maintenant, glissez-déposez le bloc "Mettre score à (...)" tel qu'indiqué sur cette capture:

Image

Grâce à cela, nous disons au jeu "Quand je démarre en cliquant sur le drapeau vert, tu me mets le score à zéro coco".

Allons faire un tour du côté du premier fruit en cliquant sur le lutin de la fraise.
En premier lieu, dans notre premier ensemble de scripts, glissez-déposez toute la partie liée au clignotement comme indiqué sur la capture. Notez que pour réaliser correctement la manipulation, il faut saisir le premier "Attendre 0.2 secondes" puis descendre suffisamment pour se détacher du magnétisme.
Le résultat obtenu doit être identique à ceci:

Image

C'est une manipulation que nous utiliserons souvent au cours de ce tuto, en particulier pour y glisser d'autres blocs ou faire des copies d'ensemble de blocs.

Une fois que les deux ensemble sont bien séparés, allons dans "Contrôles" puis le bloc de condition "Si (...) alors, sinon (...)":

Image

Avec ce bloc, nous disons au jeu:

- Si il se passe tel truc, alors tu fais telle action, mais si ça il ne se passe pas CE truc précis, tu fais telle autre action.
Par exemple, dans Outrun, si la voiture se cartonne dans le décor, alors elle ralentit. Mais si elle ne se cartonne pas, elle continue de rouler normalement. C'est le même type de script qui est utilisé.

Toujours dans notre fraise, nous allons faire un tour du côté des capteurs en glissant-déposant "(...) touché?" de la façon suivante, en prenant soin de sélectionner "crabe" en cliquant sur la petite flèche noire.

Image

Avec ce bloc, nous disons au jeu avec quel lutin tel autre lutin peut interagir. Dans le cas présent, nous allons créer une relation entre la fraise et le crabe.

Allons ensuite dans "Apparence" puis glissons-déposons un bloc "cacher" comme suit:

Image

Nous venons de créer notre première condition, du moins en partie. Autrement dit, si le crabe touche la fraise, alors cette dernière disparaît. C'est fonctionnel mais encore sommaire, et il nous reste toujours à ajouter notre score.

Cliquons dans "Données" puis ajoutons un bloc "Ajouter à score (...) tel qu'indiqué:

Image

Là, nous disons au jeu que si la fraise touche le crabe, elle disparaît puis, immédiatement après, elle ajoute un point à la variable de score. Vous pouvez bien entendu modifier cette valeur par celle de votre choix, mais l'idée est, pour le moment, de rester sur quelque-chose de simple.

Comme nous sommes bien lancés, nous allons cliquer sur "Évènements" puis ajouter un bloc "Envoyer à tous (fraise reboot)" juste sous le bloc de score que l'on a placé précédemment:

Image

De cette façon, on indique au jeu que dès que la fraise est touchée, elle bascule sur le deuxième ensemble de script, celui qui commence par "Quand je reçois (fraise reboot)", puisque l'idée est qu'elle puisse continuer d'apparaître.

Pour résumer ce que nous venons de faire:

- Si la fraise touche le crabe
Étape 1: la fraise disparaît
Étape 2: elle ajoute automatiquement un point au compteur de score
Étape 3: elle bascule sur l'autre ensemble de script

Seulement, si le crabe ne touche pas la fraise (ou la fraise ne touche pas le crabe, c'est exactement la même chose), que se passe-t-il? A nous de l'indiquer au jeu.

Nous allons donc reprendre notre portion de script que nous avions déplacé dans un coin, toujours en restant cliqué sur le premier bloc "Attendre (0.2) secondes":

Image

Puis nous le plaçons de cette manière:

Image

Ce qui signifie que si la fraise ne touche pas le crabe, elle se met à clignoter puis bascule sur l'autre ensemble de script, soit celui qui commence par "Quand je reçois (fraise reboot)". L'idée est que, dans tous les cas de figure, notre fraise puisse revenir régulièrement pour que le joueur tente de l'attraper.
Cela signifie aussi que si la fraise n'est pas attrapée avant de commencer à clignoter, le joueur ne gagne pas le point. Il faudra donc l'attraper soit en sautant, soit pile au moment où elle touche le sol. Nous venons d'ajouter un peu de challenge à notre jeu! :)

Enfin, toujours du côté de la fraise, il ne nous reste plus qu'à reproduire exactement la même manipulation pour obtenir ce résultat:

Image

Maintenant que la fraise est terminée, allons faire un tour du côté de la pomme.
En premier lieu, détachons une partie de l'ensemble du premier script:

Image

Comme nous n'avons pas envie de tout nous retaper, nous allons faire simple, en copiant-collant les bouts de scripts qui nous intéressent.
Pour ça, dans notre pomme, nous allons détacher la partie indiquée ci-dessous puis, à l'aide du clic droit, nous supprimons ce qui ne nous intéresse pas:

Image

Retournons dans la fraise et détachons l'ensemble de scripts comme suit:

Image

Faisons un clic droit et choisissons "dupliquer":

Image

Nous venons de créer une copie de cet ensemble, lequel est magnétisé à notre pointeur de souris.
Amenons-le jusqu'au lutin de la pomme puis cliquons dessus, ce qui a pour effet de le copier dans le lutin de la pomme. Simple, non?

Image

Après avoir remis en place l'ensemble de script de la fraise, revenons à notre pomme. Il ne nous reste plus qu'à placer l'élément copié tel qu'indiqué sur la capture suivante:

Image

Enfin, il ne nous reste plus, je vais un peu vite en besogne. En fait, nous devons juste changer les données propres à la fraise pour les adapter à la pomme.
Pour ça, dans les deux blocs "Envoyer à tous (fraise reboot)", cliquez sur la petite flèche noire et choisissez "pomme reboot":

Image

Et comme pour la fraise, on va faire un tour du deuxième ensemble de scripts, on détahce le clignotement:

Image

On fait un clic droit puis on le supprime:

Image

On détache la partie que l'on a précédemment collé dans la pomme:

Image

Puis on la copie:

Image

Enfin, il ne nous reste plus qu'à replacer ces ensembles de scripts pour obtenir ce résultat:

Image

Félicitations, vous venez de terminer le système de score! :)
Vous pouvez le tester en cliquant sur le drapeau vert et admirer le fruit (ah, ah, ah...) de vos efforts.

Nous avons déjà fait la moitié du chemin, il ne nous reste plus qu'à aller faire un tour du côté du système de vie et des interactions entre le crabe et l'oursin.

L'idée est donc que, lorsque notre crabe est touché par l'oursin, il perd une vie, qui sera ici symbolisée par un cœur. Le crabe possèdera trois vies (conditionnement vidéoludique, quand tu nous tiens), au-delà desquelles il sera kaput.
De plus, nous allons ajouter une petite animation à notre crabe lorsqu'il se fait toucher, aussi bien pour des raisons de design visuel que de "triche" avec le script. Vous allez comprendre.

En premier lieu, nous allons ajouter un nouveau lutin en cliquant sur le petit dossier bleu de cette section, l'idée étant d'uploader le cœur:

Image

Dans l'onglet costume de ce nouveau lutin, cliquons dans le champ indiqué ci-dessous pour modifier le nom et le nommer "cœur 1":

Image

Maintenant, retournons dans l'ensemble de lutins et cliquons de nouveau sur le petit dossier pour importer à nouveau le cœur:

Image

Nous allons importer le cœur une troisième fois dans le but d'obtenir ce résultat:

Image

Notons le "i" bleu dans l'encadré rouge qui correspond au premier cœur et cliquons dessus.
Dans le champ de texte, renommons-le "coeur1", comme dans cette capture, puis cliquons sur la flèche bleue pour revenir au menu principal:

Image

Après en avoir fait de même pour les deux autres cœurs, que nous nommerons respectivement "coeur2" et "coeur3", cliquons sur le lutin "cœur 1", puis dans l'onglet script et, enfin, dans "Événements". Maintenant, ajoutons le bloc "Quand drapeau vert pressé":

Image

Ajoutons un bloc "Montrer", pioché dans la section de scripts "Apparence". Ainsi, lorsque le jeu démarrera, le premier cœur apparaîtra:

Image

Le faire apparaître, c'est cool, mais il faut lui donner une position.
Pour ça, allons dans la famille de scripts "Mouvements", puis ajoutons un bloc "Aller à X= (...) Y= (...)", en modifiant les valeurs comme suit:

Image

Comme pour le score, la gestion de la vie de notre petit crabe va nécessiter la création d'une variable.
Pour cela, allons dans la famille de scripts "Données" puis cliquons sur le bouton "Créer une variable":

Image

Nommons cette variable "vie", en faisant toujours attention que la case "Pour tous les lutins" soit bien cochée:

Image

Maintenant, il va falloir créer une première interaction entre le crabe et l'oursin.
Allons dans le lutin du crabe, cliquons sur l'onglet scripts puis glissons-déposons un bloc "Quand drapeau vert pressé":

Image

En restant sur le lutin crabe, cliquons sur "Données" et ajoutons un bloc "Mettre vie à (...)", en modifiant la valeur par 3:

Image

De cette manière, nous disons au jeu que lorsque nous commençons une nouvelle partie, le crabe se voit attribué trois vies, ou plutôt que la variable "vie" est à la valeur 3 au démarrage.

Puis dans "Contrôles", ajoutons "Attendre jusqu'à (...)":

Image

Ce bloc permet de créer une condition un peu particulière, qui consiste à laisser un évènement en attente jusqu'à ce qu'il se produise et donc entraîne un autre évènement.
Par exemple, dans Super Mario bros., cela consisterai à dire:

- Attendre jusqu'à ce que Mario touche un champignon
- Augmenter la taille du sprite de Mario

Allons faire un tour dans la famille des capteurs et ajoutons le bloc "(...) touché?" dans le losange du bloc "Attendre jusqu'à" et choisissons "oursin":

Image

Retournons dans "Données" et plaçons un autre bloc "Mettre vie à (...)", en changeant le champ par la valeur 2:

Image

Autrement dit, quand le jeu démarre, la vie est à 3, mais si le crabe touche l'oursin, la vie passe à 2.

Allons maintenant dans "Évènements" et ajoutons un bloc "Envoyer à tous (...)" comme indiqué:

Image

Cliquons sur la petite flèche noire et choisissons "nouveau message":

Image

Enfin, dans le champ de la petite fenêtre, inscrivons "coeurcache1":

Image

Dans le lutin de crabe, cliquons sur l'onglet "costume" puis sur le dossier pour importer de nouveaux éléments:

Image

Ajoutons les deux sprites de crabe qui ont été téléchargés en début de ce tuto et renommons-les "crabe touche 1" et "crabe touche 2":

Image

Note: il est très probable que vous rencontriez le(s) fameux bug(s), auquel cas reportez vous au début de ce tuto pour savoir comment les résoudre.

Maintenant, en jonglant entre les familles de scripts "Apparence" et "Contrôles", ajoutez les blocs suivant en faisant attention à mettre les bonnes valeurs:

Image

Ainsi, quand le crabe sera touché par l'oursin, ceci entraînera une petite animation donnant l'impression que le crabe sera temporairement KO. Par ailleurs, nous tricherons avec l'oursin,mais je vous expliquerai ça plus loin.

Ensuite, ajoutons un dernier bloc "Envoyer à tous (...)", que nous renommons "coeurtouche2":

Image

En restant dans le lutin du crabe, créons une nouvelle série de scripts comme indiqué ci-dessous, en modifiant les champs de valeur comme indiqué:

Image

Enfin, ajoutons une nouvelle série de scripts comme sur cette capture, toujours en prenant soin de modifier les valeurs tel que sur la capture:

Image

Une fois fait, allons dans le lutin "cœur 1". Dans l'onglet script, allons dans "Évènements" et glissons-déposons "Quand je reçois (...", en mettant "coeurcache1":

Image

Allons dans "Apparence" et ajoutons le bloc "Cacher":

Image

Ceci signifie que lorsque le crabe touche l'oursin dans le premier ensemble de scripts qui comporte la notion de vie, celui-ci envoie "coeurcache1" à tous les lutins, donc à celui de "coeur1". Et quand ce dernier le reçoit, son sprite est caché.
Il ne vous reste plus qu'à appliquer cette méthode aux deux autres cœurs, en attribuant les valeurs "coeurcache2" et "coeurcache3" aux bons lutins.

Dernière chose: depuis n'importe quel lutin, allez dans l'onglet "scripts" puis dans données et, pour terminer ce tuto, décochez la case vie comme suit:

Image

Ainsi, nous n'affichons pas les données de vie par le biais du compteur de base fournit dans Scratch, mais nous conservons ses données et les représentons par l'affichage et la disparition des cœurs à droite de l'écran.

Félicitations, vous avez bien bossé! :)
Et à moins que vous n'ayez rencontré quelques soucis et/ou que je n'ai pas été très clair, le résultat obtenu doit être identique à ceci.

La semaine prochaine, nous aborderons les points suivants:

- Ajouter un écran titre
- Ajouter un écran de game over
- Ajouter une musique et des bruitages
- Ajouter une animation dans le décor

Et comme toujours, si il y a un truc qui n'est pas clair, merci de me l'indiquer pour que je puisse améliorer le truc. :wink:

---------------------

Pour ceux qui le souhaitent, et sous réserve que vous ayez terminé ce tuto, voici quelques exercices complémentaires:

- Ajouter le système de score à la banane et à la cerise
- Ajouter le système de vie au deuxième oursin
Z
Avatar de l’utilisateur
Le Chevalier Masqué
 
Messages: 73
Inscrit le: 27 Nov 2010, 17:23
Localisation: Paris

Re: [le game dev pour les n00b] Faites vos jeux!

Messagepar Le Chevalier Masqué » 29 Juin 2014, 23:08

Tuto n°1 : Le jeu du crabe

Quatrième partie: finitions et sons


Notions abordées:

- Ajouter un écran titre
- Ajouter un écran de game over
- Ajouter une musique et des bruitages
- Ajouter une animation dans le décor

Avertissement:

Scratch 2 étant en beta ouverte, il existe différents bugs dont les deux suivants:

- Le sprite d'un lutin pourtant présent dans la galerie devient invisible
- Le sprite d'un lutin force son déplacement dans le coin supérieur gauche

Dans les deux cas de figure, pour résoudre ce problème, il faut supprimer le sprite en question puis réuploader l'image correspondante, en prenant soin de la renommer comme à l'origine.

Par ailleurs, j'ai essayé de faire au mieux en proposant un maximum de captures d'écrans pour vous faciliter la tâche. Néanmoins, certaines sont trop grandes pour être affichées de façon suffisamment lisible, en particulier au niveau des coordonnées. Dans ce cas, faites un clic droit sur l'image puis sélectionnez "Afficher l'image" pour la faire apparaître en grande taille.


Pour commencer, chargez dans Scratch le jeu sur lequel vous avez travaillé précédemment.

Ensuite, téléchargez les quatre éléments graphiques suivants, sans changer leurs noms ni leurs extensions:

Image

Image

Image

Image

Vous devez donc avoir un élément "press space", un sprite de nuage, un décor d'écran titre et un écran de game over.

Une fois fait, téléchargez les éléments sonores suivants, là encore sans modifier les noms ni les extensions:

- Musique de l'écran titre.

- Musique du niveau.

- Musique de game over.

- Bruitage de saut.

- Bruitage quand oursin touché.

- Bruitage quand bonus touché.

- Bruitage quand bonus raté.

Vous devez donc avoir sur votre ordinateur trois musiques et quatre bruitages.

Vous êtes prêts? C'est parti! :)

En premier lieu,nous allons ajouter un écran titre à notre jeu.
Pour cela, cliquons sur "Scènes" comme indiqué ci-dessous:

Image

Il n'y a qu'un seul décor pour le moment, celui du premier niveau, mais nous allons ajouter d'autres éléments.
Pour cela, dans l'onglet "Arrières-plans" de "scènes", nous allons ajouter un nouveau décor en procédant de cette façon:

Image

Nous avons maintenant deux éléments d'arrières-plans dans "scènes", l'un étant nommé "décor1", l'autre "écran titre" tel que suit:

Image

Vous noterez que le crabe et le score sont toujours visibles à l'écran, ce qui est tout à fait normal. Car il ne suffit pas d'ajouter un écran supplémentaire pour mettre en place un écran titre; il va falloir utiliser divers scripts pour organiser tout ça, l'idée étant qu'au démarrage du jeu, seul l'écran titre soit visible, et que les autres éléments apparaissent après que l'on ait vraiment lancé la partie.

Dans l'onglet "scripts "de "scènes", nous allons ajouter un bloc de drapeau vert:

Image

Maintenant, allons faire un tour dans "apparence" puis ajoutons un bloc "Basculer sur l'arrière-plan (...)" de cette façon, en prenant soin de préciser "écran titre" dans le champ de sélection:

Image

Ainsi, nous disons au jeu que lorsqu'il démarre, il passe automatiquement sur le décor de l'écran titre, et non plus sur celui du premier niveau. C'est le même principe que celui qui permet, dans un lutin, de passer d'un costume à l'autre, sauf qu'ici il s'agit du décor.

Ensuite, ajoutons un bloc que vous avez découvert sur le précédent tuto, à savoir "Attendre jusqu'à (...)", qui indique à un objet ou à une scène qu'il doit patienter le temps qu'une action précise se déroule pour lancer la suite du script:

Image

Dans le cas présent, cette action consistera à presser la barre d'espace, qui nous servira de bouton start:

Image

Puis nous allons ajouter un bloc "Attendre", en mettant sa valeur à "0.5" secondes. Rappelons que Scratch ne gère pas les virgules et qu'il faut mettre un point entre les données inférieures aux unités:

Image

Enfin, plaçons un nouveau bloc "Basculer sur l'arrière-plan (...)" pour indiquer au jeu qu'un fois ces 0,5 secondes passées, le décor changera pour celui du premier niveau, cette fois en modifiant le champ par "décor 1":

Image

Si l'on analyse le script que l'on vient de créer en détail, voici ce qui se passe:

- On démarre le jeu en pressant drapeau vert
- Le jeu bascule immédiatement sur l'écran titre
- L'écran titre reste affiché tant que l'on n'a pas appuyé sur la barre d'espace
- Une fois que la barre d'espace est pressée, l'écran titre reste affiché durant 0,5 secondes
- Après ce court délai, l'écran titre est remplacé par le décor du premier niveau

Ne vous inquiétez pas concernant ce petit délai qui va avoir une utilité dans la suite de ce tuto, tout comme le fait qu'il n'y ai pas (encore) d'indication quant à la touche à presser pour commencer la partie. :wink:

Maintenant, cliquons sur le lutin du crabe et ajoutons un bloc "Cacher" comme suit, que l'on a préalablement glissé-déposé depuis la famille "Apparence":

Image

Comme nous l'avons vu un peu au-dessus, le crabe s'affiche dès que l'on presse le drapeau vert, ce qui ne nous arrange pas car nous ne souhaitons le faire apparaître que lorsque le premier niveau s'affiche. Pour ça, nous allons ajouter un petit script afin que l'affichage du crabe (mais aussi des autres lutins) soit raccord avec la transition entre l'écran titre et le décor du premier niveau.

Ensuite, nous allons faire de même avec l'affichage du score, que nous allons cacher tant que le premier niveau n'est pas lancé.
Pour cela, allons dans la famille "Données" puis ajoutons le bloc "Cacher la variable (...)" en faisant attention de choisir "Score" dans le champ de sélection:

Image

Ajoutons un bloc "Attendre jusqu'à (...)" de la famille "Contrôles", que nous plaçons entre les deux variables de cette manière:

Image

Puis on y ajoute le célèbre bloc "Touche espace pressée":

Image

Là, nous mettons à la suite un bloc "Attendre (...) secondes", en prenant soin de changer la valeur à 0,5 de cette façon:

Image

Ce sont les fameuses 0,5 secondes que l'on a au niveau de la transition entre l'écran titre et le premier niveau.
On y ajoute un bloc "Montrer", de la famille "Apparence":

Image

Puis on ajoute enfin un bloc "Montrer la variable (...)" de cette manière, en indiquant dans le menu déroulant qu'il s'agit de "score", que l'on a précédemment caché:

Image

Pour résumer ce que nous venons de faire:

- Quand la drapeau vert est pressé, le crabe se cache
- Idem pour la variable score
- Quand on appuie sur espace depuis l'écran titre, il se déroule 0,5 secondes sans que rien ne change
- Une fois ce petit délai passé, le crabe et la variable de score apparaissent à l'écran, pile au moment où le premier niveau s'affiche

Vous pouvez cliquer sur la drapeau vert de votre jeu et tester ça! :)

Maintenant, il va falloir faire une procédure similaire sur les autres lutins,mais de façon différente.
Dans le cas présent, cliquons sur la fraise et ajoutons lui un bloc "Attendre jusqu'à (...)" comme suit:

Image

Puis ajoutons le bloc "Touche (...) pressée?" en indiquant qu'il s'agit toujours de la barre d'espace:

Image

Et voilà, c'est fait pour la fraise! :)
C'est nettement plus simple pour ce lutin car elle était déjà cachée quand nous pressions le drapeau vert avant d'attaquer ce tuto. de plus, elle n'apparaissait pour la première fois que 3 secondes après le début du jeu. Il suffisait donc de placer ce bloc au bon endroit, sans plus de chichi.

Du coup, il vous suffit de faire de même pour la pomme ainsi que les éventuels autres fruits que vous auriez ajouté:

Image

Pour l'oursin, c'est un peu la même, à ceci près que vous allez devoir ajouter 0,5 secondes aux 5 secondes déjà existantes du bloc "Attendre (...) secondes", comme indiqué ici:

Image

Quant aux trois cœurs, il vous faut d'abord ajouter un bloc "cacher" à cet endroit:

Image

Puis ajouter ces blocs en faisant attention de bien inscrire 0,5 secondes tel que suit:

Image

Notez qu'il faut répéter l'opération pour chacun des trois cœurs.

Cette fois, nous allons ajouter un nouveau lutin, en l'occurrence l'indication qu'il faut presser labarre d'espace pour commencer la partie.
Pour cela, cliquons sur le petit dossier du menu des lutins et importons l'image intitulée "démarrage", que vous avez préalablement téléchargé sur votre ordinateur (CF le début de ce tuto):

Image

En ayant préalablement sélectionné ce nouveau lutin, allez dans l'onglet "scripts" puis glissez-déposez un bloc de drapeau vert:

Image

Ajoutez un bloc déterminant sa position, à savoir "Aller à X=(...) Y=(...)", en rentrant les valeurs lisibles sur cette capture:

Image

Placez un bloc "Montrer":

Image

Et enfin complétez le script de cette manière, en vérifiant bien que vos valeurs soient identiques à celles entourées de vert:

Image

Là, nous venons de dire au jeu:

- Quand j'appuie sur le drapeau vert, tu affiches l'élément de texte "press space"
- Tu le places à tel endroit
- Tu le montre indéfiniment jusqu'à ce que j'appuie sur espace
- Si et seulement si j'appuie sur espace, tu l'affiche encore 0,5 secondes puis te le cache durant tout le reste du jeu

Si vous le souhaitez, vous pouvez démarre votre jeu et constater le fruit de votre travail. :)

Maintenant, intéressons nous au son.
Notre objectif va être d'ajouter des musiques et des bruitages afin de dynamiser notre jeu et de lui conférer une petite ambiance. Pour cela, vous devez avoir préalablement téléchargé les éléments présents au début de ce tuto.

Cliquez sur "scènes" puis allez dans l'onglet "Sons":

Image

C'est dans cette section que nous allons gérer tous les sons du jeu, dans le cas présent les musiques.

Nous allons importer notre première musiques, celle de l'écran titre. Pour cela, cliquons sur le petit dossier tel qu'indiqué:

Image

Une fois la musique ajoutée, vous devez obtenir ce résultat, avec à droite un aperçu des variations sonores et un petit lecteur intégré. Notez qu'une fois cette musique ajoutée, vous pouvez supprimer celle présente par défaut, en cliquant sur la petite croix située en haut à droite de l'icône de ce morceau pour n'avoir que celle de l'écran titre:

Image

Faites de même pour la "musique crabe", qui est celle du premier niveau, celle du game over. Notez que l'importation de la musique du premier niveau est assez longue, tout simplement parce-que le morceau que j'ai monté fait un peu plus de 10 minutes:

Image

Toujours dans "scènes", cliquez sur la famille de scripts "sons" puis ajoutez le bloc "Jouer le son (...)" de cette façon, en sélectionnant "écran titre" dans le menu déroulant:

Image

De cette façon, nous indiquons au jeu que dès que le décor d'écran titre apparaît, cette musique sera jouée.
Cependant, il s'agit de la musique de l'écran titre, et nous souhaitons faire en sorte que, dès que nous passons au premier niveau, nous basculions sur une autre musique.
Pour cela, il va d'abord falloir indiquer au jeu qu'il doit arrêter la musique de l'écran titre dès que l'on passe au premier niveau. Il nous faut donc ajouter un bloc "Arrêter tous les sons" comme suit:

Image

A la suite de ce bloc, nous ajoutons un autre bloc "Jouer le son (...)", en précisant que nous voulons la musique intitulée "musique crabe" de cette manière:

Image

Si vous lancez votre jeu, vous pouvez constater que la transition de fait à très exactement 0,5 secondes après avoir appuyé sur la barre d'espace. :wink:

Revenons à notre crabe en cliquant sur son lutin et importons les bruitages "saut" et "touche oursin" comme indiqué ci-dessous:

Image

Toujours dans le crabe, mais cette fois dans l'onglet "scripts", ajoutons un bloc "Jouer le son (...)" qui correspond à la section du saut du script, soit celle qui indique qu'il faut presser "haut" pour sauter, en faisant attention de choisir le bruitage "saut" dans le menu déroulant:

Image

En restant dans le crabe, ajoutons un autre bloc "Jouer le son (...)", cette fois à la partie qui concerne la collision du crabe avec l'oursin, en choisissant le bruitage "touche oursin" dansla liste:

Image

Faisons-en de même pour les deux autres sections de scripts dans le crabe qui concernant elles aussi les collisions entre le crabe et l'oursin, en les paçant à ces endroits:

Image

Si vous lancez le jeu, vous constaterez que maintenant, quand l'oursin touche le crabe (ou inversement), le petit bruitage que vous avez ajouté se produit.

Cette fois, allons faire un tour du côté de la fraise et importons les bruitages "chope bonus" et "disparition bonus":

Image

Dans la fraise, ajoutons les blocs "Jouer le son (...)" de cette manière, en indiquant que nous voulons que soit joué le bruitage "chope bonus":

Image

Nous venons d'indiquer à Scratch que, si la fraise touche le crabe, ce bruitage se produit,tout simplement. :)

Maintenant, indiquons à Scratch le son qui doit être joué quand le joueur rate la fraise, à savoir le bruitage "disparition bonus", que nous allons ajouter comme suit:

Image

Il ne nous reste plu qu'à en faire de même pour la pomme, ainsi que pour les autres fruits que nous avons éventuellement ajouté.

Cette fois, intéressons nous à l'écran de game over.
Non seulement il va falloir l'ajouter, mais aussi préciser à chaque élément du jeu qu'il doit s'arrêter quand cet écran apparaît.

Premièrement, revenons à "scènes" puis importons l'écran de game over que nous avons téléchargé au début de ce tuto, ce via l'onglet "arrières plans":

Image

Maintenant, allons dans le lutin "cœur 3" puis dans l'onglet "scripts".
A la fin du petit script qui commence par "Quand je reçois (coeurcache3)", ajoutons un bloc "Envoyer à tous (...)" puis, dans le menu déroulant, cliquons sur "nouveau message":

Image

Dans la fenêtre qui s'ouvre, inscrivons "game over":

Image

Revenons à "scènes" puis à l'onglet "scripts" pour ajoutons un bloc "Quand je reçois (...)", en sélectionnant "game over" dans le menu déroulant:

Image

Glissons-déposons un bloc "Basculer sur l'arrière plan (...)" en sélectionnant "game over" dans le menu déroulant:

Image

En clair, quand le dernier cœur disparaît, il envoie à tous les lutins le message "game over". Et quand la scène le reçoit, il bascule automatiquement sur l'écran "game over".

Maintenant, nous voulons que lorsque l'écran "game over" apparaît, la musique du premier niveau s'arrête et soit remplacée par un petit thème dédié.
Pour cela, il faut d'abord désactiver la musique du premier niveau de cette façon:

Image

Ensuite, ajoutons un bloc "Jouer le son (...) jusqu'au bout" en choisissant la musique"game over" comme ci-dessous:

Image

Notez que l'on demande à la musique d'être jouée jusqu'au bout, vous allez comprendre rapidement pourquoi.

En testant votre jeu, vous remarquerez que quand le crabe est touché par trois fois, l'écran game over apparaît et joue le petit thème de fin. Mais aussi que les autres lutins continuent d'apparaître comme si de rien n'était. Nous allons remédier à ce problème.

De nouveau, allons dans le lutin du crabe, puis dans l'onglet "scripts" et ajoutons le bloc suivant:

Image

A sa suite, plaçons un bloc "cacher":

Image

Dans la famille de scripts "Contrôles", allons tout en bas de la liste de ces blocs et glissons-déposons un bloc "Stop (tout)":

Image

Là, nous venons de dire au jeu les choses suivantes:

- Quand coeur3 envoie "game over", tu le reçois
- Dès que tu le reçois, tu caches le lutin
- Immédiatement après, tu arrêtes tous les scripts contenus dans ce lutin

Cette fois, quand on perd la partie, le crabe "disparaît" du jeu. :)

Comme nous allons appliquer exactement le même petit ensemble de scripts à tous les autres lutins, il va nous suffire de le copier-coller.
Faisons un clic droit sur le premier bloc de cet ensemble de script puis choisissons "dupliquer" comme suit:

Image

Glissons-déposons la copie dans le lutin de la fraise, comme suit:

Image

Note: faites bien attention à appliquer cette procédure à tous les lutins suivants:

- Fruits
- Oursin
- Coeurs

Seul le lutin "démarrage" n'en a pas besoin.


Vous remarquez en démarrant votre jeu que seule la variable "score" reste affichée lorsque la partie est perdue.
Pour résoudre ce petit souci, il nous suffit de retourner dans "scènes", puis dans l'onglet "scripts", aller dans la famille "Données" et ajouter un bloc Cacher la variable (...)" en l'ajoutant de la sorte et en choisissant "score" dans le menu déroulant:

Image

Une toute dernière chose et vous allez pouvoir souffler. :)

Dans le menu des lutins, importez l'image du nuage téléchargé en début de tuto, qui doit s'ajouter à la liste de vos autres lutins:

Image

Enfin, dans nuage puis dans l'onglet "scripts", vous n'avez plus qu'à recopier l'ensemble de script ci-dessous, ce qui ne devrait pas vous poser de problèmes étant donné que vous êtes désormais familier avec tous ces blocs. Tous sauf "Déplacer de (...) plans arrière", lequel consiste à déplacer un sprite d'un ou plusieurs plans, à la manière d'un calque dont on change l'ordre.*
Faites juste attention à bien respecter les valeurs afin d'éviter toute mauvaise surprise:

Image

Notez que le nuage se déplace de droite à gauche, très lentement, car je me suis basé sur l'idée que ceux qui vont y jouer ne vont pas y passer plus de deux ou trois minutes. Cependant, vous pouvez vous amuser à modifier les coordonnées comme obtenir un résultat différent.

Vous avez désormais les bases de votre jeu, que vous pouvez déjà faire tester à vos proches sans avoir à rougir. Félicitations! :)

Si vous avez tout suivit depuis le début, et sur la base que je ne sois pas parti dans des explications tarabiscotées ou au contraire trop vagues, vous devez avoir obtenu ce résultat.

En attendant dimanche prochain où nous commencerons à créer un nouveau jeu, je vous propose les exercices suivants, sur la base que vous ayez bien évidemment terminé ces quatre tutos successifs:

- Changer toutes les musiques du jeu
- Changer l'écran titre
- Ajouter deux oursins qui tombent du ciel
- Ajouter un nouveau nuage, qui part et se déplace en léger décalage par rapport au premier.

La difficulté de ces exercices va crescendo. Aussi, si vous avez trop de mal à les réaliser, ne vous en faites pas et gardez votre jeu sous le coude, en faisant juste gaffe à bien enregistrer deux versions différentes: celle après avoir terminé ce tuto, celle sur laquelle vous allez pratiquer ces exercices. Ainsi, en cas d'erreur, vous ne perdrez pas tout le travail accomplit depuis un mois.
Z
Avatar de l’utilisateur
Le Chevalier Masqué
 
Messages: 73
Inscrit le: 27 Nov 2010, 17:23
Localisation: Paris

Re: [le game dev pour les n00b] Faites vos jeux!

Messagepar Le Chevalier Masqué » 06 Juil 2014, 22:29

N'ayant pas eu de retour sur les précédents tutos, je laisse mijoter tranquillou.

En attendant, et comme vous êtes tous très beaux, j'ai fait mumuse en créant "Clic le clown", disponible juste ici.
Z
Avatar de l’utilisateur
Le Chevalier Masqué
 
Messages: 73
Inscrit le: 27 Nov 2010, 17:23
Localisation: Paris

Re: [le game dev pour les n00b] Faites vos jeux!

Messagepar Le Chevalier Masqué » 08 Mar 2015, 21:31

Devant le succès fulgurant de ces tutos, j'ai tenté un compromis en faisant à peu près la même chose, mais en vidéos. C'est disponible ici, sachant que la playlist compte actuellement sept vidéos dispo en publiques.
Avatar de l’utilisateur
Le Chevalier Masqué
 
Messages: 73
Inscrit le: 27 Nov 2010, 17:23
Localisation: Paris


Retour vers Gamedev

Qui est en ligne ?

Utilisateurs parcourant actuellement ce forum : Aucun utilisateur inscrit et 1 invité