From ac17570659f6f007b20ef42f89216365089e8627 Mon Sep 17 00:00:00 2001 From: Baz Utsahajit Date: Sat, 13 Jan 2024 02:03:50 +0000 Subject: [PATCH] Fish Pond Tutorial Adjustments --- .../v7.0.0/gettingStarted/step2-content.md | 6 ++-- .../v8.0.0/fishPond/step1-completed-code.js | 16 +++++----- .../v8.0.0/fishPond/step1-content.md | 16 +++++----- src/tutorials/v8.0.0/fishPond/step2-code.js | 16 +++++----- .../v8.0.0/fishPond/step2-completed-code.js | 20 ++++++------- .../v8.0.0/fishPond/step2-content.md | 8 +++-- src/tutorials/v8.0.0/fishPond/step3-code.js | 20 ++++++------- .../v8.0.0/fishPond/step3-completed-code.js | 26 ++++++++--------- .../v8.0.0/fishPond/step3-content.md | 6 ++-- src/tutorials/v8.0.0/fishPond/step4-code.js | 27 +++++++++-------- .../v8.0.0/fishPond/step4-completed-code.js | 27 +++++++++-------- src/tutorials/v8.0.0/fishPond/step5-code.js | 29 +++++++++---------- .../v8.0.0/fishPond/step5-completed-code.js | 29 +++++++++---------- src/tutorials/v8.0.0/fishPond/step6-code.js | 29 +++++++++---------- 14 files changed, 133 insertions(+), 142 deletions(-) diff --git a/src/tutorials/v7.0.0/gettingStarted/step2-content.md b/src/tutorials/v7.0.0/gettingStarted/step2-content.md index 4e1e4a2cf..b69a368ea 100644 --- 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 index 48265c110..256eb48e1 100644 --- 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 index 4e4eac748..d8fc43152 100644 --- 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 index 672f27bf0..c313a1461 100644 --- 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 index ed9092fb6..4fd085df8 100644 --- 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 index 0e8af326e..db5eff33d 100644 --- 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 index 755507c8c..0af5f710c 100644 --- 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 index 1a4ad6d0f..08cceb7ce 100644 --- 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 index a9896c3bf..fc09e0945 100644 --- 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 index d33bee3be..63baf09b8 100644 --- 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); } } diff --git a/src/tutorials/v8.0.0/fishPond/step4-completed-code.js b/src/tutorials/v8.0.0/fishPond/step4-completed-code.js index c2162d9b9..569be437a 100644 --- a/src/tutorials/v8.0.0/fishPond/step4-completed-code.js +++ b/src/tutorials/v8.0.0/fishPond/step4-completed-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); } } diff --git a/src/tutorials/v8.0.0/fishPond/step5-code.js b/src/tutorials/v8.0.0/fishPond/step5-code.js index 3396b4477..a9d39fd5b 100644 --- a/src/tutorials/v8.0.0/fishPond/step5-code.js +++ b/src/tutorials/v8.0.0/fishPond/step5-code.js @@ -17,10 +17,7 @@ let overlay; addBackground(); addFishes(); - addWaterOverlay(); - animateWaterOverlay(); - addDisplacementEffect(); // Add the animation callbacks to the application's ticker. @@ -44,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. @@ -72,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 @@ -81,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; } @@ -126,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); } } diff --git a/src/tutorials/v8.0.0/fishPond/step5-completed-code.js b/src/tutorials/v8.0.0/fishPond/step5-completed-code.js index f4dfa4d83..0fe5cfc12 100644 --- a/src/tutorials/v8.0.0/fishPond/step5-completed-code.js +++ b/src/tutorials/v8.0.0/fishPond/step5-completed-code.js @@ -17,10 +17,7 @@ let overlay; addBackground(); addFishes(); - addWaterOverlay(); - animateWaterOverlay(); - addDisplacementEffect(); // Add the animation callbacks to the application's ticker. @@ -44,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. @@ -72,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 @@ -81,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; } @@ -126,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); } } diff --git a/src/tutorials/v8.0.0/fishPond/step6-code.js b/src/tutorials/v8.0.0/fishPond/step6-code.js index f4dfa4d83..0fe5cfc12 100644 --- a/src/tutorials/v8.0.0/fishPond/step6-code.js +++ b/src/tutorials/v8.0.0/fishPond/step6-code.js @@ -17,10 +17,7 @@ let overlay; addBackground(); addFishes(); - addWaterOverlay(); - animateWaterOverlay(); - addDisplacementEffect(); // Add the animation callbacks to the application's ticker. @@ -44,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. @@ -72,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 @@ -81,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; } @@ -126,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); } }