3D - Historial de revisións

Een: /* Setting the default point of view and enabling 3d by default */

2017-07-27T09:28:11Z

Setting the default point of view and enabling 3d by default

← Revisión máis antiga		Revisión como estaba o 27 de xullo de 2017 ás 11:28
Liña 85:		Liña 85:
	Your game may require to use 3D mode enabled by default and also with a certain custom default PoinOfView. You can achieve this setting in your constructor section of your game:		Your game may require to use 3D mode enabled by default and also with a certain custom default PoinOfView. You can achieve this setting in your constructor section of your game:

			'''Important: you must use this only if your game doesn't work without 3D mode.''' As a general platform policy, interface must be optimised for 2D and display in 2D by default. 3D is meant as an option that can be activated by the user if he wants it.

	if (!dojo.hasClass("ebd-body", "mode_3d")) {		if (!dojo.hasClass("ebd-body", "mode_3d")) {

Victoria la: /* Setting the default point of view and enabling 3d by default */

2017-07-18T00:11:30Z

Setting the default point of view and enabling 3d by default

← Revisión máis antiga		Revisión como estaba o 18 de xullo de 2017 ás 02:11
Liña 86:		Liña 86:


	if (!dojo.hasClass("ebd-body", "mode_3d")) {		if (!dojo.hasClass("ebd-body", "mode_3d")) {
	dojo.addClass("ebd-body", "mode_3d");		dojo.addClass("ebd-body", "mode_3d");
	dojo.addClass("ebd-body", "enableTransitions");		dojo.addClass("ebd-body", "enableTransitions");
Liña 96:		Liña 96:
	this.control3dscale = 1.4; // zoom level, 1 is default 2 is double normal size,		this.control3dscale = 1.4; // zoom level, 1 is default 2 is double normal size,
	this.control3dmode3d = true ; // is the 3d enabled		this.control3dmode3d = true ; // is the 3d enabled
	$("game_play_area").style.transform = "rotatex(" + this.control3dxaxis + "deg) translate(" + this.control3dypos + "px," + this.control3dxpos + "px) rotateZ(" + this.control3dzaxis + "deg) scale3d(" + this.control3dscale + "," + this.control3dscale + "," + this.control3dscale + ")";		$("game_play_area").style.transform =
	}		"rotatex(" + this.control3dxaxis + "deg) translate(" + this.control3dypos + "px," + this.control3dxpos + "px) rotateZ(" + this.control3dzaxis + "deg) scale3d(" + this.control3dscale
			+ "," + this.control3dscale + "," + this.control3dscale + ")";
			}

Galehar: Fix formatting

2017-07-09T20:19:18Z

Fix formatting

← Revisión máis antiga		Revisión como estaba o 9 de xullo de 2017 ás 22:19
Liña 24:		Liña 24:
	In CSS, you should prefix all your 3D mode specific directives by ".mode_3d".		In CSS, you should prefix all your 3D mode specific directives by ".mode_3d".

	.mode_3d .board {		.mode_3d .board {
	overflow: visible;		overflow: visible;
	}		}

	In Javascript, you can detect 3D by using the following :		In Javascript, you can detect 3D by using the following :

Morgalad: /* Setting the default point of view and enabling 3d by default */

2017-07-07T15:20:08Z

Setting the default point of view and enabling 3d by default

← Revisión máis antiga		Revisión como estaba o 7 de xullo de 2017 ás 17:20
Liña 87:		Liña 87:

	if (!dojo.hasClass("ebd-body", "mode_3d")) {		if (!dojo.hasClass("ebd-body", "mode_3d")) {
	dojo.addClass("ebd-body", "mode_3d");		dojo.addClass("ebd-body", "mode_3d");
	dojo.addClass("ebd-body", "enableTransitions");		dojo.addClass("ebd-body", "enableTransitions");
	$("globalaction_3d").innerHTML = "2D"; // controls the upper right button		$("globalaction_3d").innerHTML = "2D"; // controls the upper right button
	this.control3dxaxis = 30; // rotation in degrees of x axis (it has a limit of 0 to 80 degrees in the frameword so users cannot turn it upsidedown)		this.control3dxaxis = 30; // rotation in degrees of x axis (it has a limit of 0 to 80 degrees in the frameword so users cannot turn it upsidedown)
	this.control3dzaxis = 0; // rotation in degrees of z axis		this.control3dzaxis = 0; // rotation in degrees of z axis
	this.control3dxpos = 100; // center of screen in pixels		this.control3dxpos = 100; // center of screen in pixels
	this.control3dypos = 300; // center of screen in pixels		this.control3dypos = 300; // center of screen in pixels
	this.control3dscale = 1.4; // zoom level, 1 is default 2 is double normal size,		this.control3dscale = 1.4; // zoom level, 1 is default 2 is double normal size,
	this.control3dmode3d = true ; // is the 3d enabled		this.control3dmode3d = true ; // is the 3d enabled
	$("game_play_area").style.transform = "rotatex(" + this.control3dxaxis + "deg) translate(" + this.control3dypos + "px," + this.control3dxpos + "px) rotateZ(" + this.control3dzaxis + "deg) scale3d(" + this.control3dscale + "," + this.control3dscale + "," + this.control3dscale + ")";		$("game_play_area").style.transform = "rotatex(" + this.control3dxaxis + "deg) translate(" + this.control3dypos + "px," + this.control3dxpos + "px) rotateZ(" + this.control3dzaxis + "deg) scale3d(" + this.control3dscale + "," + this.control3dscale + "," + this.control3dscale + ")";
	}		}

Morgalad: /* Setting the default point of view and enabling 3d by default */

2017-07-07T15:19:27Z

Setting the default point of view and enabling 3d by default

← Revisión máis antiga		Revisión como estaba o 7 de xullo de 2017 ás 17:19
Liña 93:		Liña 93:
	this.control3dzaxis = 0; // rotation in degrees of z axis		this.control3dzaxis = 0; // rotation in degrees of z axis
	this.control3dxpos = 100; // center of screen in pixels		this.control3dxpos = 100; // center of screen in pixels
	this.control3dypos = 300; // center of screen in pixels		this.control3dypos = 300; // center of screen in pixels
	this.control3dscale = 1.4; // zoom level, 1 is default 2 is double normal size,		this.control3dscale = 1.4; // zoom level, 1 is default 2 is double normal size,
	this.control3dmode3d = true ; // is the 3d enabled		this.control3dmode3d = true ; // is the 3d enabled
	$("game_play_area").style.transform = "rotatex(" + this.control3dxaxis + "deg) translate(" + this.control3dypos + "px," + this.control3dxpos + "px) rotateZ(" + this.control3dzaxis + "deg) scale3d(" + this.control3dscale + "," + this.control3dscale + "," + this.control3dscale + ")";		$("game_play_area").style.transform = "rotatex(" + this.control3dxaxis + "deg) translate(" + this.control3dypos + "px," + this.control3dxpos + "px) rotateZ(" + this.control3dzaxis + "deg) scale3d(" + this.control3dscale + "," + this.control3dscale + "," + this.control3dscale + ")";
	}		}

