Tutorial

I want to make sure I’m not overwhelming new players with too much information or too many game mechanics at once. I’ve been thinking about ways to introduce new concepts slowly, over the course of several stages or lessons. I knew that one part of that was going to be tutorial popups that appear at different times and on different screens to explain new concepts or move the story along.

I wasn’t sure how these popups would work, though. I didn’t want to hard code a bunch of checks all over the place to show popups at just the right time. I knew it needed to be based on configuration somehow.

After some trial and error I have something working. I have some modal checker classes that take input parameters based on the current state (e.g. current screen, stage ID) and check a modal configuration file to see if there are any popup modals that need to be displayed. This modal checker is called whenever a new screen is initialized.

  getModalConfigByConditions(screen, stageId = null, won = false) {
    const potentialModals = this.getPotentialModals(screen);

    let modal = potentialModals.find((potential) => {
      return potential.checks.every(c => this.passesCheck(c, stageId, won, false));
    });

    // if no potentials match, check for default modal
    if (modal == null) {
      modal = potentialModals.find((potential) => {
        return potential.checks.every(c => this.passesCheck(c, stageId, won, true));
      });
    }

    return modal;
  }

So now when I want to show a new popup modal I just have to add it to the config file. It’s flexible enough for my current needs, and allows me to configure things like “show this modal when the player first sees the map screen”, or “show this modal when the player loses for the first time”, or “show this modal when the player has completed lesson ‘basic-nouns-1’”.