Clockwork Chilli - Wade Game Engine Forums

The forum is read-only. New threads, replies and edits are disabled.

Open-Match3 breaks if position on the left side

svox January 28th, 2015

Hi,

I try to have the game halfesized in my page with my given size.

But this doesnt works right now.

I change:

wade.setWindowMode('container');
wade.setMinScreenSize(542, 820); //996
wade.setMaxScreenSize(542, 820); //996
wade.setFullScreen(false);

in my app.js

in index.html

With this css:

#wade_main_div {
position: absolute;
padding: 0;
top: 0;
bottom:0;
right: 0;
left: 0;
border: none;
outline: none;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
-moz-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
background-color: #000000;

}

canvas {
position: absolute;
padding: 0;
left: 0;
top: 0;
right: 0;
bottom: 0;
border: none;
outline: none;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
-moz-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
}

Everything is fine. The game works.

But I wanna have the game on the left side.

So i remove the right:0 from #wade_main_div

After this the game is on the left side (fine!) but I cant click any button!

Any idea what is wrong with it?

Regards

Gio January 28th, 2015

Hi svox and welcome to the forums

If you set the windowMode to container, then the wade app will work within its container div (wade_main_div).

If you do what you described above, you need to change the width of wade_main_div too (presumably to 542px), or its width will be 0. However I think that Open Match 3 was designed with full-screen in mind, so I expect that you will run into some other problems with it. If you want to just use that code with no code changes, I recommend putting it into an iframe, otherwise there will probably be more work to do.

svox January 28th, 2015

Hi,

thanks for the very quick response!

I can change some code but it looks a little bit that changes with coords or sizes are bigger modifications because

all sizes and positions are hard coded. So my hope was that I can change some CSS and position it on the left side. ;)

Currently it looks that this position changes works quickly, but unfortunately the buttons didnt work after the change.

But maybe I can try the iframe. Thank you.

Gio January 28th, 2015

I've tried it here, and setting the CSS width of the div to 542px made the buttons work. However, things are a bit all over the place - as you say, some positions were hardcoded. Iframe should work though, let us know how it goes.

svox January 28th, 2015

Thanks for your help!

This also works for me. But if I remove the:

right:0;

from #wade_main_div

and set

wade.setWindowMode('container');

It is on the left position but I cant click the buttons.

Without setWindowMode it works.

Strange thing.