First steps with BGA Studio - Revision history

Thoun: /* Create a new game project */

2026-09-09T08:41:00Z

Create a new game project

← Older revision		Revision as of 10:41, 9 September 2026
Line 16:		Line 16:
	To open the Control Panel:		To open the Control Panel:

	* Click on your profile icon on the top right of any page.		* Click on the "Manage Games" button on the left side of the page then click "Create a new TUTORIAL project". (or click here: https://studio.boardgamearena.com/studio#new-tutorial )
	* Click on the Control Panel button on the top right. This is only visible if you are on a developer account.
	* Click on the "Manage Games" button on the left side of the page.

	Your first "game" should be one of the tutorials, so your project name should be something like "tutorialbob"~~. Type "0" for Board Game Geek ID and~~ click the "Create Project" button~~. The new project will appear after you refresh the page~~.		Your first "game" should be one of the tutorials, so your project name should be something like "tutorialbob", then click the "Create Project" button.

	Note: At this stage it is too early to create a real game but if you really don't want to start until you have a game in mind, check [[Create a game in BGA Studio: Complete Walkthrough]]		Note: At this stage it is too early to create a real game but if you really don't want to start until you have a game in mind, check [[Create a game in BGA Studio: Complete Walkthrough]]

Egga22 at 16:29, 27 May 2026

2026-05-27T16:29:11Z

← Older revision		Revision as of 18:29, 27 May 2026
Line 53:		Line 53:
	# Press Create to create a table		# Press Create to create a table
	# Select number of players and select Training mode in game configuration panel		# Select number of players and select Training mode in game configuration panel
	# Click '''Express start'''. Do not use "Start game" buttons in studio - it adds unnecessary complexity of logging it from multiple accounts. When using '''Express start''' your game launches with the maximum number of players specified using your own dev player accounts (dev0, dev1, dev2, etc). If you don't see '''Express start''' button make sure you are in Manual mode for game creation. Note: for Solo mode you do actually want to use Start Game instead of Express start, the ~~later~~ has some issues (warnings).		# Click '''Express start'''. Do not use "Start game" buttons in studio - it adds unnecessary complexity of logging it from multiple accounts. When using '''Express start''' your game launches with the maximum number of players specified using your own dev player accounts (dev0, dev1, dev2, etc). If you don't see '''Express start''' button make sure you are in Manual mode for game creation. Note: for Solo mode you do actually want to use Start Game instead of Express start, the latter has some issues (warnings).
	# Game will open with an empty canvas: in the game zone you just have an empty div for player tables, and a fake counter space on each player panel.		# Game will open with an empty canvas: in the game zone you just have an empty div for player tables, and a fake counter space on each player panel.
	# Switch to your SFTP home folder, go into your game folder. Edit the <your_game>.js file (tutorial: modules/js/Game.js), and add a sentence in the HTML part of the line <code>this.getGameAreaElement().insertAdjacentHTML</code>, then save (this assumes you mount or sync the folder).		# Switch to your SFTP home folder, go into your game folder. Edit the <your_game>.js file (tutorial: modules/js/Game.js), and add a sentence in the HTML part of the line <code>this.getGameAreaElement().insertAdjacentHTML</code>, then save (this assumes you mount or sync the folder).

Ehdibu: /* Let's code! */

2026-04-29T10:53:50Z

Let's code!

← Older revision		Revision as of 12:53, 29 April 2026
Line 55:		Line 55:
	# Click '''Express start'''. Do not use "Start game" buttons in studio - it adds unnecessary complexity of logging it from multiple accounts. When using '''Express start''' your game launches with the maximum number of players specified using your own dev player accounts (dev0, dev1, dev2, etc). If you don't see '''Express start''' button make sure you are in Manual mode for game creation. Note: for Solo mode you do actually want to use Start Game instead of Express start, the later has some issues (warnings).		# Click '''Express start'''. Do not use "Start game" buttons in studio - it adds unnecessary complexity of logging it from multiple accounts. When using '''Express start''' your game launches with the maximum number of players specified using your own dev player accounts (dev0, dev1, dev2, etc). If you don't see '''Express start''' button make sure you are in Manual mode for game creation. Note: for Solo mode you do actually want to use Start Game instead of Express start, the later has some issues (warnings).
	# Game will open with an empty canvas: in the game zone you just have an empty div for player tables, and a fake counter space on each player panel.		# Game will open with an empty canvas: in the game zone you just have an empty div for player tables, and a fake counter space on each player panel.
	# Switch to your SFTP home folder, go into your game folder. Edit the <your_game>.js file (tutorial: ~~module~~/js/Game.js), and add a sentence in the HTML part of the line <code>this.getGameAreaElement().insertAdjacentHTML</code>, then save (this assumes you mount or sync the folder).		# Switch to your SFTP home folder, go into your game folder. Edit the <your_game>.js file (tutorial: modules/js/Game.js), and add a sentence in the HTML part of the line <code>this.getGameAreaElement().insertAdjacentHTML</code>, then save (this assumes you mount or sync the folder).
	# Go back to your browser and refresh, check that the game zone has updated.		# Go back to your browser and refresh, check that the game zone has updated.
	# Click the red arrow next to a test account's name in the player panel to view the game from that player's account <br/>[[File:Change_active_player.jpg]]		# Click the red arrow next to a test account's name in the player panel to view the game from that player's account <br/>[[File:Change_active_player.jpg]]

Ehdibu: /* Let's code! */

2026-04-29T10:53:26Z

Let's code!

← Older revision		Revision as of 12:53, 29 April 2026
Line 55:		Line 55:
	# Click '''Express start'''. Do not use "Start game" buttons in studio - it adds unnecessary complexity of logging it from multiple accounts. When using '''Express start''' your game launches with the maximum number of players specified using your own dev player accounts (dev0, dev1, dev2, etc). If you don't see '''Express start''' button make sure you are in Manual mode for game creation. Note: for Solo mode you do actually want to use Start Game instead of Express start, the later has some issues (warnings).		# Click '''Express start'''. Do not use "Start game" buttons in studio - it adds unnecessary complexity of logging it from multiple accounts. When using '''Express start''' your game launches with the maximum number of players specified using your own dev player accounts (dev0, dev1, dev2, etc). If you don't see '''Express start''' button make sure you are in Manual mode for game creation. Note: for Solo mode you do actually want to use Start Game instead of Express start, the later has some issues (warnings).
	# Game will open with an empty canvas: in the game zone you just have an empty div for player tables, and a fake counter space on each player panel.		# Game will open with an empty canvas: in the game zone you just have an empty div for player tables, and a fake counter space on each player panel.
	# Switch to your SFTP home folder, go into your game folder. Edit the <your_game>.js file, and add a sentence in the HTML part of the line <code>this.getGameAreaElement().insertAdjacentHTML</code>, then save (this assumes you mount or sync the folder).		# Switch to your SFTP home folder, go into your game folder. Edit the <your_game>.js file (tutorial: module/js/Game.js), and add a sentence in the HTML part of the line <code>this.getGameAreaElement().insertAdjacentHTML</code>, then save (this assumes you mount or sync the folder).
	# Go back to your browser and refresh, check that the game zone has updated.		# Go back to your browser and refresh, check that the game zone has updated.
	# Click the red arrow next to a test account's name in the player panel to view the game from that player's account <br/>[[File:Change_active_player.jpg]]		# Click the red arrow next to a test account's name in the player panel to view the game from that player's account <br/>[[File:Change_active_player.jpg]]

Thoun: /* Let's code! */

2025-06-30T07:08:14Z

Let's code!

← Older revision		Revision as of 09:08, 30 June 2025
Line 54:		Line 54:
	# Select number of players and select Training mode in game configuration panel		# Select number of players and select Training mode in game configuration panel
	# Click '''Express start'''. Do not use "Start game" buttons in studio - it adds unnecessary complexity of logging it from multiple accounts. When using '''Express start''' your game launches with the maximum number of players specified using your own dev player accounts (dev0, dev1, dev2, etc). If you don't see '''Express start''' button make sure you are in Manual mode for game creation. Note: for Solo mode you do actually want to use Start Game instead of Express start, the later has some issues (warnings).		# Click '''Express start'''. Do not use "Start game" buttons in studio - it adds unnecessary complexity of logging it from multiple accounts. When using '''Express start''' your game launches with the maximum number of players specified using your own dev player accounts (dev0, dev1, dev2, etc). If you don't see '''Express start''' button make sure you are in Manual mode for game creation. Note: for Solo mode you do actually want to use Start Game instead of Express start, the later has some issues (warnings).
	# Game will open with an empty canvas: in the game zone you just have a ~~sentence 'This is your game interface. You can edit this HTML in your ".tpl" file.'~~.		# Game will open with an empty canvas: in the game zone you just have an empty div for player tables, and a fake counter space on each player panel.
	# Switch to your SFTP home folder, go into your game folder. Edit the ~~game_game~~.~~tpl~~ file ~~(this will be named like your project)~~, and ~~change this~~ sentence ~~to 'Hey,~~ this ~~is my first game!'~~, then save (this assumes you mount or sync the folder).		# Switch to your SFTP home folder, go into your game folder. Edit the <your_game>.js file, and add a sentence in the HTML part of the line <code>this.getGameAreaElement().insertAdjacentHTML</code>, then save (this assumes you mount or sync the folder).
	# Go back to your browser and refresh, check that the game zone has updated.		# Go back to your browser and refresh, check that the game zone has updated.
	# Click the red arrow next to a test account's name in the player panel to view the game from that player's account <br/>[[File:Change_active_player.jpg]]		# Click the red arrow next to a test account's name in the player panel to view the game from that player's account <br/>[[File:Change_active_player.jpg]]

Playtime5555: Included steps on how to get to the Control Panel in /* Create a new game project */

2025-03-11T22:24:32Z

Included steps on how to get to the Control Panel in Create a new game project

← Older revision		Revision as of 00:24, 12 March 2025
Line 13:		Line 13:

	You can do most of the projects-related operations from "Control Panel / Manage games". In particular, you can create a new project automatically from there.		You can do most of the projects-related operations from "Control Panel / Manage games". In particular, you can create a new project automatically from there.

			To open the Control Panel:

			* Click on your profile icon on the top right of any page.
			* Click on the Control Panel button on the top right. This is only visible if you are on a developer account.
			* Click on the "Manage Games" button on the left side of the page.

	Your first "game" should be one of the tutorials, so your project name should be something like "tutorialbob". Type "0" for Board Game Geek ID and click the "Create Project" button. The new project will appear after you refresh the page.		Your first "game" should be one of the tutorials, so your project name should be something like "tutorialbob". Type "0" for Board Game Geek ID and click the "Create Project" button. The new project will appear after you refresh the page.

Thoun: /* That's all! */

2025-03-04T09:21:49Z

That's all!

← Older revision		Revision as of 11:21, 4 March 2025
Line 79:		Line 79:

	For links to tutorials and ALL studio documentation see [[Studio]].		For links to tutorials and ALL studio documentation see [[Studio]].

			[[Tutorial reversi\|Go to Reversi tutorial !]]

	[[Category:Studio]]		[[Category:Studio]]

Victoria La: /* Let's code! */

2025-03-02T21:31:14Z

Let's code!

← Older revision		Revision as of 23:31, 2 March 2025
Line 44:		Line 44:
	Now, you can try to launch a new game on BGA Studio from the "Play now" menu entry, as you would do on Board Game Arena website.		Now, you can try to launch a new game on BGA Studio from the "Play now" menu entry, as you would do on Board Game Arena website.

	# To launch your game from Studio go to CONTROL PANEL -> Manage games -> <your_game> -> <your_game_page> -> Play (see how to access control panel above)		# To launch your game from Studio go to CONTROL PANEL -> Manage games -> <your_game> -> <your_game_page> -> Play (see how to access control panel above). You can also use link https://studio.boardgamearena.com/studiogame?game=<your_game>
	# Press Create to create a table		# Press Create to create a table
	# Select number of players and select Training mode in game configuration panel		# Select number of players and select Training mode in game configuration panel

Thoun: /* Set up dev environment ide, editor and File Sync */

2024-11-01T13:21:08Z

Set up dev environment ide, editor and File Sync

← Older revision		Revision as of 15:21, 1 November 2024
Line 33:		Line 33:
	Using this information:		Using this information:

	* ~~Check that your remote~~ home folder ~~contains one folder for two example games (reversi, hearts)~~. If you have already created a new game project, ~~one additional~~ folder ~~should~~ be in your "home" folder. ~~Note~~: ~~example project are only for code reference they cannot be use as~~ studio project (i.e. ~~run on website)~~		* Your projects will be listed in the "home" folder. If you have already created a new game project, you should see a folder with the project name be in your "home" folder.
			* If you want to see tutorial projects in your folder, go to https://studio.boardgamearena.com/projects, select "Already published", search "Reversi" or any project name you want to look at, then click the "[Get readonly access]" link of this game. Once you've clicked this link, the game folder will be visible in your "home" FTP folder, in read-only.
	* Connect to the SFTP server using your SFTP login and password, through your favourite SFTP client software or use IDE integraton (see [[Tools_and_tips_of_BGA_Studio#File_sync\|File Sync]] or [[Setting_up_BGA_Development_environment_using_VSCode]]). Make sure to download the remote project folder into a local folder.		* Connect to the SFTP server using your SFTP login and password, through your favourite SFTP client software or use IDE integraton (see [[Tools_and_tips_of_BGA_Studio#File_sync\|File Sync]] or [[Setting_up_BGA_Development_environment_using_VSCode]]). Make sure to download the remote project folder into a local folder.
	* If you are not sure what editor to use see [[Tools_and_tips_of_BGA_Studio#Code_Editors_and_IDEs\|Code editors and IDE]],		* If you are not sure what editor to use see [[Tools_and_tips_of_BGA_Studio#Code_Editors_and_IDEs\|Code editors and IDE]],

Victoria La: /* Let's code! */

2024-04-27T22:36:47Z

Let's code!

← Older revision		Revision as of 00:36, 28 April 2024
Line 46:		Line 46:
	# Press Create to create a table		# Press Create to create a table
	# Select number of players and select Training mode in game configuration panel		# Select number of players and select Training mode in game configuration panel
	# Click '''Express start'''. Do not use "Start game" buttons in studio - it adds unnecessary complexity of logging it from multiple accounts. When using '''Express start''' your game launches with the maximum number of players specified using your own dev player accounts (dev0, dev1, dev2, etc). If you don't see '''Express start''' button make sure you are in Manual mode for game creation.		# Click '''Express start'''. Do not use "Start game" buttons in studio - it adds unnecessary complexity of logging it from multiple accounts. When using '''Express start''' your game launches with the maximum number of players specified using your own dev player accounts (dev0, dev1, dev2, etc). If you don't see '''Express start''' button make sure you are in Manual mode for game creation. Note: for Solo mode you do actually want to use Start Game instead of Express start, the later has some issues (warnings).
	# Game will open with an empty canvas: in the game zone you just have a sentence 'This is your game interface. You can edit this HTML in your ".tpl" file.'.		# Game will open with an empty canvas: in the game zone you just have a sentence 'This is your game interface. You can edit this HTML in your ".tpl" file.'.
	# Switch to your SFTP home folder, go into your game folder. Edit the game_game.tpl file, and change this sentence to 'Hey, this is my first game!', then save (this assumes you mount or sync the folder).		# Switch to your SFTP home folder, go into your game folder. Edit the game_game.tpl file (this will be named like your project), and change this sentence to 'Hey, this is my first game!', then save (this assumes you mount or sync the folder).
	# Go back to your browser and refresh, check that the game zone has updated.		# Go back to your browser and refresh, check that the game zone has updated.
	# Click the red arrow next to a test account's name in the player panel to view the game from that player's account <br/>[[File:Change_active_player.jpg]]		# Click the red arrow next to a test account's name in the player panel to view the game from that player's account <br/>[[File:Change_active_player.jpg]]