javascript testbed.js

General discussion about the R.U.B.E editor
Abhishek
Posts: 5
Joined: Thu Feb 21, 2013 6:49 am

Re: javascript testbed.js

Post by Abhishek »

Jack in the box works but its inverted(the whole world is inverted). In html5 canvas, as we go down from the top left corner the values at Y-axis values increases, but in RUBE its different so when i load the json from RUBE (without the testbed) , just the plain json and run it on my script the world is inverted. So plz help me. What shud i do?? I chked ur draw() function in test but it was too complex for me (sorry i dont knw much abt box2d). So whats the method to get it working properly?
aholla
Posts: 10
Joined: Fri Feb 22, 2013 4:18 pm

Re: javascript testbed.js

Post by aholla »

Hey, I too have run into this problem.

I am building a box2d game and flipping the context is not a suitable answer. I am going to have to rebuild all my bodies and hope this does not effect the joints too much.

It would be great if RUBE could automate this process. FOr both FLash and JavaScript, the coordinates are inverted and it would be great not to have to touch the exported json from rube.
iforce2d
Site Admin
Posts: 861
Joined: Sat Dec 22, 2012 7:20 pm

Re: javascript testbed.js

Post by iforce2d »

The purpose of the example is so you can see how to do something. When you take away the testbed and something stops working, you need to think about what the difference is between your code and the original example. In this case I think you are missing something like context.scale(1,-1); to flip the context.

>aholla Why is it not suitable to flip the context
aholla
Posts: 10
Joined: Fri Feb 22, 2013 4:18 pm

Re: javascript testbed.js

Post by aholla »

Hey, it seems to me that if I were to flip the canvas then I would have to flip my ui and other menu items too. Alternatively I could create several canvases for the different elements.

I have the got my game working with the non-inverted canvas, I update my objects view and offset their position against the canvas height:

Code: Select all

var scale = 30;
this.view.x = this._body.GetTransform().position.x * SCALE;
this.view.y = canvas.height - ( this._body.GetTransform().position.y * SCALE );
this.view.rotation = - ( this._body.GetAngle() * ( 180 / Math.PI ) );
I plan to test deconstructing the bodies and rebuilding them with the inverted axis, but for te time being I can get by.

Still, it would be great is there was an option in Rube to export the scene with an inverted Y-axis, I'm sure this would help many other javascript users.

Thanks, Rube is awesome!
iforce2d
Site Admin
Posts: 861
Joined: Sat Dec 22, 2012 7:20 pm

Re: javascript testbed.js

Post by iforce2d »

You can surround any operations that change the rendering context (eg. scale, translate) by a save/restore pair, so that the changes have no effect on following rendering:

Code: Select all

context.save();
    context.scale(1,-1);
    ... draw scene here ...
context.restore();

... now draw menu etc here ...
This is how the testbed keeps transformations separate. In fact, without this kind of management it would be complete chaos! :)
fossplant
Posts: 1
Joined: Tue Apr 22, 2014 3:18 pm

Re: javascript testbed.js

Post by fossplant »

looking forward to a "flipWorldOnJsonExport()" function in RUBE
so that there is zero performance hit within the app itself due to flipping

(earning some participation brownie points)
Thanks!
dmagunov
Posts: 16
Joined: Tue Dec 10, 2013 3:40 pm
Contact:

Re: javascript testbed.js

Post by dmagunov »

fossplant wrote:looking forward to a "flipWorldOnJsonExport()" function in RUBE
so that there is zero performance hit within the app itself due to flipping

(earning some participation brownie points)
Thanks!
Hello, first implementation of converting coords (for now without joints) - http://argadnet.com/coordinate-transfor ... -canvas_3/
iforce2d
Site Admin
Posts: 861
Joined: Sat Dec 22, 2012 7:20 pm

Re: javascript testbed.js

Post by iforce2d »

The script function scale() was added in v1.6 which lets you flip a scene vertically, and it takes care of all joint anchors, joint limits, image positions and image angles.

You can see a video explanation here, from about 9:28
https://www.youtube.com/watch?v=NHbGtHtccx4

I had a feeling there was a thread here that I should have posted a follow-up to, but I couldn't find it because the title of this thread is "javascript testbed.js" which didn't ring any bells for me :)
Post Reply