javascript testbed.js

[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]

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]

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]

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]

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]

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]

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]

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