Game File Reference
Useful Components
Official
- ItemManager: a PHP component to manage cards or other game items.
- PlayerCounter and TableCounter: PHP components to manage counters.
- Draggable: a JS component to manage drag'n'drop actions.
- Counter: a JS component to manage a counter that can increase/decrease (ex: player's score).
- 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).
- 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-zoom : a JS component for zoom controls.
- bga-animations : a JS component for animations.
- bga-cards : a JS component for cards.
- bga-dice : a JS component for dice.
- bga-autofit : a JS component to make text fit on a fixed size div.
- bga-score-sheet : a JS component to help you display an animated score sheet at the end of the game.
- bga-jump-to : a JS component to add board shortcuts
Deprecated
- Deck: a PHP component to manage cards (deck, hands, picking cards, moving cards, shuffle deck, ...).
- Stock: a JS component to manage and display a set of game elements displayed at a position.
Unofficial
Game Development Process
Guides for Common Topics
Miscellaneous Resources
Game fonts
You must upload in a `fonts` directory all fonts that you will use in your game interface.
All fonts in your font directory are loaded on a player's browser when he loads the game. It will take in priority the font with type : woff2 > woff > otf > ttf.
To be correctly deployed your font file names should not contain spaces or special characters.
The you can use them by setting a font-family with the filename (note the dashes will be replaced by spaces), without needing to declare a `@font-face`.
Example
With a `custom-font.woff2` in the `fonts` directory:
.element-with-custom-font {
font-family: 'custom font';
}
With a `custom-font-bold.woff2` in the `fonts` directory:
.element-with-custom-font-bold-solution1 {
font-family: 'custom font';
font-weight: bold;
}
.element-with-custom-font-bold-solution2 {
font-family: 'custom font bold';
}
Debugging
In the DevTool console, write document.getElementById('bga-auto-declared-font-faces') to list the fonts that are preloaded by the framework.