Your game mobile version - تاریخچهٔ نسخه‌ها

Sourisdudesert: /* Touchscreen compatibility */

2015-12-29T08:12:59Z

Touchscreen compatibility

→ نسخهٔ قدیمی‌تر		نسخهٔ ‏۲۹ دسامبر ۲۰۱۵، ساعت ۱۰:۱۲
خط ۸۵:		خط ۸۵:

	What may not work :		What may not work :
	* ":hover" CSS switch. Because there is no mouse, ":hover" won't be triggered. This is not an issue unless it is needed to play the game. In addition, some touch devices consider that a short touch must trigger a ":hover" (and should apply corresponding CSS), which can block an interaction in your game. We advise you to explicitely disable ":hover" effects when your game is running on a touchscreen device.		* ":hover" CSS switch. Because there is no mouse, ":hover" won't be triggered. This is not an issue unless it is needed to play the game. In addition, some touch devices consider that a short touch must trigger a ":hover" (and should apply corresponding CSS), which can block an interaction in your game. We advise you to explicitely disable ":hover" effects when your game is running on a touchscreen device (for ex. by adding ".notouch-device" as a prefix to all your CSS :hover rules).
	* Mouseover events : like the previous one : if you associated Javascript events to "onmouseover" event, it won't work on tablets.		* Mouseover events : like the previous one : if you associated Javascript events to "onmouseover" event, it won't work on tablets.
	* Drag'n'drop : it won't work. To make it work, you should listen to "ontouchstart", "ontouchmove" and "ontouchend" event and trigger the same logic you already have for "onmousedown", "onmousemove" and "onmouseup". You should also make sure to stop the Javascript "ontouchmove" event (ex: dojo.stopEvent( evt ) ) during the drag n drop, otherwise the interface is going to scroll while drag'n'dropping.		* Drag'n'drop : it won't work. To make it work, you should listen to "ontouchstart", "ontouchmove" and "ontouchend" event and trigger the same logic you already have for "onmousedown", "onmousemove" and "onmouseup". You should also make sure to stop the Javascript "ontouchmove" event (ex: dojo.stopEvent( evt ) ) during the drag n drop, otherwise the interface is going to scroll while drag'n'dropping.

Sourisdudesert در ‏۲۸ دسامبر ۲۰۱۵، ساعت ۱۰:۳۲

2015-12-28T10:32:35Z

→ نسخهٔ قدیمی‌تر		نسخهٔ ‏۲۸ دسامبر ۲۰۱۵، ساعت ۱۲:۳۲
خط ۷۶:		خط ۷۶:


	Tip: on mobile, BGA displays player panels at the top of the page (instead of displaying them on the right). When doing this, BGA applies the CSS class "mobile_version" to the root HTML element. If you want you can use this CSS "mobile_version" class to optimize some of your game adaptations to this change.		Tip: on mobile, BGA displays player panels at the top of the page (instead of displaying them on the right). When doing this, BGA applies the CSS class "mobile_version" to the root HTML element with id "ebd-body". If you want you can use this CSS "mobile_version" class to optimize some of your game adaptations to this change. In the opposite, when the "normal" version is active, the CSS class "desktop_version" BGA applies the CSS class "desktop_version" to the root HTML element with id "ebd-body".

	== Touchscreen compatibility ==		== Touchscreen compatibility ==
خط ۸۲:		خط ۸۲:
	Most of your games should work with touchscreen devices without needing any changes.		Most of your games should work with touchscreen devices without needing any changes.

	Note: when your game is running on a touchscreen device, the global CSS class "touch-device" is added to the root HTML element (and "notouch-device" is added for the opposite).		Note: when your game is running on a touchscreen device, the global CSS class "touch-device" is added to the to the root HTML element with id "ebd-body" (and "notouch-device" is added for the opposite).

	What may not work :		What may not work :

Sourisdudesert: /* Declare your interface minimum width */

2015-12-28T10:26:09Z

Declare your interface minimum width

→ نسخهٔ قدیمی‌تر		نسخهٔ ‏۲۸ دسامبر ۲۰۱۵، ساعت ۱۲:۲۶
خط ۴۶:		خط ۴۶:
	Examples :		Examples :

	* On Can't Stop, when the screen is too ~~wide~~, we move the dices on another position (below the main board) to fit in the width :		* On Can't Stop, when the screen is too narrow, we move the dices on another position (below the main board) to fit in the width :

	@media only screen and (max-width: 990px) {		@media only screen and (max-width: 990px) {

Sourisdudesert در ‏۲۸ دسامبر ۲۰۱۵، ساعت ۱۰:۲۴

2015-12-28T10:24:07Z

→ نسخهٔ قدیمی‌تر		نسخهٔ ‏۲۸ دسامبر ۲۰۱۵، ساعت ۱۲:۲۴
خط ۲۳:		خط ۲۳:

	// Minimum width		// Minimum width
	// default: ~~760~~		// default: 740
	// maximum possible value: ~~760~~ (ie: your game interface should fit with a ~~760px~~ width (correspond to a 1024px screen)		// maximum possible value: 740 (ie: your game interface should fit with a 740px width (correspond to a 1024px screen)
	// minimum possible value: 320 (the lowest value you specify, the better the display is on mobile)		// minimum possible value: 320 (the lowest value you specify, the better the display is on mobile)
	'min' => 540,		'min' => 540,
خط ۳۱:		خط ۳۱:
	// default: null (ie: no limit, the game interface is as big as the player's screen allows it).		// default: null (ie: no limit, the game interface is as big as the player's screen allows it).
	// maximum possible value: unlimited		// maximum possible value: unlimited
	// minimum possible value: ~~760~~		// minimum possible value: 740
	'max' => null		'max' => null
	),		),

