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

Scrollmap: Difference between revisions

From Board Game Arena
Jump to navigation Jump to search
(Created page with "Scrollmap is a BGA client side component to display an infinite game area. In many games, players are building the main game area with tiles or cards. Examples: * Carcassonne...")
 
No edit summary
Line 1: Line 1:
Scrollmap is a BGA client side component to display an infinite game area.
Scrollmap is a BGA client side component to display an infinite game area.


In many games, players are building the main game area with tiles or cards. Examples:
In some games, players are building the main game area with tiles or cards. Examples:
* Carcassonne
* Carcassonne
* Saboteur
* Saboteur
Line 8: Line 8:
* ...
* ...


For tiles placement games when player are building , the board can be "infinite"
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:
<pre>
define([
    "dojo","dojo/_base/declare",
    "ebg/core/gamegui",
    "ebg/counter",
    "ebg/scrollmap"     /// <==== HERE
],
</pre>
 
 
Then, declare a new variable in your class for the Scrollmap object:
 
<pre>
        constructor: function(){
        console.log('yourgame constructor');
             
        // Scrollable area       
        this.scrollmap = new ebg.scrollmap();
</pre>

Revision as of 13:35, 8 April 2013

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