Set up your BGA development environment with VSCode

VSCode is a lightweight code editor often used by game developers. You can use any IDE, but you'll need to adapt the examples if you choose another one.

Download and install VSCode from https://code.visualstudio.com, then open it.

On your computer, create a folder with the same name as your project. You can put it inside a folder called studio-projects to keep your tutorial projects and future game projects in one place.

In VSCode, select Open folder and open your newly created project folder.

We will now install some VSCode extensions to make development easier.

SFTP (auto-upload files)

Games run on Studio, so we need to upload our project code to our FTP folder to test it. To make this easier, we use an auto-upload extension. This lets us edit files locally and keep them in sync with the FTP folder.

SFTP (by satiromarra) synchronizes your local project with BGA Studio.

• Press Ctrl+Shift+P on Windows/Linux or Cmd+Shift+P on Mac to open the command palette, then run SFTP: config. The editor will open a JSON configuration file.
  This creates an sftp.json file in the .vscode folder. You can close the tab that opens and edit the JSON file directly.

• Update the JSON as shown below:

{
    "name": "BGA",
    "host": "1.studio.boardgamearena.com",
    "protocol": "sftp",
    "port": 2022,
    "username": "<your SFTP username>",
    "privateKeyPath": "<path to your private key>",
    "remotePath": "/<your project name>/",
    "uploadOnSave": true,
    "ignore": [
        ".*",
        "playwright-report",
        "test-results",
        "tmp",
        "temp",
        "misc",
        "vendor",
        "package-lock.json",
        "yarn.lock",
        "node_modules",
        "* *"
    ],
    "syncOption": {
        "skipCreate": false,
        "delete": true
    }
}

ls ~/.ssh/*.pub

ssh-keygen -t ed25519 -C "your.email@example.com"

cat ~/.ssh/id_ed25519.pub

pbcopy < ~/.ssh/id_ed25519.pub

Get-Content $env:USERPROFILE\.ssh\id_ed25519.pub | Set-Clipboard

    "password": "<your SFTP password>",

First sync (only needed once)

Press Ctrl+Shift+P on Windows/Linux or Cmd+Shift+P on Mac to open the command palette, then run SFTP: Download Project.

This will download all the files locally.

Download the helpers

BGA maintains _ide_helper.php and bga-framework.d.ts as read-only files in your Studio FTP folder. Download them regularly by right-clicking _ide_helper.php and selecting Download file, then doing the same for bga-framework.d.ts.

Daily use

You don't have to do anything else! Each time you save a file in VSCode, the extension uploads it to the SFTP server.

To force an upload to the server, right-click a file or folder and select Upload file or Upload folder.

PHP

PHP Intelephense provides PHP autocomplete, navigation, error diagnostics, and formatting. It can read the _ide_helper.php file, which VSCode cannot do on its own.

Install PHP

Download and install PHP 8.4.

Run php -v in a terminal to check your installation.

Configure VSCode

Open Preferences: Open User Settings (JSON) from the command palette and merge these settings into your existing configuration:

{
    "php.validate.executablePath": "/usr/bin/php8.4",
    "php.suggest.basic": false,
    "intelephense.environment.phpVersion": "8.4.0",
    "intelephense.diagnostics.enable": true,
    "[php]": {
        "editor.defaultFormatter": "bmewburn.vscode-intelephense-client"
    }
}

Replace /usr/bin/php8.4 with the PHP executable's location on your computer (for example, C:/php/php.exe on Windows). This path is used by VSCode's built-in PHP syntax validator, which runs php -l. Intelephense performs its own analysis without running PHP. Its phpVersion setting specifies the PHP version your code targets.

Enable BGA framework completion

Open your whole game project folder in VSCode and download _ide_helper.php from your Studio project into its root. Intelephense indexes PHP files in the workspace automatically, including this helper, to discover BGA classes, methods, and parameters. Do not exclude it with intelephense.files.exclude, and do not require or execute it in your game.

JavaScript / TypeScript

VSCode includes JavaScript and TypeScript IntelliSense by default: no additional extension is needed. Its TypeScript language service analyzes your code to provide autocomplete, parameter hints, hover documentation, navigation to definitions, and error diagnostics.

Run on Save (code generators)

Run on Save runs code generators when you save TypeScript or SCSS files. If you don't plan to use TypeScript or SCSS, you can skip this one.

    "emeraldwalk.runonsave": {
        "commands": [
            {
                "match": ".*\\.(ts|json)$",
                "isAsync": true,
                "cmd": "npm run build:ts"
            },
            {
                "match": ".*\\.scss$",
                "isAsync": true,
                "cmd": "npm run build:scss"
            }
        ]
    }

Continue with Hearts tutorial or Reversi tutorial