Zone

Game File Reference

Overview

• dbmodel.sql - database model
• gameinfos.inc.php - meta-information
• gameoptions.json - game options & user preferences
• img/ - game art
• Game Metadata Manager - tags and metadata media
• material.inc.php - static data
• misc/ - studio-only storage
• modules/ - additional game code
• states.inc.php - state machine
• stats.json - statistics
• X.action.php - player actions
• X.css - interface stylesheet
• Game.php - main logic
• X.js - interface logic
• X.view.php - dynamic game layout
• X_X.tpl - static game layout

---

Useful Components

Official

• Deck: a PHP component to manage cards (deck, hands, picking cards, moving cards, shuffle deck, ...).
• Draggable: a JS component to manage drag'n'drop actions.
• Counter: a JS component to manage a counter that can increase/decrease (ex: player's score).
• ExpandableSection: a JS component to manage a rectangular block of HTML than can be displayed/hidden.
• 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)

• Wrapper: a JS component to wrap a <div> element around its child, even if these elements are absolute positioned.

Unofficial

• BGA Code Sharing - Shared resources, projects on git hub, common code, other links
• BGA Studio Cookbook - Tips and instructions on using API's, libraries and frameworks
• Common board game elements image resources

---

Game Development Process

• First steps with BGA Studio
• Create a game in BGA Studio: Complete Walkthrough
• Tutorial reversi
• Tutorial gomoku
• Tutorial hearts
• BGA Studio Guidelines
• BGA game Lifecycle
• Pre-release checklist
• Post-release phase
• Player Resources - add player help/rules to your game page

---

Guides for Common Topics

• Translations - make your game translatable
• Game Replay
• Mobile Users
• 3D
• Compatibility

---

Miscellaneous Resources

• Studio FAQ
• Tools and tips of BGA Studio - Tips and instructions on setting up development environment
• Studio logs - Instructions for log access
• Practical debugging - Tips focused on debugging
• Troubleshooting - Most common "I am really stuck" situations
• Studio Bugs - Reports against Studio itself (not BGA!)

The Zone component is meant to organise items of the same type inside a predefined space.

Zone in action

If you want to see how Zone works, please try "Can't Stop" or "Niagara" on BGA, or watch a game in progress or game replay.

In Can't Stop, zone is used to display the bhikkus ascending the mountain when there is more than one on the same space (diagonal mode).

In Niagara, it is used to display the canoes over the circles going down the river (custom mode).

How to use Zone

At first, don't forget to add "ebg/zone" as a dependency:

define([
    "dojo","dojo/_base/declare",
    "ebg/core/gamegui",
    "ebg/counter",
    "ebg/zone"     /// <==== HERE
],

Then, declare a new variable in your class for the Zone object:

        constructor: function(){
        console.log('yourgame constructor');
              
        // Zone control        	
        this.myZone = new ebg.zone();

Now, in your template file, you must add a div that will host this zone:

    <div id="my_zone"></div>

And set its width (and optionnaly, height and position) in CSS:

#my_zone {
  width: 100px;
}

Then in your Javascript setup, attach your Zone component to the div and define its properties :

            zone.create( this, 'my_zone', <item_width>, <item_height> );
            zone.setPattern( <mode> );

• <item_width> is an integer for the width of the objects you want to organise in the zone
• <item_height> is an integer for the height of the objects you want to organise in the zone
• <mode> is one of 'grid' (objects will be put on lines from top left to bottom right, wrapping when there is not enough space left on the line, relatively to the width you have defined) 'diagonal' (objects will be organised on a top left to bottom right diagonal, overlapping each other) or 'custom' (objects will be organised depending upon their number and the coordinates that you provide - see below)

Since the width of the Zone is defined statically, beware of not letting items overflow on small screens. If you need a design-responsive component, consider using the Stock component instead.

Now your zone is ready to be used!

After creating an object that you want to add to the zone as a classic HTML template (dojo.place / this.format_block), you can simply use:

   zone.placeInZone( <object_id>, <weight> );

• <object_id> is the string identifier for your object 'my_object_id'
• <weight> is an optional parameter used to sort items

To remove an item, use:

   zone.removeFromZone( <object_id>, <destroy?>, <to> );

• <object_id> is the string identifier for your object 'my_object_id'
• <destroy?> is a boolean indicating if the object should be destroyed after being removed
• <to> is the destination the object must be slided to when being removed (before being eventually destroyed)

You can also:

• remove all items from the zone (and destroy them) using zone.removeAll();
• get the number of items in your zone using zone.getItemNumber();
• get an array of the ids of all the items using zone.getAllItems();

Custom mode

If you want complete control on how your objects are laid out inside the Zone, you can determine their coordinates after their number when being added to the zone. Here is how to do it, when defining your Zone properties in the javascript setup:

                this.zone.setPattern( 'custom' );
                
                this.zone.itemIdToCoords = function( i, control_width ) {
                    if( i%8==0 )
                    {   return {  x:1,y:19, w:60, h:30 }; }
                    else if( i%8==1 )
                    {   return {  x:30,y:38, w:60, h:30 }; }
                    else if( i%8==2 )
                    {   return {  x:42,y:8, w:60, h:30 }; }
                    else if( i%8==3 )
                    {   return {  x:5,y:58, w:60, h:30 }; }
                    else if( i%8==4 )
                    {   return {  x:5,y:24, w:60, h:30 }; }
                    else if( i%8==5 )
                    {   return {  x:35,y:43, w:60, h:30 }; }
                    else if( i%8==6 )
                    {   return {  x:47,y:13, w:60, h:30 }; }
                    else if( i%8==7 )
                    {   return {  x:10,y:63, w:60, h:30 }; }
                };