Een در ‏۲۷ دسامبر ۲۰۱۵، ساعت ۱۲:۰۵

2015-12-27T12:05:13Z

→ نسخهٔ قدیمی‌تر		نسخهٔ ‏۲۷ دسامبر ۲۰۱۵، ساعت ۱۴:۰۵
خط ۴۲:		خط ۴۲:
	If you declare that your interface can run with a 540 pixels width, it must effectively run on an interface with 540 pixels width.		If you declare that your interface can run with a 540 pixels width, it must effectively run on an interface with 540 pixels width.

	Note that it doesn't mean that your interface must ALWAYS be 540 pixels width : you just have to make your interface fluid and/or to use CSS media query to fit in any width.		Note that this doesn't mean that your interface must ALWAYS be 540 pixels width: you just have to make your interface fluid and/or to use CSS media query to fit in any width.

	Examples :		Examples :
خط ۶۰:		خط ۶۰:
	}		}

	* On Seasons, we have some panels on the right of the ~~boards~~. On small ~~screen~~, we display these panels below :		* On Seasons, we have some panels on the right of the board. On small screens, we display these panels below the board:


خط ۷۶:		خط ۷۶:


	~~Tips~~ : on mobile, BGA displays ~~players'~~ panels at the top of the page (instead of displaying them on the right). When doing this, BGA applies the CSS class "mobile_version" to the root HTML element. If you want you can use this CSS "mobile_version" class to ~~synchronize~~ some of your game adaptations to this change.		Tip: on mobile, BGA displays player panels at the top of the page (instead of displaying them on the right). When doing this, BGA applies the CSS class "mobile_version" to the root HTML element. If you want you can use this CSS "mobile_version" class to optimize some of your game adaptations to this change.

	== Touchscreen compatibility ==		== Touchscreen compatibility ==

	Most of your ~~game~~ should work with touchscreen ~~device~~.		Most of your games should work with touchscreen devices without needing any changes.

	Note : ~~When~~ your game is running on a touchscreen device, the global CSS class "touch-device" is added to the root HTML element (and "notouch-device" is added in the ~~contrary~~).		Note: when your game is running on a touchscreen device, the global CSS class "touch-device" is added to the root HTML element (and "notouch-device" is added for the opposite).

	What may not work :		What may not work :
	* ":hover" CSS switch. Because there is no mouse, ":hover" won't be triggered. This is not an issue unless it is needed to play the game. In addition, some touch ~~device considers~~ that a short touch must trigger a ":hover" (and should apply corresponding CSS), which can block an interaction in your game. We advise you to explicitely disable ":hover" effects when your game is running on a touchscreen device.		* ":hover" CSS switch. Because there is no mouse, ":hover" won't be triggered. This is not an issue unless it is needed to play the game. In addition, some touch devices consider that a short touch must trigger a ":hover" (and should apply corresponding CSS), which can block an interaction in your game. We advise you to explicitely disable ":hover" effects when your game is running on a touchscreen device.
	* Mouseover events : like the previous one : if you associated Javascript events to "onmouseover" event, it won't work on tablets.		* Mouseover events : like the previous one : if you associated Javascript events to "onmouseover" event, it won't work on tablets.
	* Drag'n'drop : it won't work. To make it work, you should listen to "ontouchstart", "ontouchmove" and "ontouchend" event and trigger the same logic you already have for "onmousedown", "onmousemove" and "onmouseup". You should also make sure to stop the Javascript "ontouchmove" event (ex: dojo.stopEvent( evt ) ) during the drag n drop, otherwise the interface is going to scroll while drag'n'~~droping~~.		* Drag'n'drop : it won't work. To make it work, you should listen to "ontouchstart", "ontouchmove" and "ontouchend" event and trigger the same logic you already have for "onmousedown", "onmousemove" and "onmouseup". You should also make sure to stop the Javascript "ontouchmove" event (ex: dojo.stopEvent( evt ) ) during the drag n drop, otherwise the interface is going to scroll while drag'n'dropping.

Een در ‏۲۷ دسامبر ۲۰۱۵، ساعت ۱۱:۳۰

2015-12-27T11:30:35Z

