https://be.doc.boardgamearena.com/api.php?action=feedcontributions&feedformat=atom&user=ShadowphiarBoard Game Arena - Уклад удзельніка [be]2026-09-30T12:08:55ZУклад удзельнікаMediaWiki 1.39.0https://be.doc.boardgamearena.com/index.php?title=Game_interface_stylesheet:_yourgamename.css&diff=5950Game interface stylesheet: yourgamename.css2020-10-23T09:03:13Z<p>Shadowphiar: </p>
<hr />
<div>{{Studio_Framework_Navigation}}<br />
<br />
This is the CSS stylesheet of your game User Interface.<br />
<br />
Styles defined on this file will be applied to the HTML elements you define in your HTML template (yourgame_yourgame.tpl), and to HTML elements you create dynamically with Javascript.<br />
<br />
Usually, you are using CSS to:<br />
<br />
1°) define the overall layout of your game<br />
(ex: place the board on the top left, place player's hand beside, place the deck on the right, ...).<br />
<br />
2°) create your CSS-sprites:<br />
All images of your games should be gathered into a small number of image files. Then, using background-image and background-position CSS properties, you create HTML blocks that can display these images correctly.<br />
<br />
Example:<br />
<pre><br />
Example of CSS sprites (a black token and a white token, 20x20px each, embedded in the same "tokens.png" 40x20px image):<br />
<br />
.white_token {<br />
background-image: url('img/tokens.png');<br />
background-position: 0px 0px;<br />
}<br />
.black_token {<br />
background-image: url('img/tokens.png');<br />
background-position: -20px 0px;<br />
}<br />
.token {<br />
width: 20px;<br />
height: 20px;<br />
background-repeat: none;<br />
}<br />
</pre><br />
<br />
3°) ... anything else:<br />
<br />
It is really easy to add and remove CSS classes dynamically from your Javascript with dojo.addClass and dojo.removeClass. It is also easy to check if an element has a class (dojo.hasClass) or to get all elements with a specific class (dojo.query). <br />
<br />
This is why, very often, using CSS classes for the logic of your user interface allow you to do complex thing easily.<br />
<br />
Note: on the production platform, this file will be compressed and comments will be removed. Consequently, don't hesitate to put as many comments as necessary.<br />
<br />
Important: ALL the CSS directives for your game must be included in this CSS file. You can't create additional CSS files and import them.<br />
<br />
== Warning: using percentage in background-position ==<br />
<br />
In the example above, you will see "background-position: -20px 0px;" is used for the black token. You could also write this as "background-position: -100% 0%;" which displays the image at the same offset, because it is relative to the size of the .token bounding box, and this seems preferable because there is less dependence on the precise size of your images. Sadly however, this will cause issues on iPhone, on iPad, and on MacOS using Safari, because that browser calculates this offset in a slightly different way than Chrome or Firefox. (If the size of the div on screen, after any further scaling - which is done for you by the framework to fit games into small windows - is not a round integer number of pixels, then the offset of the image will be incorrect). To avoid this issue, either:<br />
* specify the background-position offsets in pixels.<br />
* choose the size of your div so that, after any global scaling (this.gameinterface_zoomFactor), it will occupy an integer number of pixels on the screen.<br />
* define a <code>font-size</code> in your div and specify background-position in units of <code>em</code>.<br />
<br />
== Warning: using Z-index ==<br />
<br />
You may use z-index CSS property in your game interface, but you should pay attention to the following: BGA dialogs are displayed with a z-index of 950. If you want to use z-index safely, you should use value '''lower than 900'''.<br />
<br />
About z-index: don't forget that if you are using a z-index, your element will be displayed above all elements that do not have a z-index. So it's no use to have big z-index values: 1 is enough most of the time :)<br />
<br />
== Tip: how to make your cards looks beautiful :) ==<br />
<br />
This piece of CSS (to adapt to your needs) is adding rounded corners + a shadow to your card.<br />
<br />
<pre><br />
border-radius: 10px;<br />
border: 1px black solid;<br />
<br />
-moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.4);<br />
-webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.4);<br />
-o-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.4);<br />
box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.4);<br />
filter:progid:DXImageTransform.Microsoft.Shadow(color=#656565, Direction=134, Strength=30); <br />
</pre><br />
<br />
== spectatorMode ==<br />
<br />
When a spectator (= a player that is not part of the game) is viewing a game, the BGA framework add the CSS class "spectatorMode" to the wrapping HTML tag of your game.<br />
<br />
This way, if you want to apply a special style to some elements of your game for spectators, you can do this in your CSS:<br />
<br />
<pre><br />
.spectatorMode #your_element_id {<br />
/* your special style */<br />
}<br />
</pre><br />
<br />
The most common usage of this is to hide some elements to spectators. For example, to hide "my hand" elements:<br />
<br />
<pre><br />
.spectatorMode #my_hand {<br />
display: none;<br />
}<br />
</pre></div>Shadowphiarhttps://be.doc.boardgamearena.com/index.php?title=Game_interface_stylesheet:_yourgamename.css&diff=5276Game interface stylesheet: yourgamename.css2020-08-13T23:30:10Z<p>Shadowphiar: </p>
<hr />
<div>{{Studio_Framework_Navigation}}<br />
<br />
This is the CSS stylesheet of your game User Interface.<br />
<br />
Styles defined on this file will be applied to the HTML elements you define in your HTML template (yourgame_yourgame.tpl), and to HTML elements you create dynamically with Javascript.<br />
<br />
Usually, you are using CSS to:<br />
<br />
1°) define the overall layout of your game<br />
(ex: place the board on the top left, place player's hand beside, place the deck on the right, ...).<br />
<br />
2°) create your CSS-sprites:<br />
All images of your games should be gathered into a small number of image files. Then, using background-image and background-position CSS properties, you create HTML blocks that can display these images correctly.<br />
<br />
Example:<br />
<pre><br />
Example of CSS sprites (a black token and a white token, 20x20px each, embedded in the same "tokens.png" 40x20px image):<br />
<br />
.white_token {<br />
background-image: url('img/tokens.png');<br />
background-position: 0px 0px;<br />
}<br />
.black_token {<br />
background-image: url('img/tokens.png');<br />
background-position: -20px 0px;<br />
}<br />
.token {<br />
width: 20px;<br />
height: 20px;<br />
background-repeat: none;<br />
}<br />
</pre><br />
<br />
3°) ... anything else:<br />
<br />
It is really easy to add and remove CSS classes dynamically from your Javascript with dojo.addClass and dojo.removeClass. It is also easy to check if an element has a class (dojo.hasClass) or to get all elements with a specific class (dojo.query). <br />
<br />
This is why, very often, using CSS classes for the logic of your user interface allow you to do complex thing easily.<br />
<br />
Note: on the production platform, this file will be compressed and comments will be removed. Consequently, don't hesitate to put as many comments as necessary.<br />
<br />
Important: ALL the CSS directives for your game must be included in this CSS file. You can't create additional CSS files and import them.<br />
<br />
== Warning: using percentage in background-position ==<br />
<br />
In the example above, you will see "background-position: -20px 0px;" is used for the black token. You could also write this as "background-position: -100% 0%;" which displays the image at the same offset, because it is relative to the size of the .token bounding box, and this seems preferable because there is less dependence on the precise size of your images. Sadly however, this will cause issues on iPhone, on iPad, and on MacOS using Safari, because that browser calculates this offset in a slightly different way than Chrome or Firefox. (If the size of the div on screen, after any further scaling - which is done for you by the framework to fit games into small windows - is not a round integer number of pixels, then the offset of the image will be incorrect). To avoid this issue always specify the offsets in pixels.<br />
<br />
== Warning: using Z-index ==<br />
<br />
You may use z-index CSS property in your game interface, but you should pay attention to the following: BGA dialogs are displayed with a z-index of 950. If you want to use z-index safely, you should use value '''lower than 900'''.<br />
<br />
About z-index: don't forget that if you are using a z-index, your element will be displayed above all elements that do not have a z-index. So it's no use to have big z-index values: 1 is enough most of the time :)<br />
<br />
== spectatorMode ==<br />
<br />
When a spectator (= a player that is not part of the game) is viewing a game, the BGA framework add the CSS class "spectatorMode" to the wrapping HTML tag of your game.<br />
<br />
This way, if you want to apply a special style to some elements of your game for spectators, you can do this in your CSS:<br />
<br />
<pre><br />
.spectatorMode #your_element_id {<br />
/* your special style */<br />
}<br />
</pre><br />
<br />
The most common usage of this is to hide some elements to spectators. For example, to hide "my hand" elements:<br />
<br />
<pre><br />
.spectatorMode #my_hand {<br />
display: none;<br />
}<br />
</pre></div>Shadowphiarhttps://be.doc.boardgamearena.com/index.php?title=BGA_game_Lifecycle&diff=5159BGA game Lifecycle2020-08-03T08:59:36Z<p>Shadowphiar: </p>
<hr />
<div>{{Studio_Framework_Navigation}}<br />
<br />
Here's a summary of the different steps you would follow when developing a game with BGA Studio.<br />
<br />
{| class="wikitable"<br />
|-<br />
! Step !! How to reach this step !! What happened during the step?<br />
|-<br />
| Initial || [[How to join BGA developer team?]] || You can choose to join an existing team / create a new project<br />
|-<br />
| Assigned || You choose a game || You can start the development of the game<br />
|-<br />
| Pre-alpha || You've started to write some piece of code || You develop the game. During this phase, we can assist you with the framework and give you some pieces of advice.<br />
|-<br />
| Alpha || You tell us that your development is finished || "BGA review": we are reviewing your game and check if it respects [http://fr.slideshare.net/boardgamearena/bga-studio-guidelines BGA guidelines]. If not, we will ask you (and help you) to fix them.<br />
|-<br />
| Private beta || We give a "go" || "Publisher review": On preproduction platform, the publisher, the designer, we and you can test the game together and separately. We help you to take into account remarks from the publisher and the designer.<br />
|-<br />
| Public beta || The adaptation is approved by the publisher || We find together a good launch date for the game, we announce the game on BGA news, and then player can start to play! During the first days, it is common that some bugs are reported by players, and you can fix them following the instructions in [[Post-release phase]].<br />
|-<br />
| Gold || The game is stable on BGA || Congrats! You can still modify and optimize things following the instructions in [[Post-release phase]].<br />
|}<br />
<br />
=== See also ===<br />
<br />
* [https://boardgamearena.com/forum/viewtopic.php?f=12&t=15288 Announcement of the alpha review process]</div>Shadowphiarhttps://be.doc.boardgamearena.com/index.php?title=BGA_Studio_Cookbook&diff=4183BGA Studio Cookbook2020-04-29T09:19:58Z<p>Shadowphiar: /* Visual Effects, Layout and Animation */ Add tip for hi-definition (or "retina") graphics</p>
<hr />
<div>{{Studio_Framework_Navigation}}<br />
<br />
This page is collection of design and implementation recipes for BGA Studio framework.<br />
For tooling and usage recipes see [[Tools and tips of BGA Studio]].<br />
If you have your own recipes feel free to edit this page.<br />
<br />
== Visual Effects, Layout and Animation ==<br />
<br />
=== Create pieces dynamically (using template) ===<br />
<br />
'''Ingredients:''' ggg_ggg.tpl, ggg.js<br />
<br />
Note: this method is recommended by BGA guildlines<br />
<br />
Declared js template with variables in .tpl file, like this<br />
<pre><br />
<script type="text/javascript"><br />
// Javascript HTML templates<br />
var jstpl_ipiece = '<div class="${type} ${type}_${color} inlineblock" aria-label="${name}" title="${name}"></div>';<br />
</script><br />
</pre><br />
<br />
Use it like this in .js file<br />
div = this.format_block('jstpl_ipiece', {<br />
type : 'meeple',<br />
color : 'ff0000',<br />
name : 'Bob',<br />
});<br />
<br />
Then you do whatever you need to do with that div, this one specifically design to go to log entries, because it has embedded title (otherwise its a picture only) and no id.<br />
<br />
Note: you could have place this variable in js itself, but keeping it in .tpl allows you to have your js code be free of HTML. Normally it never happens but<br />
it is good to strive for it.<br />
Note: you can also use string concatenation, its less readable. You can also use dojo dom object creation api's but its brutally verbose and its more unreadable.<br />
<br />
<br />
=== Create pieces dynamically (using string concatenation) ===<br />
<br />
'''Ingredients:''' ggg.js<br />
<br />
Note: Not recommended<br />
<br />
<pre><br />
div = "<div class='meeple "+color+"'></div>";<br />
</pre><br />
=== Create all pieces statically ===<br />
<br />
'''Ingredients:''' ggg_ggg.tpl, ggg.css, ggg.view.php (optional) <br />
<br />
* Create ALL game pieces in html template (.tpl)<br />
* ALL pieces should have unique id, and it should be meaningful, i.e. meeple_red_1d<br />
* Do not use inline styling<br />
* 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...)<br />
* 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<br />
<br />
in .tpl file:<br />
<pre> <br />
<div id="home_red" class="home red"><br />
<div id="meeple_red_1" class="meeple red n1"></div><br />
<div id="meeple_red_2" class="meeple red n2"></div><br />
</div><br />
</pre><br />
<br />
in .css file:<br />
<br />
<pre><br />
.meeple {<br />
width: 32px;<br />
height: 39px;<br />
background-image: url(img/78_64_stand_meeples.png);<br />
background-size: 352px;<br />
}<br />
<br />
.meeple.red {<br />
background-position: 30% 0%;<br />
}<br />
</pre><br />
<br />
* There should be straight forward mapping between server id and js id (or 1:1)<br />
* You place objects in different zones of the layout, and setup css to take care of layout<br />
<br />
<pre><br />
.home .meeple{<br />
display: inline-block;<br />
}<br />
</pre><br />
* If you need to have a temporary object that look like original you can use dojo.clone (and change id to some temp id)<br />
* 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<br />
<br />
Note:<br />
* If you use this model you cannot use premade js components such as Stock and Zone<br />
* You have to use alternative methods of animation (slightly altered) since default method will leave object with inline style attributes which you don't need<br />
<br />
=== Use thematic fonts ===<br />
<br />
'''Ingredients:''' ggg.css<br />
<br />
Sometime game elements use specific fonts of text, if you want to match it up you can load some specific font (from some free font source).<br />
<br />
[[File:Dragonline_font.png]]<br />
<br />
.css<br />
<pre><br />
/* latin-ext */<br />
@font-face {<br />
font-family: 'Qwigley';<br />
font-style: normal;<br />
font-weight: 400;<br />
src: local('Qwigley'), local('Qwigley-Regular'), url(https://fonts.gstatic.com/s/qwigley/v6/2Dy1Unur1HJoklbsg4iPJ_Y6323mHUZFJMgTvxaG2iE.woff2) format('woff2');<br />
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;<br />
}<br />
/* latin */<br />
@font-face {<br />
font-family: 'Qwigley';<br />
font-style: normal;<br />
font-weight: normal;<br />
src: local('Qwigley'), local('Qwigley-Regular'), url(https://fonts.gstatic.com/s/qwigley/v6/gThgNuQB0o5ITpgpLi4Zpw.woff2) format('woff2');<br />
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;<br />
}<br />
@font-face {<br />
font-family: 'Qwigley';<br />
font-style: normal;<br />
font-weight: normal;<br />
src: local('Qwigley'), local('Qwigley-Regular'), url(http://ff.static.1001fonts.net/q/w/qwigley.regular.ttf) format('ttf');<br />
}<br />
<br />
.zone_title {<br />
display: inline-block;<br />
position: absolute;<br />
font: italic 32px/32px "Qwigley", cursive; <br />
height: 32px;<br />
width: auto;<br />
}<br />
</pre><br />
<br />
<br />
=== Use player color in template ===<br />
<br />
'''Ingredients:''' ggg_ggg.tpl, ggg.view.php<br />
<br />
.view.php:<br />
<pre><br />
function build_page($viewArgs) {<br />
// Get players & players number<br />
$players = $this->game->loadPlayersBasicInfos();<br />
$players_nbr = count($players);<br />
/**<br />
* ********* Place your code below: ***********<br />
*/<br />
<br />
// Set PCOLOR to the current player color hex<br />
global $g_user;<br />
$cplayer = $g_user->get_id();<br />
if (array_key_exists($cplayer, $players)) { // may be not set if spectator<br />
$player_color = $players [$cplayer] ['player_color'];<br />
} else {<br />
$player_color = 'ffffff'; // spectator<br />
}<br />
$this->tpl ['PCOLOR'] = $player_color;<br />
</pre><br />
<br />
=== Scale to fit for big boards ===<br />
<br />
'''Ingredients:''' ggg_ggg.tpl, ggg.js<br />
<br />
Lets say you have huge game board, and lets say you want it to be 1400px wide. Besides the board there will be side bar which is 240 and trim. <br />
My display is 1920 wide so it fits, but there is big chance other people won't have that width. What do you do?<br />
Easiest thing I came up with is to scale whole content to fit (everything you declare in .tpl file). Tested or firefox and chrome.<br />
<br />
ggg_ggg.tpl:<br />
<pre><br />
<div id="thething" class="thething" style="width: 1400px;"><br />
... everything else you declare ...<br />
</div><br />
</pre><br />
<br />
ggg.js:<br />
<pre><br />
setup : function(gamedatas) {<br />
console.log("Starting game setup");<br />
...<br />
this.interface_min_width = 740;<br />
this.interface_max_width = 1400;<br />
dojo.connect(window, "onresize", this, dojo.hitch(this, "adaptViewportSize"));<br />
},<br />
<br />
adaptViewportSize : function() {<br />
var pageid = "page-content";<br />
var nodeid = "thething";<br />
<br />
var bodycoords = dojo.marginBox(pageid);<br />
var contentWidth = bodycoords.w;<br />
<br />
var browserZoomLevel = window.devicePixelRatio; <br />
//console.log("zoom",browserZoomLevel);<br />
if (contentWidth >= this.interface_max_width || browserZoomLevel >1 || this.control3dmode3d) {<br />
dojo.style(nodeid,'transform','');<br />
return;<br />
}<br />
<br />
var percentageOn1 = contentWidth / this.interface_max_width;<br />
dojo.style(nodeid, "transform", "scale(" + percentageOn1 + ")");<br />
},<br />
</pre><br />
<br />
=== Dynamic tooltips ===<br />
<br />
If you really need a dynamic tooltip you can use this technique. (Only use it if the static tooltips provided by the BGA framework are not sufficient.)<br />
<br />
new dijit.Tooltip({<br />
connectId: ["divItemId"],<br />
getContent: function(matchedNode){<br />
return "... calculated ..."; <br />
}<br />
});<br />
<br />
<br />
This is an out-of-the-box djit.Tooltip. It has a ''getContent'' method which is called dynamically.<br />
<br />
The string function return becomes the innerHTML of the tooltip, so it can be anything (matchedNode in this case) dojo node representing dom object with id of "divItemId" but there are more parameters which I am not posting here which allows more sophisticated subnode queries.<br />
<br />
[https://dojotoolkit.org/reference-guide/1.10/dijit/Tooltip.html dijit.Tooltip]<br />
<br />
It's not part of the BGA API so use at your own risk.<br />
<br />
=== Accessing images from js ===<br />
<br />
'''Ingredients:''' ggg.js<br />
ggg.js<br />
<br />
<pre> <br />
// your game resources<br />
<br />
var my_img = '<img src="'+g_gamethemeurl+'img/cards.jpg"/>';<br />
<br />
// shared resources<br />
var my_help_img = "<img class='imgtext' src='" + g_themeurl + "img/layout/help_click.png' alt='action' /> <span class='tooltiptext'>" +<br />
text + "</span>";<br />
</pre> <br />
<br />
=== Inject images and styled html in the log ===<br />
<br />
'''Ingredients:''' ggg.js, ggg.game.php<br />
<br />
So you want nice pictures in the game log, what do you do? First idea that come to mind is to send html from php in notifications. <br />
This is bad idea for many reasons<br />
* Its bad architecture, ui elements leak into server now you have to manage ui in many places<br />
* If you decided to change something in ui in future version, old games reply and tutorials may not work, since they use stored notifications<br />
* When you read log preview for old games its unreadable (this is log before you enter the game reply, useful for troubleshooting or game analysis)<br />
* Its more data to transfer and store in db<br />
* Its nightmare for translators<br />
<br />
So what else can you do? I use this recipe which I is client side log injection. I intercept log arguments and replace them by html on my client side.<br />
<br />
[[File:clientloginjection.png|left]] <br />
<br />
ggg.js<br />
<br />
<pre> <br />
<br />
/** Override this function to inject html for log items */<br />
<br />
/* @Override */<br />
format_string_recursive : function(log, args) {<br />
try {<br />
if (log && args && !args.processed) {<br />
args.processed = true;<br />
<br />
if (!this.isSpectator)<br />
args.You = this.divYou(); // will replace ${You} with colored version<br />
<br />
// list of other known variables<br />
var keys = ['place_name','token_name'];<br />
<br />
<br />
for ( var i in keys) {<br />
var key = keys[i];<br />
if (typeof args[key] == 'string') {<br />
args[key] = this.getTokenDiv(key, args); <br />
}<br />
}<br />
}<br />
} catch (e) {<br />
console.error(log,args,"Exception thrown", e.stack);<br />
}<br />
return this.inherited(arguments);<br />
},<br />
<br />
/* Implementation of proper colored You with background in case of white or light colors */<br />
<br />
divYou : function() {<br />
var color = this.gamedatas.players[this.player_id].color;<br />
var color_bg = "";<br />
if (this.gamedatas.players[this.player_id] && this.gamedatas.players[this.player_id].color_back) {<br />
color_bg = "background-color:#" + this.gamedatas.players[this.player_id].color_back + ";";<br />
}<br />
var you = "<span style=\"font-weight:bold;color:#" + color + ";" + color_bg + "\">" + __("lang_mainsite", "You") + "</span>";<br />
return you;<br />
},<br />
<br />
<br />
</pre><br />
<br />
<br />
<pre><br />
getTokenDiv : function(key, args) {<br />
// ... implement whatever html you want here, example from sharedcode.js<br />
var token_id = args[key];<br />
var item_type = getPart(token_id,0);<br />
var logid = "log" + (this.globalid++) + "_" + token_id;<br />
switch (item_type) {<br />
case 'wcube':<br />
var tokenDiv = this.format_block('jstpl_resource_log', {<br />
"id" : logid,<br />
"type" : "wcube",<br />
"color" : getPart(token_id,1),<br />
});<br />
return tokenDiv;<br />
break;<br />
case 'meeple':<br />
if ($(token_id)) {<br />
var clone = dojo.clone($(token_id));<br />
<br />
dojo.attr(clone, "id", logid);<br />
this.stripPosition(clone);<br />
dojo.addClass(clone, "logitem");<br />
return clone.outerHTML;<br />
}<br />
break;<br />
<br />
default:<br />
break;<br />
}<br />
<br />
return "'" + this.clienttranslate_string(this.getTokenName(token_id)) + "'";<br />
},<br />
getTokenName : function(key) {<br />
return this.gamedatas.token_types[key].name; // get name for the key, from static table for example<br />
},<br />
</pre><br />
<br />
Note in this case server simply injects token_id as name, and client substitutes it for the real translated name or the picture<br />
<br />
ggg.game.php:<br />
<br />
$this->notifyPlayer($player_id,'playerLog',clienttranslate('${You} moved cube'),['You'=>'You']);<br />
<br />
ggg.game.php:<br />
<br />
$this->notifyAllPlayers('playerLog',clienttranslate('Game moves ${token_name}'),['token_name'=>$token_id]);<br />
<br />
Now if you don't like raw log containing id instead of name but want name, and want substitution, you can use another parameter as id. The problem with that,<br />
it will work at first, but if you reload game using F5 you will loose your additional parameters, why? Because when game reloads it does not actually send same<br />
notifications, it sends special "hitstorical_log" notification where all parameters not listed in the "log" are removed. There is a hack (feature) to circumvent that,<br />
called recursive parameters. I.e. you can send stuff like this:<br />
<br />
$this->notifyAllPlayers('playerLog',clienttranslate('Game moves ${token_name_rec}'),<br />
['token_name_rec'=>['log'=>'${token_name}',<br />
'args'=> ['token_name'=>clienttranslate('Boo'), 'token_id'=>$token_id, 'i18n'=>['token_name'] ]<br />
]<br />
]);<br />
<br />
and in format_log_recursive<br />
var key = 'token_name';<br />
if (typeof args[key] == 'string' && typeof args['token_id'] == 'string') {<br />
args[key] = this.getTokenDiv('token_id', args); <br />
}<br />
<br />
==== Alternative way ====<br />
<br />
Here is an example of what was done for Terra Mystica which is maybe not as good, but is more simple and straightforward:<br />
<br />
<pre><br />
//Define the proper message<br />
$message = clienttranslate('${player_name} gets ${power_income} via Structures');<br />
if ($price > 0) {<br />
self::DbQuery("UPDATE player SET player_score = player_score - $price WHERE player_id = $player_id");<br />
$message = clienttranslate('${player_name} pays ${vp_price} and gets ${power_income} via Structures');<br />
}<br />
<br />
// Notify<br />
self::notifyAllPlayers( "powerViaStructures", $message, array(<br />
'i18n' => array( ),<br />
'player_id' => $player_id,<br />
'player_name' => self::getUniqueValueFromDb( "SELECT player_name FROM player WHERE player_id = $player_id" ),<br />
'power_tokens' => $power_tokens,<br />
'vp_price' => self::getLogsVPAmount($price),<br />
'power_income' => self::getLogsPowerAmount($power_income),<br />
'newScore' => self::getUniqueValueFromDb( "SELECT player_score FROM player WHERE player_id = $player_id" ),<br />
'counters' => $this->getGameCounters(null),<br />
) );<br />
</pre><br />
<br />
With some functions to have the needed html added inside the substitution variable, such as:<br />
<br />
<pre><br />
function getLogsPowerAmount( $amount ) <br />
{<br />
return "<div class='tmlogs_icon' title='Power'><div class='power_amount'>$amount</div></div>";<br />
}<br />
</pre><br />
<br />
=== High-Definition Graphics ===<br />
<br />
Some users will have screens which can display text and images at a greater resolution than the usual 72 dpi, e.g. the "Retina" screens on the 5k iMac, all iPads, and high-DPI screens on laptops from many manufacturers. If you can get art assets at this size, they will make your game look extra beautiful. You ''could'' just use large graphics and scale them down, but that would increase the download time and bandwidth for users who can't display them. Instead, a good way is to prepare a separate graphics file at exactly twice the size you would use otherwise, and add "@2x" at the end of the filename, e.g. if pieces.png is 240x320, then pieces@2x.png is 480x640.<br />
<br />
There are two changes required in order to use the separate graphics files. First in your css, where you use a file, add a media query which overrides the original definition and uses the bigger version on devices which can display them. Ensuring that the "background-size" attribute is set means that the size of the displayed object doesn't change, but only is drawn at the improved dot pitch.<br />
<pre><br />
.piece {<br />
position: absolute;<br />
background-image: url('img/pieces.png');<br />
background-size:240px 320px;<br />
z-index: 10;<br />
}<br />
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2), (min-resolution: 192dpi)<br />
{<br />
.piece {<br />
background-image: url('img/pieces@2x.png');<br />
}<br />
}<br />
</pre><br />
<br />
Secondly, in your setup function in javascript, you must ensure than only the appropriate one version of the file gets pre-loaded (otherwise you more than waste the bandwidth saved by maintaining the standard-resolution file). Note that the media query is the same in both cases:<br />
<pre><br />
var isRetina = "(-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2), (min-resolution: 192dpi)";<br />
if (window.matchMedia(isRetina).matches)<br />
{<br />
this.dontPreloadImage( 'pieces.png' );<br />
this.dontPreloadImage( 'board.jpg' );<br />
}<br />
else<br />
{<br />
this.dontPreloadImage( 'pieces@2x.png' );<br />
this.dontPreloadImage( 'board@2x.jpg' );<br />
}<br />
</pre><br />
<br />
== Game Model and Database design ==<br />
<br />
<br />
=== Database for The euro game ===<br />
Lets say we have a game with workers, dice, tokens, board, resources, money and vp. Workers and dice can be placed in various zones on the board, and you can get resources, money, tokens and vp in your home zone. Also tokens can be flipped or not flipped.<br />
<br />
[[File:Madeira board.png]]<br />
<br />
<br />
Now lets try to map it, we have<br />
* (meeple,zone)<br />
* (die, zone, sideup)<br />
* (resource cube/money token/vp token,player home zone)<br />
* (token, player home zone, flip state)<br />
We can notice that resource and money are uncountable, and don't need to be track individually so we can replace our mapping to<br />
* (resource type/money,player home zone, count)<br />
And vp stored already for us in player table, so we can remove it from that list.<br />
<br />
Now when we get to encode it we can see that everything can be encoded as (object,zone,state) form, where object and zone is string and state is integer. The resource mapping is slightly different semantically so you can go with two table, or counting using same table with state been used as count for resources.<br />
<br />
So the piece mapping for non-grid based games can be in most case represented by (string: token_key, string: location, int: state), example of such database schema can be found here: [https://github.com/elaskavaia/bga-sharedcode/blob/master/dbmodel.sql dbmodel.sql] and class implementing access to it here [https://github.com/elaskavaia/bga-sharedcode/blob/master/modules/tokens.php table.game.php].<br />
<br />
Variant 1: Minimalistic<br />
<br />
CREATE TABLE IF NOT EXISTS `token` (<br />
`token_key` varchar(32) NOT NULL,<br />
`token_location` varchar(32) NOT NULL,<br />
`token_state` int(10),<br />
PRIMARY KEY (`token_key`)<br />
) ENGINE=InnoDB DEFAULT CHARSET=utf8;<br />
<br />
<br />
{| class="wikitable"<br />
|+token<br />
! token_key<br />
! token_location<br />
! token_state<br />
|-<br />
|meeple_red_1<br />
|home_red<br />
|0<br />
|-<br />
|dice_black_2<br />
|board_guard<br />
|1<br />
|-<br />
|dice_green_1<br />
|board_action_mayor<br />
|3<br />
|-<br />
|bread<br />
|home_red<br />
|5<br />
|}<br />
<br />
Now how we represent resource counters such as bread?<br />
Using same table from we simply add special counter token for bread and use state to indicate the count. Note to keep first column unique we have to add player identification for that counter, i.e. ff0000 is red player.<br />
<br />
{| class="wikitable"<br />
|+token<br />
! token_key<br />
! token_location<br />
! token_state<br />
|-<br />
|bread_ff0000<br />
|tableau_ff0000<br />
|5<br />
|}<br />
<br />
<br />
<br />
Variant 2: Additional resource table, resource count for each player id<br />
<br />
CREATE TABLE IF NOT EXISTS `resource` (<br />
`player_id` int(10) unsigned NOT NULL,<br />
`resource_key` varchar(32) NOT NULL,<br />
`resource_count` int(10) signed NOT NULL,<br />
PRIMARY KEY (`player_id`,`resource_key`)<br />
) ENGINE=InnoDB DEFAULT CHARSET=utf8;<br />
<br />
ALTER TABLE resource ADD CONSTRAINT fk_player_id FOREIGN KEY (player_id) REFERENCES player(player_id);<br />
<br />
{| class="wikitable"<br />
|+resource<br />
! player_id<br />
! resource_key<br />
! resource_count<br />
|-<br />
|123456<br />
|bread<br />
|5<br />
|}<br />
<br />
<br />
<br />
Variant 3: More normalised<br />
<br />
This version is similar to "card" table from hearts tutorial, you can also use exact cards database schema and Deck implementation for most purposes (even you not dealing with cards). <br />
<br />
CREATE TABLE IF NOT EXISTS `token` (<br />
`token_id` int(10) unsigned NOT NULL AUTO_INCREMENT,<br />
`token_type` varchar(16) NOT NULL,<br />
`token_arg` int(11) NOT NULL,<br />
`token_location` varchar(32) NOT NULL,<br />
`token_state` int(10),<br />
PRIMARY KEY (`token_id`)<br />
) ENGINE=InnoDB DEFAULT CHARSET=utf8;<br />
<br />
{| class="wikitable"<br />
|+token<br />
! token_id<br />
! token_type<br />
! token_arg<br />
! token_location<br />
! token_state<br />
|-<br />
|22<br />
|meeple<br />
|123456<br />
|home_123456<br />
|0<br />
|-<br />
|23<br />
|dice<br />
|2<br />
|board_guard<br />
|1<br />
|-<br />
|26<br />
|dice<br />
|1<br />
|board_action_mayor<br />
|3<br />
|-<br />
|49<br />
|bread<br />
|0<br />
|home_123456<br />
|5<br />
|}<br />
<br />
Advantages of this would be is a bit more straightforward to do some queries in db, disadvantage its hard to read (as you can compare with previous example, you<br />
cannot just look at say, ah I know what it means). Another questionable advantage is it allows you to do id randomisation, so it hard to do crafted queries to <br />
cheat, the down side of that you cannot understand it either, and handcraft db states for debugging or testing.<br />
<br />
=== Database for The card game ===<br />
<br />
Lets say you have a standard card game, player have hidden cards in hand, you can draw card from draw deck, play card on tableau and discard to discard pile.<br />
We have to design database for such game.<br />
<br />
In real word to "save" the game we take a picture a play area, save cards from it, then put away draw deck, discard and hand of each player separately and mark it, also we will record current scoring (if any) and who's turn was it.<br />
<br />
* Framework handles state machine transition, so you don't have to worry about database design for that (i.e. who's turn it is, what phase of the game we are at, you still have to design it but part of state machine step)<br />
* Also framework supports basic player information, color, order around the table, basic scoring, etc, so you don't have to worry about it either<br />
* The only thing you need in our database is state of the "board", which is "where each pieces is, and in what state", or (position,rotation) pair.<br />
<br />
Lets see what we have for that:<br />
* The card state is very simple, its usually "face up/face down", "tapped/untapped", "right side up/up side down"<br />
* As position go we never need real coordinates x,y,z. We need to know what "zone" card was, and depending on the zone it may sometimes need an extra "z" or "x" as card order. The zone position usually static or irrelevant.<br />
* So our model is: we have cards, which have some attributes, at any given point in time they belong to a "zone", and can also have order and state<br />
* Now for mapping we should consider what information changes and what information is static, later is always candidate for material file<br />
* For dynamic information we should try to reduce amount of fields we need<br />
** we need at least a field for card, so its one<br />
** we need to know what zone cards belong to, its 2<br />
** and we have possibly few other fields, if you look closely at you game you may find out that most of the zone only need one attribute at a time, i.e. draw pile always have cards face down, hand always face up, also for hand and discard order does not matter at all (but for draw it does matter). So in majority of cases we can get away with one single extra integer field representing state or order<br />
* In real database both card and zone will be integers as primary keys referring to additional tables, but in our case its total overkill, so they can be strings as easily<br />
<br />
Variant 1: Minimalistic<br />
<br />
<pre><br />
CREATE TABLE IF NOT EXISTS `card` (<br />
`card_key` varchar(32) unsigned NOT NULL,<br />
`card_location` varchar(32) NOT NULL,<br />
`card_state` int(11) NOT NULL,<br />
PRIMARY KEY (`card_id`)<br />
) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;<br />
</pre><br />
<br />
<br />
Variant 2: More normalised<br />
<br />
This version supported by Deck php class, so unless you want to rewrite db access layer go with this one<br />
<br />
<pre><br />
CREATE TABLE IF NOT EXISTS `card` (<br />
`card_id` int(10) unsigned NOT NULL AUTO_INCREMENT,<br />
`card_type` varchar(16) NOT NULL,<br />
`card_type_arg` int(11) NOT NULL,<br />
`card_location` varchar(16) NOT NULL,<br />
`card_location_arg` int(11) NOT NULL,<br />
PRIMARY KEY (`card_id`)<br />
) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;<br />
</pre><br />
<br />
Note: if you using this schema, some zones/locations have special semantic. The 'hand' location is actually multiple locations - one per player, but player id is encoded as card_location_arg. If 'hand' in your game is ordered, visible or can have some other card states, you cannot use hand location (replacement is hand_<player_id> or hand_<color_id>)<br />
<br />
== Game Modules ==<br />
<br />
=== Including your own JavaScript module ===<br />
'''Ingredients:''' ggg.js, modules/ggg_other.js<br />
<br />
* Create ggg_other.js in modules/ folder and sync<br />
* Modify ggg.js to include it<br />
<br />
<br />
define([ "dojo", "dojo/_base/declare", "ebg/core/gamegui", "ebg/counter",<br />
// load my own module!!!<br />
g_gamethemeurl + "modules/ggg_other.js" ], function(dojo,<br />
declare) {<br />
<br />
<br />
<br />
<br />
<br />
=== Including your own PHP module ===<br />
'''Ingredients:''' ggg.game.php, modules/ggg_other.php<br />
<br />
* Create ggg_other.php in modules/ folder and sync<br />
* Modify ggg.game.php to include it<br />
<br />
require_once ('modules/ggg_other.php');<br />
<br />
== Assorted Stuff ==<br />
<br />
=== Multi Step Interactions: Select Worker/Place Worker - Using Client States ===<br />
<br />
'''Ingredients:''' ggg.js<br />
<br />
I don't think its documented feature but there is a way to do client-only states, which is absolutely wonderful for few reasons<br />
* When player iteration is two step process, such as select worker, place worker, or place worker, pick one of two resources of your choice<br />
* When multi-step process can result of impossible situation and has to be undone (by rules)<br />
* When multi-step process is triggered from multiple states (such as you can do same thing as activated card action, pass action or main action)<br />
<br />
So lets do Select Worker/Place Worker<br />
<br />
Define your server state as usual, i.e. playerMainTurn -> "You must pick up a worker".<br />
Now define a client state, we only need "name" and "descriptionmyturn", lets say "client_playerPicksLocation". Always prefix names of client state with "client_" to avoid confusion. Now we have to do the following:<br />
* Have a handler for onUpdateActionButtons for playerMainTurn to activate all possible workers he can pick<br />
* When player clicks workers, remember the worker in one of the members of the main class, I usually use one called this.clientStateArgs.<br />
* Transition to new client state<br />
onWorker: function(e) {<br />
var id = event.currentTarget.id;<br />
dojo.stopEvent(event);<br />
... // do validity checks<br />
this.clientStateArgs.worker_id = id;<br />
this.setClientState("client_playerPicksLocation", {<br />
descriptionmyturn : "${you} must select location",<br />
});<br />
}<br />
* Have a handler for onUpdateActionButtons for client_playerPicksLocation to activate all possible locations this worker can go AND add Cancel button (see below)<br />
* Have a location handler which will eventually send a server request, using stored this.clientStateArgs.worker_id as worker id<br />
* The cancel button should call a method to restore server state, also if you doing it for more than one state you can add this universally using this.on_client_state check<br />
<br />
<br />
if (this.isCurrentPlayerActive()) {<br />
if (this.on_client_state && !$('button_cancel')) {<br />
this.addActionButton('button_cancel', _('Cancel'), dojo.hitch(this, function() {<br />
this.restoreServerGameState();<br />
}));<br />
}<br />
} <br />
Note: usually I call my own function call this.cancelLocalStateEffects() which will do more stuff first then call restoreServerGameState(), same function is usually needs to be called when server request has failed (i.e. invalid move)<br />
<br />
Note: If you need more than 2 steps, you may have to do client side animation to reflect the new state, which gets trickier because you have to undo that also on cancellation.<br />
<br />
Code is available here [https://github.com/elaskavaia/bga-sharedcode/blob/master/sharedcode.js sharedcode.js] (its using playerTurnPlayCubes and client_selectCubeLocation).<br />
<br />
<br />
=== Multi Step Interactions: Action Stack - Using Client States ===<br />
<br />
'''Ingredients:''' ggg.js, ggg.game.php, material.inc.php<br />
<br />
* We have euro game where game actions consist of series of mini-actions, which can be triggered by multiple sources<br />
* Example: Russian RailRoads have multiple source of actions, such as worker slots, triggered advantages, triggered factory rewards, etc. Each of the consist of series of small action, such as "advance black rail + advance marker", once you start executing it, more mini-actions are triggered and added to the stack (in case of RRR its not a stack but a random access list but whatever)<br />
* Implementing such game with server states is rather difficult because <br />
** it require lots of states<br />
** require stack on the state machine to support return to the state we originated substate from<br />
** series can result in invalid game state (i.e. not allowed by rules), which it hard to roll back over multiple states<br />
** without undo it would be rather frustrating for the player, and undo is hard to implement<br />
<br />
So this is how to implemented it using action stack and client states<br />
<br />
Encode all mini-actions as identifier or a letter, I use letters personally<br />
<br />
For each action, trigger, etc, define a "rules" of that game element using mini-action encoding and store in material.inc.php so both server and client have access to it, no need to store it in database, rules are not going to change<br />
during the game.<br />
<br />
'''material.inc.php:'''<br />
<br />
$this->token_types = array(<br />
...<br />
'slot_action_14' => array(<br />
'name' => clienttranslate("Industry Advancement"),<br />
'rules'=>"i",<br />
),<br />
'slot_action_15' => array(<br />
'name' => clienttranslate("2 Industry Advancements"),<br />
'rules'=>"ii",<br />
),<br />
'slot_action_16' => array(<br />
'name' => clienttranslate("Industry and Black Track Advancement"),<br />
'rules'=>"ib",<br />
),<br />
);<br />
<br />
<br />
In game.php you send this to client<br />
'''ggg.game.php:'''<br />
protected function getAllDatas() {<br />
...<br />
// this is material fields<br />
$result ['token_types'] = $this->token_types;<br />
...<br />
}<br />
<br />
In .js when client selects original action, you read this field and push actions into stack, something like<br />
<br />
this.pushOperations(this.gamedatas.token_types[action_id].rules);<br />
this.processAction();<br />
<br />
And processAction() will allow user to deal with possible actions. If this is truly a stack you could have done something like<br />
processAction: function() {<br />
var op = this.popOperation();<br />
switch (op) {<br />
case 'i': <br />
this.setClientState("client_playerTurnSelectAdvantageToken", {<br />
descriptionmyturn : "${you} must select industry marker to move",<br />
});<br />
break;<br />
...<br />
}<br />
}<br />
In Russian Railroads its unordered list, so it has to offer user all possible choices driven by current unprocessed operations, then determine what operation was that from the list based on what they clicked, i.e.<br />
<br />
onMoveable : function(event) {<br />
...<br />
else if (id.startsWith('ind')) {<br />
if (!this.commitOperation('i', id, place_id)) return;<br />
}<br />
this.gamedatas_local.tokens[id] = place_id; // alter local model<br />
this.placeToken(id, place_id); // client side animation<br />
if (this.checkAchievementMoveable(new_state, old_state, id)) { // that will check if something is triggered, so we can push more stuff on the stack<br />
this.processAction();<br />
}<br />
}<br />
During client states data is collected and pushed into client array of performed operations, we also do client side animation and alter model, since we don't send intermediate steps to server.<br />
<br />
In example above we check if we client on industry marker, we will "commit" "i" operation with selected id of the marker and place_id. The commit is just pushing this data into an array.<br />
<br />
All this operations later are send to server, usually when user clicks Done. <br />
The data will be encoded for server to read into a string, i.e. i__ind2__indslot15, means move industry marker number 2 into slot 15 of industry track. And multiple operations <br />
can be separated by a space for example.<br />
<br />
At anytime during client states user can click Cancel which will restore last server state and undo all client animation back to last stored state.<br />
<br />
The only disadvantage of this method is you have to implement a lot of functionality two times - on server and client.</div>Shadowphiarhttps://be.doc.boardgamearena.com/index.php?title=Game_meta-information:_gameinfos.inc.php&diff=3869Game meta-information: gameinfos.inc.php2020-03-02T23:08:20Z<p>Shadowphiar: Added requirements from "Game page visual uplift" email, Feb 2020</p>
<hr />
<div><br />
From this file, you can edit the various meta-information of your game.<br />
<br />
Once you modified the file, don't forget to click on "Reload game informations" from the Control Panel in order in can be taken into account.<br />
<br />
Most information provided in this file are self-explainable. Some information, though:<br />
<br />
* You are not allowed to set the "'''is_beta'''" to 0 before the game has been released on BGA and stabilized.<br />
<br />
* "'''fast/medium/slow_additional_time'''": please set high values here: after the game has been released, we will lower these value to match the real game duration.<br />
<br />
* "'''players'''":<br />
** during the first step of development of a game, you'd better allow the "1 player" configuration: much easy to start/stop a game this way.<br />
** if you change the minimum number of players from for example 1 to 2, make sure the new tables you create are not restricted from 1 to 1 player otherwise when you create a new table and this account setting is used, there will be a conflict with the new minimum number of players allowed.<br />
<br />
* '''suggest_player_number''' / '''not_recommend_player_number''': don't specify anything here if there is no configuration that is REALLY better/worst than another one. You can check player's poll on BoardGameGeek game page if you have any doubt.<br />
<br />
== Losers not ranked between themselves ==<br />
<br />
By default, all player are ranked, but in some games, the rules says that there is only one winner and that all the other players are losers and not ranked between themselves. You can set this option to true so that for your game, there is only one winner and losers, without a full ranking of all players.<br />
<br />
// If in the game, all losers are equal (no score to rank them or explicit in the rules that losers are not ranked between them), set this to true <br />
// The game end result will display "Winner" for the 1st player and "Loser" for all other players<br />
'losers_not_ranked' => false,<br />
<br />
== Disable player rotation in case of rematch ==<br />
<br />
By default, in case of a rematch players are rotated so that the first player changes. If for your game it's better to always have a random player order you can change this option.<br />
<br />
// When doing a rematch, the player order is swapped using a "rotation" so the starting player is not the same<br />
// If you want to disable this, set this to false<br />
'disable_player_order_swap_on_rematch' => false,<br />
<br />
== Custom "buy this game" button ==<br />
<br />
By default, the "buy this game" button is a link to an Amazon search with the name of the game.<br />
<br />
You can replace it by a different URL / game button label with :<br />
<br />
'custom_buy_button' => array(<br />
'url' => 'http://yoururl.com',<br />
'label' => 'Name of the website'<br />
),<br />
<br />
Note : button label will be "Buy on <Name of the website>"<br />
<br />
== Tags ==<br />
<br />
Any number of '''Tags''' can be attribute to your game. Tags are useful to place your game in the correct place and to give a good quick overview of what the game is about to players.<br />
<br />
Main game category (you MUST specify one tag AND ONLY ONE from this category):<br />
* 1: Abstract game<br />
* 2: Casual games<br />
* 3: For regular players<br />
* 4: For core gamers<br />
<br />
Other tags (you can specify any numbers of tags):<br />
* 10: Short game (<10 minutes)<br />
* 11: Medium length game (10 minutes to 30 minutes)<br />
* 12: Long game (>30mn)<br />
* 20: Awarded game (Win a prestigious award) (the game must have been at the '''first''' place of one the [http://boardgamegeek.com/wiki/page/Gaming_Industry_Awards# following major awards list]).<br />
* 22: Prototype (This game has not been published yet)<br />
* 23: Classic (This game is a classic from Public Domain)<br />
* 30: 2 players (2p game / best with 2 players)<br />
* 100: Fantasy theme<br />
* 101: Science Fiction them<br />
* 102: Historical theme<br />
* 103: Adventure<br />
* 104: Exploration<br />
* 105: Conquest<br />
* 106: Building<br />
* 200: Card game (Cards plays a central role in this game)<br />
* 201: Dice<br />
* 202: Solo game<br />
* 203: Worker placement<br />
* 204: Hand management<br />
* 205: Bluff<br />
* 206: Tile placement<br />
* 207: Combinations<br />
* 208: Majority<br />
* 209: Race<br />
* 210: Collection<br />
<br />
== Game Presentation ==<br />
<br />
Short game presentation text that will appear on the game description page, structured as an array of paragraphs.<br />
<br />
Each paragraph must be wrapped with totranslate() for translation and should not contain html (plain text without formatting). A good length for this text is between 100 and 150 words (about 6 to 9 lines on a standard display)<br />
<br />
Example:<br />
'presentation' => array(<br />
totranslate("This wonderful game is about geometric shapes!"),<br />
totranslate("It was awarded best triangle game of the year in 2005 and nominated for the Spiel des Jahres."),<br />
...<br />
),</div>Shadowphiarhttps://be.doc.boardgamearena.com/index.php?title=Game_art:_img_directory&diff=3868Game art: img directory2020-03-02T23:03:41Z<p>Shadowphiar: Added requirments introduced by "Game page visual uplifting" Feb 2020</p>
<hr />
<div>== Requested images ==<br />
<br />
The following images are requested by BGA:<br />
<br />
;game_box.png<br />
* It is displayed on the main site on the game description page and when creating a table (280x280 px).<br />
* It should be a 3D image of a physical copy of the game box as it appears in an online shop.<br />
* It is better to take the version of the game that is coherent with the game art used in the adaptation, and from the original publisher of the game.<br />
* The background of the image must be transparent.<br />
* If you don't have a 3D version of the game box, you can use the following website to create one: http://www.3d-pack.com/<br />
<br />
;game_box180.png<br />
;game_box75.png<br />
<br />
* Don't modify these images, they are auto generated by "Reload game box image" action. If you have another copy of your source make sure you update you copy of these files after they have been generated and not override with old copied.<br />
<br />
;game_icon.png<br />
<br />
* It is the icon displayed in the lists of games and tables (50x50 px).<br />
* The objective of this icon is to make the game recognizable among the other games. A good idea is to take a part of the game cover that is distinctive (ex: the game title).<br />
* This one does not have to be transparent. This image should not have a border <br />
<br />
;publisher.png<br />
* It is the logo of the publisher of the game, displayed on the game description page.<br />
* The width must be 150 px. The height can be anything (reasonable). The image could be transparent.<br />
<br />
;publisher2.png (optional)<br />
* If the game has been co-published by 2 publishers, you should upload a second image named "publisher2.png" (same characteristics as the first one).<br />
<br />
;game_banner.jpg<br />
* size 1386x400px<br />
* should not contain any text; representative of the atmosphere of the game such as a cover element or communication image; the box image covering the banner on the left should stand out<br />
<br />
;game_displayX.jpg (X an integer between 0 and 9)<br />
* height between 400px and 760px, width maximum 1.5 x height;<br />
* the idea is to make players want to play the game, so it could be a zoomed card, some detail of the board, an overview of an ongoing physical game... but NOT a screenshot of the BGA adaptation since there is already the "see game in action" replay for that<br />
<br />
'''Important''': when you modify these images, you MUST click on "Reload game box image" from the Control Panel in order your update can be taken into account.<br />
<br />
== Game art ==<br />
<br />
You must upload in img directory all images of your game interface.<br />
<br />
=== Images naming constraints ===<br />
<br />
To be correctly deployed your images file names should not contain spaces or parenthesis.<br />
<br />
=== Images loading ===<br />
<br />
'''Be careful''': by default, ALL images of your img directory are loaded on a player's browser when he loads the game. For this reason, don't let in your img directory images that are not useful, otherwise it's going to slowdown the game load.<br />
<br />
Note that you can tune the way images are loaded with Javascript method "dontPreloadImage" (see [[Game_interface_logic:_yourgamename.js|Game Interface Logic]]).<br />
<br />
General recommendation it to have no more than dozen of image files, 2Mb max each. However if there is heavy game resources specific to a player (i.e. player board of specific color or set of cards) it is better to separate them and "don't pre-load" since in any given game only some of them will be used.<br />
<br />
=== Images format ===<br />
<br />
You can use 3 image format while building your game interface:<br />
;jpg images<br />
<br />
should be used for non-transparent images. Jpg are usually lighter than Pngs, so please choose Jpg for big pictures (ex: game board, cards) when you don't need transparency to accelerate game load. You don't need transparency for rounded card corners, it can be done using css.<br />
<br />
;png images<br />
<br />
should be used for images with transparency, such as non-square tokens, meeples, etc (combined into sprite).<br />
<br />
;gif images<br />
<br />
can be used for animated images. This is not recommended to use gif animated images as they can upset players, but for some specific interface element this could be useful.<br />
<br />
=== Use CSS Sprites ===<br />
<br />
To limit the number of images load and make the game load faster, you must use CSS sprites, i.e. you must gather several images in a single one. However, there are limitations. Do not make any CSS image sprite with dimensions that exceed 4096x4096 pixels or it will not work on mobile devices (Android max texture size is 4096 pixels, test your own browser at [http://webglreport.com/ WebGL Report]).<br />
<br />
To learn more on CSS Sprites:<br />
* [http://www.w3schools.com/css/css_image_sprites.asp CSS sprites (W3C documentation)].<br />
* [[Game interface stylesheet: yourgamename.css]]<br />
<br />
=== Shrink images ===<br />
<br />
If you get high resolution images from publisher you need to shrink them since web display requires much lower resolution than printing.<br />
<br />
* Shrink images without loss of quality https://tinypng.com/ or http://www.iloveimg.com/<br />
<br />
== Image Manipulation Tools ==<br />
<br />
You have no choice but to use one of the image manipulating tools to create a successful game adaptation, you would have to<br />
deal with<br />
* Converting to supported formats<br />
* Adding transparency <br />
* Stitching<br />
* Shrinking with no quality loss<br />
* Resizing<br />
<br />
For that you need a good tools, recommended tools (if you know more add them here)<br />
* Gimp (linux) - general GUI image editor<br />
* Paint.net (Windows) - general GUI image editor<br />
* ImageMagic (All platforms) - https://www.imagemagick.org/script/download.php - command line image editor, great for mass manipulations and scripting</div>Shadowphiarhttps://be.doc.boardgamearena.com/index.php?title=Gamehelppontedeldiavolo&diff=3325Gamehelppontedeldiavolo2019-01-15T10:13:14Z<p>Shadowphiar: /* Game End */</p>
<hr />
<div><br />
== Introduction ==<br />
<br />
The object of the game is to form groups of islands linked by bridges. An island is exactly four orthogonally adjacent tiles of your own colour. Any fewer adjacent tiles are a sandbank. <br />
<br />
== Game start ==<br />
<br />
The first player places two light tiles anywhere on the board. They may be adjacent or separate.<br />
<br />
The second player chooses either to adopt this move and play using the light tiles, or to place two dark tiles and play using those.<br />
<br />
== Each Turn ==<br />
<br />
Each player takes turns to place either two tiles of their own colour, or one bridge.<br />
<br />
Tiles can be placed anywhere on the board, either adjacently or separately, provided that:<br />
* they are not placed under bridges<br />
* no tile is adjacent to an island of the same colour, even diagonally<br />
<br />
A bridge can be placed between two tiles of the player's colour that are two spaces from each other orthogonally or diagonally, or at a knight's move. The centre of the bridge must be over water, not any tile. Only one bridge can begin or end on any tile. Bridges may not cross each other.<br />
<br />
== Game End ==<br />
<br />
Game end is triggered when either player is unable to place two tiles and chooses not to (or is unable to) place a bridge. (The player using dark tiles gets opportunity to take an equal number of turns).<br />
<br />
The players score each group of islands connected by bridges (including connections via sandbanks) according to a rule of triangular numbers:<br />
<br />
{| class="wikitable" border="1"<br />
|-<br />
! align="center" width="175" | Number of connected islands<br />
! align="center" width="50" | Score<br />
|-<br />
| align="center" | 1<br />
| align="center" | 1<br />
|-<br />
| align="center" | 2<br />
| align="center" | 3<br />
|-<br />
| align="center" | 3<br />
| align="center" | 6<br />
|-<br />
| align="center" | 4<br />
| align="center" | 10<br />
|-<br />
| align="center" | 5<br />
| align="center" | 15<br />
|-<br />
| align="center" | 6<br />
| align="center" | 21<br />
|-<br />
| align="center" | 7<br />
| align="center" | 28<br />
|-<br />
| align="center" | 8<br />
| align="center" | 36<br />
|-<br />
| align="center" | 9<br />
| align="center" | 45<br />
|-<br />
| align="center" | 10<br />
| align="center" | 55<br />
|-<br />
|}<br />
<br />
<br />
In the case of a tie, the player with the most islands is the winner. If still tied, then the player with the most bridges is the winner.</div>Shadowphiarhttps://be.doc.boardgamearena.com/index.php?title=Gamehelppontedeldiavolo&diff=2272Gamehelppontedeldiavolo2017-03-08T12:14:49Z<p>Shadowphiar: </p>
<hr />
<div><br />
== Introduction ==<br />
<br />
The object of the game is to form groups of islands linked by bridges. An island is exactly four orthogonally adjacent tiles of your own colour. Any fewer adjacent tiles are a sandbank. <br />
<br />
== Game start ==<br />
<br />
The first player places two light tiles anywhere on the board. They may be adjacent or separate.<br />
<br />
The second player chooses either to adopt this move and play using the light tiles, or to place two dark tiles and play using those.<br />
<br />
== Each Turn ==<br />
<br />
Each player takes turns to place either two tiles of their own colour, or one bridge.<br />
<br />
Tiles can be placed anywhere on the board, either adjacently or separately, provided that:<br />
* they are not placed under bridges<br />
* no tile is adjacent to an island of the same colour, even diagonally<br />
<br />
A bridge can be placed between two tiles of the player's colour that are two spaces from each other orthogonally or diagonally, or at a knight's move. The centre of the bridge must be over water, not any tile. Only one bridge can begin or end on any tile. Bridges may not cross each other.<br />
<br />
== Game End ==<br />
<br />
Game end is triggered when either player is unable to place two tiles and chooses not to (or is unable to) place a bridge. (The player using dark tiles gets opportunity to take an equal number of turns).<br />
<br />
The players score each group of islands connected by bridges (including connections via sandbanks) according to a rule of triangular numbers:<br />
<br />
{| class="wikitable"<br />
! Number of connected islands || 1 || 2 || 3 || 4 || 5 || 6 ...<br />
|-<br />
! Score || 1 || 3 || 6 || 10 || 15 || 21 ...<br />
|}<br />
<br />
In the case of a tie, the player with the most islands is the winner. If still tied, then the player with the most bridges is the winner.</div>Shadowphiarhttps://be.doc.boardgamearena.com/index.php?title=Gamehelppontedeldiavolo&diff=2271Gamehelppontedeldiavolo2017-03-08T12:14:09Z<p>Shadowphiar: </p>
<hr />
<div><br />
== Introduction ==<br />
<br />
The object of the game is to form groups of islands linked by bridges. An island is exactly four orthogonally adjacent tiles of your own colour. Any fewer adjacent tiles are a sandbank. <br />
<br />
== Game start ==<br />
<br />
The first player places two light tiles anywhere on the board. They may be adjacent or separate.<br />
<br />
The second player chooses either to adopt this move and play using the light tiles, or to place two dark tiles and play using those.<br />
<br />
== Each Turn ==<br />
<br />
Each player takes turns to place either two tiles or one bridge.<br />
<br />
Tiles can be placed anywhere on the board, either adjacently or separately, provided that:<br />
* they are not placed under bridges<br />
* no tile is adjacent to an island of the same colour, even diagonally<br />
<br />
A bridge can be placed between two tiles of the player's colour that are two spaces from each other orthogonally or diagonally, or at a knight's move. The centre of the bridge must be over water, not any tile. Only one bridge can begin or end on any tile. Bridges may not cross each other.<br />
<br />
== Game End ==<br />
<br />
Game end is triggered when either player is unable to place two tiles and chooses not to (or is unable to) place a bridge. (The player using dark tiles gets opportunity to take an equal number of turns).<br />
<br />
The players score each group of islands connected by bridges (including connections via sandbanks) according to a rule of triangular numbers:<br />
<br />
{| class="wikitable"<br />
! Number of connected islands || 1 || 2 || 3 || 4 || 5 || 6 ...<br />
|-<br />
! Score || 1 || 3 || 6 || 10 || 15 || 21 ...<br />
|}<br />
<br />
In the case of a tie, the player with the most islands is the winner. If still tied, then the player with the most bridges is the winner.</div>Shadowphiarhttps://be.doc.boardgamearena.com/index.php?title=Gamehelppontedeldiavolo&diff=2270Gamehelppontedeldiavolo2017-03-08T12:12:25Z<p>Shadowphiar: Created page with " == Introduction == The object of the game is to form groups of islands linked by bridges. An island is exactly four orthogonally adjacent tiles of your own colour. Any fewer..."</p>
<hr />
<div><br />
== Introduction ==<br />
<br />
The object of the game is to form groups of islands linked by bridges. An island is exactly four orthogonally adjacent tiles of your own colour. Any fewer adjacent tiles are a sandbank. <br />
<br />
== Game start ==<br />
<br />
The first player places two light tiles anywhere on the board. They may be adjacent or separate.<br />
<br />
The second player chooses either to adopt this move and play using the light tiles, or to place two dark tiles and play using those.<br />
<br />
== Each Turn ==<br />
<br />
Each player takes turns to place either two tiles or one bridge.<br />
<br />
Tiles can be placed anywhere on the board, either adjacently or separately, provided that:<br />
* they are not placed under bridges<br />
* no tile is adjacent to an island, even diagonally<br />
<br />
A bridge can be placed between two tiles of the player's colour that are two spaces from each other orthogonally or diagonally, or at a knight's move. The centre of the bridge must be over water, not any tile. Only one bridge can begin or end on any tile. Bridges may not cross each other.<br />
<br />
== Game End ==<br />
<br />
Game end is triggered when either player is unable to place two tiles and chooses not to (or is unable to) place a bridge. (The player using dark tiles gets opportunity to take an equal number of turns).<br />
<br />
The players score each group of islands connected by bridges (including connections via sandbanks) according to a rule of triangular numbers:<br />
<br />
{| class="wikitable"<br />
! Number of connected islands || 1 || 2 || 3 || 4 || 5 || 6 ...<br />
|-<br />
! Score || 1 || 3 || 6 || 10 || 15 || 21 ...<br />
|}<br />
<br />
In the case of a tie, the player with the most islands is the winner. If still tied, then the player with the most bridges is the winner.</div>Shadowphiar