Studio

Useful Components

Official

Unofficial

BGA Code Sharing - Shared resources, projects on git hub, common code, other links
BGA Studio Cookbook - Tips and instructions on using API's, libraries and frameworks
Common board game elements image resources
Using AI for BGA game development

Game Development Process

Guides for Common Topics

Miscellaneous Resources

Studio FAQ
Tools and tips of BGA Studio - Tips and instructions on setting up development environment
Studio logs - Instructions for log access
Practical debugging - Tips focused on debugging
Troubleshooting - Most common "I am really stuck" situations
Studio Bugs - Reports against Studio itself (not BGA!)

Note: Please DO NOT translate Studio Documentation, so that there can be one place where you can find the latest information available.

What is Board Game Arena Studio?

To search wiki pages on studio enter this text in search bar:

 "Category:Studio" white rabbit

That is if you want to search for white rabbit

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

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

JS:

Counter: a JS component to manage a counter that can increase/decrease (ex: player's score).
Scrollmap: a JS component to manage a scrollable game area (useful when the game area can be infinite. Examples: Saboteur or Takenoko games).
Stock (deprecated): a JS component to manage and display a set of game elements displayed at a position.
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).
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.
Anti-Stock: Code snippets in vanilla JS/HTML5 to do what stock does (that is if you cannot beat Stock into submission)
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.

PHP:

ItemManager: a PHP component to manage cards or other game items.
Deck (deprecated): a PHP component to manage cards (deck, hands, picking cards, moving cards, shuffle deck, ...)
PlayerCounter and TableCounter: php component to manager counters

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

Lifecycle

Tools and Advice

BGA Studio Guidelines
Tutorials checklist
I wish I knew this when I started - one liners on most common missed features, mistakes, etc with further doc references
Tools and tips of BGA Studio - Tips and instructions on setting up development environment
- Setting up BGA Development environment using VSCode
- Practical debugging - Tips focused on debugging
- Testing by developer
- Studio logs - Instructions for log access
- Troubleshooting - Most common "I am really stuck" situations
Production issues reporting tool
BGA Studio Cookbook - Tips and instructions on using API's, libraries and frameworks
- Using Vue - work-in-progress guide on using the modern framework Vue.js to create a game
- Using Typescript and Scss - How to auto-build Typescript and SCSS files to make your code cleaner
- Bots and Artificial Intelligence - How to add AI/Bots to the game
- Using AI for BGA game development - Shared resources about setting up AI agents
BGA Studio Migration Guide - Migration tips from older version of studio framework
Studio FAQ

Sharing

Common board game elements image resources - Dice, meeples, cubes, etc
BGA Code Sharing - Shared resources, projects on git hub, common code, other links