Zone - Lịch sử thay đổi

Tchebychev vào lúc 08:42, ngày 24 tháng 11 năm 2017

2017-11-24T08:42:50Z

← Phiên bản cũ		Phiên bản lúc 10:42, ngày 24 tháng 11 năm 2017
Dòng 56:		Dòng 56:
	* <item_width> is an integer for the width of the objects you want to organise in the zone		* <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		* <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 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)		* <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.		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.

Tchebychev vào lúc 08:40, ngày 24 tháng 11 năm 2017

2017-11-24T08:40:29Z

← Phiên bản cũ		Phiên bản lúc 10:40, ngày 24 tháng 11 năm 2017
Dòng 56:		Dòng 56:
	* <item_width> is an integer for the width of the objects you want to organise in the zone		* <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		* <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) '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)		* <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 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!		Now your zone is ready to be used!

Sourisdudesert vào lúc 09:30, ngày 6 tháng 8 năm 2014

2014-08-06T09:30:52Z

← Phiên bản cũ		Phiên bản lúc 11:30, ngày 6 tháng 8 năm 2014
Dòng 28:		Dòng 28:

	// Zone control		// Zone control
	this.myZone = new ebg.~~scrollmap~~();		this.myZone = new ebg.zone();
	</pre>		</pre>

Een vào lúc 17:42, ngày 20 tháng 4 năm 2013

2013-04-20T17:42:40Z

← Phiên bản cũ		Phiên bản lúc 19:42, ngày 20 tháng 4 năm 2013
Dòng 83:		Dòng 83:
	* get the number of items in your zone using zone.getItemNumber();		* get the number of items in your zone using zone.getItemNumber();
	* get an array of the ids of all the items using zone.getAllItems();		* 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:

			<pre>
			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 }; }
			};
			</pre>

Een vào lúc 17:38, ngày 20 tháng 4 năm 2013

2013-04-20T17:38:13Z

← Phiên bản cũ		Phiên bản lúc 19:38, ngày 20 tháng 4 năm 2013
Dòng 57:		Dòng 57:
	* <item_height> is an integer for the height 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) '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)		* <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) '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)

			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:

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

			* <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:

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

			* <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();

Een: Created page with "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 ..."

2013-04-20T17:16:41Z

Created page with "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 ..."

Trang mới

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:
<pre>
define([
"dojo","dojo/_base/declare",
"ebg/core/gamegui",
"ebg/counter",
"ebg/zone" /// <==== HERE
],
</pre>

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

<pre>
constructor: function(){
console.log('yourgame constructor');

// Zone control
this.myZone = new ebg.scrollmap();
</pre>

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

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

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

<pre>

#my_zone {
width: 100px;
}

</pre>

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

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

* <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) '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)