Émission #2 – La Programmation Expliquée à ma Copine !

Dans cette nouvelle émission de la programmation expliquée à ma Copine, découvrez Sandrine qui a déjà des notions de programmation et qui souhaite approfondir ses connaissance

Apprenez avec Matthieu comment développer un petit jeu de pacman.

Tout est dans la vidéo ci-dessous.

[ppmaccordion][ppmtoggle title= »Afficher le texte  de la vidéo »]

Emission #2 – La Programmation expliquée à ma Copine !

Bonjour à tous et bienvenu sur Développement Facile.

Voici un nouvel épisode de l’émission « la programmation expliquée à ma copine », je vous présente Sandrine, nouvelle présentatrice venue dans l’équipe Développement Facile.

Sandrine : Bonjour.

Matthieu : Donc dans cette nouvelle émission de la programmation expliquée à ma copine, on va découvrir ensemble, avec Sandrine moi-même et vous, les techniques de programmation plutôt en partant du niveau débutant et en progressant au fur et à mesure.

Donc Sandrine si tu peux te présenter.

Sandrine : Je m’appelle Sandrine, j’ai un tout petit niveau de programmation, j’ai fait un peu Pascale, un peut de C++ et j’ai surtout programmé en ActionScript, et puis je suis très contente de participer à cette émission.

Matthieu : Eh bah c’est super donc on va justement, découvrir des nouvelles choses, approfondir crtaines choses et aller un peu plus en avant, donc tu as fait un peu d’ActionScript, tu m’a parlé d’un jeu de Pacman tout à l’heure.

Sandrine : C’est ça, alors c’est vrai que je vais pas vous mentir je suis allé chercher quelques codes sur internet, j’ai pas tout créé, mais voilà.

Matthieu : C’est très bien, souvent au départ c’est ce que je conseil, c’est de s’inspirer de code source existant. La méthode Développement Facile elle est axée vraiment sur la pratique donc bien sur il faut un peu de théorie, mais ce qui va vous permettre de progresser c’est de choisir des cours en vidéo ou vous avez des exercices de mise en pratique directe avec le code source et vous, vous les réutilisez, vous faites comme Sandrine, vous réutilisez es exemples de codes sources dont vous avez compris le fonctionnement pour au fur et à mesure assembler un puzzle, assembler des briques de codes pour construire votre jeu.

Sandrine : Exactement.

Matthieu : Aujourd’hui on va partir sur du développement JavaScript HTML5, donc dans la précédente émission de la programmation expliquée à ma copine, vous avez découvert avec Lena, vraiment c’était les bases, bases, bases de l’HTML5 JavaScript, une petite mise en bouche, là on va aller un peu plus en avant pour voir concrètement ce qu’on peut faire, ce sera un truc vraiment très simple pour vous montrer ce qu’on peut faire. On va basculer sur l’écran de l’ordinateur dans quelques instants, le temps qu’il se prépare.

Voilà, aujourd’hui tu vas essayer de regarder juste le principe de fonctionnement d’un jeu comme ce ci ou il suffit de pousser une caisse, voilà, je m’en rappel plus voilà, qu’on joue comme ça, il faut amener la caisse ici, voilà et donc là c’est gagné. C’est un jeu en cours de développement, le message ne s’affiche pas encore, tout ça, ça va être à améliorer, et le but c’est de découvrir comment avec le code, mettre tout ça en relation, les uns par rapport aux autres. Si tu as des questions tu peux me couper directement, il n’y a pas de soucis.

Sandrine : Alors déjà ce que je peux te demander avec quel logiciel tu programme ?

Matthieu : Eh bien voilà, moi j’utilise sublime text 2, c’est un logiciel qui permet de  créer des applications avec plusieurs langages, ,n’importe quel langage, là c’est de l’HTML, là il y a du JavaScript ici, vous pouvez voir et là il y a un framework, donc c’est incompréhensible c’est normal, du CSS, l’avantage c’est que ça met en couleur et ça permet de se retrouver beaucoup plus facilement dans un fichier. Vous pouvez utiliser soit l’éditeur sublime text 2 qui est payant mais qui n’est pas très cher surtout si vous en faites une utilisation régulière, sinon il existe Note Pad ++ qui est gratuit, qui fonctionne sous Windows, et si vous êtes sur Mac OS, Linux ou Windows vous pouvez utiliser Clips qui est gratuit avec des Plug in.

Sandrine : Alors dis moi, pourquoi tu as plusieurs pages pour programmer. Le CSS…

