Contact us

2013-12-18T21:14:23Z

Een: Reverted edits by Januszk0 (talk) to last revision by Sourisdudesert

'''Board Game Arena''' is located in France.

== Contact e-mail ==

contact(at)boardgamearena.com

We receive '''a lot''' of e-mails. Please do not send us an e-mail in any of these two cases:

* If you want to report a bug, please do it in the [http://boardgamearena.com/#!bugs bug reporting system]
* If you want to report a player for violation of BGA policy, use the "report this player" button on his/her profile.

== Postal address ==

G. Isabelli

19 bd république

92 260 Fontenay-aux-Roses

FRANCE

+33 6 17 25 80 34

BGA Game licences

2013-10-01T20:56:18Z

Een: moved BGA Game licences to BGA Game licenses: typo

#REDIRECT [[BGA Game licenses]]

BGA Game licenses

2013-10-01T20:56:18Z

Een: moved BGA Game licences to BGA Game licenses: typo

== What is a "license" exactly? ==

Almost all games on the Board Game Arena platform are adaptations of existing commercial "real" board games. In order to host an adaptation of one of these board games on a website, the copyright owners must first grant a license/authorisation to this website.

== Are all games on BGA licensed by their respective copyright owners? ==

Yes, for all games that are not in the public domain, BGA has been granted an authorisation to create and host an online version.

== Where can I find a list of games for which a license has already been granted? ==

[http://en.studio.boardgamearena.com/#!page/availablelicences Check the list of available licenses]

(NB: this page is restricted to developers registered in BGA studio. You'll need to enter your BGA studio credentials to access it)

== What if I start developing a game that is not on the "Available licences" list? ==

We allow developers to start any project in the Studio. But when you submit your project to go live on BGA, it will be rejected during the review process if BGA doesn't hold a proper license for the game.

Exception: games in the public domain are of course not concerned.

== Wow, I WANT to develop a game on this list! ==

Great! :)

But before creating a new project, please takes some seconds to check that someone is not already developing this game. If it is the case, maybe you can propose to join the project?

[http://en.studio.boardgamearena.com/#!projects Check the list of current projects]

== What needs to be done to add a game on this list? ==

The copyright owners have to give an license/authorisation to BGA.

Publishers do not have to pay anything to BGA for this, they just need to give their "go". Most of the time, publishers want to have a formal agreement and we sign a contract with them.

'''Important''': you CAN'T take the initiative to ask a license authorization on behalf of BGA, because the authorisation has to be granted to BGA (read more below).

== Why aren't all the best-selling games that I love on that list? ==

As you can imagine, the more popular a game is, the most difficult it can be to get an agreement to host this game on BGA.

So if you are thinking about a very popular game that is not on this list, the reason is most likely "we asked but it was not possible" and not "we didn't think of it".

We are really happy to have been able to build a very nice platform that managed to convince some of the most prestigious publishers to host their games here, but of course we can't convince -everyone-.

== I want to make my prototype/unpublished game available on BGA ==

This is possible, BUT most of the time, we consider this is a bad idea for the following reasons:
* if your game has not been published yet, there is certainly a good reason - most of the time there is still some more work to do on the game itself. Publishing a game on BGA that is not 100% finalized won't help you to finalize it.
* as a rule of thumb, popular board games on BGA are games that are popular in the real world. As a consequence prototypes most likely won't get a big audience on BGA.
* we also advise you against developing your own game: games adaptation are better when there is a designer whose focus is on the gameplay and a developer whose focus is on the implementation.

So you definitely can develop your prototype/unpublished game on BGA, but we encourage you to think twice about it and do it only if you are in one/several of the situations below:
* the game is going to be published in the near future
* the game design process is really 100% done: the game is ready to be published in its current shape (ex: self-publishing game, game in a crowdfunding process...)
* you want to test your game with a big number of players to fine-tune some minor things ("balance" of the game).

== What if I really want to develop a particular game that is NOT on the list below? ==

This is the most frequently asked question, so for a detailed answer please follow the white rabbit down these numbered instructions:

=== 0: ===

In any case: please, do not contact publishers without asking us before. Just put yourself in the shoes of a game publisher who just published a popular game: what would you think if you received 40 emails from 40 developers speaking about some "BGA platform" and wanting to build an adaptation on it?

Proceed to 1.

=== 1: ===

First, you should determine who is the owner of the digital rights of the game. Most of the time, this is the original publisher of the game. The original publisher is not always easy to find, because very often board games are translated and published in different countries by a local publisher.

To find the original publisher:
* check in which country the game has been published first (ex: If it's in Poland, the original publisher is probably Polish).
* check the copyright notice at the end of the rules, where the original publisher is mentioned almost every time.
* very often, if two publishers are mentioned on a gamebox, the well-known publisher is the local publisher from your country and the other one is the original publisher.

Special case: if the game is themed with a prestigious licence (Star Wars, Lord of the Rings, some TV show, some well known novel...), you can stop here immediately: contracts between game publishers and prestigious licenses owners are very restrictive, and there is 99% chance that an online adaptation on BGA would be impossible to manage.

Continue to 2.

=== 2: ===

Read the list of publishers from the "available licenses" page to check if BGA is already working with this publisher.

If YES, proceed to 3.
If NO, jump to 4.

However, if the publisher is listed as "not working with BGA", you can stop here immediately. It happens that some publishers are not convinced or interested by online boardgaming and it is their right to think so. The BGA team regularly meets new publishers during board games events to show them the platform, so we're working on this but -again- we cannot convince everyone.

=== 3: ===

Is there already in the list a game licensed by this publisher that is available to be developed or under development?

If YES: as a rule of thumb, we do not ask more than one game to a publisher at a time. When we ask a license for a game, the publisher naturally expects that this game will be developed and published online. So we develop and publish a game before asking for another.
If you really want to develop another game from this particular publisher, the best option for you is to help develop the game that is currently licensed and then ask us to request the game you'd like to develop.

If NO: just ask us which game you want to develop and we will be happy to ask the publisher for his authorisation.

=== 4: ===

We have never worked with this publisher before.

If you have already developed a game on BGA, we will be happy to contact the publisher to ask for an authorisation :)

If this is your first game on BGA, we advise you to start with a game already on the list. Why? Because unfortunately, some developers ask us to request a license, and then don't finish the development. When we ask for a license, we are more comfortable if you have already shown your ability to realise an adaptation.

Special case: if you know the publisher PERSONALLY, or have some contact there, please tell us so we can help you setup a contract allowing us to host a game adaptation on BGA.

2013-05-10T19:54:03Z

Een: /* On client side (Javascript) */

Using BGA Studio, the game you create is ready to be translated to each language by the BGA community. To make this possible, you only need to specify which string must be translated and how to combine them.

== How translation works? ==

When developing your game, all strings must be in English. Strings must be coherent with the English version of the game.

Before the release of the game, BGA team will do the French translation of the game.

After the release of the game, the BGA players community will translate the game in every language.

== What should be translated? ==

Every text that can be visible by the player when the game is running normally. This includes tooltips, texts on cards, error messages, ...

This does NOT include error messages that are not supposed to happened (unexpected errors).

== Focus on translating notifications ==

Usually, translating a website is simple: you just call a function on every string you have to translate, and the string is translated in the player's language. On Board Game Arena, this is exactly the same with the "_( string )" function.

However, there is one difference on BGA: notifications. The server is sending notifications to players, and most of the time the notifications are the same for every players, no matter what language each player is using. This is why notifications are translated on client side in the proper language, even if the strings are defined on server side.

== WARNING: how to make sure your strings will be translated ==

For each game, our translation tool is doing a full scan of the code, looking for translator markers like "_()" or "clientranslate()"... (see below the list of translation markers).

If your original string is not "physically" inside one of this marker, it won't be translated.

<pre>
// Examples: the following strings will be translated:
var mystring_translated = _("my string"); // JS
$mystring_translated = self::_("my string"); // PHP
$mystring_translated = sprintf( _("my string with an %s argument"), $argument ); // PHP

// Examples: the following strings WILL NOT be translated:
$my_string = "my string";
$not_translated = self::_( $my_string ); // The original string is not bordered by a translator marker => no translation
$not_translated = self::_( sprintf( "my string with a %s argument", $argument ) ); // Same thing
</pre>

== How to not make translators crazy ;) ==

* When you need the same string twice, try to reuse exactly the same string (with the same case) to minimize the number of strings.
* Do not mark as translatable a game element that does not have to be translated (ex: if the name of a monster on a card is "Zzzzz", maybe there's no need to translate it).
* Words does not come in the same order in each language. Thus, when you have to translate a string with an argument, do not write something like:
<pre>_("First part of the string, ").$argument.' '._("second part of the string")</pre>
Write instead:
<pre>sprintf( _("First part of the string, %s second part of the string"), $argument )</pre>
(or the equivalent "dojo.string.substitute" in Javascript)
* When translators are going to translate your game, the most difficult task for them is to get the context of the string to be translated. The more the string is a short insignificant string, the more difficult is the task for them. As a rule of thumb, try to avoid insignificant short strings.
* The BGA translation policy is to be flexible on grammar... We prefer to write "player gets 1 coin(s)" than write two versions of the same string for plural and singular - it reduces the number of strings to translate.
* Instead of writing nice strings like "With the effect of ZZZ, player XXX gets a new YYY", which is very difficult to translate, write strings like "ZZZ: XXX gets YYY".

== On client side (Javascript) ==

On client side, things are quite simple: you just have to use the "_()" function for all strings you want to translate.

Examples:
<pre>
// Get a string in player's language:
var translated = _("original english string");

// Get a string in player's language with parameter:
var translated = dojo.string.substitute( "You can pick ${p} cards and discard ${d}", {
p: 2,
d: 4
} );
</pre>

'''WARNING:''' in Javascript strings to translate, you should never use '\n', '\t' or such, as it will break the translation bundle and result in all the Javascript translation to fail. In any case, the strings will result in HTML code, and such character codes won't have any impact on the HTML rendering. You should use HTML markup instead.

== On server side (PHP) ==

On PHP side, you can use 3 different functions to specify that a string must be translated.

'''clienttranslate( "my string to translate" ):'''

This function is '''transparent''': it will return the original English string without any change. It's only purpose is to mark this string as "must be translated", and to make sure the translated version of the string will be available on client side.

In general, you use clienttranslate:
* On your states.inc.php, for field "description" and "descriptionmyturn".

<pre>
"description" => clienttranslate('${card_name}: ${actplayer} must discard 4 identical energies'),
</pre>

* On "material.inc.php", when defining texts for game material that must be displayed on client side.
<pre>
$this->card_types = array(

1 => array(
'name' => clienttranslate("Amulet of Air"), // Thus, we can use "_( card_name )" on Javascript side.
</pre>

* When sending a notification with "notifyAllPlayers" or "notifyPlayer", for the game log string and all game log arguments that need a translation.

<pre>
// A game log string with no argument:
self::notifyAllPlayers( 'pickLibraryCards', clienttranslate("Everyone draw cards from his library"), array() );
</pre>

Translating arguments is a little bit more complex. It is using the "i18n" special argument as below:

<pre>
// In the following example, we translate the game log itself, but also the "card_name" argument:

self::notifyAllPlayers( 'winPoints', clienttranslate('${card_name}: ${player_name} gains ${points} point(s)'), array(
'i18n' => array( 'card_name' ), // <===== We specify here that "card_name" argument must be transate
'player_id' => $player_id,
'player_name' => self::getActivePlayerName(),
'points' => $points,
'card_name' => $this->card_types[8]['name'] // <==== Here, we provide original English string.
) );
</pre>

'''self::_( "my string to translate" ):'''

This function returns a string translated in the language of CURRENT user (ie: player who send the request to the server) (be careful, this is NOT the active player).

Most of the time, you don't need to translate strings on server side, except on the following 3 situations:
* When throwing an exception because the player did a forbidden move.

<pre>
// This will display a translatable red message to the player that just do some wrong action:
throw new feException( self::_('You must choose 3 cards'), true);

// ... notice the use of "true" parameter that signal that this exception is "expected". In theory, all exception that are excepted should be translated.
</pre>

* In "yourgame.view.php", when creating the labels for the game interface used in your template (.tpl) file.

<pre>
$this->tpl['CARDS_FOR_YEAR_2'] = self::_("Your cards for year II");
</pre>

* Eventually, in your material.inc.php, if for example you need to use some string elements in your exceptions.

<pre>
// In material.inc.php, $this->energies[n]['nametr'] has been created with the self::_() method. This we can do this:
throw new feException( self::_("To execute this action you need more: ").' '.$this->energies[$resource_id]['nametr'], true );
</pre>

* Eventually, in your "getAllDatas" PHP method, as the data return by this method is used only by current user.

'''totranslate( "my string to translate" ):'''

This function works exactly like 'clienttranslate', except it tells BGA that the string is not needed on client side.

You should not use this function, except on the following cases:
* Statistics name in stats.inc.php
* Option names and option values name in gameoptions.inc.php

Scrollmap

2013-04-26T13:57:14Z

Een: /* Enable scrollmap zone extension */

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:
<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>

Now, open your template (TPL) file and add this HTML code:

<pre>
<div id="map_container">
<div id="map_scrollable"></div>
<div id="map_surface"></div>
<div id="map_scrollable_oversurface"></div>
<a id="movetop" href="#"></a>
<a id="moveleft" href="#"></a>
<a id="moveright" href="#"></a>
<a id="movedown" href="#"></a>
</div>
</pre>

There are also some lines to add to your CSS stylesheet. Please note that you can adapt it to your needs, especially the default width of the scrollable area:
<pre>
/** Scrollable area **/

#map_container {
position: relative;
width: 100%;
height: 400px;
overflow: hidden;
}
#map_scrollable, #map_scrollable_oversurface {
position: absolute;
top: 205px;
left: 315px;
}
#map_surface {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
cursor: move;
}
#map_footer {
text-align: center;
}

</pre>

Finally, to link your HTML code with your Javascript, place this in your Javascript "Setup" method:

<pre>
// Make map scrollable
this.scrollmap.create( $('map_container'),$('map_scrollable'),$('map_surface'),$('map_scrollable_oversurface') );
this.scrollmap.setupOnScreenArrows( 150 );

</pre>

This is it! Now, you should see on your game interface a scrollable game area. This is not really impressive though, because you didn't add anything on the game area yet. This is the next step.

== Scrollable area layers ==

There are 2 - and only 2 - places where you should place your HTML stuff in your scrollable area:
* inside "map_scrollable" div
* inside "map_scrollable_oversurface" div

The difference is very important: "map_scrollable" is beneath the surface that is used to drag'n'drop the game area, and "map_scrollable_oversurface" is above this surface. In practice:
* If some element on the game area need to be clicked (or any kind of user interaction), you should place it in map_scrollable_oversurface, otherwise no click can reach it.
* If some element on the game area don't need to be clicked, you'd better place it in "map_scrollable", so it is possible to drag'n'drop the game area from a point on this element.

Of course, all layers are scrolled synchronously.

Tips: in some situation, it's also useful to place a game element on map_scrollable and a corresponding invisible element over the surface to manage the interactions. Example: when an interactive element must be placed beneath a non interactive element for display reason.

== Positioning elements on game area ==

All elements on the game are must be absolute positioned (with "top" and "left" attributes).

By default, the game area is centered on 0,0 coordinates.

== Enable move arrows ==

To show move arrows icons around the scrollmap in order to enable click based navigation in addition to drag and drop, add these lines to your CSS:

<pre>
/** Move arrows **/

#movetop,#moveleft,#moveright,#movedown {
display: block;
position: absolute;
background-image: url('../../img/common/arrows.png');
width: 32px;
height: 32px;
}

