This is a documentation for Board Game Arena: play board games online !

Scrollmap

From Board Game Arena
Jump to navigation Jump to search

Scrollmap is a BGA client side component to display an infinite game area.

In some games, players are building the main game area with tiles or cards. Examples:

  • Carcassonne
  • Saboteur
  • Takenoko
  • Taluva
  • ...

Of course this cause an additional difficulty for the adaptation, because we have to display an infinite game area into a finite space on the screen. This is where Scrollmap component can help you.

Scrollmap in action

If you want to see how Scrollmap looks like, please try "Saboteur" or "Takenoko" games on BGA, or watch a game in progress.

In both games, you can see that there are arrow controls around the main game area, so that players can use them to scroll the view. You can also drag'n'drop the game area to scroll.

How to use Scrollmap

At first, don't forget to add "ebg/scrollmap" as a dependency:

define([
    "dojo","dojo/_base/declare",
    "ebg/core/gamegui",
    "ebg/counter",
    "ebg/scrollmap"     /// <==== HERE
],


Then, declare a new variable in your class for the Scrollmap object:

        constructor: function(){
        console.log('yourgame constructor');
              
        // Scrollable area        	
        this.scrollmap = new ebg.scrollmap();