Week 4 Progress

Progress

This week we made a lot of progress toward the user interface of the app. One of the first major things we did was implement graphics for the first time. This can be seen in some of the screenshots below as well as some of the earlier posts from this week. We also began working on incorporating an on-screen menu. We’ve created a hierarchical structure with different sub-menus attached to the main menu. Here’s an outline of what that looks like:

• Main Menu
• Add Body Sub-menu
• Add Single Body
• Add Multiple Bodies (matrix)
• Edit Body Sub-menu
• Scale Body
• Change Body’s Velocity
• Change Body’s Orbit
• Make Body Stuck in Place
• Body Info
• Delete Body
• View Options Sub-menu
• Zoom Camera
• Pan Camera
• Reset Camera
• Center Camera on Body
• Settings Sub-menu
• Delete All Bodies
• More Options (Change G, etc…)
• Help
• App Info

      

We just finished putting the menu together on the screen. It works so that when a user taps or clicks the menu button in the bottom right corner, the main menu slides out. Then if they tap the buttons in the main menu corresponding to the different sub-menus, their respective sub-menus slide out above the main menu. This was all done using scene2d.ui tables and button widgets. Information about that can be found in the FAQ on this blog or at these links:

https://github.com/libgdx/libgdx/wiki/Scene2d

https://github.com/libgdx/libgdx/wiki/Scene2d.ui

The second link contains specific information about working with the UI section of scene2d but it is recommended that you review the basics in the first link before visiting the second.

If you’d like to see how we implemented it specifically, our most up-to-date code can be found here:

https://github.com/njwidmann/OrbitGame/tree/master/core/src/com/game/nick/orbit

This is the menu closed. A user can tap menu to have it slide out. The blue lines through the center of the screen are for debugging purposes and won't be present in the final version.

This is the menu opened up. None of the sub-menus are open. Again, disregard the blue lines.

Here's a picture of the menu with one of the sub-menus open. The second row of buttons is the "Edit" sub-menu for editing bodies' properties.

Other Changes

I also found out a much easier way to map the pictures to the bodies. In a post I made a few days ago, I talked about how I needed to create methods to scale from world coordinates to screen coordinates. It turns out though that libgdx sprite batches come with a handy setting called a projection matrix where you can specify a viewport or camera for scale. All I had to do was add the line in bold below to the render loop where the sprites are updated.

public void render(float delta) {

…

… other code not shown ...

...

       batch.begin();

       batch.setProjectionMatrix(camera.combined);

       for(DynamicSprite sprite : sprites) {

           sprite.update();

           sprite.draw(batch);

       }

       batch.end();

…

… other code not shown...

...

}

Then I could make the update() method much simpler in DynamicSprite:

public void update() {

       Vector2 position = getBody().getWorldCenter();

       float radius = getShape().getRadius();

       setSize(radius * 2, radius * 2);

       setPositionCenter(position.x, position.y);

       setOrigin(getWidth() / 2, getHeight() / 2);

       setRotation((float)Math.toDegrees(physicsBody.getAngle()));

}

One more change I made was adding a pause function. This pauses the simulation when people press the P button. In the future, this will also be called whenever the main menu is opened. This was actually really easy and the only thing I had to do was change the time step to 0 inside the render loop:

world.step(TIMESTEP, 6, 2);

You can see all this code in context at the github link above.

Future Plans

The next thing we plan to do is attach functions to all of the buttons in the menu as well as add more graphics. We need to attach graphics to the menu items and also create GUI sliders and arrows and orbit paths for adjusting body properties.

Team Roles

Team roles have continued to be pretty similar. Nick is still doing most of the programming while Ebed and Jiho are focusing on the other main tasks and learning Java. Next week, Jiho and Ebed are going to start doing some more of the programming, starting with adding graphics.