Big Tuto on Shading Effect in High Resolution

Creations

Steph

5 years ago

I am pleased to offer you my second tutorial dedicated, this time, to the programming of high-resolution video games. The ultimate exercise of this tutorial will be to render a game scene by working on the lighting of the scene with a play of light and shadow. This subdued lighting effect will allow you to create unique atmospheres in your games.

But beyond this purpose, you will learn many things throughout the tutorial:

  • how to master the technique developed by Andy in his tutorial High Resolution without gb.display,
  • how to program a rendering engine by applying its technique,
  • how to implement the Observer Design Pattern,
  • how to program a linked list to manage dynamic collections,
  • how to use mathematical and physical principles such as the kinematics, the fundamental relationship of dynamics or the principle of inertia, to program realistic motions in your games.

The menu is tempting, I hope you will like it....

Don't forget to give me your impressions or suggestions so that I can improve the content of this tutorial.

You will find the complete tutorial on GitHub Pages.

View full creation

jicehel

NEW 5 years ago

Wouah, je suis au boulot alors pas le temps de le lire tout de suite mais le menu à l'air non seulement alléchant mais j'ai jeté un œil sur la réalisation, c'est très propre. J'ai vu quelques petites fautes mais pas le temps de faire un relevé pour le moment. Je vais sans doute m'en faire aussi une version portable Word que je corrigerais vite fait (il n'y a pas de gros problème dedans), si ça t’intéresse, je pourrais te l'envoyer ? (Je ferais sans doute ça samedi soir après être rentré de la Maker faire ou dimanche après avoir travaillé dans la maison...  ;) ). Après je te promet que dès que possible j'essaye de voir si je peux l'appliquer pour faire le moteur de parachute en HD (J'ai repris parachute car le principe du jeu est très simple, du coup pour m'habituer à utiliser le moteur HD d'Andy ou tes méthodes (que je n'ai pas encore eu le temps de découvrir)), je pense que c'est un bon candidat même si pour ce premier essai, je n'utiliserais pas les notions de moteur physique que j'ai vu que tu expliquais. Tiens sinon toi qui est pas mal dans la théorie, je referais bien mon Break out après en HD, mais j'avais galéré pour le système de collisions, notamment quand la balle rebondit sur le côté ou sur un angle et qu'il y a une autre brique qui provoque une autre collision. L'exposé du problème parait simple mais je n'avais pas trouvé de solution simple qui marche bien. Je te dis ça car je ne sais pas comment je pourrais interfacé ce système de rebond avec ton moteur physique et si tu as une solution qui marche bien, ce serait parfait vu que c'est aussi un jeu avec une balle, comme dans ton exemple.  Bon, j’arrête mon baratin car si j'écris tout ça avant de tester, ça va te faire peur pour le commentaire après le test  :)


Steph

5 years ago

Salut Jicehel, et merci pour ton commentaire. J'ai très probablement dû laisser traîner quelques coquilles ici et là... j'en ai relevé quelques-unes effectivement. Je tâcherai de faire un push correctif dès que j'aurai le temps. Si tu as relevé des imperfections de ton côté, je serais content d'en prendre connaissance pour effectuer les corrections :-) Par contre, si ça ne t'ennuie pas... je préfèrerais un PDF ! Je suis allergique à MS Office... et à tout MS* d'ailleurs ;-)

Concernant ton pbm de casse-briques, je t'ai préparé un petit simulateur qui implémente un algorithme de gestion des collisions approprié pour un casse-briques. Je n'ai pas eu beaucoup de temps pour l'écrire, aussi je ne te garantis pas qu'il soit exempt d'imperfections... mais ça te fera déjà une bonne base pour travailler. J'ai commenté le code, tu devrais donc être en mesure de tout comprendre en le lisant. Si tu as des questions, n'hésite pas ;-)

Edit: si tu as des questions, crée un fil spécifique... puisque ça n'a rien à voir véritablement avec le tuto sur le shading ;-)

Party_Pete

NEW 5 years ago

Très cool tuto pour HD! Il va faire aide apprendre les techniques du dessine avec .tft!