#movetop {
top: 0px;
left: 50%;
background-position: 0px 32px;
}
#moveleft {
top: 50%;
left: 0px;
background-position: 32px 0px;
}
#moveright {
top: 50%;
right: 0px;
background-position: 0px 0px;
}
#movedown {
bottom: 0px;
left: 50%;
background-position: 32px 32px;
}
</pre>

In your javascript, define the following functions:

<pre>
onMoveTop : function( evt )
{
console.log( "onMoveTop" );
evt.preventDefault();
this.scrollmap.scroll( 0, 300 );
},
onMoveLeft : function( evt )
{
console.log( "onMoveLeft" );
evt.preventDefault();
this.scrollmap.scroll( 300, 0 );
},
onMoveRight : function( evt )
{
console.log( "onMoveRight" );
evt.preventDefault();
this.scrollmap.scroll( -300, 0 );
},
onMoveDown : function( evt )
{
console.log( "onMoveDown" );
evt.preventDefault();
this.scrollmap.scroll( 0, -300 );
},
</pre>

And connect onclick events on the arrows to these functions in your javascript setup

<pre>
dojo.connect( $('movetop'), 'onclick', this, 'onMoveTop' );
dojo.connect( $('moveleft'), 'onclick', this, 'onMoveLeft' );
dojo.connect( $('moveright'), 'onclick', this, 'onMoveRight' );
dojo.connect( $('movedown'), 'onclick', this, 'onMoveDown' );
</pre>