Matthieu : Ah oui enfaite c’est un système d’onglet, l’avantage de Sublime Text 2, de Eclipse et de Note Pad ++, c’est lorsque vous créez une application, vous travaillez sur plusieurs fichiers en même temps, c’est logique c’est normal, et dans les applications les jeu JavaScript HTML5, souvent vous avez des fichiers CSS, des fichiers JavaScript, des fichiers HTML. Les fichiers HTML c’est pour la mise en forme, pour l’affichage, le CSS c’est tout ce qui est les couleurs, l’organisation, le positionnement des différents éléments, et ça c’est le JavaScript c’est ce qui permet de créer le jeu.

Sandrine : De créer la forme des objets…

Matthieu : Voilà, le personnage, lorsqu’on appuie sur les touches le déplacement du personnage, le déplacement de la caisse, on peut même rajouter des musiques dans un jeu.

Sandrine : D’accord et ça c’est dans le CSS ?

Matthieu : Non tout ça c’est du JavaScript…

Sandrine : Du JavaScript.

Matthieu : Le CSS c’est…

Sandrine : C’est les couleurs tu m’as dit.

Matthieu : Les couleurs, le positionnement du titre, le style du titre, la taille du menu, des caractères du menu, la couleur le positionnement du bas de page, c’est tout ça.

Et l’avantage du système d’onglets c’est que si par exemple, ici, on inclus notre bibliothèque JavaScript, on inclus notre fichier JavaScript qui va lancer l’application, ça permet de le modifier en direct si on doit faire des modifications. C’est beaucoup plus rapide, on peut faire du rechercher remplacer, tout est en couleur, si je clic ici, ça met en surbrillance toutes les apparitions de wildth, la largeur, par exemple, hop ça met en surbrillance toutes les apparitions de ce mot clé là, donc c’est très pratique.

D’autres questions avant de démarrer ?

Sandrine : Non.

Matthieu : Donc enfaite, comme je vous le disait, il y a une partie HTML ou là c’est la div qui va contenir le JavaScript, l’exécution du jeu JavaScript, ensuite vous avez votre fichier JavaScript qui contient tout le code, là c’est vraiment un exemple parce que avec la méthode Développement facile, vous apprendrez à créer plusieurs petits fichiers JavaScript qui contiennent des classes, ça vous évitera d’avoir 500 lignes de codes dans le même fichier. En ActionScript, souvent lorsqu’on découvre ce code, on met tout dans le même fichier, je ne sais pas si t’as fait…

Sandrine : Exactement c’est ça, si si…

Matthieu : Donc c’est normal tous les débutants font ça, vont au plus simple et donc le code est mis tout dans le même fichier, du coup c’est très dur à maintenir, difficile de trouver les bugs, difficile d’avoir des performances honorables. Et donc le but ça va être de séparer dans plusieurs fichiers JavaScript, ça on le verra dans une prochaine émission de la programmation expliquée à ma copine, en attendant on repart de la base comme des débutant parce qu’on est là pour apprendre, et donc c’est normal, faut passer par des étapes, on va dire par les erreurs de débutants, ou tout sera dans le même fichier, et par contre on va gagner du temps en utilisant un Framework, le Framework Phaser, c’est incompréhensible, c’est normal, nous on utilise juste son API, ça permet d’accéder directement à des fonctionnalités pré enregistrées. Là le fichier a été compressé au maximum, tous les espaces ont été supprimés, tous les commentaires on été supprimés, ça permet de prendre beaucoup moins de place et donc un chargement, un affichage beaucoup plus rapide de vos applications JavaScript HTML5.

Sandrine : Concrètement, ça sert à quoi ça ?

Matthieu : En faite ça regroupe pleins de fonctionnalités tout ça, et donc ça on l’utilise jamais, ça sert, c’est des fonctions pré codées, c’est un Framework qui contient pleins de fonctionnalités, par exemple la gestion des collisions, la gestion de la gravité, et après on l’utilise en faisant appel à des sortes, en JavaScript il n’y a pas de classe, on simule le langage objet, c’est comme des classes, moi j’appelle ça des classes même si s’en est pas, on le simule, ça permet d’organiser son code, donc là on a sens igame, avec différents paramètres et automatiquement il va appeler en fonction du navigateur, soit l’API canvas, ou soit l’API WebGl.

Sandrine : Donc game c’est…

Matthieu : Dans Phaser enfaite…

Sandrine : Game c’est un truc qui se trouve dans ton Framework là ?