Morgalad o 7 de xullo de 2017 ás 15:18

2017-07-07T15:18:56Z

← Revisión máis antiga		Revisión como estaba o 7 de xullo de 2017 ás 17:18
Liña 79:		Liña 79:

	Note: if you found some generic CSS that may help some other developers for 3D enhancements, please send it to us so we can add it there.		Note: if you found some generic CSS that may help some other developers for 3D enhancements, please send it to us so we can add it there.


			== Setting the default point of view and enabling 3d by default ==

			Your game may require to use 3D mode enabled by default and also with a certain custom default PoinOfView. You can achieve this setting in your constructor section of your game:


			if (!dojo.hasClass("ebd-body", "mode_3d")) {
			dojo.addClass("ebd-body", "mode_3d");
			dojo.addClass("ebd-body", "enableTransitions");
			$("globalaction_3d").innerHTML = "2D"; // controls the upper right button
			this.control3dxaxis = 30; // rotation in degrees of x axis (it has a limit of 0 to 80 degrees in the frameword so users cannot turn it upsidedown)
			this.control3dzaxis = 0; // rotation in degrees of z axis
			this.control3dxpos = 100; // center of screen in pixels
			this.control3dypos = 300; // center of screen in pixels
			this.control3dscale = 1.4; // zoom level, 1 is default 2 is double normal size,
			this.control3dmode3d = true ; // is the 3d enabled
			$("game_play_area").style.transform = "rotatex(" + this.control3dxaxis + "deg) translate(" + this.control3dypos + "px," + this.control3dxpos + "px) rotateZ(" + this.control3dzaxis + "deg) scale3d(" + this.control3dscale + "," + this.control3dscale + "," + this.control3dscale + ")";
			}

