Hi

I tried to dynamically set the width and height of the wade main div using jquery, but that doesn't seem to change the app size which always loads at 800 x 600.

WADE, by default, resizes automatically to fit the whole screen (you can change that with wade.setWindowMode).

However, the resizing happens after the app's init function has been executed - this is to give you chance to decide, in the init function, what you want to do with setWindowMode.

So if you look at the screen size in the init function, that's not the actual screen size - that's the original screen size, which is what you set for wade_main_div in index.html, before the resizing occurs.

If you really need to, you can change the width and height of wade_main_div to whatever you like, but you must change the actual width and height attributes of the div, not its style properties - changing the style properties will stretch the game canvas, but not change the number of logical pixels in it. Resizing via jQuery, I believe, changes the style properties only.

 

I noticed in the documentation that the init function can take additional object parameters, but it didn't detail what those could / should be.

" appData Optional, Default: {} An object containing initialization data for the app"

That's a very good point, I should and will update the docs. The idea is that appData is whatever you like, it's just an extra parameter that you can use to pass data to your game. You can then access it as wade.app.appData. This is particularly useful when your html file is generated dynamically (say with PHP for example). So it's a way for your server scripts to communicate with your game (for example to set up the details of a player in an online game).

 

Also, if  a user can zoom say a clickable  level menu, is there a way to get the clickable (canvas ?) size rather than the screen size. i.e. if you have a 200x200 sprite and the user clicks less than -50 you do something. Now if that sprite is zoomed out and is now say 100x100 how do you correct so that you do something when the user clicks less than -25 ? Do you correct for the z index, or is there a way to get the new 'clickable' size ?

WADE takes care of the complicated bit. Sprites can react to zoom in different ways (depending on the properties of the layer they're in) - it can get quite complicated. But even when the position and size of an object on the screen change, its world space properties don't. When a user clicks, you get the click position in screen space. You want to transform it into world space (using wade.screenPositionToWorld() ), and then do all your calculations in world space units, because those never change when the camera moves. SceneObject.getPosition(), getSize(), etc. all return world-space values.

So you would do something like this:

this.onClick = function(eventData){    var worldPosition = wade.screenPositionToWorld(layerId, eventData.screenPosition);    if (worldPosition.x - object.getPosition().x > -50)    {        // do something    }};

Gio,

Brilliant, works like a charm.

Not to beat a dead horse, but It seems like you are outrunning your documentation.

I looked at the latest release notes and some of the new stuff looks really interesting, but wade does so much

that it is difficult to get the 40,00 foot (or even the 10,000 in some cases) picture.

Again thanks for the help,

cheers

Hi, I need to set the WADE canvas (i.e. window) size to the size of my html5 container div.

wade.setMin or .setMaxScreenSize() works fine, but overrules (both) the container's div size and css style.

A workaround is to change the body width and height style altogether. When I do this however, the mouse

events go off the grid -- My wade objects onMouse events displace by the same width and height difference to the left.

All divs withs and screensizes are consistent and I am using wade 1.1.2.

Seems like I have to modify the style canvas, #wade_main_div somehow, any ideas?

In a similar note, I believe is best if you guys could publish your code on how to embed the apps in divs. :)

thanks!

CA

First of all, please upgrade to wade 1.1.3, because I can't remember what was and what wasn't supported in previous versions :)

If you do this somewhere in your init function:

wade.setWindowMode('container');

It will force the WADE app to be inside its container div (wade_main_div). To resize it to 1024x768, for example:

var container = document.getElementById('wade_main_div');
container.setAttribute('width', 1024);
container.setAttribute('height', 768);

That doesn't work Gio.

Hmm, old thread, but it's still supposed to work... however I can see that it doesn't now, because of a bug. Thanks for pointing it out, I've fixed it and it will be in the next release.

In fact this has also highlighted the fact that there is no option in the editor to choose the window mode. I'll try to add that too for 3.5.

In the meantime you have 2 options:

1. iframe it - this is by far the easier option

2. apply the fix yourself. This involves downloading the wade zip so you use the source code version instead of the minified one. Basically copy the wade_src folder to your project's folder, and make sure that your index.html file includes all the scripts that debug.html includes (all the ones located in wade_src), instead of wade.js in the root folder.

Once that's done, edit wade_src/renderer.js and around line 213 find this code:

if (resize)
{
    w = screenWidth + 'px';
    h = screenHeight + 'px';
    updateMainStyle = true;
    sceneManager.onResize(oldWidth, oldHeight, screenWidth, screenHeight);
}

Change it to this:

w = screenWidth + 'px';
h = screenHeight + 'px';
if (resize)
{
    updateMainStyle = true;
    sceneManager.onResize(oldWidth, oldHeight, screenWidth, screenHeight);
}

Finally, manually edit your scene file (scene1.wsc or whatever it is called) - this can be done in the editor by right-clicking the file and selecting Show in code editor.

Scroll down towards the bottom and find the "windowMode" parameter. Change it from "full" to "container". Save the file and it should work.

Well there's also option 3 that's "wait for WADE 3.5", but that's a couple of weeks away.

Thanks Gio, I think I can wait the couple weeks ;)