Matthieu : Voilà dans le Framework Phaser, exactement. Donc on l’instancie, on prépare l’appelle d’autres fonctions automatiquement, on create, on update, on preload. Là il y a des variables globales, pour l’instant elles sont définies ici, mais ce n’est pas terrible, c’est normal on débute, après plus tard on les mettra ici, et on accèdera à game.global.le nom de la variable. Ça permet, lorsqu’on a beaucoup de fichiers dans un jeu, il faut éviter les variables globales parce que sinon on peut appeler deux fois le même nom de la même variable et du coup ça peut gêner parce que les variables ne font pas la même chose. Alors que si on les places dans l’instance de la classe game, elles seront affectées que à  ce jeu-là, à cette partie-là de l’application, vous pourrez avoir des variables qui ont le même nom, ça ne va pas gêner l’exécution de votre jeu parce qu’elles seront dans des contextes différents, elles seront soit dans game.global, ou soit dans appli.global, deux environnements différents.

Et donc là on a un pré chargement, enfaite on sépare la construction du jeu en plusieurs phases, par exemple on peut avoir une phase de Boot, une phase de boot c’est souvent en ActionScript si vous en avez fait, c’est la petite barre de chargement qui pré charge les images, la musique, tous les éléments du jeu, donc le Boot. Après on a le pré load, ça va vraiment lancer le chargement des images, donc le boot c’est le chargement des images, le pré load ça arrive après c’est le chargement des images, ensuite on a la construction, le build c’est la construction du niveau, donc ça met en forme toutes les interfaces graphiques, et après on a update ou play. Update c’est appelé à chaque images par secondes pour mettre à jour par exemple, quand le héros se déplace, le décor qui défile, des choses comme ça. Et à coté vous avez tout un tas de fonctionnalités, par exemple écouter les évènements quand l’utilisateur clic sur le bouton de la souris, ça fait un déplacement d’un élément dans le jeu, on écoute les évènements pendant le jeu enfaite.

Donc là on a notre phase de pre load, il n’y a pas de phase de boot dans cette application pour qu’elle reste relativement simple pour une première fois. La phase de pre load on va charger les graphismes du jeu qui sont stockés dans le répertoire A7, il n’y a qu’une image dans ce jeu, par contre c’est une image spéciale, je ne sais pas si tu connais en ActionScript, c’est un sprite, dans la même image il y a plusieurs images et on choisit l’image à afficher.

Sandrine : Non.

Matthieu : C’est très pratique par exemple, là j’en ai pas à l’écran mais ici, tout ça c’est dans la même image, enfaite ça c’est une seule image, ça c’est dans la même image mais à une autre position, position 0, position 1, position 2 et position 3, et quand on affiche l’image on choisit la position que l’on veut afficher, on choisit l’image. Là c’est que des positions 0, là c’est que des positions 1, là c’est la caisse, ça doit être position 4 et le joueur position 3. Si on regarde le code source, c’est matérialisé par ces constantes-là. Empty position 0 le joueur peut se déplacer, wild c’est un mur, position 1, spot c’est une place position 2, create c’est la caisse, position 3, player position 4. Donc on se déplace dans notre sprite. Un sprite c’est une seule image qui en contient plusieurs. L’avantage c’est qu’on charge une seule image et après on peut l’appeler plusieurs fois en fonction de l’élément que l’on veut afficher.

Sandrine : D’accord.

Matthieu : Si il y a des choses qui ne te parlent pas tu peux…

Sandrine : Non non, vas y continu.

Matthieu : Et donc après, on a fait le pré chargement des élément, ça c’est si on souhaite fait un affichage en plein écran, go full screen, et après on commence, on create on va construire notre environnement de jeu. On place un écouteur sur les évènements du clavier, les écouteurs c’est très intéressants. Ca veux dire que quand vous appelez une fonction vous êtes obligés d’attendre la fin de son exécution, pas très pratique. Que un écouteur, vous envoyez quelque chose, si quelqu’un écoute il le récupère, c’est comme quand vous parlez à une personne, quand on se parle, je parle à Sandrine, si elle est intéressée elle écoute elle me répond, si elle n’est pas intéressée elle n’écoute pas. Un écouteur c’est pareil, on appuie sur une touche du clavier, on envoie un évènement si il y a un écouteur derrière qui est intéressé il va répondre quelque chose. Si j’appuie sur la touche bas ça va faire un défilement vers le bas de l’écran, la touche haute un défilement vers le haut, si j’appuie sur une autre touche mais que le logiciel n’est pas intéressé ça ne va rien faire du tout.