eriban

NEW 5 years ago

Thanks for this tutorial, and in particular for also making it available in English! I quickly went through it and found it very interesting. I may have a go at a high-res game for my next Gamebuino project. The English translation is fine, by the way.

One remark though, as far as I know, you should be careful using dynamic memory allocation on the Arduino-based Gamebuino. It's okay to do this on start up, but if you do this during the game, you run the risk of running out of memory. This can happen even if you free the memory you do not need anymore, mainly due to fragmentation. See for example this thread on stackexchange. In my early implementation of Bumble Bots I ran into memory problems as it heavily relied on dynamic allocation. I fixed this by using only statically allocated memory. I basically declared global arrays for each object type with a size based on the maximum amount of that object present in any level. Although this means that you allocate more memory than strictly necessary, the big advantage is that you are sure that you will not run out of memory as you do not have to worry about fragmentation and the details of how memory is dynamically allocated and freed.

Steph

5 years ago

Thank you for your kind comment eriban. And thank you for highlighting the precautions to be taken on META regarding dynamic allocation! I will think about it in the future, the link you sent me is very interesting. Nevertheless, in my tutorial, I wanted to address the notion of linked lists and, indeed, the way I use them here does not risk fragmenting memory :-) Anyway, thank you for your wise advice! And I look forward to testing your next project ;-)

Steph

NEW 5 years ago

eriban eriban

Thank you for your kind comment eriban. And thank you for highlighting the precautions to be taken on META regarding dynamic allocation! I will think about it in the future, the link you sent me is very interesting. Nevertheless, in my tutorial, I wanted to address the notion of linked lists and, indeed, the way I use them here does not risk fragmenting memory :-) Anyway, thank you for your wise advice! And I look forward to testing your next project ;-)

makerSquirrel

NEW 5 years ago

Well, that is another hugely impressive tutorial, thanks for that! I love the detailed explanations and the clear structure of the code. That makes it very easy to understand and follow. I think tutorials like this one are essential for the next steps after the academy. Without them, the next steps are too frustrating for many newbies, since there is so much to learn and not enough guidance with a nice structure.

Your english version is awesome as well (the game of life thingy I actually did not even try with google translate, I always find these automated translations of french to english even worse to understand than the actual french ones, and my french is not good enough to decipher longer texts). Next I'd recommend you do a tuto in how to make such awesome tutos ;) My tuto on porting a game I need to put on a dedicated page as well, since the gamebuino page is not suited for bigger text passages. But I have practically no web-knowledge for such things and you seem to know how to connect something like that to the github page...

Steph

5 years ago

Thank you for sharing your thoughts with me. This is typically the kind of feedback that makes me want to do more, because I realize that my tutorials are useful to a few people :-) I actually spent a whole day translating everything into English (including the comments in the code...) and I see I did well! Even if I had a headache afterwards!

Concerning the way to publish our tutorials, I agree with you 100%! I find that the publication page of the Creations is not at all suitable for publishing large tutorials, with a lot of text, a lot of illustrations and a lot of code. It is also not possible to manage chaptering for large content like the tutorials I wrote. And it is also not possible to have a preview before posting the content... all these shortcomings have led me to think about a personal publication mode, more adapted to my needs. I absolutely wanted to stay in the Open Source spirit and do things using the GitHub platform, since the Aurélien team encourages people to publish their code on GitHub. I didn't want to get away from that idea.

Also, by looking a little bit, I discovered that GitHub also offered to host static web pages, to support a project. This can be done with GitHub Pages. Content can be written in Markdown (which is much more appropriate for writing large, rich text, rather than the very limited editor of the Creation page) or even directly in HTML for slightly more complex layouts. You can also mix the two. GitHub Pages offers the Jekyll rendering engine to convert pages written in Markdown, HTML & CSS. To do this, simply host its content in a dedicated folder, which must be named docs, and be at the root of the project. It can also be managed in a specific branch with git, which must be named gh-pages.

