ATELIER
Jeu de Pong : apprenez à coder votre premier jeu vidéo rapidement et facilement
Dans cet atelier, je vais vous faire vivre une grande aventure : Programmer votre 1er jeu vidéo en pur code.
Alors peut être avez-vous déjà essayer d’apprendre à programmer un jeu vidéo mais vous n’avez pas vraiment compris. Vous avez suivi un ou plusieurs tutos mais une fois terminé, vous ne savez toujours pas comment faire sans recopier. Vous êtes incapable de créer par vous même.
Car le problème de la plupart des tutos pour apprendre à programmer des jeux vidéo c’est QU’ILS N’EXPLIQUENT PAS CE DONT VOUS AVEZ RÉELLEMENT BESOIN.
Dans cet atelier qui vous apprend à programmer un jeu de A à Z en une heure seulement, vous allez utiliser les connaissances en programmation que vous avez acquises pendant l’atelier Les bases de la programmation même quand on n’a jamais programmé.
Vous allez découvrir comment donner vie à un jeu vidéo en programmant un gameplay mythique : PONG.
Je vais vous dévoiler les véritables secrets de la programmation d’un jeu vidéo, les mécaniques simples qui se cachent derrière l’écran. Même si vous n’avez jamais programmé de jeu vidéo. Vous allez faire d’incroyables progrès en programmation, en quelques heures seulement.
Suivez-moi, on va faire ça, pas à pas, et vous allez en comprendre chacune des étapes.
A la fin de cet atelier, vous serez capable de :
- Commencer la programmation d'un jeu en pur code en partant de zéro
- Comprendre comment se programme un jeu vidéo même si vous n'en avez jamais programmé avant
- Organiser votre code avec un moteur graphique puissant et un langage simple et performant
- Afficher et déplacer des éléments de jeu à l'écran : raquette et balle
- Gérer les rebonds de la balle en quelques lignes de code
- Détecter des collisions par programmation et réagir en conséquence
- Programmer 2 raquettes pour un jeu en multijoueur local
- Calculer et afficher un score quand un des 2 joueurs laisse passer la balle
- Aller plus loin en partant de ces bases
Lancez votre environnement de développement (voir l’atelier Les bases) et suivez le support de cours étape par étape.
Regardez les vidéos quand le support de cours y fait référence avec le symbole .
Faite une pause quand vous vous sentez prêt(e) à taper du code et lancez-vous. Revenez en arrière autant de fois que nécessaire.
Vidéos de l'atelier : Première partie
- Toutes les bases du jeu PONG
Vidéos de l'atelier : Deuxième partie
- Détecter quand la balle sort de l’écran (le joueur perd)
- Ajouter une deuxième raquette
- Coder un effet de trainée derrière la balle
Cet atelier est réservé aux membres Premiums.
Pour suivre cet atelier il faut simplement adhérer en Premium.
Adhérez maintenant pour accéder à cet atelier
75 réflexions au sujet de “Atelier Jeu de Pong : Apprenez à coder votre premier jeu vidéo rapidement et facilement”
parfait
Merci pour ce cours
Je ne suis plus débutant mais j’ai trouvé l’atelier très intéressant et surtout très bien fait pour ceux qui était comme moi il y encore quelques mois. Merci pour le cours !
trope fière de moi !
super , très abordable pour les débutants ( qui ont suivis les cours précédents)
Vraiment un superbe atelier j’en ai beaucoup appris je comprend mieux la coli maintenant : )
Je me suis amusé à faire un mode 4 joueurs..
Merci pour cet atelier trop formidable, jusqu’à présent j’ai du passé environ 15h à comprendre et à programmer puis ajouter des musics et des sons, bref, j’adore cet atelier et je t’en remercie pour tout les effort que tu fournies !
très très cool sais une autre expérience pour moi qui suis étudiant en informatique et réseaux, je voix que c’est vraiment oufff!!! j’arrive à comprendre clairement maintenant le language C rien que avec lua
merci pour le cour
trop bien
Pour le déplacement de la balle, j’étais arrivé à ça :
— déplacement balle X
if balle.x > largeur – balle.largeur and balle.vx > 0 then
balle.vx = – balle.vx
elseif
balle.x < 0 and balle.vx hauteur – balle.hauteur and balle.vy > 0 then
balle.vy = – balle.vy
elseif
balle.y < 0 and balle.vy < 0 then
balle.vy = – balle.vy
end
balle.x = balle.x + balle.vx
balle.y = balle.y + balle.vy
Et la collision avec le pad (j’ai pas encore regardé la correction) :
— colision PAD
if balle.x == pad.x + pad.largeur and balle.vx pad.y and balle.y 0 and balle.y > pad.y and balle.y < pad.y + pad.hauteur then
balle.vx = – balle.vx
end
J’ai l’impression que tout n’est pas passé dans mon copié/collé :
if balle.x == pad.x + pad.largeur and balle.vx pad.y and balle.y 0 and balle.y > pad.y and balle.y < pad.y + pad.hauteur then
balle.vx = – balle.vx
end
Bon, je crois que mes lignes sont trop grandes ?
J’aprrend, j’aprrend, j’aprrend, j’aprrend, …
J’adore.
David, tu es un bon pédagogue, même si je ne part du niveau zéro absolu, tu me fais beaucoup progresser.
Merci beaucoup ?
Gros Merci David ! Je part de 0 et grace a toi je commence enfin a comprendre la logique de la programation..! je reve de donner vie a mon art graphique depuis 15 ans dejas et toujours attendre qu’un programmeur decide de faire bouger mes trucs , jai enfin decider de les faire bouger moi meme ! encore merci.
Bonjour, love2D ne fonctionne pas // Can’t find love2d executable in any of the following folders: /Applications/love.app/Contents/MacOS
j’aimerais trouvé une solution :s
Très bon atelier pour détecter les collisions, la base de la base
merci encore
Il y a longtemps je me suis amusé avec le yabasic, le darkbasic et le blitzbasic. Avec le language lua et love2D on retrouve cette accessibilité dans la syntaxe pour les débutants. Ce cours se concentre sur les bases, affichage, mouvement, son, texte, collision, clavier… (N’oubliez pas de télécharger les fichiers sources de l’atelier ! Ils vous seront utiles en particulier pour ajouter du son et du texte). Je suis satisfait ! Hâte de découvrir la suite.
bonjour,
au lieu de l’écran noir j’ai ça comme note d’erreur
Can’t find love2d executable in any of the following folders: /Applications/love.app/Contents/MacOS, /usr/bin, /bin, /usr/sbin, /sbin, /usr/local/bin, /Users/++++/Documents/, /Users/bin
j’ai téléchargé Love depuis le liens fourni et il est installé pourtant
c’est bon, j’ai réussi c’était tout bete
comme mac ne reconnaissait pas l’application elle n’était pas dans application …
Wow pour vrai vous etes entrain de me faire découvrir une nouvelle passion!
merci je me suis éclaté.
bonjour,
je viens de commencer et je ne vois pas ou ni comment lancer les vidéo depuis le docs. le signe de vidéo n’est pas cliquable. soit je suis bigleux soit j’ai un bug. vous pouvez m’aider ?
C’est le plus souvent dû à un bloqueur de pubs ou à un navigateur non standard. Utilise Chrome ou Firefox, sans bloqueur de pub.
Atelier très formateur, j’ai beaucoup appris avec se pong et je ne regrette pas mon adhésion à gamecodeur !
Merci !
Bonjour,
Je vies de terminer l’atelier, et franchement, c’est top, c’est progressif, chaque étape est bien expliquée, franchement au TOP!
👍❤
Bonjour
Merci pour cette Atelier très clair, cela fait vraiment plaisir en arrivant à la fin d’avoir fait un Pong qui fonctionne.
J’avoue que je galérais dans les deux ateliers précédents. Mais celui-ci explique très bien les fondamentaux comme par exemple les fonctions LOAD – UPDATE et DRAW. De ce fait je suis maintenant capable de générer mes propres solutions aux travaux proposés dans l’atelier. Un grand merci. Je vous laisse je fonce sur l’atelier suivant. ^^
Atelier excellent merci !
Personnellement je me suis amusé à faire accélérer la balle à chaque rebond
Merci beaucoup pour cet atelier !
j’ai fais comme dans le support de cours , le pad ne bouge pas , j’ai regarder la vidéo j’ai fais exactement comme dans la vidéo et ça ne marche toujours pas , je n’arrive ni a faire bouger le pad sans appuyer sur une touche , ni a le faire bouger en appuyant sur une touche , quelqu’un aurait une solution svp ?
La programmation c’est bête et méchant. Ton code ne fait que ce que tu lui demandes de faire.
Tu dis avoir fait exactement comme dans ma vidéo, ce n’est pas le cas sinon ton code ferait « exactement » comme dans la vidéo. Il y a donc une faute de frappe, une inversion, un oubli, qui provoque ton bug. Impossible de te répondre sans voir ton code. Tu peux passer par le Discord public (si tu n’es pas Premium) pour le partager avec la communauté et recevoir une aide. Le lien est dans le menu « communauté » sur le site. Bon code et ne perd pas espoir, quand tu vas voir ton erreur tu vas te dire « arf ok ! » et tu retiendra définitivement ton erreur.
Je l’ai réalise avec le support de cours et j’ai regarder les vidéos a la fin.
Je suis vraiment content de cette Atelier, super bien explique j’ai réussi a tout faire seule sauf les colissions ou j’ai du lire les explications mais c’est tellement bien explique qu j’ai plié le sujet super vite ;D.
Au top, Merci
Merci pour cet atelier j’ai beaucoup appris, j’ai par contre eu très mal au crane pour le deuxième Pad
il faut que je m’entraine
merci encore 😉
bonjour
bizarrement je n est pas la possibilité de visionner les vidéo de l atelier pong mais je peux voir les autre atelier pas de bloc pub et j ai essayer avec plus pc différant rien de plus pouvais vous m aide ?
C’est corrigé, désolé pour la gène.
Bonjour David et merci pour ton travail,
C’est très intéressant.
Je ne parviens toutefois pas à afficher l’écran de fond.
Ce dernier reste noir…
Autre petite question Love 2D est il utilisable avec le C++ ?
Bien cordialement
Merci pour l’énorme travail que vous faites David, grâce à votre méthode explicite j’arrive à faire des progrès.
bonjour
je n’arrive pas a comprendre le langage C+
*
merci cordialement .
Super atelier pour reprendre les bases après une longue pause.
Superbe atelier de A à Z, mise à part une chose… les listes/tableaux. Pour moi c’est du chinois, au début je comprenais les métaphores/comparaison pour comprendre l’affichage, l’inventaire du héro, les conditions, boucles, et ça aide vraiment si l’on peut se référer à des choses palpables ou situation de la vrai vie exemples : une pomme, le héro qui cherche dans son sac et qui prend une potion etc.. Mais pour les listes, j’ai trouvé que ça manquait d’explication et je ne vais pas mentir, je n’ai pas compris. Donc, j’irai surement regarder d’autres tutoriels !
Dans l’ensemble les cours sont biens.
Les listes sont travaillées dans les cours premium notamment dans l’atelier « programmer un inventaire avec une liste ».
Très bon atelier bien expliqué, malheureusement je me sens un peu déçu avec cette formation initiale gratuite la promesse de faire un premier jeu et la on se retrouve avec un demi-jeu sans support de cours si on ne passe pas au premium bien que je penses passé le pas. Je suis un peu déçu de ne pas pouvoir finir l’atelier pour l’instant. Ce n’est pas méchant il faut bien que tu nous attire mais je trouve ça juste dommage.
J’ai réintégré le support de cours pour la formation gratuite. Merci de ta suggestion.
Cet atelier m’a vraiment permis de me remettre dedans, après presque deux ans sans coder un jeu. Très bon atelier.
La première partie de l’atelier est bien, mais la seconde vidéo demande un accès premium.
C’est vraiment dommage de ne pas pouvoir aller au bout des supports vidéos avec l’accès d’initiation.
Super j’aime beaucoup l’esprit minimaliste de la formation je suis super contant de pouvoir me débarrasser d’usine à gaz sous licence comme visual studio et Unity.
FOR-MI-DABLE !
super atelier, je suis des tutos unity et essaye de faire des jeux en c# sur unity depuis 5 ans environ et je me suis inscrit sur gamecodeur car souvent même si en suivant la doc unity et les tutos il me manque la base de la programmation et je me retrouve bloqué dans mes jeux,J ai décidé de re partir a zéro, cette atelier ma beaucoup appris sur le 2d car je n en est jamais fait j ai rajouté un petit multiplicateur de vitesse pour la balle a chaque collision avec les raquettes pour donné un peu plus de difficulté au jeu. en tous les cas je ne regrette pas mon inscription et je suis super content des cours super compréhensible
Nikkkel
Merci à toi, t’es explications sont très claires et précises. J’avance pas a pas et comprend mieux les choses 🙂 .
Super tuto Merci David , je débute le code et ton tuto ma vraiment bien aide
très didactique, très clair. le DLC 33 particules et trainées vraiment bien ! merci David !
juste en passant les raquettes carrés et balle carré c’est vraiment moche du coup j’ai arrondi un peu les angles (via essai erreur j’ai pas trop bien compris très précisément les paramètres supplémentaires de la méthode).
pad : love.graphics.rectangle(« fill », pad.x, pad.y, pad.largeur, pad.hauteur,80,10)
balle ronde : love.graphics.rectangle(« fill », balle.x, balle.y, balle.largeur, balle.hauteur,45,45)
et tout à l’air de marcher pareil (ou cela se voit pas à l’oeil nu j’ai l’impression).
hello
petite question
j’ai commencer de zero avec ses cours
mais a l’heure actuel sans les cour a coté je n’arrive pas encore à coder mes propre idées
arrive tu a le faire seul sans l’aide des cours ?
en suivant les cour c’est facile de reproduire en s’aidant des cour a coté mais sans l’aide a coté je n’y arrive pas…
Il ne faut pas s’imaginer être autonome avec 1 ou 2 ateliers. Apprendre à raisonner prend du temps et nécessite de l’implication, beaucoup de pratique, et des exercices (Jams, exercices d’autoévaluation, etc.).
Coder c’est raisonner. Raisonner seul prend des semaines, des mois, en suivant ma méthode.
Si Gamecodeur est une formation complète c’est pour cela. Je ne suis pas magicien hélas et tu ne seras pas autonome juste en suivant mon atelier Pong.
belle experience
tres dur pour moi de tout comprendre sans regarder les cours
j’ai presque réussi à tous faire, sauf la compréhension du rebond de la balle sur la raquette je n’arrive pas a comprendre la logique du sur le pad et du coté ou du x etc….
je ne sais plus trop quoi faire , continuer les cours ou y passer encore plus de temps…..
hello pour la balle ronde tu dois juste ecrire love.graphics.circle
et ta balle ne sera plus carré mais ronde
moi je suis perdu sur la compréhension du rebond de la balle sur la raquette sans copier coller les cour CA j’arrive pas a comprendre
Super cours, j’ai refais un Pong perso sans regarder le cours. Je me suis quand même aidé du site love2D.org pour bien écrire les fonctions. Super content, j’ai pu mettre un peu de couleur et une ligne au milieu du terrain.
Par contre il va falloir que je revienne sur la trainée. Mais ça va le faire.
Merci pour cette atelier , pour un début je doit dire que je me suis régalé comme un Goss ☺️
Premier tuto ou je termine enfin quelque chose , merci
Je continu à le refaire pour comprendre encore des chose
J’espère comprendre les liste par la suite 😵
super atelier david ! je me demandes si il fallait pas rajouter les collisions sur la surface width du pad ?
Tres bon cours, clair, David explique tres bien, ca donne envie d’aller plus loin.
Salut David,
Merci pour ce cours, super idée, en fait le rebond est tout bete, je m’attendais à des calculs de direction de ouf!
Ce qui est cool c’est que tu montes le site du framework pour choisir les fonctions etc par contre tu ne parles pas de pourquoi tel choix ou tel choix? Ce serait intéressant d’en dire un peu plus sur la formation gratuite.
Mais une question me brule les levres: comment fonctionne du coup l’affichage?
Est ce que tu as fait un cours pour ca? Car ceci reste encore une enigme pour moi, par exemple sur amiga on a des registres je crois bien avec la position du raster etc, comment ca se passe là dessus?
On voit que les chip comme Denise font de l’accès dma comme sur pc sur une fenetre de memoire (range)reservée pour afficher les pixel et les données liées. comment ca se passait sur cpc?
Est ce qu’on est toujours sur un affichage ligne à ligne de nos jours ou le balayage est tout autre?
En tous cas merci pour ce cours , je n’ai pas encore resolu l’enigme et je le ferais plus tard..
Je garde ca sous le coude et je ferais peut etre l’abonnement mon but etant aussi d’en jouer du LUA pour faire de maniere indirect du ruby.
Bulbo
J’ai particulièrement aimé l’atelier pour les particules, c’est beaucoup plus simple que je l’imaginais, une simple liste? j’aurais pas cru.
Même si je me doutais un peu de la logique (notamment la durée de vie et l’alpha qui se réduit pour l’effet transparence), je m’attendais à une table en deux dimensions.
Merci pour cet atelier très simple et explicatif!
bonjour David je viens de finir l’atelier Pong qui est très instructif, j’avais un bug du moins je pensais et j’ai eu du mal à trouver mais chose logique car dans la fonction centreBalle() il y as les 2 raquettes de déclarés donc à chaque reset de la balle les 2 raquettes revenais à leur position initiale de centreBalle() , en déclarant les 2 raquettes en dehors de la fonction les raquettes restent a leur place et il n’y as que la balle qui reset. merci encore pour tout
je comprend pas pk le code fonctionne pas
@steves ves
Comme l’erreur te l’indique, il ne comprends pas pourquoi tu utilises la variable dt qu’il ne connait pas
cette variable est normalement un paramètre de la fonction love.update
donc à priori tu as mal déclaré la fonction, par exemple en oubliant le paramètre, ou pire tu ne l’as pas appelée du bon nom.
voici comment la déclarer :
function love.update(dt)
-- le code de ta fonction
end
Je vois aussi qu’il y a des problème d’indentation (alignement) de ton code, ce qui ne va pas t’aider pour te relire.
super pour les débutants moi qui commence a peine a explorer cet univers je suis ravis de suivre des cours de cet qualité a la fin de l’exercice je me suis amusé a rendre vivante la deuxième raquette avec une très simple commande pour que la raquette bouge en fonction de la position Y de la balle ça ma émus ma première IA 😉 merci !
je viens de m’aderer aux Game codeur j’ai 16 ans et j’espère que vous allez m’apprendre un-peu plus sur ce que je viens d’aprendre
Bonjours
je ne comprend pas pourquoi ma balle traverse toujours mon pad droit
j’ai réussi a obtenir le même résultat en terme de synstaxe que toi David mais pas le même résultat
ça fait 2 jours que je cherche.
est t il possible s’il te plat de m’apporter tes lumières concernant ceci
concernant centreBalle ma syntaxe diffère mais le résultat est le même
merci mille fois pour ta futur réponse
pad = {}
pad.x = 0
pad.y = 0
pad.largeur = 20
pad.hauteur = 80
pad2 = {}
pad2.x = love.graphics.getWidth() – 20
pad2.y = love.graphics.getHeight()/2
pad2.largeur = 20
pad2.hauteur = 80
balle = {}
balle.x = 400
balle.y = 300
balle.largeur = 20
balle.hauteur = 20
balle.vitesse_x = 0.25
balle.vitesse_y = 0.25
function centreBalle ()
balle.x = love.graphics.getWidth()/2 – balle.largeur/2
balle.y = love.graphics.getHeight()/2 – balle.hauteur/2
end
function love.load()
centreBalle()
end
function love.update(dt)
if love.keyboard.isDown(« s ») and pad.y + pad.hauteur 0 then
pad.y = pad.y -1
end
if love.keyboard.isDown(« down ») and pad2.y + pad2.hauteur 0 then
pad2.y = pad2.y -1
end
balle.x = balle.x + balle.vitesse_x
balle.y = balle.y + balle.vitesse_y
–rebond balle sur les murs
if balle.y > love.graphics.getHeight() – balle.hauteur then
balle.vitesse_y = -balle.vitesse_y
end
if balle.x > love.graphics.getWidth() – balle.hauteur then
balle.vitesse_x = -balle.vitesse_x
end
if balle.y < 0 then
balle.vitesse_y = -balle.vitesse_y
end
if balle.x < 0 then
balle.vitesse_x = -balle.vitesse_x
end
–collision pad gauche
if balle.x pad.y and balle.y = pad2.x then
if balle.y + balle.hauteur > pad2.y and balle.y < pad2.y + pad2.hauteur then
balle.vitesse_x = – balle.vitesse_x
balle.x = pad2.x – balle.largeur
end
end
end
if balle.x = love.graphics.getWidth() then
centreBalle()
end
end
function love.draw()
love.graphics.rectangle(« fill », pad.x ,pad.y, pad.largeur, pad.hauteur)
love.graphics.rectangle(« fill », pad2.x ,pad2.y, pad2.largeur, pad2.hauteur)
love.graphics.rectangle(« fill », balle.x, balle.y, balle.largeur, balle.hauteur)
end
petit erreur de frappe a force de chercher et modifier sorry sur la condition balle.x
–rebond balle sur les murs
if balle.y > love.graphics.getHeight() – balle.hauteur then
balle.vitesse_y = -balle.vitesse_y
end
if balle.x > love.graphics.getWidth() – balle.largeur then — corrigé
balle.vitesse_x = -balle.vitesse_x
end
if balle.y < 0 then
balle.vitesse_y = -balle.vitesse_y
end
if balle.x < 0 then
balle.vitesse_x = -balle.vitesse_x
centreBalle()
end
et bien je viens de comprendre d’ou vient le probleme.
le piege ici était que j’étais absorbé par le fait que ma balle ne touchais pas mon pad droit j’ai donc regardé partout en me disans que mes calcules de trajectoire n’était pas correct hors sur ta correction (David) c’était identique, je me suis alors demandé ci cela ne venait pas de mon recentrage de balle… bref j’ai refait tout le code.
l’erreur ici venait simplement de ça :
1
–collision pad gauche
if balle.x pad.y and balle.y = pad2.x then
if balle.y + balle.hauteur > pad2.y and balle.y < pad2.y + pad2.hauteur then
balle.vitesse_x = – balle.vitesse_x
balle.x = pad2.x – balle.largeur
end
end
end
hors ça doit etre ça:
1
collision pad gauche
if balle.x pad.y and balle.y = pad2.x then
if balle.y + balle.hauteur > pad2.y and balle.y < pad2.y + pad2.hauteur then
balle.vitesse_x = – balle.vitesse_x
balle.x = pad2.x – balle.largeur
end
end
cela ne saute pas au yeux d'un débutant comme moi mais quelqu'un avec un peu d’expérience ne peut pas passer a coté
comme je n'ai pas fermé la condition de mon pad gauche avec
mon deuxième end et que ce dernier s'est retrouvé en conclusion de ma condition du pad2 alors zerobrain n'affiche pas de message d’erreur mais ce n'est pas bon pour autant.
David souligne quelque chose de très juste dans l'une de ses vidéo je cite
ce n'est par ce que ça fonctionne qu'il faut le faire.
bref tout pour dire qu'il faut bien vérifier ses indentation et de ne pas oublier en créent vos structure de contrôle de mettre votre end avant d'écrire a l’intérieur
ce témoignage a pour but d'aider les débutant comme moi dans l'espoir que cela servent.
Bonne journée a tous