Ca c’est le principe des évènements, ensuite on construit le niveau, c’est des algorithmes on ne va pas trop rentrer dans le détail pour cette première fois, et là dès que l’utilisateur appuie sur une touche du clavier, on lance les écouteurs, c’est ici, début du déplacement on appelle la fonction début du déplacement en gros, c’est pour déplacer le joueur, tout simplement.

Et tout le reste c’est des fonctions qui permettent de mettre en œuvre notre jeu, comme résultat ça donne ceci, flèche bas par exemple, flèche bas, haut, gauche, bas, droite, là on peut déplacer la caisse, comme ceci, juste en la poussant. Voilà, et donc après vous avez, il y a le style.CSS, ça, ça permet d’effectuer tout la mise en forme, par exemple dans cette mise en forme vous définissez la taille de votre police, taille 12, de l’Arial dans tout votre site internet, le haut de page ici avec une couleur de fond, l’alignement du texte écrit en gras, vous avez également le menu de navigation, la section c’est du contenu, des séparateurs, le pied de page toujours avec une couleur de fond centré, un espacement, la bienvenu et les articles, ce qu’on retrouve ici, haut de page, le texte centré à une certaine police, le menu de navigation à une autre taille de police, la zone de jeu ici et le pied de page d’une autre couleur et toujours centré.

Par exemple Sandrine si je te demandait de recréer un jeu comme ceci qu’est-ce qu’il te manquerait aujourd’hui ?

Sandrine : Euuuuuuuuuuuuh… Quasiment tout, parce que enfaite moi j’ai vraiment programmé sur des objets que je dessinais et j’avais pas à m’occuper de créer mes objets avec des lignes de codes.

Matthieu : D’accord donc toi enfaite tu dessinais les graphismes et après…

Sandrine : Et après je mettais l’interactivité dessus.

Matthieu : Là c’est un petit peu pareil enfaite, c’est le même principe dans main.js, il y a des images, là il n’y en a qu’une image dans cette application, elle est ici, tile.png c’est le sprite. C’est une image on la charge dans le jeu, et après ici on a tile qui est utilisé à plusieurs endroits, par exemple ici, on l’insère dans notre jeu, on prend l’image comme en flash on faisait des import ou quelque chose dans le style par le code c’était pas exactement le mot, peut importe mais le principe était là, on réccupérait l’image et on mettait un principe de fonctionnement derrière, là c’est le joueur et on affiche la frame comme je te disais, dans un sprite il y a plusieurs images, on se déplace sur l’image que l’on souhaite afficher.

Et là par exemple, c’est meme image que l’on utilise mais vu que c’est un sprite on va afficher une case vide. En fonction de ce que l’on souhaite afficher, on déplace la frame, position 0, 1, 2, 3 ou 4, soit un mur, soit le joueur, soit une position vide, soit la caisse ou soit l’arrivée du jeu. Tout simplement.

Sandrine : Donc du coup est-ce que tu peut m’expliquer comment tu a définit l’image que l’on voit à l’écran.

Ou est-ce que tu la définie ?

Matthieu : Enfaite c’est tout simple, il y a des constantes ici qui représente les différentes positions dans le sprite, la position 0 c’est vide, le mur position 1, le player position 4 ect pour create et spon, create c’est une caisse et spot ça doit être un emplacement. Et on a un tableau organisé en ligne, donc ici une ligne 0, 1, 2, 3, 4, 5, 6 etc. dans le tableau.

Et donc while que des murs tout en hauts, mur empty empty mur, donc si on regarde, que des murs tout en haut, mur, vide, vide, mur, mur, vide, vide, et on peut même le changer en direct, si je mets empty ici, voilà, et je vais recharger, on aura trois empty, je recharge le jeu, voilà on en a 3, et du coup c’est comme ça que l’on construit le niveau, évidemment le joueur peut aller au niveau emplacement, il est vide mais après il ne peut pas aller plus loin. C’est tout simplement un tableau de constantes qui permet de créer le décor du jeu. C’est une technique très souvent utilisée les tableaux, donc on programme par tile des jeux par tile par case, ça dépend si on le prononce en anglais ou en français.

Sandrine : D’accord, et alors ton petit bonhomme, on peut regarder comment tu le construit ?

