Introduction
In the game, the sand is randomly selected from all the available sand UDGs. We could do the same here too… but, instead in the disassembly, for the example graphic - I’ve just made a single screen width version of all the available UDGs in a line. So as this exists, let’s just use it as our base.
Build The Scene
I’ve separated these examples out into their own “scenes” but in the finished version it’ll use one single Game scene to bring everything together.
Things to note;
- As well as the “sea”, there are two further colour “bands”.
- The sand is a single character block, so the yellow “band” is just the bottom part of it.
Let’s see how this looks:
class Sand extends Phaser.Scene {
constructor() {
super();
// Simply because I've made the assets use scale 4 in the disassembly.
this.gameScale = 4;
}
preload() {
// Preload the sand asset.
this.load.image('sand', '/images/booty/sand.png');
}
create() {
// Create the colour bands.
// Add the "sea"!
this.add.rectangle(0, 8 * 8 * this.gameScale, config.width, 8 * 12 * this.gameScale, 0x0000C5).setOrigin(0, 0);
// Add the "sand" bottom area.
this.add.rectangle(0, config.height - 8 * 3 * this.gameScale, config.width, 8 * this.gameScale, 0xC5C700).setOrigin(0, 0);
// Add the extra cyan section at the very bottom of the screen.
this.add.rectangle(0, config.height - 8 * 2 * this.gameScale, config.width, 8 * 2 * this.gameScale, 0x07C6C6).setOrigin(0, 0);
// Create the sand image on the screen.
let sand = this.add.image(0, config.height - 8 * 4 * this.gameScale, 'sand').setOrigin(0, 0);
}
}Easy!
Animation
The sand moves in the opposite direction to the boats, this doesn’t affect the way we can achieve the scrolling though. We can still use a ghost, just the positioning is the opposite way round.
class Sand extends Phaser.Scene {
constructor() {
super();
// Simply because I've made the assets use scale 4 in the disassembly.
this.gameScale = 4;
}
preload() {
// Preload the sand asset.
this.load.image('sand', '/images/booty/sand.png');
}
create() {
// Create the colour bands.
// Add the "sea"!
this.add.rectangle(0, 8 * 8 * this.gameScale, config.width, 8 * 12 * this.gameScale, 0x0000C5).setOrigin(0, 0);
// Add the "sand" bottom area.
this.add.rectangle(0, config.height - 8 * 3 * this.gameScale, config.width, 8 * this.gameScale, 0xC5C700).setOrigin(0, 0);
// Add the extra cyan section at the very bottom of the screen.
this.add.rectangle(0, config.height - 8 * 2 * this.gameScale, config.width, 8 * 2 * this.gameScale, 0x07C6C6).setOrigin(0, 0);
// Store widths of the background items.
this.sandWidth = this.textures.get('sand').getSourceImage().width;
// Create the sand image on the screen.
let sand1 = this.add.image(0, config.height - 8 * 4 * this.gameScale, 'sand').setOrigin(0, 0);
// And add the off-screen "ghost".
let sand2 = this.add.image(-this.sandWidth, config.height - 8 * 4 * this.gameScale, 'sand').setOrigin(0, 0);
// Store the sand images in an array.
this.sands = [sand1, sand2];
}
update() {
// Animate the sand.
this.sands.forEach((sand, index) => {
// Set the velocity.
sand.x += 1;
// Wrap around logic.
if (sand.x >= config.width) {
sand.x = -this.sandWidth;
}
});
}
}Again, as with the boats, we store the two sand images in an array and added a
very similar loop to the update() method.
When each sand image is completely off-screen on the right-hand side
sand.x >= config.width (the currently processed sand X position is more than
or equal to the width of one screen) we just change the X position to be
off-screen on the left by one screen width. Again as with the boats, if the
off-screen section was viewable then the sand would just appear out of nowhere
but it is off-screen, so no-one can see it.
The effect is seamless, like the sand just scrolls on forever.
