Cours 2 IL

docs/582-301-interactivite-ludique/cours01.md

@@ -401,4 +401,4 @@ Voici un [exemple complet](./assets/documents/gdd-perihelie.pdf) d'un document d
 
 ---
 
-Si on a l'temps :octicons-arrow-right-16: [Introduction Phaser](./phaser-intro.md)
+Si on a l'temps :octicons-arrow-right-16: [Introduction Phaser](./phaser/phaser-intro.md)

docs/582-301-interactivite-ludique/cours02.md

@@ -4,160 +4,98 @@ tags:
   - Mardi 2 septembre
 ---
 
-[STOP]
-
-Éditeur de tilemap : https://www.spritefusion.com/
-
-### Structure des fichiers
-
-Le libellé des fichiers et des dossiers doivent être **courts**, en **minuscule** et **sans espace**.
-
-Évitez tant que possible les majuscule pour garantir la compatibilité sur les différents systèmes d’exploitation.
-
-Voici à quoi pourrait et devrait ressembler la structure de votre jeu.
-
-``` markdown
-nom-du-jeu
-│
-├── index.html
-├── assets
-│   ├── images
-│   │   ├── backgrounds
-│   │   ├── fx
-│   │   ├── characters
-│   │   ├── ui
-│   │   └── items
-│   ├── audio
-│   │   ├── music
-│   │   └── sfx
-│   └── fonts
-│       └── nes.ttf
-├── src
-│   ├── css
-│   |   └── main.css
-│   └── js
-│       ├── main.js
-│       ├── scenes
-│       │   ├── Game.js
-│       │   ├── GameOver.js
-│       │   ├── MainMenu.js
-│       │   └── Preloader.js
-│       └── characters
-│           ├── Player.js
-│           └── Enemy.js
-└── vendor
-    └── phaser.min.js
-```
-
-
+# Cours 2
 
 ## Maths
 
-<iframe class="aspect-4-1" height="300" style="width: 100%;" scrolling="no" title="Modulo" src="https://codepen.io/tim-momo/embed/ExzBmYx?default-tab=result&theme-id=50173" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
-  See the Pen <a href="https://codepen.io/tim-momo/pen/ExzBmYx">
-  Modulo</a> by TIM Montmorency (<a href="https://codepen.io/tim-momo">@tim-momo</a>)
-  on <a href="https://codepen.io">CodePen</a>.
-</iframe>
-
-<iframe class="aspect-4-1" height="300" style="width: 100%;" scrolling="no" title="Sin Cos" src="https://codepen.io/tim-momo/embed/gOJNgNp?default-tab=result&theme-id=50173" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
-  See the Pen <a href="https://codepen.io/tim-momo/pen/gOJNgNp">
-  Sin Cos</a> by TIM Montmorency (<a href="https://codepen.io/tim-momo">@tim-momo</a>)
-  on <a href="https://codepen.io">CodePen</a>.
-</iframe>
-
-<iframe class="aspect-2-1" height="300" style="width: 100%;" scrolling="no" title="Sin Cos Cercle" src="https://codepen.io/tim-momo/embed/bGyPqBW?default-tab=result&theme-id=50173" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
-  See the Pen <a href="https://codepen.io/tim-momo/pen/bGyPqBW">
-  Sin Cos Cercle</a> by TIM Montmorency (<a href="https://codepen.io/tim-momo">@tim-momo</a>)
-  on <a href="https://codepen.io">CodePen</a>.
-</iframe>
+### Modulo `%`
 
-## Game objets
+L’opérateur modulo, souvent représenté par le symbole `%`, est une opération mathématique qui donne le reste d’une division entière entre deux nombres.
 
-https://labs.phaser.io/index.html?dir=geom/&q=
+Il répond à la question : « **Quel est le reste d'une division ?** »
 
-Ligne
-Curve path
+* 6 % 3 = 0
+* 100 % 99 = 1
+* 9 % 4 = 1
 
