Transformed div in zone

Game development with Board Game Arena Studio
A-dam
Posts: 30
Joined: 28 September 2013, 18:15

Transformed div in zone

Postby A-dam » 17 June 2018, 19:55

Hi, any simple idea how to put scaled div in Zone component? The original w/h is taken into account, not the transformed one.

User avatar
Victoria_La
Posts: 303
Joined: 28 December 2015, 20:55

Re: Transformed div in zone

Postby Victoria_La » 17 June 2018, 21:41

Not sure exact situation because you did not post your code, but of zone applies transforation itself it may be removing yours,
the way to solve this is double wrap the div.
i.e.

Code: Select all

<div id="a_wrapper">
   <div id="a" style="transform: ..."></div>
</div>

A-dam
Posts: 30
Joined: 28 September 2013, 18:15

Re: Transformed div in zone

Postby A-dam » 18 June 2018, 05:28

Victoria_La wrote:

Code: Select all

<div id="a_wrapper">
   <div id="a" style="transform: ..."></div>
</div>


Thank you, but I have tried this with no result

User avatar
Victoria_La
Posts: 303
Joined: 28 December 2015, 20:55

Re: Transformed div in zone

Postby Victoria_La » 18 June 2018, 13:59

Sorry I did not read the post properly, that was generic way to keep transforms, but width/height is a different story. Do you set it programmatically?

A-dam
Posts: 30
Joined: 28 September 2013, 18:15

Re: Transformed div in zone

Postby A-dam » 18 June 2018, 20:57

No, with css

my div is set like this:

Code: Select all

.pawn{
    width: 45px;
    height: 45px;
    background-repeat: no-repeat;
    position: absolute;
    background-image: url('img/pawns.png');   
}

transform is applied with add class

Code: Select all

.pawn.small{
    transform: scale(0.5);
}

and then put into Zone

Code: Select all

this.myZone.placeInZone( 'pawn_'+i);

Div inside zone still has width and height like original one, even with using wrapper.

Im not sure if it is even possible, so aking if anyone know about it.. I guess I can handle it with background-size and percantage position..

User avatar
Victoria_La
Posts: 303
Joined: 28 December 2015, 20:55

Re: Transformed div in zone

Postby Victoria_La » 19 June 2018, 01:27

Yes that is what I do in my games. All sprite position is relative in percentages and I scale with background-size

With div wrapper approach you should have set the size of the wrapper explicitly though

Code: Select all

.small_pawn_wrapper {
     width: 23px;
    height: 23px;
}

Code: Select all

<div class="small_pawn_wrapper" id="small_pawn_3">
   <div class="small pawn" id="pawn_3"></div>
</div>

A-dam
Posts: 30
Joined: 28 September 2013, 18:15

Re: Transformed div in zone

Postby A-dam » 19 June 2018, 16:31

Victoria_La wrote:With div wrapper approach you should have set the size of the wrapper explicitly though


No, not working in the Zone, div behave like the original one. Using background-size and percentage is much better approach.

I was just curious if it can work, but I was not able to find solution.. Thanks anyway!


Return to “Developers”

Who is online

Users browsing this forum: No registered users and 1 guest