This is a documentation for Board Game Arena: play board games online !
Zone: Розніца паміж версіямі
Радок 118: | Радок 118: | ||
=== verticalfit === | === verticalfit === | ||
This pattern is useful if you want all items in your zone to be arranged in a single column, regardless of whether there is enough space to display each item fully. With enough vertical space to fit all items fully in the zone, this pattern will simply arrange the items in a single vertical column. However, if the zone is not allotted enough vertical space to fully display each zone item on its own in a single column, then the items will overlap each other just enough to allow all items to fit into a single column of the allotted height. If the amount of vertical space for the zone is greater than what is required by the items and the margins between them, then the column of items will be centered within the 'min-height' of their container element. | This pattern is useful if you want all items in your zone to be arranged in a single column, regardless of whether there is enough space to display each item fully. With enough vertical space to fit all items fully in the zone, this pattern will simply arrange the items in a single vertical column. However, if the zone is not allotted enough vertical space to fully display each zone item on its own in a single column, then the items will overlap each other just enough to allow all items to fit into a single column of the allotted height. | ||
[[File:Zone_verticalfit_1.jpg]] | |||
If the amount of vertical space for the zone is greater than what is required by the items and the margins between them, then the column of items will be centered within the 'min-height' of their container element. | |||
[[File:Zone_verticalfit_2.jpg]] | |||
=== horizontalfit === | === horizontalfit === | ||
This pattern is useful if you want all items in your zone to be arranged in a single row, regardless of whether there is enough space to display each item fully. With enough horizontal space to fit all items fully in the zone, this pattern will simply arrange the items in a single horizontal row (identically to the 'grid' pattern with enough horizontal space). However, if the zone is not allotted enough horizontal space to fully display each zone item on its own in a single row, then the items will overlap each other just enough to allow all items to fit into a single row of the allotted width. If the amount of horizontal space for the zone is greater than what is required by the items and the margins between them, then the row of items will be centered within the 'min-width' of their container element. | This pattern is useful if you want all items in your zone to be arranged in a single row, regardless of whether there is enough space to display each item fully. With enough horizontal space to fit all items fully in the zone, this pattern will simply arrange the items in a single horizontal row (identically to the 'grid' pattern with enough horizontal space). However, if the zone is not allotted enough horizontal space to fully display each zone item on its own in a single row, then the items will overlap each other just enough to allow all items to fit into a single row of the allotted width. If the amount of horizontal space for the zone is greater than what is required by the items and the margins between them, then the row of items will be centered within the 'min-width' of their container element. | ||
[[File:Zone_horizontalfit_1.jpg]] | |||
=== ellipticalfit === | === ellipticalfit === | ||
This pattern will arrange all items in the zone in a circular (or elliptical) arrangement, with equal radial distance between each item. With enough vertical and horizontal space to fit all items in the zone into a single non-overlapping circle, this pattern will do just that. However, if the zone is not allotted enough vertical and horizontal space to fully display each zone item in a single circle, then the items that do not fit into the original circle will begin to form an additional concentric circle around the original circle | This pattern will arrange all items in the zone in a circular (or elliptical) arrangement, with equal radial distance between each item. With enough vertical and horizontal space to fit all items in the zone into a single non-overlapping circle, this pattern will do just that. | ||
[[File:Zone_ellipticalfit_1.jpg]] | |||
However, if the zone is not allotted enough vertical and horizontal space to fully display each zone item in a single circle, then the items that do not fit into the original circle will begin to form an additional concentric circle around the original circle. | |||
[[File:Zone_ellipticalfit_2.jpg]] | |||
In this second circle, items *will* overlap if there is not enough space for them all to be fully displayed. | |||
[[File:Zone_ellipticalfit_3.jpg]] | |||
=== custom === | === custom === | ||
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: | 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. | ||
[[File:Zone_custom.jpg]] | |||
Here is how to do it, when defining your Zone properties in the javascript setup: | |||
<pre> | <pre> |
Версія ад 18:47, 3 жніўня 2020
- 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 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
- 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
- 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 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
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 optionally, 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();
Patterns: positioning items within your zone
The zone package comes with many positioning patterns pre-coded; these allow your items to take on a variety of arrangements. To set a pattern for your zone, call the following method on your zone object (once the zone has already been created, of course):
zone.setPattern('pattern_name') // ...where 'pattern_name' is actually one of the many pre-formatted patterns of the package
The patterns that are currently available as part of the ebg/zone package are:
- 'grid' (which is the default, if you never actually call setPattern)
- 'diagonal'
- 'verticalfit'
- 'horizontalfit'
- 'ellipticalfit'
- 'custom'
grid
This is the default pattern for all zones when they are created. With enough horizontal space to fit all items in the zone, this pattern will simply arrange the items in a single horizontal row. However, if the zone is not allotted enough horizontal space to display all zone items in a single horizontal row, then the items will wrap to the next line.
diagonal
This pattern is great for creating the illusion of stacks (e.g., decks, counters, etc), because it will place each successive item in the zone a certain number of pixels below, and that same number of pixels to the right of the previous item in the zone. The exact number of pixels that are used for these offsets are controlled by the zone object attribute 'item_margin' (which defaults to 5); reducing this number will make each item in the zone be closer together, making it appear as if each item in the stack is thinner, and increasing it will make the items in your stack be further apart, or thicker. The behavior of this pattern does not appear to be affected by whether or not the zone is allotted enough horizontal or vertical space to display all items.
verticalfit
This pattern is useful if you want all items in your zone to be arranged in a single column, regardless of whether there is enough space to display each item fully. With enough vertical space to fit all items fully in the zone, this pattern will simply arrange the items in a single vertical column. However, if the zone is not allotted enough vertical space to fully display each zone item on its own in a single column, then the items will overlap each other just enough to allow all items to fit into a single column of the allotted height.
If the amount of vertical space for the zone is greater than what is required by the items and the margins between them, then the column of items will be centered within the 'min-height' of their container element.
horizontalfit
This pattern is useful if you want all items in your zone to be arranged in a single row, regardless of whether there is enough space to display each item fully. With enough horizontal space to fit all items fully in the zone, this pattern will simply arrange the items in a single horizontal row (identically to the 'grid' pattern with enough horizontal space). However, if the zone is not allotted enough horizontal space to fully display each zone item on its own in a single row, then the items will overlap each other just enough to allow all items to fit into a single row of the allotted width. If the amount of horizontal space for the zone is greater than what is required by the items and the margins between them, then the row of items will be centered within the 'min-width' of their container element.
ellipticalfit
This pattern will arrange all items in the zone in a circular (or elliptical) arrangement, with equal radial distance between each item. With enough vertical and horizontal space to fit all items in the zone into a single non-overlapping circle, this pattern will do just that.
However, if the zone is not allotted enough vertical and horizontal space to fully display each zone item in a single circle, then the items that do not fit into the original circle will begin to form an additional concentric circle around the original circle.
In this second circle, items *will* overlap if there is not enough space for them all to be fully displayed.
custom
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 }; } };