== Enable scrollmap zone extension ==

This is optional, when there can be unused screen space under the scrollmap that a player might want to use.
Add this in your .tpl after the scrollmap div (the matching css rules has already been defined):

<pre>
<div id="map_footer" class="whiteblock">
<a href="#" id="enlargedisplay">↓  {LABEL_ENLARGE_DISPLAY}  ↓</a>
</div>
</pre>

In your javascript, define the following function:

<pre>
onIncreaseDisplayHeight: function( evt )
{
console.log( '$$$$ Event : onIncreaseDisplayHeight' );
evt.preventDefault();

var cur_h = toint( dojo.style( $('map_container'), 'height' ) );
dojo.style( $('map_container'), 'height', ( cur_h+300 ) + 'px' );
},
</pre>

and connect them to the 'enlargedisplay' link in your setup:

<pre>
dojo.connect( $('enlargedisplay'), 'onclick', this, 'onIncreaseDisplayHeight' );
</pre>

In your view.php file, define the template variable LABEL_ENLARGE_DISPLAY so that it gets substituted with appropriate translatable text:

<pre>
$this->tpl['LABEL_ENLARGE_DISPLAY'] = self::_("Enlarge display");
</pre>

Scrollmap

2013-04-26T13:53:16Z

Een:

Studio FAQ

