Creating Menus in RUBE

[Phantom Ppepper]

So I have been playing around with RUBE all day and the idea arose - would it be possible to use Rube as a UI builder for menus? What would the major problems arise from that?

[iforce2d]

Yes, the menus in in Downhill Supreme were made with RUBE. You can see a screenshot showing the main screen in the editor view here: http://www.box2d.org/forum/viewtopic.php?f=6&t=9314

There were no major problems that I can remember. It only handles simple menus where none of the buttons overlap. Since you know there will only be one fixture under the touch location, the buttons don't need to have any front-to-back ordering etc. I set up a generic layer to check which fixture was touched, and if that fixture had a certain custom string property, the selector of that name (this is ObjC) would be called if it existed. This means the function of buttons can be assigned by setting the custom property for those fixtures in RUBE.

This generic button layer extends the BasicRUBELayer which lets you drag things around, so one really nice side effect of this is that if each button is given a separate body instead of all being on the same 'ground' body, and those bodies are made dynamic, you can drag and throw the buttons around. We did not make too much use of that, but if you try the game you will see you can slide the clouds on the main menu screen, and pull the chains on the track menu screen. I am thinking I might tidy this class up and release it sometime, since it's quite handy.

[Phantom Ppepper]

Well that is freakin awesome!

[Phantom Ppepper]

ps - I've been enjoying that game! Quite impressive.

[vkreal]

Hi iforce2d,

I also thinking using RUBE to build menu system. It would great to see your version

[Phantom Ppepper]

I agree! A tutorial would be a YouTube sensation...

[Phantom Ppepper]

Ok, so from the examples found in your json loader documentation:

Code: Select all

 b2Joint* axleJoint;
  b2Body* carBody;
  b2Fixture* rearBumperFixture;
  b2Fixture* frontBumperFixture;
  
  b2dJson json;
  
  json.setJointName(axleJoint, "drive axle");
  json.setBodyName(carBody, "chassis");
  json.setFixtureName(rearBumperFixture, "bumper");
  json.setFixtureName(frontBumperFixture, "bumper");
  
  json.writeToFile(myWorld, "myfile.json");

If I were to grab a "start" button from my RUBE scene for example, I would:

Code: Select all

//This would call the button?
b2Body* startButton;

//this would name it for use in my project? (cocos2d)?
json.setBodyName(startButton, "Start");

Am I getting this right?

[iforce2d]

A button is an area of the screen, and you need to be able to check if a touch was inside that area, so you would use a fixture rather than a body.

Code: Select all

b2Fixture* button = getFixtureByName("start");

The code example you have pasted is for writing to a file, which you would not be doing in your game. Setting the names of things is what RUBE is for

[vkreal]

how would this work between retina and none, would this be just changing the scaling on the layer?

[iforce2d]

The scenes for menus are loaded just like any other scene, so there is no changing of scales necessary (other than what the loader already has to do).

Right now I am preparing an update of the Cocos2d sample loader which will drop into either v1 or v2, and includes a couple of samples for menu screens. I'll also make a video to explain the usage of the newly added class which handles these. Hopefully should be up in the next day or two.