Scrollmap - Sejarah semakan

Een: /* Enable scrollmap zone extension */

2013-04-26T13:57:14Z

Enable scrollmap zone extension

← Semakan terdahulu		Semakan pada 15:57, 26 April 2013
Baris 216:		Baris 216:
	<pre>		<pre>
	dojo.connect( $('enlargedisplay'), 'onclick', this, 'onIncreaseDisplayHeight' );		dojo.connect( $('enlargedisplay'), 'onclick', this, 'onIncreaseDisplayHeight' );
			</pre>

			In your view.php file, define the template variable LABEL_ENLARGE_DISPLAY so that it gets substituted with appropriate translatable text:

			<pre>
			$this->tpl['LABEL_ENLARGE_DISPLAY'] = self::_("Enlarge display");
	</pre>		</pre>

Een pada 13:53, 26 April 2013

2013-04-26T13:53:16Z

@@ Baris 186: / Baris 186: @@
          dojo.connect( $('moveright'), 'onclick', this, 'onMoveRight' );
          dojo.connect( $('movedown'), 'onclick', this, 'onMoveDown' );
 </pre>

Een pada 16:23, 20 April 2013

2013-04-20T16:23:55Z

← Semakan terdahulu		Semakan pada 18:23, 20 April 2013
Baris 113:		Baris 113:
	By default, the game area is centered on 0,0 coordinates.		By default, the game area is centered on 0,0 coordinates.

	== ~~Move~~ arrows ==		== Enable move arrows ==

	To show move arrows around the scrollmap to enable click based navigation in addition to drag and drop, add these lines to your CSS		To show move arrows icons around the scrollmap in order to enable click based navigation in addition to drag and drop, add these lines to your CSS:

	<pre>		<pre>
Baris 150:		Baris 150:
	</pre>		</pre>

	~~Then, in~~ your javascript, define the following functions		In your javascript, define the following functions:

	<pre>		<pre>
Baris 182:		Baris 182:

	<pre>		<pre>
	dojo.connect( $('movetop'), 'onclick', this, 'onMoveTop' );		dojo.connect( $('movetop'), 'onclick', this, 'onMoveTop' );
	dojo.connect( $('moveleft'), 'onclick', this, 'onMoveLeft' );		dojo.connect( $('moveleft'), 'onclick', this, 'onMoveLeft' );
	dojo.connect( $('moveright'), 'onclick', this, 'onMoveRight' );		dojo.connect( $('moveright'), 'onclick', this, 'onMoveRight' );
	dojo.connect( $('movedown'), 'onclick', this, 'onMoveDown' );		dojo.connect( $('movedown'), 'onclick', this, 'onMoveDown' );
	</pre>		</pre>

Een pada 16:13, 20 April 2013

2013-04-20T16:13:01Z

← Semakan terdahulu		Semakan pada 18:13, 20 April 2013
Baris 112:		Baris 112:

	By default, the game area is centered on 0,0 coordinates.		By default, the game area is centered on 0,0 coordinates.

			== Move arrows ==

			To show move arrows around the scrollmap to enable click based navigation in addition to drag and drop, add these lines to your CSS

			<pre>
			/ Move arrows /

			#movetop,#moveleft,#moveright,#movedown {
			display: block;
			position: absolute;
			background-image: url('../../img/common/arrows.png');
			width: 32px;
			height: 32px;
			}

			#movetop {
			top: 0px;
			left: 50%;
			background-position: 0px 32px;
			}
			#moveleft {
			top: 50%;
			left: 0px;
			background-position: 32px 0px;
			}
			#moveright {
			top: 50%;
			right: 0px;
			background-position: 0px 0px;
			}
			#movedown {
			bottom: 0px;
			left: 50%;
			background-position: 32px 32px;
			}
			</pre>

			Then, in your javascript, define the following functions

			<pre>
			onMoveTop : function( evt )
			{
			console.log( "onMoveTop" );
			evt.preventDefault();
			this.scrollmap.scroll( 0, 300 );
			},
			onMoveLeft : function( evt )
			{
			console.log( "onMoveLeft" );
			evt.preventDefault();
			this.scrollmap.scroll( 300, 0 );
			},
			onMoveRight : function( evt )
			{
			console.log( "onMoveRight" );
			evt.preventDefault();
			this.scrollmap.scroll( -300, 0 );
			},
			onMoveDown : function( evt )
			{
			console.log( "onMoveDown" );
			evt.preventDefault();
			this.scrollmap.scroll( 0, -300 );
			},
			</pre>

			And connect onclick events on the arrows to these functions in your javascript setup

			<pre>
			dojo.connect( $('movetop'), 'onclick', this, 'onMoveTop' );
			dojo.connect( $('moveleft'), 'onclick', this, 'onMoveLeft' );
			dojo.connect( $('moveright'), 'onclick', this, 'onMoveRight' );
			dojo.connect( $('movedown'), 'onclick', this, 'onMoveDown' );
			</pre>