2013-04-25T20:03:11Z

Een: /* Should I use images free from copyright? */

This is a place where we will collect and answer frequently asked questions.

== What should I use to access the files through SFTP? ==

There is a lot of tools to do that. Use the one you are the most comfortable with.

On Linux Gnome, you can for example use the 'Connect to server' function of the Nautilus file management system, or use sshfs.

On Windows, there is for example the [http://winscp.net/ WinSCP client].

== I can't edit the files in my game directory, it looks like they are readonly. What's happening? ==

Maybe there is a maintenance operation underway.

If you don't get access back after some time (say one or two hours), please send us a mail to check.

== I can't access the Studio back-office, I get a 'Not authorized' error message? ==

You should first connect to the Studio website (with any of your <developer name><number> accounts). As the authentication is shared with the back-office, then you will be able to access it.

== I don't know the name to use to commit my game, what name should I use? ==

The game name for committing is the name of the game in lower case and without spaces or special characters (ex: puertorico).
It is the same name as the name used for the game folder in your SFTP access.

== What is the working language on BGA studio? ==

Working language is '''English'''.

Variables and functions must be named with English words.

Comments must be written in English.

Game interface strings and game logs must be written in English.

== How can I provide translation in my language? ==

BGA administrators will translate the game in French before the game release.

After the game release, the collaborative translation interface can be used to translate into other languages.

Check [[Translations]] to see how to make your game translatable.

== I updated the images in the 'img' folder of my game, but they don't show? ==

On BGA Studio, there is the gameserver you are developing on, and the main site server that is used to launch the games. The game icon, box and the publisher logo are hosted on the main site server, so they are not immediately available when you modify them on the gameserver. To deploy them on the main site, you have to use the [[Studio back-office]] to do a commit.

If the images still don't show after that, please try emptying your browser cache and reloading the page.

== I added some game options / some game statistics, but they don't show? ==

An extra deployment action from the BGA administrators is needed to activate new game options and statistics. Please contact us.

== Should I use images free from copyright? ==

If you are developing a game in the public domain, yes (or you can make your own if you feel it's better).

If you are developing a game for which we have a licence, we will usually provide art files from the publisher.

Studio FAQ

2013-04-25T20:01:50Z

Een:

This is a place where we will collect and answer frequently asked questions.

== What should I use to access the files through SFTP? ==

There is a lot of tools to do that. Use the one you are the most comfortable with.

On Linux Gnome, you can for example use the 'Connect to server' function of the Nautilus file management system, or use sshfs.

On Windows, there is for example the [http://winscp.net/ WinSCP client].

== I can't edit the files in my game directory, it looks like they are readonly. What's happening? ==

Maybe there is a maintenance operation underway.

If you don't get access back after some time (say one or two hours), please send us a mail to check.

== I can't access the Studio back-office, I get a 'Not authorized' error message? ==

You should first connect to the Studio website (with any of your <developer name><number> accounts). As the authentication is shared with the back-office, then you will be able to access it.

== I don't know the name to use to commit my game, what name should I use? ==

The game name for committing is the name of the game in lower case and without spaces or special characters (ex: puertorico).
It is the same name as the name used for the game folder in your SFTP access.

== What is the working language on BGA studio? ==

Working language is '''English'''.

Variables and functions must be named with English words.

Comments must be written in English.

Game interface strings and game logs must be written in English.

== How can I provide translation in my language? ==

BGA administrators will translate the game in French before the game release.

After the game release, the collaborative translation interface can be used to translate into other languages.

Check [[Translations]] to see how to make your game translatable.

== I updated the images in the 'img' folder of my game, but they don't show? ==

On BGA Studio, there is the gameserver you are developing on, and the main site server that is used to launch the games. The game icon, box and the publisher logo are hosted on the main site server, so they are not immediately available when you modify them on the gameserver. To deploy them on the main site, you have to use the [[Studio back-office]] to do a commit.

If the images still don't show after that, please try emptying your browser cache and reloading the page.

== I added some game options / some game statistics, but they don't show? ==

An extra deployment action from the BGA administrators is needed to activate new game options and statistics. Please contact us.

== Should I use images free from copyright? ==

If you are developing a game in the public domain, yes (or you can make your own if you feel it's better).
If you are developing a game for which we have a licence, we will usually provide art files from the publisher.

How to join BGA developer team?

2013-04-24T20:19:05Z

Een: ²

'''--- Notice ---'''
We have received a lot of positive feedback on the Studio, and lots of developers have registered.
We are very happy about it, but it comes with a cost in time spent answering emails and posts on the forum.
So please bear with us if we are slow to answer. As soon as we can, we will.
Thanks again for your interest!

Registering is done by e-mail at '''studio(at)boardgamearena.com'''.

Please provide the following information:
* your player user name on BGA
* your developer user name to be used on “BGA Studio” (for technical reasons, no space, number or special character);
* your real name;
* your e-mail address;
* your postal address.

We also drafted a quick [http://en.doc.boardgamearena.com/images/0/02/BGA_TC_Dev_en.pdf ''''terms & conditions' document''']. It's very light, so as to get to the fun part faster.

To be valid, the registration e-mail must contain this document as an attachment, with the following sentence in the mail body: ''''I agree with the terms & conditions for developers on BGA Studio joined as an attachment''''.

And of course, we also encourage you to tell us about your developer experience and which games you would love to develop on BGA!

== Ok, I registered, what do I get? ==

First, we'll discuss by e-mail the names of some of the games we have an agreement to develop, so that you can tell us 'Hey, this game is great! I want to develop it!' (please keep these names confidential, or it would ruin our tradition to make players guess the name of the next game on the forum)

Second, once we have discussed together and are set on a game you'll take charge of, we'll create your studio account and you will get:
* one login / password to access files through SFTP
* ten logins with numeric suffixes from 0 to 9 and a common simple password to test games on the studio website while developing.

Once logged in to your SFTP root folder, you will find:
* a ''''resources.html'''' file with the URLs to use and some extra connection information
* three folders containing the three simple games provided as examples
* a folder for the game you will be developing initialized after our 'EmptyGame' template, providing the game structure (and comments! and examples!)

Then... well that's all, you can start! See [[Studio#Great.2C_I.27m_in.21_..._How_should_I_start.3F|Great, I'm in! ... How should I start?]]

Zone

2013-04-20T17:42:40Z

Een:

The Zone component is meant to organise items of the same type inside a predefined space.

== Zone in action ==

If you want to see how Zone works, please try "Can't Stop" or "Niagara" on BGA, or watch a game in progress or game replay.

In Can't Stop, zone is used to display the bhikkus ascending the mountain when there is more than one on the same space (diagonal mode).

In Niagara, it is used to display the canoes over the circles going down the river (custom mode).

== How to use Zone ==

At first, don't forget to add "ebg/zone" as a dependency:
<pre>
define([
"dojo","dojo/_base/declare",
"ebg/core/gamegui",
"ebg/counter",
"ebg/zone" /// <==== HERE
],
</pre>

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

<pre>
constructor: function(){
console.log('yourgame constructor');

// Zone control
this.myZone = new ebg.scrollmap();
</pre>

Now, in your template file, you must add a div that will host this zone:

<pre>
<div id="my_zone"></div>
</pre>

And set its width (and optionnaly, height and position) in CSS:

<pre>

#my_zone {
width: 100px;
}

</pre>

Then in your Javascript setup, attach your Zone component to the div and define its properties :

<pre>
zone.create( this, 'my_zone', <item_width>, <item_height> );
zone.setPattern( <mode> );
</pre>

* <item_width> is an integer for the width of the objects you want to organise in the zone
* <item_height> is an integer for the height of the objects you want to organise in the zone
* <mode> is one of 'grid' (objects will be put on lines from top left to bottom right, wrapping when there is not enough space left on the line) 'diagonal' (objects will be organised on a top left to bottom right diagonal, overlapping each other) or 'custom' (objects will be organised depending upon their number and the coordinates that you provide - see below)

Now your zone is ready to be used!

After creating an object that you want to add to the zone as a classic HTML template (dojo.place / this.format_block), you can simply use:

<pre>
zone.placeInZone( <object_id>, <weight> );
</pre>

* <object_id> is the string identifier for your object 'my_object_id'
* <weight> is an optional parameter used to sort items

To remove an item, use:

<pre>
zone.removeFromZone( <object_id>, <destroy?>, <to> );
</pre>

* <object_id> is the string identifier for your object 'my_object_id'
* <destroy?> is a boolean indicating if the object should be destroyed after being removed
* <to> is the destination the object must be slided to when being removed (before being eventually destroyed)

You can also:
* remove all items from the zone (and destroy them) using zone.removeAll();
* get the number of items in your zone using zone.getItemNumber();
* get an array of the ids of all the items using zone.getAllItems();

== Custom mode ==

If you want complete control on how your objects are laid out inside the Zone, you can determine their coordinates after their number when being added to the zone. Here is how to do it, when defining your Zone properties in the javascript setup:

<pre>
this.zone.setPattern( 'custom' );

this.zone.itemIdToCoords = function( i, control_width ) {
if( i%8==0 )
{ return { x:1,y:19, w:60, h:30 }; }
else if( i%8==1 )
{ return { x:30,y:38, w:60, h:30 }; }
else if( i%8==2 )
{ return { x:42,y:8, w:60, h:30 }; }
else if( i%8==3 )
{ return { x:5,y:58, w:60, h:30 }; }
else if( i%8==4 )
{ return { x:5,y:24, w:60, h:30 }; }
else if( i%8==5 )
{ return { x:35,y:43, w:60, h:30 }; }
else if( i%8==6 )
{ return { x:47,y:13, w:60, h:30 }; }
else if( i%8==7 )
{ return { x:10,y:63, w:60, h:30 }; }
};
</pre>

Zone

2013-04-20T17:38:13Z

Een:

Zone

2013-04-20T17:16:41Z

Een: Created page with "The Zone component is meant to organise items of the same type inside a predefined space. == Zone in action == If you want to see how Zone works, please try "Can't Stop" or ..."

Scrollmap

2013-04-20T16:23:55Z

Een:

Scrollmap

2013-04-20T16:13:01Z

Een:

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:
<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>

Now, open your template (TPL) file and add this HTML code:

<pre>
<div id="map_container">
<div id="map_scrollable"></div>
<div id="map_surface"></div>
<div id="map_scrollable_oversurface"></div>
<a id="movetop" href="#"></a>
<a id="moveleft" href="#"></a>
<a id="moveright" href="#"></a>
<a id="movedown" href="#"></a>
</div>
</pre>

There are also some lines to add to your CSS stylesheet. Please note that you can adapt it to your needs, especially the default width of the scrollable area:
<pre>
/** Scrollable area **/

#map_container {
position: relative;
width: 100%;
height: 400px;
overflow: hidden;
}
#map_scrollable, #map_scrollable_oversurface {
position: absolute;
top: 205px;
left: 315px;
}
#map_surface {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
cursor: move;
}
#map_footer {
text-align: center;
}

