Skip to content

Commit

Permalink
fix: Resolve discrepencies within the FishPond tutorial (see #116) (#134
Browse files Browse the repository at this point in the history
)
  • Loading branch information
momer authored Nov 25, 2024
1 parent d97f3ad commit 7ccab5f
Show file tree
Hide file tree
Showing 2 changed files with 18 additions and 5 deletions.
6 changes: 6 additions & 0 deletions src/tutorials/v8.0.0/fishPond/step2/step2-content.md
Original file line number Diff line number Diff line change
Expand Up @@ -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!


17 changes: 12 additions & 5 deletions src/tutorials/v8.0.0/fishPond/step4/step4-content.md
Original file line number Diff line number Diff line change
Expand Up @@ -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!
Congratulations, we have now completed a beautiful pond! But we can take it a step further. Let's proceed to the final touch!

0 comments on commit 7ccab5f

Please sign in to comment.