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

BGA Studio Guidelines

From Board Game Arena
Revision as of 02:13, 6 January 2018 by Victoria la (talk | contribs) (Created page with "= BGA Studio Guidelines = Originally From: https://www.slideshare.net/boardgamearena/bga-studio-guidelines == Why guidelines? == More and mode game publishers are choosin...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search

BGA Studio Guidelines

Originally From: https://www.slideshare.net/boardgamearena/bga-studio-guidelines


Why guidelines?

More and mode game publishers are choosing Board Game Arena for their game adaptations because the quality of these adaptations is high. If we want to continue to have nice games in the future, we have to make sure that every game published in the BGA platform is matching the quality standards of BGA. These guidelines are here to help you to make your game easy to use by BGA players, and to make sure its going to be validated by the game publisher.

General guidelines

The 3 main important guidelines

  • If a player knows the real board game, he should be able to play your adaptation with no learning.
  • Fidelity to the original game is an absolute requirement.
  • Don't try to create a video game: make your game interface as close as possible to how the original board game looks like.

Game layout

I-1 Don't hide game elements

Many board games have a lot of material to display, and computer screens are sometimes too small. But you are lucky: your game will be on a webpage with a scrolling functionality. Basically, you always have some more space available . Don't hide game elements behind menus, submenus, dialogs, … but display them directly on the main page. Tips: eventually, you can use HTML anchor link to jump between the different elements of the page if the page height is very big.

Examples:

In Amyitis, characters cards are elements you don't have to check all the time. Thus, we placed them at the bottom of the page and you have to scroll to see them.

I-2 Make it fluid

BGA game interface is «fluid». It means the interface width can vary in order to use extra space on the screen when available. HTML and CSS give us a lot of possibilities to adapt a web content to a given browser width. You have to use HTML and CSS:

  • To allow players owning a big screen to enjoy the game comfortably without scrolling the page.
  • To allow players with a screen of just 1024px

Tips: for each element of the game, answer this question « how many times during a game do I need to check/use this element? ».Less frequently used elements can be placed below

Examples:

Caylus: when we have a 1024px small width to play the game – even if they have to screen, available buildings are placed scroll on the the right and below the board. On larger screen, these tiles are placed

 on the right of the board.  This is a very basic usage of the others. « float:left » CSS property.


I-3 Use whiteblocks

White blocks are « div » HTML element with the « whiteblock » class (white and transparent background). This is the recommended way to gather game elements together in your game interface when they are not directly on a board. Whiteblocks helps you to organize the space in order it can be easily understood by players.

Tips: you can use a

title inside the whiteblock to help players to understand what is inside or to who it belongs. In The Year of the Dragon game interface, with whiteblocks and h3 titles /picture here/

I-4 Use player panels

BGA players are used to look at player panels when they need an information about a player. Using player panels can allow you to save a lot of space on the main game space. In general, the following information is placed in the player panel:

  • Players resources (i.e. small game elements the player is keeping in front of him in the real game).
  • Summary information about player (i.e. number of cards in hand, number of cards played...).
  • « First player » token.
  • Score.

Player panels in Seasons. /picture/ A lot of useful information can fit into these small spaces :)

Note: for all games, you must always use the standard BGA score counter (with the star). Players are used to check this counter to see who is winning the game.

I-5 Use status bar actions

When some game action is particular to a specific game state, the good practice is to use a status bar action (HTML link). Don't try to place some icon in your main gameinterface that will be useless 95% of the time: it takes space and makes the interface more complex to understand.

Status bar actions in Tobago /picture/

Game usability

II-1 Use tooltips

With BGA Studio its very easy to associate atooltip on any element of the game.Each time this is possible : add a tooltip toexplain to the players :● What is this game element?● What happens if I click on it?However, tooltips should NOT be used todisplay dynamic information about the currentgame to save space on the game interface. Seasons : a Typically, regular players should be able to card tooltipplay with no tooltips.Tips : you can place any HTML element in tooltips. So you can make them as rich and beautiful as you need :)

II-2 Use left click only

● The whole game should be playable with only simple left button mouse clicks.● Context menus should not be used.●Dragndrop should be avoided (if you want to use it anyway, you should make a click basedalternative available).● Mouse icon must change on cliquable elements (« cursor:pointer » CSS property)..

II-3 Make your interface intuitive

If your testers have different opinions about« how to trigger some game action », maybe The Boss : when a player clics on a card the best is to make several options possible for with no selected cubes, the interface tell this game action. us to select some cube first.In the case there is a complex action to do bythe player (ex : select some cards, then clickon an action button), design your errormessages in order they can guide the player(ex : « please select some cards first »).Tips : For complex games, it is simple and useful to highlight the area of the interface where player should focus his attention (using onEnteringState/onLeavingState and CSS).

II-4 Use the gamelog

With BGA Studio it is very easy to place sometext (or HTML code) in the gamelog.Dont hesitate to use the game log.Players are not always in front of the gamepage when their opponents are making theirmoves.In addition, the computer manipulates gameelements faster than you usually do with thereal board game and even regular players canget behind of what happened sometimes.You should be able to understand the « gamestory » by reading the game log. Caylus : game log extract

II-5 Tell players about automatic actions