</pre>

Finally, to link your HTML code with your Javascript, place this in your Javascript "Setup" method:

<pre>
// Make map scrollable
this.scrollmap.create( $('map_container'),$('map_scrollable'),$('map_surface'),$('map_scrollable_oversurface') );
this.scrollmap.setupOnScreenArrows( 150 );

</pre>

This is it! Now, you should see on your game interface a scrollable game area. This is not really impressive though, because you didn't add anything on the game area yet. This is the next step.

== Scrollable area layers ==

There are 2 - and only 2 - places where you should place your HTML stuff in your scrollable area:
* inside "map_scrollable" div
* inside "map_scrollable_oversurface" div

The difference is very important: "map_scrollable" is beneath the surface that is used to drag'n'drop the game area, and "map_scrollable_oversurface" is above this surface. In practice:
* If some element on the game area need to be clicked (or any kind of user interaction), you should place it in map_scrollable_oversurface, otherwise no click can reach it.
* If some element on the game area don't need to be clicked, you'd better place it in "map_scrollable", so it is possible to drag'n'drop the game area from a point on this element.

Of course, all layers are scrolled synchronously.

Tips: in some situation, it's also useful to place a game element on map_scrollable and a corresponding invisible element over the surface to manage the interactions. Example: when an interactive element must be placed beneath a non interactive element for display reason.

