BGA Studio Cookbook

WORK IN PROGRESS

This page is collection of design and implementation recipes for BGA Studio framework. For tooling and usage recipes see Tools and tips of BGA Studio.

Visual Effects, Layout and Animation

Create all pieces statically

Ingredients: ggg_ggg.tpl, ggg.css, ggg.view.php (optional)

• Create ALL game pieces in html template (.tpl)
• ALL pieces should have unique id, and it should be meaningful, i.e. meeple_red_1d
• Do not use inline styling
• Id of player's specific pieces should use some sort of 'color' identification, since player id cannot be used in static layout, you can use english color name, hex 6 char value, or color "number" (1,2,3...)
• Pieces should have separated class for its color, type, etc, so it can be easily styled in groups. In example below you now can style all meeples, all red meeples or all red tokens, or all "first" meeples

in .tpl file:

 
  <div id="home_red" class="home red">
     <div id="meeple_red_1" class="meeple red n1"></div>
     <div id="meeple_red_2" class="meeple red n2"></div>
  </div>

in .css file:

.meeple {
	width: 32px;
	height: 39px;
	background-image: url(img/78_64_stand_meeples.png);
	background-size: 352px;
}

.meeple.red {
	background-position: 30% 0%;
}

• There should be straight forward mapping between server id and js id (or 1:1)
• You place objects in different zones of the layout, and setup css to take care of layout

.home .meeple{
   display: inline-block;
}

• If you need to have a temporary object that look like original you can use dojo.clone (and change id to some temp id)
• If there is lots of repetition or zone grid you can use template generator, but inject style declaration in css instead of inline style for flexibility

Note:

• If you use this model you cannot use premade js components such as Stock and Zone

Game Model and Database design

tbd

Assorted Stuff

tbd