-Graphics
-const graphics = this.add.graphics();
-https://labs.phaser.io/index.html?dir=game%20objects/graphics/&q=
-https://labs.phaser.io/index.html?dir=game%20objects/shapes/&q=
+---
 
-Image
-this.load.image('eye', 'https://labs.phaser.io/assets/pics/lance-overdose-loader-eye.png');
-this.image1 = this.add.image(500, 200, 'eye');
-https://labs.phaser.io/index.html?dir=game%20objects/images/&q=
-Pixelart=true
+<!-- <div class="grid" markdown> -->
+![](./assets/images/modulo_A.jpg){data-zoom-image}
 
-Texte
-this.add.text(100, 100, 'Phaser');
-https://labs.phaser.io/index.html?dir=game%20objects/text/&q=
-https://labs.phaser.io/index.html?dir=game%20objects/bitmaptext/static/&q=
+![](./assets/images/modulo_B.jpg){data-zoom-image}
+<!-- </div> -->
 
-z-index : https://phaser.io/sandbox/?src=src\depth%20sorting\z%20index.js
+<iframe class="aspect-4-3" height="300" style="width: 100%;" scrolling="no" title="Modulo slow" src="https://codepen.io/tim-momo/embed/preview/ExBeqjz?default-tab=result&theme-id=50173" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+  See the Pen <a href="https://codepen.io/tim-momo/pen/ExBeqjz">
+  Modulo slow</a> by TIM Montmorency (<a href="https://codepen.io/tim-momo">@tim-momo</a>)
+  on <a href="https://codepen.io">CodePen</a>.
+</iframe>
 
+![](./assets/images/chatlime.gif){ .center }
 
-Setters
+#### Exemple
 
-### set angle
-const frame = this.add.image(40 + a * 2, 300, 'arrow').setAngle(a);
-https://phaser.io/sandbox/?src=src\transform\angle.js
+Admettons qu'on a une liste de pistes audio dans un `Array` et qu'on veut faire jouer une piste l’une après l'autre.
 
-### flip
-this.add.image(250, 464, 'pic').setFlipX(true);
-this.add.image(250, 464, 'pic').setFlipY(true);
-https://phaser.io/sandbox/?src=src\transform\flip%20x.js
+Lorsqu'on arrive à la dernière, on recommence le cycle; on boucle :material-repeat-variant:.so
 
-### origin
-this.add.image(200, 400, 'card').setOrigin(1, 0.5);
-https://labs.phaser.io/view.html?src=src\transform\originX.js
-https://phaser.io/sandbox/?src=src\transform\originXY.js
-https://labs.phaser.io/index.html?dir=transform/&q=
+```js title="Bande sonore"
+soundtrack = ['piste1.mp3', 'piste2.mp3', 'piste3.mp3'];
+```
 
-### position
-image2.x = 640;
-image2.y = 200;
-ou .setPosition(320, 320);
-https://phaser.io/sandbox/?src=src\transform\position.js
+On peut le faire sans `modulo` avec une condition `if`
 
-### rotation
-this.image1.rotation += 0.01;
-https://phaser.io/sandbox/?src=src\transform\rotation%20and%20origin.js
+```js title="Sans modulo"
+lecteur.play( soundtrack[trackIndex] );
 
-### échelle
-.setScale(2);
-https://phaser.io/sandbox/?src=src\transform\scaleXY.js
+lecteur.once('complete', () => {
+    trackIndex++;
 
-### alpha
-https://phaser.io/sandbox/?src=src\display\alpha\bottom%20alpha.js
+    if (trackIndex >= soundtrack.length) {
+        trackIndex = 0;
+    }
+});
+```
 
+Ou on peut le faire avec `modulo` (plus sophistiqué)
 
-Aléatoire
-https://phaser.io/sandbox/?src=src\game%20config\game%20rng.js
-Phaser.Math.Between(7, 666);
-à la place de
-Math.floor(Math.random() * (666 - 7 + 1) ) + 7;
+```js title="Avec modulo"
+lecteur.play( soundtrack[trackIndex % soundtrack.length] );
 
+lecteur.once('complete', () => {
+    trackIndex++;
+});
+```
 