So I was able to create the entire publishing platform for my tutorials, creating my own CSS to layout my content exactly as I wanted. I have integrated a navigation system that allows me to organize the tutorials into chapters. I find it much more relevant for the learner. I also added some JavaScript to make it easy to switch from one section to another, within the same chapter, using scrolling. It allowed me to create a kind of table of contents for the current chapter. This gives me the freedom to arrange the content elements as I see fit! In addition, I can easily write my tutorial using my usual tools, such as my code editor (Visual Studio Code). I can preview and correct things very easily. And when I want to do a public update, I just have to do a git push!

It's the ideal solution for me.

That's it!... in a few words. Thank you again for your comment. I hope that my tutorials will help you to progress and make you want to continue supporting the Gamebuino project.

Edit: and in addition I can manage several languages by easily organizing the transition from one to the other!

jicehel

NEW 5 years ago

Yes, i have had a look on the tuto. It's very good. I have to make a brak on observer part as it's a little hardier and i have to works a few in the house. I'll have to restart this part later and to understand all... i think it's very usefull but not so easy to understand for me atm... I'll have to read it again and pratice and continue to have a good undestanding of this part...

Mischa

NEW 5 years ago

Absolutely brilliant work, nominated for a master's degree. 

Thus, new possibilities for the meta are now possible. 

I can´t thank you enough for this informations.


Steph

5 years ago

Thank you for your very nice comment! I'm glad to see that it's useful for at least a handful of people. It's always rewarding to get feedback like yours. But you can especially thank Andy (@aoneill) !!! He is the one who gave us the tip about using the DMA controller. It's a brilliant idea, and all the credit goes to him. I just developed his idea... and found a nice way to illustrate it on this tutorial!

Steph

NEW 5 years ago

Mischa Mischa

Thank you for your very nice comment! I'm glad to see that it's useful for at least a handful of people. It's always rewarding to get feedback like yours. But you can especially thank Andy (@aoneill) !!! He is the one who gave us the tip about using the DMA controller. It's a brilliant idea, and all the credit goes to him. I just developed his idea... and found a nice way to illustrate it on this tutorial!

Steph

NEW 5 years ago

makerSquirrel makerSquirrel

Thank you for sharing your thoughts with me. This is typically the kind of feedback that makes me want to do more, because I realize that my tutorials are useful to a few people :-) I actually spent a whole day translating everything into English (including the comments in the code...) and I see I did well! Even if I had a headache afterwards!

Concerning the way to publish our tutorials, I agree with you 100%! I find that the publication page of the Creations is not at all suitable for publishing large tutorials, with a lot of text, a lot of illustrations and a lot of code. It is also not possible to manage chaptering for large content like the tutorials I wrote. And it is also not possible to have a preview before posting the content... all these shortcomings have led me to think about a personal publication mode, more adapted to my needs. I absolutely wanted to stay in the Open Source spirit and do things using the GitHub platform, since the Aurélien team encourages people to publish their code on GitHub. I didn't want to get away from that idea.

Also, by looking a little bit, I discovered that GitHub also offered to host static web pages, to support a project. This can be done with GitHub Pages. Content can be written in Markdown (which is much more appropriate for writing large, rich text, rather than the very limited editor of the Creation page) or even directly in HTML for slightly more complex layouts. You can also mix the two. GitHub Pages offers the Jekyll rendering engine to convert pages written in Markdown, HTML & CSS. To do this, simply host its content in a dedicated folder, which must be named docs, and be at the root of the project. It can also be managed in a specific branch with git, which must be named gh-pages.

So I was able to create the entire publishing platform for my tutorials, creating my own CSS to layout my content exactly as I wanted. I have integrated a navigation system that allows me to organize the tutorials into chapters. I find it much more relevant for the learner. I also added some JavaScript to make it easy to switch from one section to another, within the same chapter, using scrolling. It allowed me to create a kind of table of contents for the current chapter. This gives me the freedom to arrange the content elements as I see fit! In addition, I can easily write my tutorial using my usual tools, such as my code editor (Visual Studio Code). I can preview and correct things very easily. And when I want to do a public update, I just have to do a git push!

It's the ideal solution for me.

That's it!... in a few words. Thank you again for your comment. I hope that my tutorials will help you to progress and make you want to continue supporting the Gamebuino project.