→ نسخهٔ قدیمی‌تر		نسخهٔ ‏۲۷ دسامبر ۲۰۱۵، ساعت ۱۳:۳۰
خط ۲:		خط ۲:
	Board Game Arena is now adaptated for Mobiles and Tablets too.		Board Game Arena is now adaptated for Mobiles and Tablets too.

	~~This~~ is very easy to have a mobile version of the game you developed with BGA Studio. In fact, your game is probably already 100% playable on mobile.		It is very easy to have a mobile version of the game you developed with BGA Studio. In fact, your game is probably already 100% playable on mobile.

	However, to provide your players the best experience, you should follow the 2 advices below.		However, to provide your players the best experience, you should follow the 2 advices below.

Sourisdudesert در ‏۲۶ دسامبر ۲۰۱۵، ساعت ۱۲:۲۰

2015-12-26T12:20:24Z

→ نسخهٔ قدیمی‌تر		نسخهٔ ‏۲۶ دسامبر ۲۰۱۵، ساعت ۱۴:۲۰
خط ۷۴:		خط ۷۴:

	}		}


			Tips : on mobile, BGA displays players' panels at the top of the page (instead of displaying them on the right). When doing this, BGA applies the CSS class "mobile_version" to the root HTML element. If you want you can use this CSS "mobile_version" class to synchronize some of your game adaptations to this change.

	== Touchscreen compatibility ==		== Touchscreen compatibility ==

Sourisdudesert در ‏۲۶ دسامبر ۲۰۱۵، ساعت ۱۲:۱۸

2015-12-26T12:18:01Z

→ نسخهٔ قدیمی‌تر		نسخهٔ ‏۲۶ دسامبر ۲۰۱۵، ساعت ۱۴:۱۸
خط ۴۹:		خط ۴۹:

	@media only screen and (max-width: 990px) {		@media only screen and (max-width: 990px) {

	#dicechoices {		#dicechoices {
	left: 180px;		left: 180px;
خط ۶۴:		خط ۶۴:

	@media only screen and (max-width: 970px) {		@media only screen and (max-width: 970px) {

	#board {		#board {
	float: none;		float: none;
خط ۷۲:		خط ۷۲:
	margin-left: 0px;		margin-left: 0px;
	}		}

	}		}

Sourisdudesert: /* Declare your interface minimum width */

2015-12-26T12:17:39Z

Declare your interface minimum width

→ نسخهٔ قدیمی‌تر		نسخهٔ ‏۲۶ دسامبر ۲۰۱۵، ساعت ۱۴:۱۷
خط ۴۱:		خط ۴۱:

	If you declare that your interface can run with a 540 pixels width, it must effectively run on an interface with 540 pixels width.		If you declare that your interface can run with a 540 pixels width, it must effectively run on an interface with 540 pixels width.

			Note that it doesn't mean that your interface must ALWAYS be 540 pixels width : you just have to make your interface fluid and/or to use CSS media query to fit in any width.

			Examples :

			* On Can't Stop, when the screen is too wide, we move the dices on another position (below the main board) to fit in the width :

			@media only screen and (max-width: 990px) {

			#dicechoices {
			left: 180px;
			top: 530px;
			}
			#cantstop_wrap {
			height: 900px;
			width: 550px;
			}
			}

			* On Seasons, we have some panels on the right of the boards. On small screen, we display these panels below :


			@media only screen and (max-width: 970px) {

			#board {
			float: none;
			margin: auto;
			}
			.seasons_rightpanel {
			margin-left: 0px;
			}

			}

	== Touchscreen compatibility ==		== Touchscreen compatibility ==

Sourisdudesert: /* Declare your interface minimum width */

2015-12-26T12:11:10Z

Declare your interface minimum width

→ نسخهٔ قدیمی‌تر		نسخهٔ ‏۲۶ دسامبر ۲۰۱۵، ساعت ۱۴:۱۱
خط ۱۳:		خط ۱۳:
	However, you can choose to declare that your game is able to run with a smaller width. This way, the game will appear much better on mobile and tablets.		However, you can choose to declare that your game is able to run with a smaller width. This way, the game will appear much better on mobile and tablets.

	For example, Reversi board is only ~~550px~~ wide. If we stay with the default width (740px), the game interface displayed on mobile will be too large and some space will be lost on the left and on the right. Consequently the Reversi board is going to appear very small on the mobile screen, and players will have to "pinch & zoom" to display it correctly.		For example, Reversi board is only 540px wide. If we stay with the default width (740px), the game interface displayed on mobile will be too large and some space will be lost on the left and on the right. Consequently the Reversi board is going to appear very small on the mobile screen, and players will have to "pinch & zoom" to display it correctly.

	To avoid that, we can specify that the game can be played with an interface with a minimum width of ~~550~~ pixels, by adding the following to gameinfos.inc.php :		To avoid that, we can specify that the game can be played with an interface with a minimum width of 540 pixels, by adding the following to gameinfos.inc.php :


خط ۳۶:		خط ۳۶:


			And that's it! Now, BGA can choose the better display for your game interface, whatever the device.

			'''Important'''

			If you declare that your interface can run with a 540 pixels width, it must effectively run on an interface with 540 pixels width.

	== Touchscreen compatibility ==		== Touchscreen compatibility ==