3D

Studio Framework Navigation

File structure of a BGA game

Game logic (Server side)

• Main game logic: yourgamename.game.php
• Your game state machine: states.inc.php
• Game database model: dbmodel.sql
• Players actions: yourgamename.action.php
• Game material description: material.inc.php
• Game statistics: stats.inc.php

Game interface (Client side)

• Game interface logic: yourgamename.js
• Game art: img directory
• Game interface stylesheet: yourgamename.css
• Game layout: view and template: yourgamename.view.php and yourgamename_yourgamename.tpl
• Your game mobile version

Other components

• Translations (how to make your game translatable)
• Game options and preferences: gameoptions.inc.php
• Game meta-information: gameinfos.inc.php
• Game replay
• 3D
• Some usual board game elements image ressources

BGA Studio game components reference

• Deck: a PHP component to manage cards (deck, hands, picking cards, moving cards, shuffle deck, ...).
• Counter: a JS component to manage a counter that can increase/decrease (ex: player's score).
• 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)

• Draggable: a JS component to manage drag'n'drop actions.
• ExpandableSection: a JS component to manage a rectangular block of HTML than can be displayed/hidden.
• Wrapper: a JS component to wrap a <div> element around its child, even if these elements are absolute positioned.

BGA Studio user guide

• BGA game Lifecycle
• First steps with BGA Studio
• Tutorial reversi
• Tutorial gomoku
• Tutorial hearts
• Create a game in BGA Studio: Complete Walkthrough
• Tools and tips of BGA Studio - Tips and instructions on setting up development environment
• Practical debugging - Tips focused on debugging
• Studio logs - Instructions for log access
• BGA Studio Cookbook - Tips and instructions on using API's, libraries and frameworks
• BGA Studio Guidelines
• Troubleshooting - Most common "I am really stuck" situations
• Studio FAQ
• Pre-release checklist - Go throught this list if you think you done development
• Post-release phase
• BGA Code Sharing - Shared resources, projects on git hub, common code, other links

Overview

Board Game Arena is using CSS 3D features to provide a basic 3D view of the games.

This is not a "100% real" 3D as this is very difficult to play with real 3D model with CSS, but most of the time it provides a satisfying 3D view of the game.

The objective of 3D is to provide a nice view of the game : 90% of the time, 2D is more suitable for playing. So we don't force developers to make sure games can be played in 3D : this is just a "bonus".

Enabling 3D

3D is enabled by default for your game.

You can click on the "3D" button at the top right and see your game in 3D.

If you don't want to allow players to use 3D with your game, you can add this to you "gameinfos.inc.php" file :

'enable_3d' => false,

Detecting 3D

When 3D is "on", BGA adds CSS class "mode_3d" to the body element.

In CSS, you should prefix all your 3D mode specific directives by ".mode_3d".

 .mode_3d .board {
     overflow: visible;
 }

In Javascript, you can detect 3D by using the following :

 if( this.control3dmode3d )
 {
    // Only executed in 3d mode
 }

Built-in 3D enhancements

BGA is doing some built-in 3D enhancements with your 3D adaptations, so your adaptation will have some 3D effects without any efforts :

• When executing a slideToObject, a slideToObjectPos or a slideTemporaryObject, BGA is moving the objects vertically (up, then down).
• It also happens when moving elements of a Stock module, or to a Zone module.

Enhance your adaptation for 3D

Use Z axis

Using CSS transform: translateZ, you can translate your HTML elements along the Z axis. Example :

 .floating_element {
     transform: translateZ( 20px );  /* This element is going to float 20px above the surface */
 }

The framework will add the following to all your divs:

     transform-style: preserve-3d; 

So they will keep their position in 3D space relative to other elemens with the transformation defined. Note that some CSS artifacts can break the css inheritance of the "preserve-3d" like "overflow:auto"

At any moment, you can know the Z position of an element from javascript using :

 this.getComputedTranslateZ( html_element );

Use pre-build BGA 3D CSS classes

By adding the following classes to your objects, they will look nicer in 3D:

• thickness: add a (3px) black thickness to your HTML element.

• roundthickness: (to be used with thickness) if your element is a circle, you should add roundthickness so your element thickness can be a circle too.

• whitethickness: (to be used with thickness) if you prefer to have a whitethickness instead of black.

• floatingabove: make your element "float" 10px above the surface, with a nice shadow.

• roundfloatingabove: (to be used with floatingabove) if your element is a circle, use roundfloatingabove in addition to floatingabove.

Note: if you found some generic CSS that may help some other developers for 3D enhancements, please send it to us so we can add it there.

Setting the default point of view and enabling 3d by default

Your game may require to use 3D mode enabled by default and also with a certain custom default PoinOfView. You can achieve this setting in your constructor section of your game:

Important: you must use this only if your game doesn't work without 3D mode. As a general platform policy, interface must be optimised for 2D and display in 2D by default. 3D is meant as an option that can be activated by the user if he wants it.

    if (!dojo.hasClass("ebd-body", "mode_3d")) {
       dojo.addClass("ebd-body", "mode_3d");
       dojo.addClass("ebd-body", "enableTransitions");
       $("globalaction_3d").innerHTML = "2D";   // controls the upper right button 
       this.control3dxaxis = 30;  // rotation in degrees of x axis (it has a limit of 0 to 80 degrees in the frameword so users cannot turn it upsidedown)
       this.control3dzaxis = 0;   // rotation in degrees of z axis
       this.control3dxpos = 100;   // center of screen in pixels
       this.control3dypos = 300;   // center of screen in pixels
       this.control3dscale = 1.4;   // zoom level, 1 is default 2 is double normal size, 
       this.control3dmode3d = true ;  			// is the 3d enabled	
       $("game_play_area").style.transform = 
           "rotatex(" + this.control3dxaxis + "deg) translate(" + this.control3dypos + "px," + this.control3dxpos + "px) rotateZ(" + this.control3dzaxis + "deg) scale3d(" + this.control3dscale 
           + "," + this.control3dscale + "," + this.control3dscale + ")";
    }