Create an HTML5 level selection screen using a scrollable map like in “Hero Emblems” game using Phaser

Are you playing Hero Emblems these days?

It’s a nice Match-3 game with RPG elements, but what I really liked – which can also be found in other games like King’s “<random cute name> saga” – is the way you can move around the map and select levels.

“It’s only a draggable image”, you can say. Wrong. If it was only a draggable image, you wouldn’t be able to click on a town AND drag the map, because once you click (or release, according to the listener you are using) a town, you would enter in that town.

The map is made in a way if you press a town and drag, you won’t enter that town. Useful if you don’t want the player to find a “safe” spot on the map, far from towns, to drag the map without accidentally entering a town.

Just like in this prototype I made, which you can play on your mobile device from this link.

The script has been build to work with any map size in any screen size, as long as the map is bigger than the screen.

Have a look at the source code:

Now you can create your level selection map in your games. If you prefer the classic level selection, check HTML5 Phaser Tutorial: how to create a level selection screen with locked levels and stars. Also, here’s the source code for you.

PS: I am quite happy with the response of my HTML5 Globez source code published last monday. Thank you.

  • Lord_Garfield

    Hi,

    You are the king of Phaser. I realy like your tutorials.
    But this one has a bug. For some reason sometimes you click on the map. you can start drag. But when you release the map is still in drag mode. And there is no way to stop it exept for refreshing the browser.

    Any idee?

    Kind regards.

    • Shane

      Perhaps adding

      game.input.reset();

      to the stopMap() function will do the trick.

      • Marvin

        Awesome tutorial!
        The reason why it is a little bit buggy is, because you are missing the second parameter of the

        game.input.onDown.remove(fingerOnMap);
        game.input.onUp.add(stopMap);

        function. Passing the game object as the second parameter did the job for me. So

        game.input.onDown.remove(fingerOnMap, this);
        game.input.onUp.add(stopMap, this);

        • caiser

          Hi Marvin,

          I added this in remove and add but it is not working.

          any idea ?

  • I think I have solved it!
    The drag release problem stems from this line:
    game.input.deleteMoveCallback(moveIndex);

    moveIndex is the input.addMoveCallback function, that’s not what we want to remove.

    Change the line to:
    game.input.deleteMoveCallback(dragMap,this)

    I refactored the code for use in a multi-state app, here’s the gist, working on Phaser 2.4.4
    https://gist.github.com/drwicked/3b552996a798e0c917e9

  • Fabio Monte

    Dear Emanuele

    I was looking to build a website with a scrollable map of Lisbon and the links will be spread out on the map of the city but how do i go on about it?

    The red dots only show the alert window. How do i replace this alert with different links for each icon on the map?

  • Arun Kumar Sahoo

    Thanks for providing this type of tutorial. Really it inspire me to develop quality games