Big Tuto on OOP & MVC with the Game Of Life

Creations

Steph

5 years ago

Complete Tutorial on Game of Life



I propose here a very complete tutorial based on a small mathematical recreation, instead of a real game in the classical sense of the term, for the Gamebuino META: the famous Game of Life, designed by John Conway in the 1970s. You will see that this is a great little exercise, which will allow us to discuss many programming concepts and techniques. The main idea that guided me throughout the writing of this tutorial was to propose an exercise that was both simple and rich in possibilities, that we would be able to treat in a different way, through a gradual approach in the complexity of the programming, to achieve a finalized application with a controlled architecture.

I apologize to the English-speakers, my tutorial is written in French ... but you can get the English version here with Google Translate.

However, the French version of tutorial is available here. And you'll need it, because unfortunately Google Translate breaks the layout of code snippets and doesn't correctly show the YouTube videos...

What you will learn in this tutorial :

  • program a cellular automaton,
  • optimize your code for:
    • speed up the execution of your code,
    • save the memory space,
  • better organize your code with Object Oriented Programming,
  • design your applications with a Model View Controller architecture,
  • intercept events when the user presses the buttons,
  • handle menus in your applications,
  • program a LED manager for the META,
  • program a sound effects manager.

Feel free to send me your comments, or ask me for clarification on things you didn't understand correctly.

I would like to point out that this application is my first programming experience in C++... and yes ;-) I'm learning like you! My code is most likely to be perfectible, so I rely on the experienced coders in the community to let me know about possible (or necessary!) improvements. I will try to integrate them as soon as possible... because I still have a job in real life... and I can't spend all the time I want to have fun with this great little console!

View full creation

jicehel

NEW 5 years ago

Bon autant te le dire tout de suite, le jeu de la vie, ce n'est pas mon truc, mais par contre bravo. Quel boulot sur le tuto... J'ai vu une petite erreur dans le graphique de "Calcul du voisinage", il est écrit i différent de 0 ou j différent de 0 alors que c'est et à la place du ou (d'ailleurs c'est bien marqué dans le texte en dessous) par contre c'est faux dans le programme d'exemple (c'est un ou de marqué alors que ça devrait être un et).

J'ai regard rapidement le reste car je vais me faire à manger mais le reste me parait très bien et quel beau tuto. Bien divisé en chapitre, très clair. En fait je pense que les tuto de la META devrais un peu s'inspirer des tiens pour la lisibilité et l’enchaînement. Je trouve la navigation dan les tutos beaucoup plus intuitive sur ton site. Si tu veux intégrer les miens à ta sauce, fais toi plaisir. 

Donc, bon le programme d'exemple, désolé, ce n'est pas mon truc mais les tutos, j'adore et j'espère que tu va continuer à en faire.  :)

Steph

5 years ago

Merci pour ton commentaire fort sympathique. C'est très encourageant ! La rédaction m'a en effet demandé pas mal de boulot et je commençais à être impatient de voir le bout du tunnel...

Concernant ta remarque au sujet  d'une petite erreur que tu aurais relevée concernant le calcul du voisinage d'une cellule, et bien... j'en conclue que ma figure n'est pas assez claire. Je la referai donc demain (à La Réunion il est déjà 1:00 du matin passée et je dois me lever tôt demain pour aller bosser).

Il ne s'agit pas d'une erreur ! Le voisinage d'une cellule est bien défini par :

grid[x+j][y+i] lorsque i ∈ [-1,1] et j ∈ [-1,1] et que (i ≠ 0) OU (j ≠ 0)

Le cas où (i=0) ET (j=0) concerne la cellule centrale qui ne fait donc pas partie du voisinage ;-)

Je n'ai pas dû être assez clair (ou tu as lu trop vite ?)... je reformulerai ce passage demain.

Concernant la mise en page des tutos du site officiel, effectivement, je trouve qu'elle n'est pas mise en valeur et les contenus sont difficilement appréciables sous cette forme. C'est pourquoi j'ai préféré publier le mien sur un site perso, où je maîtrise la feuille de styles et la navigation :-)

