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

First steps with BGA Studio: Difference between revisions

From Board Game Arena
Jump to navigation Jump to search
No edit summary
 
(12 intermediate revisions by 4 users not shown)
Line 6: Line 6:
http://studio.boardgamearena.com
http://studio.boardgamearena.com


Choose one of your 10 accounts (ex: myusername0, password was sent in welcome email), and login into the website - as you would do for Board Game Arena.
Use your first dev account (ex: myusername0, password was sent in welcome email), and login into the website - as you would do for Board Game Arena.


If you don't have account see [[How to join BGA developer team?]]
If you don't have account see [[How to join BGA developer team?]]
Line 14: Line 14:
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.


Your first "game" should be one of the tutorials, so your project name should be something like "tutorialbob".
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.


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]]
section "Select a First Game"
section "Select a First Game"


Line 24: Line 24:
* CONTROL PANEL - manage projects - https://studio.boardgamearena.com/controlpanel. <br>Note: the control panel is accessible from the player popup menu (top right), with the gear and bargraph blue icon next to the player icon.
* CONTROL PANEL - manage projects - https://studio.boardgamearena.com/controlpanel. <br>Note: the control panel is accessible from the player popup menu (top right), with the gear and bargraph blue icon next to the player icon.


== Connect to your SFTP folder ==  
== Set up dev environment ide, editor and File Sync ==  


From the initial email from the Studio you get:
From the initial email from the Studio you get:
* the name of the SFTP server to connect to
* the name of the SFTP server to connect to
* your SFTP login and password
* your SFTP login and password
Note: this is NOT the same login/password as dev account, find email that talks about SFTP specifically


Using this information:
Using this information:
# Connect to the SFTP server using your SFTP login and password, through your favourite SFTP client software (such as [http://winscp.net/ WinSCP], see [[Tools_and_tips_of_BGA_Studio#File_Sync_on_Windows|File Sync]])
 
# 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.
* 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.
# Note: You have to setup AUTOMATED sync between your folder and remote folder, manually ftp'ing files would be no-starter. For WinSCP you can do this from the file menu (Commands->Keep remote directories up to Date...)
* 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.
* If you are not sure what editor to use see [[Tools_and_tips_of_BGA_Studio#Code_Editors_and_IDEs|Code editors and IDE]],
* Note: You have to setup AUTOMATED sync between your folder and remote folder, manually ftp'ing files would be no-starter.  
* Note: You can also upload your ssh key via studio control panel to avoid password exchange https://studio.boardgamearena.com/controlpanel


== Let's code! ==
== Let's code! ==
Line 39: 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 Studio -> Control Panel -> Manage games -> <your_game> -> <your_game_page> -> Play now
# 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)
# Use the 'I want between X and X' players to tick down the maximum players number to the minimum
# Press Create to create a table
# Click 'Express start': your game launches with the maximum number of players specified. It shows 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.'. If you don't see Express start button make sure you are in Manual mode for game creation.
# Select number of players and select Training mode in game configuration panel
# 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.
# 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.'.  
# 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]]
# From the Player page or Table page click on the link "You are playing <name of game> (realtime)" (or click on the 'Gear' icon on the top right) and choose 'Express STOP'. The game ends automatically and you are brought back to the table screen for this ended game.
# Open the menu (three-line "hamburger" icon at the upper right) and choose 'Express STOP'. The game ends automatically and you are brought back to the table screen for this ended game.
# Switch to your game folder, go into the img folder and overwrite your game_box.png file with another image.
 
# Go back to your browser, '''empty your browser cache''', then refresh the page, and check that the game box image has been updated.


Then you can modify the provided skeleton and begin to develop your game :)
Then you can modify the provided skeleton and begin to develop your game :)

Latest revision as of 14:21, 1 November 2024


Game File Reference


Useful Components

Official

  • Deck: a PHP component to manage cards (deck, hands, picking cards, moving cards, shuffle deck, ...).
  • 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).
  • Stock: 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).

Undocumented component (if somebody knows please help with docs)

  • Wrapper: a JS component to wrap a <div> element around its child, even if these elements are absolute positioned.

Unofficial


Game Development Process


Guides for Common Topics


Miscellaneous Resources

Connect to the BGA Studio website

Go to BGA Studio website: http://studio.boardgamearena.com

Use your first dev account (ex: myusername0, password was sent in welcome email), and login into the website - as you would do for Board Game Arena.

If you don't have account see How to join BGA developer team?

Create a new game project

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.

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.

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 section "Select a First Game"

For reference top bar studio links

Set up dev environment ide, editor and File Sync

From the initial email from the Studio you get:

  • the name of the SFTP server to connect to
  • your SFTP login and password

Note: this is NOT the same login/password as dev account, find email that talks about SFTP specifically

Using this information:

  • 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 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 Code editors and IDE,
  • Note: You have to setup AUTOMATED sync between your folder and remote folder, manually ftp'ing files would be no-starter.
  • Note: You can also upload your ssh key via studio control panel to avoid password exchange https://studio.boardgamearena.com/controlpanel

Let's code!

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.

  1. 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)
  2. Press Create to create a table
  3. Select number of players and select Training mode in game configuration panel
  4. 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).
  5. 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.'.
  6. 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).
  7. Go back to your browser and refresh, check that the game zone has updated.
  8. Click the red arrow next to a test account's name in the player panel to view the game from that player's account
    Change active player.jpg
  9. Open the menu (three-line "hamburger" icon at the upper right) and choose 'Express STOP'. The game ends automatically and you are brought back to the table screen for this ended game.


Then you can modify the provided skeleton and begin to develop your game :)

Commit your changes

Committing uploads your changes on BGA's revision control system. This is an extra assurance not to lose your code, and to have the possibility to get a previous version of your code if you need to backtrack. It also helps us to follow your progress (we get an email when you commit). So you should commit from time to time, when you hit some landmark in your development.

You can automatically commit your sources in the repository from "Control Panel / Manage Games / Your game / Commit my modifications now". Then:

  1. Enter your commit comment (such as 'My first commit') then hit the 'Submit' button;
  2. Check the log for errors, it should end with the following lines:
 Transmitting file data .
 Committed revision #revision number#.
 HAL says: done.

NOTE: committing the code is currently not working until admin commits it manually the first time. Even if it does you cannot automatically deal with this version control system except for committing. Therefore its recommended to use another means of storing the code in version control system, such as local git repo or github, see Version Control

That's all!

Now you know about the basics of updating your game on BGA Studio and testing your changes.

Now you can select one of the tutorials to play with and start coding.

For links to tutorials and ALL studio documentation see Studio.

Retrieved from "http:///index.php?title=First_steps_with_BGA_Studio&oldid=23137"