Hey guys! In today’s video, I will show you how I created a checkpoint for the hero in my game in a very easy way.

So this is done pretty much in two easy steps, first I set overlap between the hero and my checkpoint object, and inside the callback function, I save the current hero position to be used later on.

const checkpoint = new Checkpoint();
const overlap = this.physics.add.overlap(
  this.player,
  checkpoint,
  (objectA, objectB) => {
    checkpoint.setAnimation('save');
    overlap?.destroy();

    // save it to the browser local storage
    localStorage.setItem('hero_checkpoint', JSON.stringify({
      x: hero.x,
      y: hero.y,
    }));
});

And at the end of my create function from my scene, I set the hero to the new saved position from before.

const heroCheckpoint = localStorage.getItem('hero_checkpoint');
if (heroCheckpoint) {
    const position = JSON.parse(heroCheckpoint);
    this.player.setX(position.x);
    this.player.setY(position.y);
}

// always remove the key just in case
localStorage.removeItem('hero_checkpoint');

And that’s it. Super simple, right? Sorry for the short devlog this week, but I had a tiny hand injure as mentioned in the video, which made it impossible for me to code for a few days.

This week the new Hyrule Warriors is out, so I can’t promise I will be making any new devlogs too 😬 but I will try!