Hi,
which is the correct way to scale always wade stage to fill its container div?
Using css or using onupdate methods?
Wade stage fill div container
All 13 Comments
Hi
Just to be sure I understand correctly, do you want the wade app to be inside a div as part of a web page that has more elements?
If so, you have a couple of options:
1) Call wade.setWindowMode('container') then position the wade_main_div DOM element as you like with css.
2) Create an iframe that contains your wade app and position the iframe with css,
A WADE app, by default, takes the whole screen (unless you change this behavior by calling wade.setWindowMode, setMinScreenSize and setMaxScreenSize), so if it's inside an iframe it will just take up all of the iframe. This may be the easiest option depending on what you want to achieve.
Yes a simple page with two div gives me the canvas with 0 width and 0 height :
<canvas width="0" height="0" id="wade_layer_1" style="margin: auto; top: 0px; left: 0px; right: 0px; bottom: 0px; -webkit-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); z-index: -1;"></canvas>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.game_holder{
width: 400px;
height: 400px;
overflow: hidden;
margin: 0 auto;
background-color: red;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-ms-touch-action: none;
}
/*---- FLOW ----*/
#wade_main_div{
background-color: #0063be;
width: 100%;
height: 100%;
z-index: 100;
-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);
}
</style>
</head>
<body>
<div class="game_holder">
<div id="wade_main_div"></div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.1.min.js"><\/script>')</script>
<script>
$.getScript( "wade_1.6.1.js", function( data, textStatus, jqxhr ) {
console.log( "Game Load was performed." );
wade.init('flow.js?rnd='+Math.random());
});
</script>
</body>
</html>
The only part which set size into flow is this:
this.init = function()
{
var levelProgression = wade.retrieveLocalObject('flowLevelProgression');
completedLevels = (levelProgression && levelProgression.completedLevels) || 0;
wade.setMaxScreenSize(400,400);
wade.setMinScreenSize(400,400);
wade.setWindowMode('container');
wade.app.loadLevel(Math.floor((Math.random() * 9)+1));
};
Hi
Just to be sure I understand correctly, do you want the wade app to be inside a div as part of a web page that has more elements?
If so, you have a couple of options:
1) Call wade.setWindowMode('container') then position the wade_main_div DOM element as you like with css.
2) Create an iframe that contains your wade app and position the iframe with css,
A WADE app, by default, takes the whole screen (unless you change this behavior by calling wade.setWindowMode, setMinScreenSize and setMaxScreenSize), so if it's inside an iframe it will just take up all of the iframe. This may be the easiest option depending on what you want to achieve.
Hi
That's all good, you only need to add width and height properties to your wade_main_div.
<div id="wade_main_div" width="400" height="400">
To elaborate: WADE will look for those properties of the container div to decide how many logical pixels it should use for the canvas when the app is first initialized. The number of physical pixels is determined by css rules, and it's separate thing.
For example, you could have a 400x400 area in terms of logical pixels, and then stretch it so it actually takes 800x800 physical pixels on the screen.
The number of logical pixels can then be changed, depending on the window mode, using setMinScreenSize, setMaxScreenSize. But it must be set to something to start with.
Ok thank you now i 've understood how it works.
The only problem is that even if i set the correct size on mobile device (using the 'container' windowsmode option) i noticed the game seems to intercept all the drag/touch events avoiding the user to interact with areas out of the game canvas.
The only solution was to use the ontouch event handler and itappable js library to intercept extra game area events.
It's something i've missing too?
wade.setMaxScreenSize(280,280);
wade.setMaxScreenSize(280,280);
wade.setMinScreenSize(280,280);
wade.setWindowMode('container');
wade.setFullScreen(false);
Ok desanitizing the library i found window.addEventListener was used to capture the whole touch events, changing from window to a (the container got by wade.getContainerName in the init function).
This way other divs outside the game received properly the events/drag/click etc.
The only problem now is i have to fix the position received by the game cause now is wrong.
Probably there should be a check if is mobile or not and change the catcher of the events from window to the container..
Hi Neogene
You shouldn't need to alter the source of wade to do what you want. There is a function called cancelInputEvents(toggle)
If you set this to false, then the input events will be passed to the rest of the page automatically.
Yes but also the drag event; and so dragging in the canvas like in the tutorial "flow game" will drag the window too vertically, which is not the best user experience.
Changing as i did prevent the drag event to happen when dragging inside the game which will provide the best experience imo.
Here it is, the modal (my way) and the not modal (wade.cancelInputEvents(false) ;).
In my opinion a modal game option is required in games not in fullscreen, in this way only the game area will prevents events from bubbling but only when the user interact with it.
Here the two simulation video (sorry for crap quality)
https://www.dropbox.com/s/rm5xioyqo0cut4o/modal.mp4?dl=0
https://www.dropbox.com/s/pvc1h0jxegbu38r/notmodal.mp4?dl=0
UPDATE: The only problem i'm facing is that the invisible reactive area of the game when dragging doesn't scroll so the touches were received only when touching the original position of the canvas, trying to understand why.
Hi Neogene
Yes I think it would be a good idea to add an option to let you specify how you want to handle input event (if you want the window to catch events, or just the container). This should be relatively easy and we can probably do it for WADE 2.1
From what you said above, it sounds like you may want to subtract (window.scrollX, window.scrollY) from the position of your touch events?
By the way, wouldn't it be much easier to put the game into an iframe, then everything would work without you having to do anything special? :)
From what you said above, it sounds like you may want to subtract (window.scrollX, window.scrollY) from the position of your touch events?
Sure i tried but the onMouseMove event inside the game got fired only when the vscroll position is 0, while when it's !=0 seems the game interactive area (invisible) doesn't get updated regarding its v position (like if the game area was set to position:fixed which is not) and the mousemove events stop to fire. I'm posting a video to explain better.
By the way, wouldn't it be much easier to put the game into an iframe, then everything would work without you having to do anything special? :)
yes but the site which will contain it doesn't allow iframe.
Hi Neogene
Yes I think it would be a good idea to add an option to let you specify how you want to handle input event (if you want the window to catch events, or just the container). This should be relatively easy and we can probably do it for WADE 2.1
From what you said above, it sounds like you may want to subtract (window.scrollX, window.scrollY) from the position of your touch events?
By the way, wouldn't it be much easier to put the game into an iframe, then everything would work without you having to do anything special? :)
Oh I see. Shame about the iframe, would have made things much easier. But I'm sure we can make it work regardless.
The DOM element that catches the event is (if you haven't changed the container explicitly) wade_main_div. If its position is not getting updated, that suggests some problems with its CSS style, perhaps its position is set to fixed? It would be good to set a background color on it, and maybe change its z-index to a high number, so you can visually see where it is on the screen.
All divs were absolute: ok i've "fixed", the solution was to change in the libray (the event_touchMove in the library event got fired but the this.onMouseMove in the game not) : i changed
eventObject.pageY
with
eventObject.pageY - $(window).scrollTop()
inside wade2.js
so from
else if (1 == d.length) a.event_mouseMove({ clientX: d[0].pageX, clientY: d[0].pageY });i changed to
else if (1 == d.length) a.event_mouseMove({ clientX: d[0].pageX, clientY: d[0].pageY-$(window).scrollTop() });This provides correct position even when the page has scrollbars and the user did scroll. Hope will help others.
Excellent, thanks for sharing your solution.
For those using the debug/development version of WADE, the above code can be found in inputManager.js
Anyway, this is definitely something that the engine should do for you - you shouldn't need to change the source code to achieve this. So we will add an option for it in WADE 2.1.
Post a reply
Add Attachment
Submit Reply
Login to Reply