Very often, during a game you are in asituation where :● Only one action is possible for the activeplayer, or● A series of action has to be done (accordingto the rules) without any players actions.In these situation, you must or you may triggerthese actions automatically.In any case, you must make sure that playersunderstand what is happening, otherwisetheyll probably report a bug. Stone Age : people are fed automatically at the end of the turn, ● Use the game log to trace all actions but players can always see what performed automatically. happened exactly in the gamelog.● Use synchronous notifications handlers toslow down the execution of automatic actions,so that players can understand what ishappening.

II-6 Confirm a move

As a rule of thumb, dont provide a way toconfirm a move.Confirming a move slows down the userinterface and thus, the game flow.You can eventually allow a player to confirm amove if this is a very critical step in a game,and if it is possible that a player triggers theaction by accident. Hawaii : ending a turn is a critical action that happens only 5 times per player in a game. In this case, it is acceptable (and a good idea) to have a confirmation dialog.

II-7 Translatable interface

With BGA Studio its very easyto translate your game in anylanguage, using BGAcollaborative translation system.Check the FAQ and the examplegames to learn how to declareyour strings so that everymessage in your code can bemanaged by theinternationalization system. Diams 100 % translated in Polish

Original game representation

=== III-1 Use the original artThe less you are modifying the original artof the game, the better.Its important for publishers that a board gameadaptation looks like the real board game.Sometimes it can be useful to modify someelements of the game to save some space onthe screen – but try to avoid it.Tips : if you have not enough space on the screen, reduce the size of the game elements. Try to make sure they are recognizable for players who played regularly, and add a tooltip to help beginners to figure out what they are. Gosu : the original cards are used, with tooltips. 20. III-2 Be careful about player assistanceAs a rule of thumb, in order to respect theoriginal board games, you shouldntintroduce any player assistance feature.An assistance must not be introduced if itdirectly helps the player to figure out if hismove is good or bad.An assistance may be introduced if it canhelps the payer to figure out what moves areavailable. Gygès : the assistance shows you available moves, but is not alerting you about stupid moves (like the upper left one). 21. III-3 Cancel a moveAs a rule of thumb, dont allow players to cancel one of their moves.Cancelling a move can cause many issues, including allowing players to reveal some privateinformation intentionally.You can eventually allow a player to cancel a move if he is in the middle of a multiple steps gameaction and if no private information has been revealed yet. 22. III-4 Available informationEvery information visible by players in thereal game should be accessible in theadaptation.Pay attention to some information like thenumber of cards in the opponents hand, or thenumber of remaining cards in the deck. Dominion : as specified in the rules, number of cards in the hand of players and number of cards in the deck are public information. It is explicitely forbidden to count cards in the discard pile, so this information is not available. 23. BGA Studio GuidelinesIV – Game technical quality guidelines 24. IV-1 Dont use exotic stuffBGA Studio provides a set of useful tools tobuild board games adaptations (ex : cardmanagement, confirmation dialog, tooltips,…).Use them, and dont use exotic libraries,plugins or tricks.Why ? Because BGA Framework willevolve in the future to provide new featuresto players, and it could make your gameincompatible with the new version.On the contrary, if you are using standard Haggis using BGA standard card stuff, you will enjoy these enhancements management system.without any effort.If you feel that you really need stome exoticthing: dont hesitate to ask us. 25. IV-2 Write in (simple) EnglishSome other person than you may have tolook on your code :● We (BGA team) to help you if you need.● Some other BGA developer wanting tohelp you.● …For all these reasons, your code must bewritten in English (variables, methods,comments...).If English is not your mothertongue dontbe afraid : the whole idea here is to be Reversi : sourcecode extractunderstood, not to write an essay :) 26. IV-3 Page refreshA page refresh (F5) must allow players to reset the game interface to a stable state at anymoment of the game.BGA Studio framework allows you to do this with the « getAllDatas » PHP method and the« setup » Javascript method.Note : this « refresh » feature is also quite useful during the development process:) 27. IV-4 Private informationA private game element must be visible only tothe player owning it. It must not be visible byhis opponents, by any means.In particular :_ getAllDatas PHP method mustnt return anyelement that are hidden from current player,even if the Javascript « setup » methodignores them._ you mustnt send via the « notifyAllPlayers » Hearts : each player is alerted about his function some information that is hidden from new cards using notifyPlayer, and cards one player (use « notifyPlayer » instead). from the other players remains secret. 28. IV-5 Game progressionGame progression should be as accurate aspossible.Of course, its not always easy (or evenpossible) to compute game progression, but avague approximation is better than nothing. Stone Age : there are 2 different end game conditions (building cards and civilization cards). Both are taken into account to increase the accuracy of the game progression. 29. IV-6 Game statisticsUsing BGA Studio you can define a set ofstatistics for your game.Statistics will be displayed at the end of thegame, and help players to figure out whythey win/loose a game, and what they shouldimprove.Try to choose interesting statistics thatdistinguish the different strategies for yourgame, in order it can help players tounderstand their game. Seasons : statistics 30. SummaryThese guidelines are here to help you to make sure that the players, the gamepublisher and the game author are going to enjoy your adaptation of the game.We created these guidelines based on our personal experience (which includes manymistakes along the way) implementing a lot of games on BGA platform.Dont hesitate to contact us if you feel uncomfortable with one of these guidelines insome particular context with your game: these guidelines are here to help and not toprevent you to do smart things, and have fun while programing your game ;)