Een: /* How to use Scrollmap */

2013-04-20T16:08:47Z

How to use Scrollmap

@@ Baris 78: / Baris 78: @@
 #map_footer {
      text-align: center;
+}

Een: /* How to use Scrollmap */

2013-04-20T16:06:32Z

How to use Scrollmap

@@ Baris 79: / Baris 79: @@
      text-align: center;
+}
 </pre>

Sourisdudesert: /* How to use Scrollmap */

2013-04-08T13:00:00Z

How to use Scrollmap

@@ Baris 51: / Baris 51: @@
          <a id="movedown" href="#"></a>
      </div>
 </pre>

Sourisdudesert: /* Scrollable area layers */

2013-04-08T12:58:51Z

Scrollable area layers

← Semakan terdahulu		Semakan pada 14:58, 8 April 2013
Baris 77:		Baris 77:

	Tips: in some situation, it's also useful to place a game element on map_scrollable and a corresponding invisible element over the surface to manage the interactions. Example: when an interactive element must be placed beneath a non interactive element for display reason.		Tips: in some situation, it's also useful to place a game element on map_scrollable and a corresponding invisible element over the surface to manage the interactions. Example: when an interactive element must be placed beneath a non interactive element for display reason.

			== Positioning elements on game area ==

			All elements on the game are must be absolute positioned (with "top" and "left" attributes).

			By default, the game area is centered on 0,0 coordinates.

Sourisdudesert: /* Scrollable area layers */

2013-04-08T12:55:28Z

Scrollable area layers

← Semakan terdahulu		Semakan pada 14:55, 8 April 2013
Baris 73:		Baris 73:
	* If some element on the game area need to be clicked (or any kind of user interaction), you should place it in map_scrollable_oversurface, otherwise no click can reach it.		* If some element on the game area need to be clicked (or any kind of user interaction), you should place it in map_scrollable_oversurface, otherwise no click can reach it.
	* If some element on the game area don't need to be clicked, you'd better place it in "map_scrollable", so it is possible to drag'n'drop the game area from a point on this element.		* If some element on the game area don't need to be clicked, you'd better place it in "map_scrollable", so it is possible to drag'n'drop the game area from a point on this element.

			Of course, all layers are scrolled synchronously.

	Tips: in some situation, it's also useful to place a game element on map_scrollable and a corresponding invisible element over the surface to manage the interactions. Example: when an interactive element must be placed beneath a non interactive element for display reason.		Tips: in some situation, it's also useful to place a game element on map_scrollable and a corresponding invisible element over the surface to manage the interactions. Example: when an interactive element must be placed beneath a non interactive element for display reason.

Sourisdudesert: /* How to use Scrollmap */

2013-04-08T12:54:34Z

How to use Scrollmap

← Semakan terdahulu		Semakan pada 14:54, 8 April 2013
Baris 38:		Baris 38:
	this.scrollmap = new ebg.scrollmap();		this.scrollmap = new ebg.scrollmap();
	</pre>		</pre>

			Now, open your template (TPL) file and add this HTML code:

			<pre>
			<div id="map_container">
			<div id="map_scrollable"></div>
			<div id="map_surface"></div>
			<div id="map_scrollable_oversurface"></div>
			<a id="movetop" href="#"></a>
			<a id="moveleft" href="#"></a>
			<a id="moveright" href="#"></a>
			<a id="movedown" href="#"></a>
			</div>
			</pre>

			Finally, to link your HTML code with your Javascript, place this in your Javascript "Setup" method:

			<pre>
			// Make map scrollable
			this.scrollmap.create( $('map_container'),$('map_scrollable'),$('map_surface'),$('map_scrollable_oversurface') );
			this.scrollmap.setupOnScreenArrows( 150 );

			</pre>

			This is it! Now, you should see on your game interface a scrollable game area. This is not really impressive though, because you didn't add anything on the game area yet. This is the next step.

			== Scrollable area layers ==

			There are 2 - and only 2 - places where you should place your HTML stuff in your scrollable area:
			* inside "map_scrollable" div
			* inside "map_scrollable_oversurface" div

			The difference is very important: "map_scrollable" is beneath the surface that is used to drag'n'drop the game area, and "map_scrollable_oversurface" is above this surface. In practice:
			* If some element on the game area need to be clicked (or any kind of user interaction), you should place it in map_scrollable_oversurface, otherwise no click can reach it.
			* If some element on the game area don't need to be clicked, you'd better place it in "map_scrollable", so it is possible to drag'n'drop the game area from a point on this element.

			Tips: in some situation, it's also useful to place a game element on map_scrollable and a corresponding invisible element over the surface to manage the interactions. Example: when an interactive element must be placed beneath a non interactive element for display reason.