Board Game Arena

Posted: **16 November 2019, 22:04**

Hi.

I have been using slideToObjectPos();
I have noticed that the end coordinate position was not quite ending in the correct position, so I did some detailed analysis to see what was going on.

I moved the same object (blocker) between the same 2 locations:

Note in my log I write [x,y] div.outerHTML.
The x,y are the coordinate postion I want to move to. There is a difference between x,y and the final left,top but I assume it's always just an offset of some kind. The important thing is just the consistency of the co-ordinates I asked for (pass as parameters) and the final left, top position.

A. If I use placeOnObjectPos, the final position is always OK.

Code: Select all

//this.placeOnObjectPos( token.key, 'map_scrollable_oversurface', xxx, yyy );	
//[-25 :: 62.5]<div class="tokenB Bff0000 blocker" id="blocker_0_2308260" style="top: 13px; left: -75px; transform: scale(0.25, 0.25) rotate(180deg);"></div>
//[-41.6 :: -177.6]<div class="tokenB Bff0000 blocker" id="blocker_0_2308260" style="top: -228px; left: -92px; transform: scale(0.25, 0.25) rotate(120deg);"></div>
//[-25 :: 62.5]<div class="tokenB Bff0000 blocker" id="blocker_0_2308260" style="top: 13px; left: -75px; transform: scale(0.25, 0.25) rotate(180deg);"></div>

B. If I use slideToObjectPos then the final position is at best loosely in the right area.

Code: Select all

//this.slideToObjectPos(token.key, 'map_scrollable_oversurface', xxx, yyy, 0).play();
//[-41.6 :: -177.6]<div class="tokenB Bff0000 blocker" id="blocker_0_2308260" style="top: -227.5px; left: -91.5px; transform: scale(0.25, 0.25) rotate(120deg);"></div>
//[-25 :: 62.5]<div class="tokenB Bff0000 blocker" id="blocker_0_2308260" style="top: 17.0753px; left: -69.9247px; transform: scale(0.25, 0.25) rotate(180deg);"></div>
//[-41.6 :: -177.6]<div class="tokenB Bff0000 blocker" id="blocker_0_2308260" style="top: -227.487px; left: -91.5028px; transform: scale(0.25, 0.25) rotate(120deg);"></div>
//[-25 :: 62.5]<div class="tokenB Bff0000 blocker" id="blocker_0_2308260" style="top: 17.0727px; left: -69.9275px; transform: scale(0.25, 0.25) rotate(180deg);"></div>
//[-25 :: 62.5]<div class="tokenB Bff0000 blocker" id="blocker_0_2308260" style="top: 12.5102px; left: -74.5056px; transform: scale(0.25, 0.25) rotate(180deg);"></div>
//[-41.6 :: -177.6]<div class="tokenB Bff0000 blocker" id="blocker_0_2308260" style="top: -227.49px; left: -91.5056px; transform: scale(0.25, 0.25) rotate(120deg);"></div>
//[-25 :: 62.5]<div class="tokenB Bff0000 blocker" id="blocker_0_2308260" style="top: 17.0697px; left: -69.9303px; transform: scale(0.25, 0.25) rotate(180deg);"></div>
//[-25 :: 62.5]<div class="tokenB Bff0000 blocker" id="blocker_0_2308260" style="top: 12.5072px; left: -74.5084px; transform: scale(0.25, 0.25) rotate(180deg);"></div>

