Fish Pond Tutorial Adjustments

pixijs · Jan 13, 2024 · ac17570 · ac17570
1 parent 4965624
commit ac17570
Show file tree

Hide file tree

Showing 14 changed files with 133 additions and 142 deletions.
diff --git a/src/tutorials/v7.0.0/gettingStarted/step2-content.md b/src/tutorials/v7.0.0/gettingStarted/step2-content.md
@@ -6,20 +6,20 @@ There are a number of ways to draw images in PixiJS, but the simplest is by usin
 
 Before PixiJS can render an image, it needs to be loaded. Just like in any web page, image loading happens asynchronously. We'll talk a lot more about resource loading in later guides. For now, we can use a helper method on the PIXI.Sprite class to handle the image loading for us:
 
-```JavaScript
+```javascript
 // Magically load the PNG asynchronously
 const bunny = PIXI.Sprite.from('https://pixijs.com/assets/bunny.png')
 ```
 
 Then we need to add our new sprite to the stage. The stage is simply a [Container](https://pixijs.download/release/docs/PIXI.Container.html) that is the root of the scene graph. Every child of the stage container will be rendered every frame. By adding our sprite to the stage, we tell PixiJS's renderer we want to draw it.
 
-```JavaScript
+```javascript
 app.stage.addChild(bunny)
 ```
 
 Now let's set the Sprite's anchor and position it so that it's bang on at the center.
 
-```JavaScript
+```javascript
 // center the sprite's anchor point
 bunny.anchor.set(0.5)
 