== Positioning elements on game area ==

All elements on the game are must be absolute positioned (with "top" and "left" attributes).

By default, the game area is centered on 0,0 coordinates.

== Move arrows ==

To show move arrows around the scrollmap to enable click based navigation in addition to drag and drop, add these lines to your CSS

<pre>
/** Move arrows **/

#movetop,#moveleft,#moveright,#movedown {
display: block;
position: absolute;
background-image: url('../../img/common/arrows.png');
width: 32px;
height: 32px;
}

#movetop {
top: 0px;
left: 50%;
background-position: 0px 32px;
}
#moveleft {
top: 50%;
left: 0px;
background-position: 32px 0px;
}
#moveright {
top: 50%;
right: 0px;
background-position: 0px 0px;
}
#movedown {
bottom: 0px;
left: 50%;
background-position: 32px 32px;
}
</pre>

Then, in your javascript, define the following functions

<pre>
onMoveTop : function( evt )
{
console.log( "onMoveTop" );
evt.preventDefault();
this.scrollmap.scroll( 0, 300 );
},
onMoveLeft : function( evt )
{
console.log( "onMoveLeft" );
evt.preventDefault();
this.scrollmap.scroll( 300, 0 );
},
onMoveRight : function( evt )
{
console.log( "onMoveRight" );
evt.preventDefault();
this.scrollmap.scroll( -300, 0 );
},
onMoveDown : function( evt )
{
console.log( "onMoveDown" );
evt.preventDefault();
this.scrollmap.scroll( 0, -300 );
},
</pre>

And connect onclick events on the arrows to these functions in your javascript setup

<pre>
dojo.connect( $('movetop'), 'onclick', this, 'onMoveTop' );
dojo.connect( $('moveleft'), 'onclick', this, 'onMoveLeft' );
dojo.connect( $('moveright'), 'onclick', this, 'onMoveRight' );
dojo.connect( $('movedown'), 'onclick', this, 'onMoveDown' );
</pre>