Matthieu : Eh ba le bonhomme, comment il est construit ? C’est une image qui est dans le jeu, je vais afficher le sprite, voilà, donc ça c’est le sprite, image vide, le mur, l’arrivée, la caisse à déplacer, le bonhomme avec une animation, c’est pour ça qu’il bouge, on alterne sur deux sprite pour le bonhomme et ça c’est l’arrivée lorsqu’on gagne.

Et donc pour faire le bonhomme, on se déplace, ça doit etre dans build level si ma mémoire est bonne, caisse player plus spot c’est la caisse, et bien on récupère tile, notre sprite, et on positionne sur la bonne frame, donc là on a notre niveau, le tableau qui conteint wile, empty, empty, empty, là il peut être écrit player, quand on se déplace dans le tableau on choisit la ligne et la colonne, donc ij i ligne et j colonne et donc on doit être sur player, ca doit être la constante player et donc la frame numéro 4 ou 5 de mémoire je ne sais plus peut être 3, 4 et bien on va afficher la frame 4 et donc ça va afficher le player.

Et pour le déplacement du joueur, il y a une fonction qui est move player ici, move player, avec des coordonnées qui permet de déplacer le joueur en faisant un effet tweens. Les tweens enfaite c’est en ActionScript c’était beaucoup utilisé pour faire des effets élastiques comme ça.

Sandrine : Ouais, je ne suis pas allé aussi loin.

Matthieu : Enfaite l’effet tween, on choisit une position de départ, il y a une position de départ et une position d’arrivée, on lui donne la position d’arrivée, on lui dit d’utiliser soit un effet rebondit, soit un effet de mouvement, soit élastique et un temps pour y arriver. Et donc là on a fait un effet tween on lui dis les positions d’arrivée tout en X et en Y, il a 100 millisecondes pour y arriver avec un effet lisign linear. Ce qui fait, là on ne le voit pas mais c’est vraiment un effet très modeste mais voilà.

On ne le vois pas trop l’effet en 100 millisecondes l’effet est très faible. Est-ce que tu as d’autres questions pour cette session ?

Sandrine : Non.

Matthieu : Donc aujourd’hui, tu arriverais à utiliser un peu le code à faire deux ou trois petites choses, sachant qu’il est commenté, il est entièrement commenté en français, là c’est un exemple il n’est pas terminé, mais il sera entièrement commenté, beaucoup mieux expliqué à travers une vidéo, ça permettra de, après de la réutiliser pour faire un petit jeu de ce style.

Sandrine : Non honnêtement je pense que c’est, je n’ai pas suffisamment d’expérience sur ce type de programmation, et puis alors moi la programmation ça fait 20 ans que.. Ca a vachement évolué depuis, et non enfaite je pense qu’il va falloir que je continu à suivre tes vidéos.

Matthieu : De toute façon on est là pour ça, pour apprendre à développer des applications de plus en plus performantes en partant du niveau, comme tout le monde a débuté un jour ou l’autre, moi aussi j’ai débuté j’ai fait pleins d’erreurs, c’est pareil avec Sandrine et vous, vous allez progresser au fur et à mesure des émissions, donc comme d’habitude, si vous avez des questions posez les directement sous cette vidéo, il faut savoir que cette émission j’appelle ça du semi direct, parce que c’est enregistré mais il n’y a pas de coupure, si vous voyez des erreurs et tout c’est normal on en fait pas de coupure, c’est comme une émission en semi direct, donc si vous avez des questions sur cette émission la programmation expliquée à ma copine, posez les directement sous cette vidéo, vous retrouverez également sous cette vidéo un formulaire, pourquoi il y a un formulaire ?

Si vous souhaitez aller plus loin, comme Sandrine vous souhaitez apprendre, vous améliorer en développement JavaScript, HTML5, CSS, et il y a énormément de cours gratuits et organisés, il suffit de renseigner sous cette vidéo votre adresse mail, votre prénom, et au fur et à mesure vous allez recevoir chaque semaine par mail un cours gratuit en vidéo qui va vous montrer comment faire telle ou telle chose, tel ou tel jeu, telle ou telle application avec toujours un exemple de code source, comme ça vous avez aucune inquiétude à vous faire, vous êtes sur de progresser pas à pas. Je vous dis à bientôt pour la prochaine émission de la programmation expliquée à ma copine, je laisse le dernier mot à Sandrine.

Sandrine : A bientôt et programmez bien.

[/ppmtoggle] [/ppmaccordion]

Posez vos questions sur ce que vous avez vu dans la vidéo.

Utilisez la zone commentaire pour poser vos questions sur le développement informatique.