diff --git a/src/tutorials/v8.0.0/fishPond/step1-completed-code.js b/src/tutorials/v8.0.0/fishPond/step1-completed-code.js
@@ -23,14 +23,14 @@ async function preload()
 {
     // Create an array of asset data to load.
     const assets = [
-        { alias: 'background', src: 'https://pixijs.com/assets/tutorials/pond_background.jpg' },
-        { alias: 'fish1', src: 'https://pixijs.com/assets/tutorials/fish1.png' },
-        { alias: 'fish2', src: 'https://pixijs.com/assets/tutorials/fish2.png' },
-        { alias: 'fish3', src: 'https://pixijs.com/assets/tutorials/fish3.png' },
-        { alias: 'fish4', src: 'https://pixijs.com/assets/tutorials/fish4.png' },
-        { alias: 'fish5', src: 'https://pixijs.com/assets/tutorials/fish5.png' },
-        { alias: 'overlay', src: 'https://pixijs.com/assets/tutorials/wave_overlay.png' },
-        { alias: 'displacement', src: 'https://pixijs.com/assets/tutorials/displacemnet_map.png' },
+        { alias: 'background', src: 'https://pixijs.com/assets/tutorials/fish-pond/pond_background.jpg' },
+        { alias: 'fish1', src: 'https://pixijs.com/assets/tutorials/fish-pond/fish1.png' },
+        { alias: 'fish2', src: 'https://pixijs.com/assets/tutorials/fish-pond/fish2.png' },
+        { alias: 'fish3', src: 'https://pixijs.com/assets/tutorials/fish-pond/fish3.png' },
+        { alias: 'fish4', src: 'https://pixijs.com/assets/tutorials/fish-pond/fish4.png' },
+        { alias: 'fish5', src: 'https://pixijs.com/assets/tutorials/fish-pond/fish5.png' },
+        { alias: 'overlay', src: 'https://pixijs.com/assets/tutorials/fish-pond/wave_overlay.png' },
+        { alias: 'displacement', src: 'https://pixijs.com/assets/tutorials/fish-pond/displacement_map.png' },
     ];
 
     // Load the assets defined above.

diff --git a/src/tutorials/v8.0.0/fishPond/step1-content.md b/src/tutorials/v8.0.0/fishPond/step1-content.md
@@ -26,14 +26,14 @@ After the application setup, we will then preload all the textures required for
 async function preload()
 {
     const assets = [
-        { alias: 'background', src: 'https://pixijs.com/assets/tutorials/pond_background.jpg' },
-        { alias: 'fish1', src: 'https://pixijs.com/assets/tutorials/fish1.png' },
-        { alias: 'fish2', src: 'https://pixijs.com/assets/tutorials/fish2.png' },
-        { alias: 'fish3', src: 'https://pixijs.com/assets/tutorials/fish3.png' },
-        { alias: 'fish4', src: 'https://pixijs.com/assets/tutorials/fish4.png' },
-        { alias: 'fish5', src: 'https://pixijs.com/assets/tutorials/fish5.png' },
-        { alias: 'overlay', src: 'https://pixijs.com/assets/tutorials/wave_overlay.png' },
-        { alias: 'displacement', src: 'https://pixijs.com/assets/tutorials/displacemnet_map.png' },
+        { alias: 'background', src: 'https://pixijs.com/assets/tutorials/fish-pond/pond_background.jpg' },
+        { alias: 'fish1', src: 'https://pixijs.com/assets/tutorials/fish-pond/fish1.png' },
+        { alias: 'fish2', src: 'https://pixijs.com/assets/tutorials/fish-pond/fish2.png' },
+        { alias: 'fish3', src: 'https://pixijs.com/assets/tutorials/fish-pond/fish3.png' },
+        { alias: 'fish4', src: 'https://pixijs.com/assets/tutorials/fish-pond/fish4.png' },
+        { alias: 'fish5', src: 'https://pixijs.com/assets/tutorials/fish-pond/fish5.png' },
+        { alias: 'overlay', src: 'https://pixijs.com/assets/tutorials/fish-pond/wave_overlay.png' },
+        { alias: 'displacement', src: 'https://pixijs.com/assets/tutorials/fish-pond/displacement_map.png' },
     ];
     await Assets.load(assets);
 }

diff --git a/src/tutorials/v8.0.0/fishPond/step2-code.js b/src/tutorials/v8.0.0/fishPond/step2-code.js
@@ -25,14 +25,14 @@ async function preload()
 {
     // Create an array of asset data to load.
     const assets = [
-        { alias: 'background', src: 'https://pixijs.com/assets/tutorials/pond_background.jpg' },
-        { alias: 'fish1', src: 'https://pixijs.com/assets/tutorials/fish1.png' },
-        { alias: 'fish2', src: 'https://pixijs.com/assets/tutorials/fish2.png' },
-        { alias: 'fish3', src: 'https://pixijs.com/assets/tutorials/fish3.png' },
-        { alias: 'fish4', src: 'https://pixijs.com/assets/tutorials/fish4.png' },
-        { alias: 'fish5', src: 'https://pixijs.com/assets/tutorials/fish5.png' },
-        { alias: 'overlay', src: 'https://pixijs.com/assets/tutorials/wave_overlay.png' },
-        { alias: 'displacement', src: 'https://pixijs.com/assets/tutorials/displacemnet_map.png' },
+        { alias: 'background', src: 'https://pixijs.com/assets/tutorials/fish-pond/pond_background.jpg' },
+        { alias: 'fish1', src: 'https://pixijs.com/assets/tutorials/fish-pond/fish1.png' },
+        { alias: 'fish2', src: 'https://pixijs.com/assets/tutorials/fish-pond/fish2.png' },
+        { alias: 'fish3', src: 'https://pixijs.com/assets/tutorials/fish-pond/fish3.png' },
+        { alias: 'fish4', src: 'https://pixijs.com/assets/tutorials/fish-pond/fish4.png' },
+        { alias: 'fish5', src: 'https://pixijs.com/assets/tutorials/fish-pond/fish5.png' },
+        { alias: 'overlay', src: 'https://pixijs.com/assets/tutorials/fish-pond/wave_overlay.png' },
+        { alias: 'displacement', src: 'https://pixijs.com/assets/tutorials/fish-pond/displacement_map.png' },
     ];
 
     // Load the assets defined above.

diff --git a/src/tutorials/v8.0.0/fishPond/step2-completed-code.js b/src/tutorials/v8.0.0/fishPond/step2-completed-code.js
@@ -25,14 +25,14 @@ async function preload()
 {
     // Create an array of asset data to load.
     const assets = [
-        { alias: 'background', src: 'https://pixijs.com/assets/tutorials/pond_background.jpg' },
-        { alias: 'fish1', src: 'https://pixijs.com/assets/tutorials/fish1.png' },
-        { alias: 'fish2', src: 'https://pixijs.com/assets/tutorials/fish2.png' },
-        { alias: 'fish3', src: 'https://pixijs.com/assets/tutorials/fish3.png' },
-        { alias: 'fish4', src: 'https://pixijs.com/assets/tutorials/fish4.png' },
-        { alias: 'fish5', src: 'https://pixijs.com/assets/tutorials/fish5.png' },
-        { alias: 'overlay', src: 'https://pixijs.com/assets/tutorials/wave_overlay.png' },
-        { alias: 'displacement', src: 'https://pixijs.com/assets/tutorials/displacemnet_map.png' },
+        { alias: 'background', src: 'https://pixijs.com/assets/tutorials/fish-pond/pond_background.jpg' },
+        { alias: 'fish1', src: 'https://pixijs.com/assets/tutorials/fish-pond/fish1.png' },
+        { alias: 'fish2', src: 'https://pixijs.com/assets/tutorials/fish-pond/fish2.png' },
+        { alias: 'fish3', src: 'https://pixijs.com/assets/tutorials/fish-pond/fish3.png' },
+        { alias: 'fish4', src: 'https://pixijs.com/assets/tutorials/fish-pond/fish4.png' },
+        { alias: 'fish5', src: 'https://pixijs.com/assets/tutorials/fish-pond/fish5.png' },
+        { alias: 'overlay', src: 'https://pixijs.com/assets/tutorials/fish-pond/wave_overlay.png' },
+        { alias: 'displacement', src: 'https://pixijs.com/assets/tutorials/fish-pond/displacement_map.png' },
     ];
 
     // Load the assets defined above.
@@ -53,7 +53,7 @@ function addBackground()
      */
     if (app.screen.width > app.screen.height)
     {
-        background.width = app.screen.width;
+        background.width = app.screen.width * 1.2;
         background.scale.y = background.scale.x;
     }
     else
@@ -62,7 +62,7 @@ function addBackground()
          * If the preview is square or portrait, then fill the height of the screen instead
          * and apply the scaling to the horizontal scale accordingly.
          */
-        background.height = app.screen.height;
+        background.height = app.screen.height * 1.2;
         background.scale.x = background.scale.y;
     }
 

diff --git a/src/tutorials/v8.0.0/fishPond/step2-content.md b/src/tutorials/v8.0.0/fishPond/step2-content.md
@@ -6,7 +6,7 @@ Now lets fill the pond with some rocks and pebbles, shall we? Let's work inside
 
 We already preloaded the pond background asset as the alias 'background' so we can just simply create a sprite
 
-```JavaScript
+```javascript
 const background = Sprite.from('background');
 
 background.anchor.set(0.5);
@@ -16,15 +16,17 @@ background.anchor.set(0.5);
 
 Now we want the background sprite to fill the whole screen without any distortion so we will compare and fill the longer axis and then apply the same scale on the smaller axis for a uniform scaling.
 
+_(Note: x1.2 scaling to the dimension is to overflow the screen slightly to compensate for the last's step distortion from post-processing)_
+
 ```javascript
 if (app.screen.width > app.screen.height)
 {
-    background.width = app.screen.width;
+    background.width = app.screen.width * 1.2;
     background.scale.y = background.scale.x;
 }
 else
 {
-    background.height = app.screen.height;
+    background.height = app.screen.height  * 1.2;
     background.scale.x = background.scale.y;
 }
 ```

diff --git a/src/tutorials/v8.0.0/fishPond/step3-code.js b/src/tutorials/v8.0.0/fishPond/step3-code.js
@@ -32,14 +32,14 @@ async function preload()
 {
     // Create an array of asset data to load.
     const assets = [
-        { alias: 'background', src: 'https://pixijs.com/assets/tutorials/pond_background.jpg' },
-        { alias: 'fish1', src: 'https://pixijs.com/assets/tutorials/fish1.png' },
-        { alias: 'fish2', src: 'https://pixijs.com/assets/tutorials/fish2.png' },
-        { alias: 'fish3', src: 'https://pixijs.com/assets/tutorials/fish3.png' },
-        { alias: 'fish4', src: 'https://pixijs.com/assets/tutorials/fish4.png' },
-        { alias: 'fish5', src: 'https://pixijs.com/assets/tutorials/fish5.png' },
-        { alias: 'overlay', src: 'https://pixijs.com/assets/tutorials/wave_overlay.png' },
-        { alias: 'displacement', src: 'https://pixijs.com/assets/tutorials/displacemnet_map.png' },
+        { alias: 'background', src: 'https://pixijs.com/assets/tutorials/fish-pond/pond_background.jpg' },
+        { alias: 'fish1', src: 'https://pixijs.com/assets/tutorials/fish-pond/fish1.png' },
+        { alias: 'fish2', src: 'https://pixijs.com/assets/tutorials/fish-pond/fish2.png' },
+        { alias: 'fish3', src: 'https://pixijs.com/assets/tutorials/fish-pond/fish3.png' },
+        { alias: 'fish4', src: 'https://pixijs.com/assets/tutorials/fish-pond/fish4.png' },
+        { alias: 'fish5', src: 'https://pixijs.com/assets/tutorials/fish-pond/fish5.png' },
+        { alias: 'overlay', src: 'https://pixijs.com/assets/tutorials/fish-pond/wave_overlay.png' },
+        { alias: 'displacement', src: 'https://pixijs.com/assets/tutorials/fish-pond/displacement_map.png' },
     ];
 
     // Load the assets defined above.
@@ -60,7 +60,7 @@ function addBackground()
      */
     if (app.screen.width > app.screen.height)
     {
-        background.width = app.screen.width;
+        background.width = app.screen.width * 1.2;
         background.scale.y = background.scale.x;
     }
     else
@@ -69,7 +69,7 @@ function addBackground()
          * If the preview is square or portrait, then fill the height of the screen instead
          * and apply the scaling to the horizontal scale accordingly.
          */
-        background.height = app.screen.height;
+        background.height = app.screen.height * 1.2;
         background.scale.x = background.scale.y;
     }
 

diff --git a/src/tutorials/v8.0.0/fishPond/step3-completed-code.js b/src/tutorials/v8.0.0/fishPond/step3-completed-code.js
@@ -32,14 +32,14 @@ async function preload()
 {
     // Create an array of asset data to load.
     const assets = [
-        { alias: 'background', src: 'https://pixijs.com/assets/tutorials/pond_background.jpg' },
-        { alias: 'fish1', src: 'https://pixijs.com/assets/tutorials/fish1.png' },
-        { alias: 'fish2', src: 'https://pixijs.com/assets/tutorials/fish2.png' },
-        { alias: 'fish3', src: 'https://pixijs.com/assets/tutorials/fish3.png' },
-        { alias: 'fish4', src: 'https://pixijs.com/assets/tutorials/fish4.png' },
-        { alias: 'fish5', src: 'https://pixijs.com/assets/tutorials/fish5.png' },
-        { alias: 'overlay', src: 'https://pixijs.com/assets/tutorials/wave_overlay.png' },
-        { alias: 'displacement', src: 'https://pixijs.com/assets/tutorials/displacemnet_map.png' },
+        { alias: 'background', src: 'https://pixijs.com/assets/tutorials/fish-pond/pond_background.jpg' },
+        { alias: 'fish1', src: 'https://pixijs.com/assets/tutorials/fish-pond/fish1.png' },
+        { alias: 'fish2', src: 'https://pixijs.com/assets/tutorials/fish-pond/fish2.png' },
+        { alias: 'fish3', src: 'https://pixijs.com/assets/tutorials/fish-pond/fish3.png' },
+        { alias: 'fish4', src: 'https://pixijs.com/assets/tutorials/fish-pond/fish4.png' },
+        { alias: 'fish5', src: 'https://pixijs.com/assets/tutorials/fish-pond/fish5.png' },
+        { alias: 'overlay', src: 'https://pixijs.com/assets/tutorials/fish-pond/wave_overlay.png' },
+        { alias: 'displacement', src: 'https://pixijs.com/assets/tutorials/fish-pond/displacement_map.png' },
     ];
 
     // Load the assets defined above.
@@ -60,7 +60,7 @@ function addBackground()
      */
     if (app.screen.width > app.screen.height)
     {
-        background.width = app.screen.width;
+        background.width = app.screen.width * 1.2;
         background.scale.y = background.scale.x;
     }
     else
@@ -69,7 +69,7 @@ function addBackground()
          * If the preview is square or portrait, then fill the height of the screen instead
          * and apply the scaling to the horizontal scale accordingly.
          */
-        background.height = app.screen.height;
+        background.height = app.screen.height * 1.2;
         background.scale.x = background.scale.y;
     }
 
@@ -114,13 +114,13 @@ function addFishes()
         fish.y = Math.random() * app.screen.height;
 
         // Randomly scale the fish sprite to create some variety.
-        fish.scale.set(0.8 + Math.random() * 0.3);
+        fish.scale.set(0.5 + Math.random() * 0.2);
 
         // Add the fish sprite to the fish container.
-        this.fishContainer.addChild(fish);
+        fishContainer.addChild(fish);
 
         // Add the fish sprite to the fish array.
-        this.fishes.push(fish);
+        fishes.push(fish);
     }
 }
 

diff --git a/src/tutorials/v8.0.0/fishPond/step3-content.md b/src/tutorials/v8.0.0/fishPond/step3-content.md
@@ -35,10 +35,10 @@ for (let i = 0; i < fishCount; i++)
 
     fish.x = Math.random() * app.screen.width;
     fish.y = Math.random() * app.screen.height;
-    fish.scale.set(0.8 + Math.random() * 0.3);
+    fish.scale.set(0.5 + Math.random() * 0.2);
 
-    this.fishContainer.addChild(fish);
-    this.fishes.push(fish);
+    fishContainer.addChild(fish);
+    fishes.push(fish);
 }
 ```
 

diff --git a/src/tutorials/v8.0.0/fishPond/step4-code.js b/src/tutorials/v8.0.0/fishPond/step4-code.js
@@ -19,7 +19,6 @@ let overlay;
     addFishes();
 
     addWaterOverlay();
-    animateWaterOverlay();
 
     // Add the animation callbacks to the application's ticker.
     app.ticker.add((time) =>
@@ -42,14 +41,14 @@ async function preload()
 {
     // Create an array of asset data to load.
     const assets = [
-        { alias: 'background', src: 'https://pixijs.com/assets/tutorials/pond_background.jpg' },
-        { alias: 'fish1', src: 'https://pixijs.com/assets/tutorials/fish1.png' },
-        { alias: 'fish2', src: 'https://pixijs.com/assets/tutorials/fish2.png' },
-        { alias: 'fish3', src: 'https://pixijs.com/assets/tutorials/fish3.png' },
-        { alias: 'fish4', src: 'https://pixijs.com/assets/tutorials/fish4.png' },
-        { alias: 'fish5', src: 'https://pixijs.com/assets/tutorials/fish5.png' },
-        { alias: 'overlay', src: 'https://pixijs.com/assets/tutorials/wave_overlay.png' },
-        { alias: 'displacement', src: 'https://pixijs.com/assets/tutorials/displacemnet_map.png' },
+        { alias: 'background', src: 'https://pixijs.com/assets/tutorials/fish-pond/pond_background.jpg' },
+        { alias: 'fish1', src: 'https://pixijs.com/assets/tutorials/fish-pond/fish1.png' },
+        { alias: 'fish2', src: 'https://pixijs.com/assets/tutorials/fish-pond/fish2.png' },
+        { alias: 'fish3', src: 'https://pixijs.com/assets/tutorials/fish-pond/fish3.png' },
+        { alias: 'fish4', src: 'https://pixijs.com/assets/tutorials/fish-pond/fish4.png' },
+        { alias: 'fish5', src: 'https://pixijs.com/assets/tutorials/fish-pond/fish5.png' },
+        { alias: 'overlay', src: 'https://pixijs.com/assets/tutorials/fish-pond/wave_overlay.png' },
+        { alias: 'displacement', src: 'https://pixijs.com/assets/tutorials/fish-pond/displacement_map.png' },
     ];
 
     // Load the assets defined above.
@@ -70,7 +69,7 @@ function addBackground()
      */
     if (app.screen.width > app.screen.height)
     {
-        background.width = app.screen.width;
+        background.width = app.screen.width * 1.2;
         background.scale.y = background.scale.x;
     }
     else
@@ -79,7 +78,7 @@ function addBackground()
          * If the preview is square or portrait, then fill the height of the screen instead
          * and apply the scaling to the horizontal scale accordingly.
          */
-        background.height = app.screen.height;
+        background.height = app.screen.height * 1.2;
         background.scale.x = background.scale.y;
     }
 
@@ -124,13 +123,13 @@ function addFishes()
         fish.y = Math.random() * app.screen.height;
 
         // Randomly scale the fish sprite to create some variety.
-        fish.scale.set(0.8 + Math.random() * 0.3);
+        fish.scale.set(0.5 + Math.random() * 0.2);
 
         // Add the fish sprite to the fish container.
-        this.fishContainer.addChild(fish);
+        fishContainer.addChild(fish);
 
         // Add the fish sprite to the fish array.
-        this.fishes.push(fish);
+        fishes.push(fish);
     }
 }