Saving player progress with checkpoints with Phaser JS - Skate Platformer Game Devlog #12

Written in November 19, 2020 - 🕒 1 min. read

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(
  (objectA, objectB) => {

    // 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);

// always remove the key just in case

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!


Post a comment


No comments yet.