Pour terminer, je conçois que le Jeu de la Vie ne passionne pas tout le monde. Néanmoins, dans le cadre de ce tuto, il ne faut pas le considérer en tant que tel, mais plutôt l'envisager comme une base pédagogique abordable par sa simplicité, et qui permet d'illustrer de nombreux concepts de programmation intéressants (voire fondamentaux) sans se heurter à la difficulté intrinsèque d'un cas d'étude plus complexe.

Encore merci pour ton commentaire !

Steph

NEW 5 years ago

jicehel jicehel

Merci pour ton commentaire fort sympathique. C'est très encourageant ! La rédaction m'a en effet demandé pas mal de boulot et je commençais à être impatient de voir le bout du tunnel...

Concernant ta remarque au sujet  d'une petite erreur que tu aurais relevée concernant le calcul du voisinage d'une cellule, et bien... j'en conclue que ma figure n'est pas assez claire. Je la referai donc demain (à La Réunion il est déjà 1:00 du matin passée et je dois me lever tôt demain pour aller bosser).

Il ne s'agit pas d'une erreur ! Le voisinage d'une cellule est bien défini par :

grid[x+j][y+i] lorsque i ∈ [-1,1] et j ∈ [-1,1] et que (i ≠ 0) OU (j ≠ 0)

Le cas où (i=0) ET (j=0) concerne la cellule centrale qui ne fait donc pas partie du voisinage ;-)

Je n'ai pas dû être assez clair (ou tu as lu trop vite ?)... je reformulerai ce passage demain.

Concernant la mise en page des tutos du site officiel, effectivement, je trouve qu'elle n'est pas mise en valeur et les contenus sont difficilement appréciables sous cette forme. C'est pourquoi j'ai préféré publier le mien sur un site perso, où je maîtrise la feuille de styles et la navigation :-)

Pour terminer, je conçois que le Jeu de la Vie ne passionne pas tout le monde. Néanmoins, dans le cadre de ce tuto, il ne faut pas le considérer en tant que tel, mais plutôt l'envisager comme une base pédagogique abordable par sa simplicité, et qui permet d'illustrer de nombreux concepts de programmation intéressants (voire fondamentaux) sans se heurter à la difficulté intrinsèque d'un cas d'étude plus complexe.

Encore merci pour ton commentaire !

jicehel

NEW 5 years ago

Hum, je ne comprends pas en effet. Si i=0 et j=-1 par exemple, la cellule fais bien partie du voisinage. Seul le cas ou i=0 et j=0 est à exclure du voisinage. Enfin c'est ce que je comprends moi. Donc le voisinage est i ∈ [-1,1] et j ∈ [-1,1] et i,j ≠ (0,0) soit i≠0 et j≠0. Si i=-1 ou 1 et j=0, la cellule fais bien partie du voisinage.

Si oui, je comprends tout à fais la base pédagogique et ça, c'est très bien fait et en effet, c'est un cas qui permet de bien illustrer différentes choses au travers des différents chapitre.

Steph

5 years ago

Hi hi ... décidément...


Hum, je ne comprends pas en effet. Si i=0 et j=-1 par exemple, la cellule fais bien partie du voisinage. Seul le cas ou i=0 et j=0 est à exclure du voisinage. Enfin c'est ce que je comprends moi.

Tout à fait ! Le cas "i=0 ET j=-1" fait bien partie des cas où "i≠0 OU j≠0"


Seul le cas ou i=0 et j=0 est à exclure du voisinage. Enfin c'est ce que je comprends moi.

C'est exactement ça.


Donc le voisinage est i ∈ [-1,1] et j ∈ [-1,1] et i,j ≠ (0,0) soit i≠0 et j≠0.

Et non justement... (i,j) ≠ (0,0) <=> ! [i=0 ET j=0] <=> i≠0 OU j≠0 ;-)

Steph

NEW 5 years ago

jicehel jicehel

Hi hi ... décidément...


Hum, je ne comprends pas en effet. Si i=0 et j=-1 par exemple, la cellule fais bien partie du voisinage. Seul le cas ou i=0 et j=0 est à exclure du voisinage. Enfin c'est ce que je comprends moi.

Tout à fait ! Le cas "i=0 ET j=-1" fait bien partie des cas où "i≠0 OU j≠0"