Edit: and in addition I can manage several languages by easily organizing the transition from one to the other!

Steph

NEW 5 years ago

jicehel jicehel

Salut Jicehel, et merci pour ton commentaire. J'ai très probablement dû laisser traîner quelques coquilles ici et là... j'en ai relevé quelques-unes effectivement. Je tâcherai de faire un push correctif dès que j'aurai le temps. Si tu as relevé des imperfections de ton côté, je serais content d'en prendre connaissance pour effectuer les corrections :-) Par contre, si ça ne t'ennuie pas... je préfèrerais un PDF ! Je suis allergique à MS Office... et à tout MS* d'ailleurs ;-)

Concernant ton pbm de casse-briques, je t'ai préparé un petit simulateur qui implémente un algorithme de gestion des collisions approprié pour un casse-briques. Je n'ai pas eu beaucoup de temps pour l'écrire, aussi je ne te garantis pas qu'il soit exempt d'imperfections... mais ça te fera déjà une bonne base pour travailler. J'ai commenté le code, tu devrais donc être en mesure de tout comprendre en le lisant. Si tu as des questions, n'hésite pas ;-)

Edit: si tu as des questions, crée un fil spécifique... puisque ça n'a rien à voir véritablement avec le tuto sur le shading ;-)

jicehel

NEW 5 years ago

OK, je ne créais pas de fil pour le moment mais si j'ai des questions, je le ferais sur le fil du casse-brique. Je m'y mets dès que j'aurais fini Parachute et j'attaque Parachute dès que j'ai assimilé ce tuto sur le shading entre autre...  ;)  Désolé pas beaucoup de temps donc ça va me prendre un moment mais ça viendra  ;)    En tous cas merci, ton approche est très intéressante et bien plus évoluée que la série de test que je faisais.

Steph

NEW 5 years ago

Hello everyone, I just pushed a little update of the tutorial that includes:

  • the development of an important concept concerning pure virtual destructors as part of the definition of the Renderable interface,
  • its application in the Ball and Tiling classes,
  • the addition of the link to the Image Transcoder for Shading in High Res tool in the Shading Effect chapter.

- - -

Bonjour à tous, je viens de pousser une petite mise à jour du tuto qui comprend :

  • le développement d'une notion importante concernant les destructeurs virtuels purs dans le cadre de la définition de l'interface Renderable,
  • l'application de cette notion dans les classes Ball et Tiling,
  • l'ajout du lien vers l'outil Image Transcoder for Shading in High Res dans le chapitre sur l'Éclairage Tamisé.

jicehel

NEW 5 years ago

Oups, je ne l'ai pas vu sur les pages du Github... a moins que ce soit un problème de cache. Je mettrais à jour le fichier pdf ce soir avec les modifs avant de te l'envoyer (il faut que je vois la meilleur solution pour partager le pdf. Je ne sais pas si je peux le mettre sur mon Github ou si je fais un partage sur Onedrive ou mon share Google...

Éclairage Tamisé en Haute Résolution 1ppf.pdf

Éclairage Tamisé en Haute Résolution 2ppf.pdf

jicehel

NEW 5 years ago

Super, ça marche directement sur le site. Si vous avez un problème avec le pdf, dites le moi mais il va manquer les dernières modifs (celles sur les destructeurs)

Steph

5 years ago

Merci Jicehel... dis moi quand tu auras terminé ta relecture (si tu as le temps bien sûr !)... je corrigerai les éventuelles coquilles le plus vite possible ! Par contre, sur les PDF actuels, je ne vois aucune annotation... c'est normal ?

Steph

NEW 5 years ago

Hello, everyone,

For more clarity on the ins and outs, I have just reformulated a new (and I hope last) time the concept of the virtual destructor in the chapter concerning the Observer design pattern... Sorry about that.

- - -

Salut tout le monde,

Pour plus de clarté sur les tenants et aboutissants, je viens de reformuler une nouvelle (et j'espère dernière) fois le concept de destructeur virtuel dans le chapitre concernant le patron Observateur... Désolé.