Morgalad: /* Use Z axis */

2017-06-22T15:44:43Z

Use Z axis

← Revisión máis antiga		Revisión como estaba o 22 de xuño de 2017 ás 17:44
Liña 52:		Liña 52:
	transform: translateZ( 20px ); /* This element is going to float 20px above the surface */		transform: translateZ( 20px ); /* This element is going to float 20px above the surface */
	}		}

			The framework will add the following to all your divs:
			transform-style: preserve-3d;

			So they will keep their position in 3D space relative to other elemens with the transformation defined. Note that some CSS artifacts can break the css inheritance of the "preserve-3d" like "overflow:auto"


Liña 57:		Liña 62:

	this.getComputedTranslateZ( html_element );		this.getComputedTranslateZ( html_element );


	== Use pre-build BGA 3D CSS classes ==		== Use pre-build BGA 3D CSS classes ==

Morgalad: /* Use pre-build BGA 3D classes */

2017-06-22T15:38:36Z

Use pre-build BGA 3D classes

← Revisión máis antiga		Revisión como estaba o 22 de xuño de 2017 ás 17:38
Liña 59:		Liña 59:


	== Use pre-build BGA 3D classes ==		== Use pre-build BGA 3D CSS classes ==

	By adding the following classes to your objects, they will look nicer in 3D:		By adding the following classes to your objects, they will look nicer in 3D:

Victoria la: /* Detecting 3D */

2017-06-22T01:46:02Z

Detecting 3D

← Revisión máis antiga		Revisión como estaba o 22 de xuño de 2017 ás 03:46
Liña 24:		Liña 24:
	In CSS, you should prefix all your 3D mode specific directives by ".mode_3d".		In CSS, you should prefix all your 3D mode specific directives by ".mode_3d".

	.mode_3d .~~meeple~~ {		.mode_3d .board {
	~~// something 3d specific~~		overflow: visible;
	}		}

	In Javascript, you can detect 3D by using the following :		In Javascript, you can detect 3D by using the following :

Victoria la: /* Detecting 3D */

2017-06-21T22:57:22Z

Detecting 3D

← Revisión máis antiga		Revisión como estaba o 22 de xuño de 2017 ás 00:57
Liña 23:		Liña 23:

	In CSS, you should prefix all your 3D mode specific directives by ".mode_3d".		In CSS, you should prefix all your 3D mode specific directives by ".mode_3d".

			.mode_3d .meeple {
			// something 3d specific
			}

	In Javascript, you can detect 3D by using the following :		In Javascript, you can detect 3D by using the following :
Liña 30:		Liña 34:
	// Only executed in 3d mode		// Only executed in 3d mode
	}		}


	= Built-in 3D enhancements =		= Built-in 3D enhancements =