Seul le cas ou i=0 et j=0 est à exclure du voisinage. Enfin c'est ce que je comprends moi.

C'est exactement ça.


Donc le voisinage est i ∈ [-1,1] et j ∈ [-1,1] et i,j ≠ (0,0) soit i≠0 et j≠0.

Et non justement... (i,j) ≠ (0,0) <=> ! [i=0 ET j=0] <=> i≠0 OU j≠0 ;-)

jicehel

NEW 5 years ago

Bon je n'insiste pas, c'est peut être moi qui me trompe mais si je suis d'accord avec ! [i=0 ET j=0] pour moi, le résultat est différent de i≠0 OU j≠0 ou du coup tu exclues la ligne i=0 et la colonne j=0 donc tu exclues 5 cases au lieu d'une selon moi dont la centrale mais aussi 4 autres. 


Steph

5 years ago

Je t'assure que non !... simple règle de logique :

NON(A ET B) = NON(A) OU NON(B)

Steph

NEW 5 years ago

jicehel jicehel

Je t'assure que non !... simple règle de logique :

NON(A ET B) = NON(A) OU NON(B)

jicehel

NEW 5 years ago

ok, oui, il faut bien A=0 et B=0 pour avoir un résultat à 0, sinon on a 1, c'est vrai. Désolé, je dois être fatigué sans doute, mais oui, c'est vrai...

chris-scientist

NEW 5 years ago

Très bon tutoriel !

Tu as très bien décrit la POO et le MVC, c'est un bon complément à ce que j'ai écris. Je pense d'ailleurs que je vais ajouter un lien vers ton tutoriel.

Je pense que pour le framework que j'écris je vais m'inspirer de tes effets de lumières.

J'ai repéré deux petites coquilles, dans la partie "son et lumière", dans le dernier exemple de code :

  • tu indique qu'il s'agit du fichier GameController.h mais je pense qu'il s'agit du .cpp.
  • et pour la dernière méthode de cette classe tu as écrit le commentaire suivant "// idem lrosqu'il sort du mode édition :".

Steph

5 years ago

Merci pour ton commentaire ! Je viens de corriger les coquilles :-)

Je pense effectivement que, pour les  apprenants, tes tutos et celui-ci constituent une bonne base pour se lancer dans la POO et l'architecture MVC. Ils ont tout à y gagner lorsque l'application prend de l'ampleur...

Concernant les lumières, oui, c'est plus facile de gérer ça dans un contrôleur dédié... et surtout... dans le référentiel HSL ! J'ai d'ailleurs suggéré à Soru (sur Discord) d'ajouter les fonctions rgb2hsl et hsl2rgb dans l'API de la bibliothèque officielle.

Steph

NEW 5 years ago

chris-scientist chris-scientist

Merci pour ton commentaire ! Je viens de corriger les coquilles :-)

Je pense effectivement que, pour les  apprenants, tes tutos et celui-ci constituent une bonne base pour se lancer dans la POO et l'architecture MVC. Ils ont tout à y gagner lorsque l'application prend de l'ampleur...

Concernant les lumières, oui, c'est plus facile de gérer ça dans un contrôleur dédié... et surtout... dans le référentiel HSL ! J'ai d'ailleurs suggéré à Soru (sur Discord) d'ajouter les fonctions rgb2hsl et hsl2rgb dans l'API de la bibliothèque officielle.

sautax

NEW 5 years ago

Par rapport à mon dépôt j'ai fait une branche qui restera la même pour toujours comme ça je peux faire des changements ^^

https://github.com/sautax/game-of-life-gamebuino/tree/0.4

Steph

5 years ago

Merci sautax ! C'est très sympathique de ta part. Je pousserai la mise à jour du lien vers la bonne branche de ton dépôt dès ce soir.

Edit: c'est fait :-)

Party_Pete

NEW 5 years ago

C'est incroyable! Le tuto est trés complet, et il a connaissance beaucoup pour moi apprendre C++ sur la Gamebuino. Je ne parle pas français bien, mais je comprende assez de français essayer lire le tuto en français. Merci beaucoup pour vos poste!

Steph

NEW 5 years ago

sautax sautax