+### Trigonométrie :triangular_ruler:
 
+Les valeurs des fonctions trigonométriques `sin` et `cos` oscillent entre **-1** et **1**.
 
-// Exercice
-        // this.load.image('debug_bg', 'assets/images/uv-grid-diag.png');
-        // this.add.image(config.width/2, config.height/2, 'debug_bg').setOrigin(0, 0).setAlpha(0.1);
-        // this.add.image(config.width/2, config.height/2, 'debug_bg').setOrigin(1, 0).setAlpha(0.1);
-        // this.add.image(config.width/2, config.height/2, 'debug_bg').setOrigin(0, 1).setAlpha(0.1);
-        // this.add.image(config.width/2, config.height/2, 'debug_bg').setOrigin(1, 1).setAlpha(0.1);
+La différence est que `sin` commence à **0**, tandis que `cos` commence à **1**.
 
+* `sin(0) = 0`
+* `cos(0) = 1`
 
+<iframe class="aspect-4-1" height="300" style="width: 100%;" scrolling="no" title="Sin Cos" src="https://codepen.io/tim-momo/embed/preview/gOJNgNp?default-tab=result&theme-id=50173" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+  See the Pen <a href="https://codepen.io/tim-momo/pen/gOJNgNp">
+  Sin Cos</a> by TIM Montmorency (<a href="https://codepen.io/tim-momo">@tim-momo</a>)
+  on <a href="https://codepen.io">CodePen</a>.
+</iframe>
 
-Data :
+<iframe class="aspect-2-1" height="300" style="width: 100%;" scrolling="no" title="Sin Cos Cercle" src="https://codepen.io/tim-momo/embed/preview/bGyPqBW?default-tab=result&theme-id=50173" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+  See the Pen <a href="https://codepen.io/tim-momo/pen/bGyPqBW">
+  Sin Cos Cercle</a> by TIM Montmorency (<a href="https://codepen.io/tim-momo">@tim-momo</a>)
+  on <a href="https://codepen.io">CodePen</a>.
+</iframe>
 
-this.data.set('lives', 3);
-https://phaser.io/sandbox/?src=src\components\data\store%20scene%20data.js
+## Phaser
 
+[Installation](./phaser/phaser-intro.md){ .md-button .md-button--primary }
 
-##
+[Gestion des médias](./phaser/phaser-objects.md){ .md-button .md-button--primary }
 
-Devoir
+## Devoir
 
-Compléter la portion assets dans le GDD
+* Complétez la portion assets dans votre document de conception
+* Créez l'installation de base de votre PS

docs/582-301-interactivite-ludique/cours03.md

@@ -48,7 +48,7 @@ Pour animer un élément de jeu, on peut utiliser le système d'interpolation de
 
 De manière générale, une animation interpolée représente simplement une transformation géométrique 📐.
 
