Scrollmap - Revision history

Thoun at 09:57, 16 December 2025

2025-12-16T09:57:52Z

← Older revision		Revision as of 11:57, 16 December 2025
Line 108:		Line 108:
	Now in the Javascript file, add "ebg/scrollmap" as a dependency:		Now in the Javascript file, add "ebg/scrollmap" as a dependency:
	<pre>		<pre>
	~~define~~([		const [scrollmap] = await importDojoLibs(['ebg/scrollmap']);
	~~"dojo","dojo/_base/declare",~~
	~~"ebg/core/gamegui",~~
	~~"ebg/counter",~~
	"ebg/scrollmap~~" /// <==== HERE~~
	],
	</pre>		</pre>

Line 183:		Line 178:

	<pre>		<pre>
	onIncreaseDisplayHeight~~: function~~(evt) {		onIncreaseDisplayHeight(evt) {
	console.log('Event: onIncreaseDisplayHeight');		console.log('Event: onIncreaseDisplayHeight');
	evt.preventDefault();		evt.preventDefault();
Line 251:		Line 246:


	'''~~ggg_ggg~~.js'''		'''Game.js'''

	Bind it to a zoom function		Bind it to a zoom function
	<pre>		<pre>
	setup~~: function~~(gamedatas) {		setup(gamedatas) {
	[...]		[...]
	this.trl_zoom = 1;		this.trl_zoom = 1;
Line 261:		Line 256:
	dojo.connect($('zoomminus'), 'onclick', () => this.onZoomButton(-0.1));		dojo.connect($('zoomminus'), 'onclick', () => this.onZoomButton(-0.1));
	[...]		[...]
	},		}

	onZoomButton~~: function~~(deltaZoom) {		onZoomButton(deltaZoom) {
	zoom = this.trl_zoom + deltaZoom;		zoom = this.trl_zoom + deltaZoom;
	this.trl_zoom = zoom <= 0.2 ? 0.2 : zoom >= 2 ? 2 : zoom;		this.trl_zoom = zoom <= 0.2 ? 0.2 : zoom >= 2 ? 2 : zoom;
	dojo.style($('map_scrollable'), 'transform', 'scale(' + this.trl_zoom + ')');		dojo.style($('map_scrollable'), 'transform', 'scale(' + this.trl_zoom + ')');
	dojo.style($('map_scrollable_oversurface'), 'transform', 'scale(' + this.trl_zoom + ')');		dojo.style($('map_scrollable_oversurface'), 'transform', 'scale(' + this.trl_zoom + ')');
	},		}

	</pre>		</pre>

Ufm: /* Scrollmap in action */

2024-10-20T01:47:30Z

Scrollmap in action

← Older revision		Revision as of 03:47, 20 October 2024
Line 20:		Line 20:


	'''⚠ Note''': Some games are using an advanced scrollmap module which replaces the basic scrollmap described in this document. Check 'Alternative implementations of BGA modules		'''⚠ Note''': Some games are using an advanced scrollmap module which replaces the basic scrollmap described in this document.
	' of [[BGA Code Sharing]] for more information.
			Check '''Alternative implementations of BGA modules''' of '''[[BGA Code Sharing]]''' for more information.

	== How to use Scrollmap ==		== How to use Scrollmap ==

Ufm: /* Scrollmap in action */

2024-10-20T01:46:26Z

Scrollmap in action

← Older revision		Revision as of 03:46, 20 October 2024
Line 18:		Line 18:

	In these games, you can see that there are arrow controls around the main game area, so that players can use them to scroll the view. You can also use Panning (i.e drag'n'drop the game area to scroll).		In these games, you can see that there are arrow controls around the main game area, so that players can use them to scroll the view. You can also use Panning (i.e drag'n'drop the game area to scroll).


	'''⚠ Note''': Some games are using an advanced scrollmap module which replaces the basic scrollmap described in this document. Check 'Alternative implementations of BGA modules		'''⚠ Note''': Some games are using an advanced scrollmap module which replaces the basic scrollmap described in this document. Check 'Alternative implementations of BGA modules

Ufm at 01:46, 20 October 2024

2024-10-20T01:46:10Z

← Older revision		Revision as of 03:46, 20 October 2024
Line 15:		Line 15:
	* Carcassonne		* Carcassonne
	* Saboteur		* Saboteur
	* Takenoko
	* Taluva		* Taluva

	In these games, you can see that there are arrow controls around the main game area, so that players can use them to scroll the view. You can also use Panning (i.e drag'n'drop the game area to scroll).		In these games, you can see that there are arrow controls around the main game area, so that players can use them to scroll the view. You can also use Panning (i.e drag'n'drop the game area to scroll).

			'''⚠ Note''': Some games are using an advanced scrollmap module which replaces the basic scrollmap described in this document. Check 'Alternative implementations of BGA modules
			' of [[BGA Code Sharing]] for more information.

	== How to use Scrollmap ==		== How to use Scrollmap ==
Line 269:		Line 271:

	Note: you may also link this to a user preference (see [[Game_options_and_preferences:_gameoptions.inc.php#Updating_preference_from_code\|this page]] for more information).		Note: you may also link this to a user preference (see [[Game_options_and_preferences:_gameoptions.inc.php#Updating_preference_from_code\|this page]] for more information).

	~~=== Scrollmap Extensions ===~~
	~~Its is possible to extend this class to add extra capabilities, for known forks see [[BGA Code Sharing]]~~

	== API Reference ==		== API Reference ==

Victoria La: added link to extensions

2024-01-23T23:21:06Z

added link to extensions

← Older revision		Revision as of 01:21, 24 January 2024
Line 269:		Line 269:

	Note: you may also link this to a user preference (see [[Game_options_and_preferences:_gameoptions.inc.php#Updating_preference_from_code\|this page]] for more information).		Note: you may also link this to a user preference (see [[Game_options_and_preferences:_gameoptions.inc.php#Updating_preference_from_code\|this page]] for more information).

			=== Scrollmap Extensions ===
			Its is possible to extend this class to add extra capabilities, for known forks see [[BGA Code Sharing]]

	== API Reference ==		== API Reference ==

Victoria La at 23:26, 16 May 2022

2022-05-16T23:26:08Z

← Older revision		Revision as of 01:26, 17 May 2022
Line 309:		Line 309:
	;enableScrolling()		;enableScrolling()
	:Enable scrolling (re-enable scrolling)		:Enable scrolling (re-enable scrolling)



			[[Category:Studio]]

PiratJack: /* Customizations */ Added touch devices + zooming

2022-03-04T16:07:49Z

Customizations: Added touch devices + zooming

← Older revision		Revision as of 18:07, 4 March 2022
Line 216:		Line 216:

	</pre>		</pre>



			=== Avoid scrolling on touch devices ===

			When a scrollmap is used on touch devices (such as a smartphone), by default scrolling will scroll the entire page (and the elements in the scrollmap won't move).
			To avoid this, simply add the following in your CSS file:

			<pre>
			#map_container {
			touch-action: none;
			}
			</pre>



			=== Zooming ===

			'''Ingredients:''' ggg_ggg.tpl, ggg.js

			Zooming elements on the scrollmap can be difficult because the different layers need to stay aligned (and there are many layers, due to BGA's zoom feature, screen resolution, ...)

			'''ggg_ggg.tpl'''

			Add 2 elements for zooming in and out
			<pre>
			<div id="zoomplus"></div>
			<div id="zoomminus"></div>
			</pre>


			'''ggg_ggg.js'''

			Bind it to a zoom function
			<pre>
			setup: function(gamedatas) {
			[...]
			this.trl_zoom = 1;
			dojo.connect($('zoomplus'), 'onclick', () => this.onZoomButton(0.1));
			dojo.connect($('zoomminus'), 'onclick', () => this.onZoomButton(-0.1));
			[...]
			},

			onZoomButton: function(deltaZoom) {
			zoom = this.trl_zoom + deltaZoom;
			this.trl_zoom = zoom <= 0.2 ? 0.2 : zoom >= 2 ? 2 : zoom;
			dojo.style($('map_scrollable'), 'transform', 'scale(' + this.trl_zoom + ')');
			dojo.style($('map_scrollable_oversurface'), 'transform', 'scale(' + this.trl_zoom + ')');
			},

			</pre>

			Note: you may also link this to a user preference (see [[Game_options_and_preferences:_gameoptions.inc.php#Updating_preference_from_code\|this page]] for more information).

	== API Reference ==		== API Reference ==

Victoria La at 00:26, 18 August 2021

2021-08-18T00:26:21Z

← Older revision		Revision as of 02:26, 18 August 2021
Line 156:		Line 156:
	and map_surface is same size as map_container.		and map_surface is same size as map_container.

	== ~~Enable~~ move arrows ==
			== Customizations ==

			=== Disable move arrows ===

	The buttons already defined in css and the buttons handler already defined in the scrollmap control just make sure you call function setupOnScreenArrows (and in .tpl file buttons have to be defined with exact these classes verbatim). If you don't want the buttons, do not call function setupOnScreenArrows() and remove them from template (you can also remove just some of them, i.e. only leave left and right).		The buttons already defined in css and the buttons handler already defined in the scrollmap control just make sure you call function setupOnScreenArrows (and in .tpl file buttons have to be defined with exact these classes verbatim). If you don't want the buttons, do not call function setupOnScreenArrows() and remove them from template (you can also remove just some of them, i.e. only leave left and right).
Line 162:		Line 165:


	== Enable scrollmap zone extension ==		=== Enable scrollmap zone extension ===

	This is optional, when there can be unused screen space under the scrollmap that a player might want to use.		This is optional, when there can be unused screen space under the scrollmap that a player might want to use.
Line 176:		Line 179:

	<pre>		<pre>
	onIncreaseDisplayHeight: function( evt )		onIncreaseDisplayHeight: function(evt) {
	{		console.log('Event: onIncreaseDisplayHeight');
	console.log( '~~$$$$~~ Event : onIncreaseDisplayHeight' );		evt.preventDefault();
	evt.preventDefault();

	var cur_h = toint( dojo.style( $('map_container'), 'height' ) );		var cur_h = toint(dojo.style( $('map_container'), 'height'));
	dojo.style( $('map_container'), 'height', ( cur_h+300 ) + 'px' );		dojo.style($('map_container'), 'height', (cur_h + 300) + 'px');
	},		},
	</pre>		</pre>
Line 198:		Line 200:
	</pre>		</pre>

	~~== Customizations ==~~

	=== Fall-through mouse events on oversurface ===		=== Fall-through mouse events on oversurface ===

Victoria La: /* API Reference */

2021-08-18T00:22:07Z

API Reference

← Older revision		Revision as of 02:22, 18 August 2021
Line 249:		Line 249:
	::[Number] delay - animation duration, default is 0		::[Number] delay - animation duration, default is 0

	;disableScrolling		;disableScrolling()
	:Disable scrolling (that disable both scrolling and panning)		:Disable scrolling (that disable both scrolling and panning)

	;enableScrolling		;enableScrolling()
	:Enable scrolling (re-enable scrolling)		:Enable scrolling (re-enable scrolling)

Victoria La: /* Scrollable area layers */

2021-08-18T00:21:04Z

Scrollable area layers

← Older revision		Revision as of 02:21, 18 August 2021
Line 139:		Line 139:
	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.

	The other layer is 'map_surface' - it is what user would use to pan scroll. If this div is not visible because 'map_scrollable_oversurface' covering it completely - panning will be impossible.		The other layer is 'map_surface' - it is what user would use to pan scroll. If this div is not visible because 'map_scrollable_oversurface' covering it completely - panning will be impossible (unless you apply some css trickery, see 'Fall-through mouse events on oversurface' below).