From 7ccab5f467e7f68208d2282a65e51c7f1f584159 Mon Sep 17 00:00:00 2001 From: Mo Omer Date: Mon, 25 Nov 2024 05:53:59 -0600 Subject: [PATCH] fix: Resolve discrepencies within the FishPond tutorial (see #116) (#134) --- .../v8.0.0/fishPond/step2/step2-content.md | 6 ++++++ .../v8.0.0/fishPond/step4/step4-content.md | 17 ++++++++++++----- 2 files changed, 18 insertions(+), 5 deletions(-) diff --git a/src/tutorials/v8.0.0/fishPond/step2/step2-content.md b/src/tutorials/v8.0.0/fishPond/step2/step2-content.md index db5eff33d..d322e54b1 100644 --- a/src/tutorials/v8.0.0/fishPond/step2/step2-content.md +++ b/src/tutorials/v8.0.0/fishPond/step2/step2-content.md @@ -40,6 +40,12 @@ background.x = app.screen.width / 2; background.y = app.screen.height / 2; ``` +Finally, we'll add our new background to the [Scene Graph](/8.x/guides/basics/scene-graph) of our application: + +```javascript +app.stage.addChild(background); +``` + We got a beautiful pond! Now let's proceed to add some fishes! diff --git a/src/tutorials/v8.0.0/fishPond/step4/step4-content.md b/src/tutorials/v8.0.0/fishPond/step4/step4-content.md index 99b9915fa..58b3b877d 100644 --- a/src/tutorials/v8.0.0/fishPond/step4/step4-content.md +++ b/src/tutorials/v8.0.0/fishPond/step4/step4-content.md @@ -7,24 +7,31 @@ At the point, the fishes look like they are floating on the rocks and pebbles. W Here we create a tiling sprite, supplying a texture and dimensions as an option object, and add it to the stage. ```javascript +// Create a water texture object. const texture = Texture.from('overlay'); +// Create a tiling sprite with the water texture and specify the dimensions. overlay = new TilingSprite({ texture, width: app.screen.width, height: app.screen.height, }); + +// Add the overlay to the stage. app.stage.addChild(overlay); ``` ## Animate Overlay -Similar to the previous step, we will now animate the water overlay using the application's ticker. The code has been modify to call both animation functions for the fish and this overlay so we only need to add the animation logic inside the `animateWaterOverlay` function. +Similar to the previous step, we will now animate the water overlay using the application's ticker. The code has been modified to call both animation functions for the fish and this overlay so we only need to add the animation logic inside the `animateWaterOverlay` function: ```javascript -elapsed += time.deltaTime; -overlay.tilePosition.x = elapsed * -1; -overlay.tilePosition.y = elapsed * -1; +// Extract the delta time from the Ticker object. +const delta = time.deltaTime; + +// Animate the overlay. +overlay.tilePosition.x -= delta; +overlay.tilePosition.y -= delta; ``` -Congratulations, we have now completed a beautiful pond! But we can take it a step further. Let's proceed to the final touch! \ No newline at end of file +Congratulations, we have now completed a beautiful pond! But we can take it a step further. Let's proceed to the final touch!