-Pour créer une nouvelle animation (Tween), on doit écrire la commande `this.tweens.add({});`. Cela indique à la scène Phaser qu'une animation doit être déclenchée. Voici la syntaxe d'un exemple très minimal, sans spécification sur l'animation : 
+Pour créer une nouvelle animation (Tween), on doit écrire la commande `this.tweens.add({});`. Cela indique à la scène Phaser qu'une animation doit être déclenchée. Voici la syntaxe d'un exemple très minimal, sans spécification sur l'animation :
 
 ```js title="Syntaxe"
 this.tweens.add({
@@ -76,7 +76,7 @@ this.tweens.add({
   Translation X</a> by TIM Montmorency (<a href="https://codepen.io/tim-momo">@tim-momo</a>)
   on <a href="https://codepen.io">CodePen</a>.
 </iframe>
-`x` : La nouvelle position sur l'axe des X. L'image se déplacera horizontalement jusqu'à cette position.    
+`x` : La nouvelle position sur l'axe des X. L'image se déplacera horizontalement jusqu'à cette position.
 </div>
 
 ---
@@ -186,7 +186,7 @@ this.tweens.add({
 
 ```js
 this.tweens.add({
-  targets: belleLune,    
+  targets: belleLune,
   x: 700,
   duration: 5000,
   repeat: -1,
@@ -207,11 +207,11 @@ this.tweens.add({
 ```js
 this.tweens.add({
   targets: sprite,
-  x: 0,         
-  y: 0,         
-  alpha: 1.0,     
-  scale: 1,       
-  angle: 0,     
+  x: 0,
+  y: 0,
+  alpha: 1.0,
+  scale: 1,
+  angle: 0,
   rotation: 0,
   duration: 0,      // Durée en millisecondes
   ease: 'Linear',   // Fonction d'accélération
@@ -221,23 +221,23 @@ this.tweens.add({
   hold: 0,          // Temps de pause entre yoyo
   repeatDelay: 0,   // Délai entre chaque répétition
   paused: false,    // Commencer en pause
-  onStart: function (tween, targets) { 
+  onStart: function (tween, targets) {
     // Fonction exécutée au début de l'animation
     console.log('Animation commencée');
   },
-  onComplete: function (tween, targets) { 
+  onComplete: function (tween, targets) {
     // Fonction exécutée à la fin de l'animation
     console.log('Animation terminée');
   },
-  onYoyo: function (tween, targets) { 
+  onYoyo: function (tween, targets) {
     // Fonction exécutée au moment du yoyo
     console.log('Yoyo');
   },
-  onRepeat: function (tween, targets) { 
+  onRepeat: function (tween, targets) {
     // Fonction exécutée à chaque répétition
     console.log('Répétition');
   },
-  onUpdate: function (tween, targets) { 
+  onUpdate: function (tween, targets) {
     // Fonction exécutée à chaque mise à jour de l'animation
     console.log('Mise à jour');
   }
@@ -322,7 +322,7 @@ Pour définir une nouvelle séquence d'animations, on doit la déclarer dans une
 let timeline = this.add.timeline();
 ```
 
-On y ajoute ensuite des animations avec la structure suivante : 
+On y ajoute ensuite des animations avec la structure suivante :
 
 ```js
 timeline.add({
@@ -372,15 +372,15 @@ class Exemple extends Phaser.Scene {
       // Assets : https://kenney.nl/
       this.load.image('duck', 'assets/images/duck.png');
   }
-    
+
     create() {
         const img = this.add.image(136, 136, 'duck');
         img.x = 100;
         img.y = 200;
         img.alpha = 1;
 
         let timeline = this.add.timeline();
-        
+
         timeline.add({
             at: 0,
             tween: {
@@ -396,7 +396,7 @@ class Exemple extends Phaser.Scene {
             at: 0,
             tween: {
                 targets: img,
-                y: 100, 
+                y: 100,
                 ease: 'Sine.easeIn',
                 duration: 1000
             },
@@ -427,12 +427,12 @@ class Exemple extends Phaser.Scene {
             at: 2000,
             tween: {
                 targets: img,
-                y: 200, 
+                y: 200,
                 ease: 'Sine.easeOut',
                 duration: 1000
             },
         });
-        
+
 
         timeline.play();
 
@@ -458,7 +458,7 @@ class Exemple extends Phaser.Scene {
 
 <div class="grid grid-1-2" markdown>
 
-  ![](assets/TeteNuages.png) 
+  ![](assets/TeteNuages.png)
 
   <small>Exercice - Animation interpolée</small><br>
   **[La tête dans les nuages](exercices/nuages.md){.stretched-link}**
@@ -467,13 +467,9 @@ class Exemple extends Phaser.Scene {
 
 <div class="grid grid-1-2" markdown>
 
-  ![](assets/AmbulanceAmbulante.png) 
+  ![](assets/AmbulanceAmbulante.png)
 
   <small>Exercice - Séquence d'animations</small><br>
   **[L'ambulance ambulante](exercices/ambulance.md){.stretched-link}**
 
 </div>
-
-
-
-