If you see this message, it means that your browser failed to load this file.

You should try the following : check your connection, disable ad-blocker, clear your browser cache, try in private mode, try from another browser/computer/connection.

Home »

What is BGA Studio?

Getting started

4 slideshare presentations to get ready to use BGA Studio in 30 minutes:

Reference Documentation

This page comes from BGA wiki, and has been written by BGA players community. Feel free to edit it!

What is Board Game Arena Studio?

Board Game Arena Studio is a platform to build online board game adaptations using the Board Game Arena platform.

It is open to any gamer with software development skills :)

BGA Studio website: http://en.studio.boardgamearena.com

Original announcement on BGA forum: http://forum.boardgamearena.com/viewtopic.php?f=10&t=1973

Discover BGA Studio in 5 presentations

Why, how, what... to start discovering BGA Studio, we prepared 5 "powerpoint" presentations for you:

How to join the BGA developer team?

Please see this page: How to join BGA developer team?

Great, I'm in! ... How should I start?

If you didn't already, check the presentations at the top of this page to get the basics.

Then, you should checkout the First steps with BGA Studio to make sure that runs fine.

After that, we strongly advise you to take one of these game creation tutorials:

Then start editing files and see what happens! ;)

If you have any questions, please check out the Studio FAQ first, then if you didn't find the answer you were looking for, please post your question on the development forum.

BGA Studio documentation

BGA Studio Framework reference

This part of the documentation focuses on the development framework itself: functions and methods available to build your game.

File structure of a BGA game

Game logic (Server side)

Game interface (Client side)

Other components

BGA Studio game components reference

Game components are useful tools you can use in your game adaptations.

  • Deck: a PHP component to manage cards (deck, hands, picking cards, moving cards, shuffle deck, ...).
  • Counter: a JS component to manage a counter that can increase/decrease (ex: player's score).
  • Draggable: a JS component to manage drag'n'drop actions.
  • ExpandableSection: a JS component to manage a rectangular block of HTML than can be displayed/hidden.
  • Scrollmap: a JS component to manage a scrollable game area (useful when the game area can be infinite. Examples: Saboteur or Takenoko games).
  • Stock: a JS component to manage and display a set of game elements displayed at a position.
  • Wrapper: a JS component to wrap a <div> element around his child, even if these elements are absolute positioned.
  • Zone: a JS component to manage a zone of the board where several game elements can come and leave, but should be well displayed together (See for example: token's places at Can't Stop).

BGA Studio user guide

This part of the documentation is a user guide for the BGA Studio online development environment.


Please remember me

Join BGA Studio developer team

To start developing on BGA Studio and get access to development environment, you need to create an account below.

Personal infos provided in this form is NOT shown to anyone but BGA Studio admin, and is NOT used for any other purpose that BGA Studio organization.

(Must be valid. We may remove accounts from developers we can't contact.)

(3 to 20 characters. No space, no number, no special characters)

(The exact username you are using on BGA)

Important: we need your REAL name to attribute your work on the Studio & to send you stuff by Post when needed.

Important: we need your REAL name to attribute your work on the Studio & to send you stuff by Post when needed.

Please enter the security code you see

I agree to Terms&conditions for developers of BGA Studio.


P.I. graphics available?


I'm thinking about implementing Treefrog Games' P.I. — According to the licenses page permission is already given.

I wonder if you (BGA) already have the graphics? Or should I contact the publisher directly?

01/20/2018 Comment on this.

Scrollmap with 3D mode

Are there any examples of using scrollmap with 3D mode?

In 2D mode, it's simple. The scrollmap is as big as the browser window allows, and we expect the game board is cut off. Arrows are provided for user to move the scrollmap.

But in 3D mode, the scrollmap is not needed. It should not provide its own movement arrows. It should be resized to fit entire contents so there is no border/boundary shown. In other words, we do not need the scrollmap function -- it should act like regular <div> without ability to drag, because 3D mode already lets user control the camera.

Compare these two shots:

01/20/2018 Comment on this.

Multiactive state and JS triggering


I hope that someone will be able to help me because I am pulling my hair out :(

In my game, Dice Forge, I have a state called RessourceChoice where we ask specific users to choose some ressource. One of the side is specific (mirror) and therefore before choosing the ressource, the user needs to select a side on one of the visible die.

I have managed this exception inside the same state RessourceChoice but add a previous step before.
When I have only one user that need to make the choice, it is working, however, when two users have a choice to make (user 1 : mirror, user 2: gold), when user 2 makes his choice, automatically my action buttons and everything disappears.

You can see it happening here : http://en.1.studio.boardgamearena.com/d ... ayFrom=126 (I am not sure that other users can view it but hell let's try it :))

I am guessing this happen due to the reception of a notification or the use of the updateCounters method, but I do not understand why...

Here is the notification log

Code: Select all

< gameStateMultipleActiveUpdate
< updateCounters
< notifBlessing
< end_replaywaitingdelay
< replaywaitingdelay
< gameStateChange
{"name":"ressourceChoice","description":"Everyone choose the ressources","descriptionmyturn":"${you} choose the ressources","type":"multipleactiveplayer","args":{"2305531":{"sides":{"1":{"id":"24","type":"G3orV2","type_arg":"0","location":"dice2-p2305531","location_arg":"0"}},"allMirror":false,"mirror":0},"2305535":{"sides":[{"id":"42","type":"mirror","type_arg":"0","location":"dice1-p2305535","location_arg":"0"},{"id":"21","type":"G3orV2","type_arg":"0","location":"dice2-p2305535","location_arg":"0"}],"allMirror":false,"mirror":1}},"action":"stRessourceChoice","possibleactions":["actRessourceChoice"],"transitions":{"reinforcement":6,"blessing":4},"active_player":"2305529","reflexion":{"move":{"value":240,"total":240},"total":{"2305529":"-80773","2305531":"-1562","2305535":"-3916"}},"multiactive":["2305531","2305535"]}
< gameStateMultipleActiveUpdate
< updateCounters
< notifBlessing
< notifBlessing
< notifBlessing
< gameStateChange
{"name":"divineBlessing","description":"Everyone rolls their dice","descriptionmyturn":"${you} roll your dice","type":"game","action":"stBlessing","transitions":{"reinforcement":6,"ressourceChoice":5,"blessing":4},"active_player":"2305529","args":null,"reflexion":{"move":{"value":240,"total":240},"total":{"2305529":-80773,"2305531":"-1562","2305535":"-3916"}}}

The first notifBlessing (or updateCounters as they are immediate) change my top bar.
Has anyone encountered this issue? I am afraid to here that the workaround would be to add a server state for this step because it will slow down the game (additional step for only some users).

Thanks a lot! And if I am not clear (on this I am pretty sure), do not hesitate!

01/17/2018 6 comments

Application loading ... ...
THANK YOU : You are one of our most loyal players!
Get the best from Board Game Arena for only €2 / month.