Merci sautax ! C'est très sympathique de ta part. Je pousserai la mise à jour du lien vers la bonne branche de ton dépôt dès ce soir.

Edit: c'est fait :-)

YQN

NEW 5 years ago

MERCI steph :D

YQN

NEW 5 years ago

Une petite question : je vais essayer d'utiliser cette méthode pour créer un clone de Breakout, du coup la logique est d'avoir un MVC pour chaque élément ? (ex. Pad, PadView, PadController, Ball, BallView, BallController etc. ?)

Merci d'avance ! :)

Edit : Après avoir essayé j'imagine que ce n'est pas la bonne méthode, je suis un peu perdu :/

Steph

5 years ago

Merci pour tes commentaires YQN :-)

Désolé pour le délai de réponse... mais quelques impondérables m'empêchent actuellement d'être très présent auprès de la communauté.

Pour répondre à ta question... il ne faut pas considérer que l'architecture MVC est la solution idéale qui s'applique à tous les cas de figures que tu vas rencontrer lorsque tu vas chercher à organiser ton code ! Loin de là ! Il est tout à fait inutile d'employer un marteau-piqueur pour enfoncer une punaise ;-) Cette architecture se prête très bien à la modularisation des composants de ton code lorsque celui-ci se complexifie. Il en facilite l'organisation et la compréhension en séparant bien la logique qui les articule. L'architecture que je propose dans le Jeu de la Vie en illustre la plupart des aspects. Mais vouloir à tout prix adopter cette organisation peut, au contraire, alourdir ton code et s'avérer parfaitement inutile. Dans des cas simples comme la gestion d'un paddle dans un jeu de casse-briques, le modèle et la vue peuvent être rassemblés au sein d'un même et unique composant (Paddle). Un contrôleur des événements utilisateurs (pour intercepter l'appui sur les boutons de la console) sera par contre très utile pour isoler la gestion de ce type d'interactions dans ton code. Le contrôleur pourra alors ensuite agir directement sur ton composant Paddle en le déplaçant (c'est-à-dire en envoyant un ordre ayant pour effet de modifier sa coordonnée selon l'axe horizontal). Et lorsque ce sera le moment (prévoir un point d'entrée à partir de la boucle de contrôle global loop), ce même Paddle pourra simplement se dessiner en fonction de ses coordonnées (qui représentent finalement son modèle). Il sera, à lui seul, son modèle et sa vue...

Est-ce que j'ai répondu à ta question ?

Steph

NEW 5 years ago

YQN YQN

Merci pour tes commentaires YQN :-)

Désolé pour le délai de réponse... mais quelques impondérables m'empêchent actuellement d'être très présent auprès de la communauté.

Pour répondre à ta question... il ne faut pas considérer que l'architecture MVC est la solution idéale qui s'applique à tous les cas de figures que tu vas rencontrer lorsque tu vas chercher à organiser ton code ! Loin de là ! Il est tout à fait inutile d'employer un marteau-piqueur pour enfoncer une punaise ;-) Cette architecture se prête très bien à la modularisation des composants de ton code lorsque celui-ci se complexifie. Il en facilite l'organisation et la compréhension en séparant bien la logique qui les articule. L'architecture que je propose dans le Jeu de la Vie en illustre la plupart des aspects. Mais vouloir à tout prix adopter cette organisation peut, au contraire, alourdir ton code et s'avérer parfaitement inutile. Dans des cas simples comme la gestion d'un paddle dans un jeu de casse-briques, le modèle et la vue peuvent être rassemblés au sein d'un même et unique composant (Paddle). Un contrôleur des événements utilisateurs (pour intercepter l'appui sur les boutons de la console) sera par contre très utile pour isoler la gestion de ce type d'interactions dans ton code. Le contrôleur pourra alors ensuite agir directement sur ton composant Paddle en le déplaçant (c'est-à-dire en envoyant un ordre ayant pour effet de modifier sa coordonnée selon l'axe horizontal). Et lorsque ce sera le moment (prévoir un point d'entrée à partir de la boucle de contrôle global loop), ce même Paddle pourra simplement se dessiner en fonction de ses coordonnées (qui représentent finalement son modèle). Il sera, à lui seul, son modèle et sa vue...

Est-ce que j'ai répondu à ta question ?