A whole new world opens

[Morgalad]

All started a couple of months ago when as a board gamer I felt the necessity to put a "real" dice in the game I was developing, I felt that implementations so far on games lacked the "second of suspense" that a tabletop dice rolling transmits.

So I took some examples from here and there and wrote a codepen thing to make a dice roll in 3D (6 divs rotated and wrapped together )and show the result decided by the server adding a css animation. I also customized and filtered a dice rolling sound .

I wrote the game, and put a lot of care on the cards and dice, my cards are 2 divs that stick to each other, one of them rotated 180` so when I flip them the card shows the right image.

But then after that I thought... I could be nice to see the dice from a side to appreciate better the animation so I tilted a bit the surface that hold the board to give it a sense of depth. And then I saw the dice rolling and thought... wow this looks and feel more like the tabletop game... What if i change my z-index settings of the cards on the deck to be a translatez transform... and The decks and the tiles appeared in 3D.

Ok, I need some controls to move the point of view and the perspective. Then I wrote a small controller for the perspective ... and that is even better!!! now it really looks like the real game!.

Some minor adjustments on the css animations and ad a Zaxis transition effect to my flip card effect (the one that Victoria_La put on the code share project) and WOW! it is moving like the real game.

I learned all by myself reading css documentation and there is no source of how to do 3d animations with Dojo but I offer here the source code to the community of the little tricks I used to make something really simple and cleverly sticking css transforms and animations to make our "web games" feel like "board games".

here the source:

https://github.com/AntonioSoler/bga-takaraisland

Tomorrow you will see all of this in movement.

[Morgalad]

Hi again,

A follow up on this.

As many of you may have noticed now there is a 3D button on the upper right corner.
I've been collaborating with Sourisdudesert to port my little 3D controller to be part of the Framework so now all games can be played in 3D.

Devs can easily port their developments to look nice in 3D, basically you need to translate your z-index properties to transforms of translateZ, and to query the current Z level there is now a new function on the framework:

A new page has been created on the wiki to document this.

http://en.doc.boardgamearena.com/3D

Also there is the plan to update all the slideto* functions to move the elements on the z axis so they wont travel in straight line but doing a curve in the space.

[shadowphiar]

Hi,

Are there plans to add this 3D mode to the developer site?

[Morgalad]

Een is working in to update the Studio to make it more like the production site.

For now you can add this little thing to your game and it would do the trick:

Code: Select all

JS

			this.control3dxaxis=40;
			this.control3dzaxis=10;
			this.control3dxpos=-300;
			this.control3dypos=-100;
			this.control3dscale=0.9;
			this.control3dmode3d=false;
			
			//tk3dchange3d: function ( xaxis , xpos , ypos , zaxis , zromm , enable3d , reset)
			
			dojo.connect($('tk3dAngleUp'), "onclick", dojo.hitch(this, this.tk3dchange3d,  10 , 0 , 0 , 0 , 0 , true  ,false));
			dojo.connect($('tk3dAngleDown'),"onclick", dojo.hitch(this, this.tk3dchange3d,  -10 , 0 , 0 , 0 , 0 , true,false));
			dojo.connect($('tk3dUp'),      "onclick", dojo.hitch(this, this.tk3dchange3d,  0 , -100 , 0 , 0 , 0 , true,false));
			dojo.connect($('tk3dDown'),    "onclick", dojo.hitch(this, this.tk3dchange3d,  0 , 100 , 0 , 0 , 0 , true ,false));
			dojo.connect($('tk3dLeft'),    "onclick", dojo.hitch(this, this.tk3dchange3d,  0 , 0 , -100 , 0 , 0 , true,false));
			dojo.connect($('tk3dRight'),   "onclick", dojo.hitch(this, this.tk3dchange3d,  0 , 0 , 100 , 0 , 0 , true ,false));
			dojo.connect($('tk3dRotateL'), "onclick", dojo.hitch(this, this.tk3dchange3d,  0 , 0 , 0 , 10 , 0 , true  ,false));
			dojo.connect($('tk3dRotateR'), "onclick", dojo.hitch(this, this.tk3dchange3d,  0 , 0 , 0 , -10 , 0 , true ,false));
			dojo.connect($('tk3dReset'),   "onclick", dojo.hitch(this, this.tk3dchange3d,  0 , 0 , 0 , 0 , 0 , false  ,false));
			dojo.connect($('tk3dZoomIn'),  "onclick", dojo.hitch(this, this.tk3dchange3d,  0 , 0 , 0 , 0 , 0.1 , true ,false));
			dojo.connect($('tk3dZoomOut'), "onclick", dojo.hitch(this, this.tk3dchange3d,  0 , 0 , 0 , 0 , -0.1 , true,false));
			dojo.connect($('tk3dClear'),   "onclick", dojo.hitch(this, this.tk3dchange3d,  0 , 0 , 0 , 0 , 0 ,  true  , true));
		
		
		/// UTILITY FUNCTION	
			tk3dchange3d: function ( xaxis , xpos , ypos , zaxis , scale, enable3d , clear3d )
		{
			if ( enable3d == false ){
			this.control3dmode3d= !this.control3dmode3d ;
			}
			
			if ( this.control3dmode3d == false )
			{			
		    $('tk3dReset').innerHTML = "3D" ;
			
			$('playArea').style.transform = "rotatex("+0+"deg) translate("+0+"px,"+0+"px) rotateZ("+0+"deg)" ; 		
			}
			else
			{
				$('tk3dReset').innerHTML = "2D" ;
				this.control3dxaxis+= xaxis;
				if (this.control3dxaxis >= 90 ) { this.control3dxaxis = 90 ; }
				if (this.control3dxaxis <= 0 ) { this.control3dxaxis = 0 ;}
				this.control3dzaxis+= zaxis;
				this.control3dxpos+= xpos;
				this.control3dypos+= ypos;
				this.control3dscale+= scale;
				if (clear3d == true ) 
				{
					this.control3dxaxis=40;
					this.control3dzaxis=10;
					this.control3dxpos=-300;
					this.control3dypos=-100;
					this.control3dscale=0.9;
				}
				$('playArea').style.transform = "rotatex("+this.control3dxaxis+"deg) translate("+this.control3dypos+"px,"+this.control3dxpos+"px) rotateZ("+this.control3dzaxis+"deg) scale3d("+this.control3dscale+","+this.control3dscale+","+this.control3dscale+") ";			 
			}
		},


/// and in the HTML TPL:

<div id="tkchange3d">
 <button id="tk3dAngleUp"   class="tkbutton3d ">&#x219b;;</button>
 <button id="tk3dUp"        class="tkbutton3d ">&#8679;</button>
 <button id="tk3dAngleDown" class="tkbutton3d">&#x219a;</button>
 <br>
 <button id="tk3dLeft"  class="tkbutton3d ">&#8678;</button>
 <button id="tk3dReset" class="tkbutton3d">3D</button>
 <button id="tk3dRight" class="tkbutton3d">&#8680;</button>
 <br>
 <button id="tk3dRotateL" class="tkbutton3d">&#x21bb;</button>
 <button id="tk3dDown"    class="tkbutton3d ">&#8681;</button>
 <button id="tk3dRotateR" class="tkbutton3d ">&#x21ba;</button>
 <br>
 <button id="tk3dZoomIn"  class="tkbutton3d ">+</button>
 <button id="tk3dZoomOut" class="tkbutton3d">-</button>
 <button id="tk3dClear"   class="tkbutton3d">X</button>
</div>