Create a game in BGA Studio: Complete Walkthrough

THIS PAGE IS WORK IN PROGRESS

Introduction

This document is not a tutorial, but step by step instructions on how to build your own first game adaptation using BGA Studio framework.

Before you read this material, you must:

• Read the overall presentations of the BGA Studio.
• Some-what know the languages used by BGA Studio: PHP, SQL, HTML, CSS, Javascript
• Setup you development environment First Steps with BGA Studio
• Create a game using one the available tutorials. Don't bother with a new game if have not complete at least one of the tutorials.

If you stuck of have question about this tutorial post on BGA Developers forum. If you uncomfortable posting on public forum you can send message directly to developers who post answers on that forum but NOT the BGA admins.

Selecting a First Game

For you first game you must either

• Select a game from Available Licenses
• Or from Public Domain

If you be able to successfully publish your first game, you would gain trust of BGA admins and they will be happy to assist you in obtaining license for game you really want to do. You can read more about game licenses on BGA Game licences page.

Once you selected the game but before creating a new project, please takes few seconds to check that someone is not already developing this game. If it is the case, maybe you can propose to join the project?

Check the list of current projects

Even if you see few projects with name of the game they may not be active. There are a lot abandoned game projects. If its not clear by the status, post to Developers forum as ask if anybody actively working on the project, and at the same time ask admins to send you graphics for that game if they have it (yeah on the forum, there is better chance of them seeing you post on the forum then in email).

Obtaining game graphics

If you developing a game from Available Licenses games, ask the admins to send you graphics, but don't rely on that. It will likely fail. But if you posted on forum and waiting for an answer you can proceed to next step - project creation.

If you don't get original graphics you go to Scavenger Hunt

• If you developing a public domain card game you can borrow standard cards graphics from hearts project (see Tutorial hearts).
• Standard game pieces - meeples, cubes, dice can be found here https://github.com/elaskavaia/bga-sharedcode/tree/master/img
• Go to boardgamegeek.com and obtain 3D game box image, 2D box image, andif you lucky they also sometime have boards and token scans in "Game Pieces" section of Images
• If that fail google "boardgame <name>" and check Images section

Once you get the graphics one way or another you have to massage it to fit in the BGA criteria, which usually involves

• If publisher sends graphics in one token/card per file mode, you have to stitch them in sprite and scale down
• For non square tiles and game pieces you need transparency
• Usually you chop off scoring "ring" around the board of the game since scoring track not need to be visualised this way online

More details about graphics requirements can be found here Game art: img directory.

Create a project

If you have not already, you have to create a project in BGA Studio for this game. If the original game name is taken use gamenameYOURINITIALS template, i.e."heartsla". Don't worry too much about the name, if game would be good enough to be publish it will be renamed to original name.

Find and start the game in turn based mode, make sure it works.

Second, modify the text in .tpl file, reload the page in the browser and make sure your ftp sync works as expected. Note: if you have not setup FTP auto-sync yet, do it now, manually copying files is a no-starter.

Hook version control system

If its a real game I would commit the code to version control right at start. You going to find yourself in the situation when game does not even start anymore and no way of debugging it unless you have a way to revert. That is where version control becomes very handy. If you don't know what I am talking about then at least back-up your files after each of major steps. Starting now. You can also create a project on github, but make sure you don't commit original publisher graphics files.

Update game infos and box graphics

Even it does not nothing yet start with making sure game looks descent in the game selector, meaning it has nice box graphics and information is correct. For that we need to edit gameinfos.inc.php. What you would do for real game you would go to http://boardgamegeek.com find the game and use the information from web-site to fill the gameinfos.

The next step is to replace game_box.png with proper images, usually you can find all images including publisher logo on boardgamegeek website.

Details about images can be found here: Game art: img directory.

Now important step. You have to LOAD these files in studio website through control panel. So go to Control Panel -> Manager Games -> heartsYOUNAME and press Reload for 'Reload game informations' and 'Reload game box image'

Now try to start the game again. If you some-how introduced a syntax error in gameinfos file it may not actually work (game won't start). Always use "Express Start" button to start the game. You should see a standard state prompt from template. You should see X players on the right, testdude0 .. testdudeX-1. To switch between them press the red arrow button near their names, it will open another tab. This way you don't need to login and logout from multiple accounts!

Layout ad Graphics

Mentally it is easier to start with game layout and graphics pieces. Even when nothing is working its give your moral satisfaction!

There are few ways of how html could have been generated, you could have start with nothing and generate all by java script. Or you could have started with complete game markup in html and make java script just hide and move pieces around. BGA framework provides also a third way which is mix of both plus template engine to generate HTML using php. The only thing is really annoying about template engine is that you cannot put any translatable strings in the template (which means any visible text at all), if you using template approach all stings have to extracted as variables and injected through php (.view.php). This page explains template engine in great details:Template Engine.

The other disadvantages of template engine is you cannot run and debug it locally, in the begging of development its a lot faster run off local pages, you can do it with some trickery described here Tools and Tips for BGA Studio

So at this stage you should complete the following:

• Create an layout of the game, where is main board, player areas, zones, other supporting areas, etc
• Create css and html snippets for all game pieces: boards, tokens, meeples, etc. Place then all in initial template (even they not suppose to be visible). I.e. create fake player's hand with cards, put meeples on the board
• Hook layout to number of players and colors picked by the game and test with multiple players

If at this time you don't have graphics yet create pieces with just css, you can use shape, background color and object text using css ::after construct.

TO BE CONTINUED...