Secondly, minor point - I've also noticed that between the 2 functions. placeOnObjectPos and slideToObjectPos:
slideToObjectPos is offset by the image width and height, while
placeOnObjectPos is not (I think it's automatically centred).

Posted: **20 November 2019, 10:17**

Anyone had a chance to look into this issue?

I have since changed the image size, made it x2 as big and the problem has got worse. I presume it's related to the image size and the css transform scale and rotation.

Code: Select all

this.slideToObjectPos(token.key, 'map_scrollable_oversurface', xxx, yyy, 2000).play();				
dojo.style($(token.key), 'transform', this.getTransformFromToken(token));

the transform will be something like:
transform scale(0.25, 0.25) rotate(120deg)

Posted: **21 November 2019, 05:52**

I think I encountered the same issue recently. When using CSS scale and slidetoObjectPos it does not work as one might expect. that said I'm not sure why placeOn works as you expect as I thought it uses the same logic internally.

internally the function uses dojo position to get X, Y coords which is absolute to the screen, but the position sent to the method is probably relative (i.e. doesn't care about scale factor). for example if you had a 100x100 box scaled down to 50x50 you might still send in 80x80 as params, expecting it to slide within the box. but from what I remember when looking at this it does not factor in the scaling.

Is it possible to avoid css scale? that would be my recommendation if possible. otherwise need to figure out a way to offset or custom method.

I noticed the game signorie has some different functions for sliding, but I don't know much about it. In my case I use css scale for the entire game area so I compute the difference and send adjusted coords to slideToObjectPos.

Posted: **24 November 2019, 02:12**

The very strange thing is, calling the same function with the same arguments yield different results.

Posted: **24 November 2019, 13:00**

I have not used the slideToPos function, but had trouble with the combination of slides and CSS scale:

In "The Ruhr" I implemented a function to enlarge the board to the actual available space, using css scale on the whole table wrapper (including board, player boards and tokens, but of course not the BGA player panels). When using scaled mode I had lots of trouble with animations (using slideToObject, but also managing zones with addToZone). Most of the time, the objects moved with slideToObject landed somewhere else than the expected destination. The behaviour wasn't the same for diferent situations like move an element from the scaled area to a BGA player board, from there to the scaled area, or for animations inside the scaled area. The zone management was much more reliable. By experimenting I have found a workaround for the slides, which does not work perfect, but much better than without: When an object should be slided, I removed the scaling, setup the animation and start it, then apply again the scale. The short change of scale is not visible at all, but apparently the destination is calculated correctly without scale.

Posted: **25 November 2019, 21:03**

It's intersting to see this as I am currently working with this exact issue in my game. I have two objects that I am currently trying to move around the board and place on the board at start up. I am using zoom on both items and I think that is causing the issues.

One "fix" I found for one of my objects (for now) was that I added a top: 0px !important and left: 0px !important to the <div> element of that object. It does seem to fix the location it starts at, but sliding the object is still an issue.

It appears that the slideToObject is injecting some kind of element styling to the code that happens "behind the scenes" which is why I was hoping the !important would fix it. I am still playing around with this.

Posted: **26 November 2019, 11:35**

Hello.

To make a long story short: slideToObjectPos and placeOnObjectPos are not compatible with "CSS transform" properties.

The reason is simple: the functions we are using to compute absolute coordinates are not taking into account "CSS transform", so we can't.

The only possible solution to make these 2 compatible is to disable all CSS transform properties, use slideToObjectPos/placeOnObjectPos, and then apply them again.

Posted: **26 November 2019, 12:20**

Is it possible to post the code for slideToObjectPos ?

I can't see how it's possible for a workaround by applying the transform afterwards. Not only does it sound difficult to code, but more importantly - the visual effect is not going to be pleasing.

The rotation effect of the transform is a must in my case. I sincerely hope slideToObjectPos will at-least work with a rotation, otherwise I am totally goosed!
The scaling will have to work (somehow) with a multitude of different sized images.

Note: In the last week, I had changed all my slideToObjectPos into placeOnObjectPos, and the placeOnObjectPos has been working OK with the transform.

Posted: **26 November 2019, 12:35**

Hello

slideToObjectPos is using "dojo.position" to get absolute position of an element in the DOM.

Then, it is using "dojo.fx.slideTo" to slide the element to its destination.

Both these functions are returning crazy results if there are some CSS transform.

Disabling all transform before and after takes much resources but it works and there is no visual side effect. It is used to support slide in 3D and works quite well.

Posted: **26 November 2019, 15:18**

So talking just about calculating co-ordinates.

If I personally calculate the co-ordinates, I assume it will be a multiplier, offset kind of thing. y = mx + c.
Do you see any problems about using these figures for top and left ?
Are there likely any other scaling or zooming factors to take into account?

Board Game Arena

slideToObjectPos : uncertain final position

slideToObjectPos : uncertain final position

Re: slideToObjectPos : uncertain final position

Re: slideToObjectPos : uncertain final position

Re: slideToObjectPos : uncertain final position

Re: slideToObjectPos : uncertain final position

Re: slideToObjectPos : uncertain final position

Re: slideToObjectPos : uncertain final position

Re: slideToObjectPos : uncertain final position

Re: slideToObjectPos : uncertain final position

Re: slideToObjectPos : uncertain final position